I have a site that will have a column of images and divs (a mix of both) that will always be the same size.
On all of these I want to add a certain kind of drop shadow (as seen here):
I've worked with CSS drop shadows but I've never seen one like this in CSS. Can this be done in CSS? Assuming it cannot then I'm guessing I would use just a drop shadow slice as a graphic, possibly a background. If that is the only route to go, how do I apply this to every image or div?
Right now what I'm doing is putting a div under each image or div:
<div class="rightimgdropshadow"> </div>
...and doing this in CSS:
.rightimgdropshadow
{
background-image: url(../images/site-structure/right-col-image-shadow.jpg);
background-repeat: no-repeat;
background-position: center top;
width 100%
height: 20px;
}
Is there a better way to do this? Thanks!
If you prefere to use CSS to create that type of shadows, you can use CSS3 as seen here!
CSS
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
Made a Fiddle!
Something along the lines of
border: 1px solid #333;
border-bottom: none;
padding: 10px 10px 20px;
background: url('insert_image') no-repeat;
background-position: left bottom;
The extra padding at the bottom allows the background to sit in the correct place.
Does that help?
You can use box-shadow:
.rightimgdropshadow {
box-shadow: 0px 2px 3px rgba(0,0,0,.3);
}
This will create a similar effect, but it won't look just the same.
Some info on that.
Related
I have come humbly to you big brains, as my little ol' brain just is not engaging on this one.
I have a need to do a lifted corner effect on all 4 sides of an image.
I've found 3 different methods to accomplish the lifted corners:
with box shadow and rotate
http://jsfiddle.net/zuul/mPnTP/
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>
with linear gradient and rotate
http://cssdeck.com/labs/page-curl-box-shadow
with box shadow and skew
http://www.readitsideways.com/css3_demos/shadows/.
The skew example seems to deform more on zoom than the rotate. There is probably one method that is cleaner than the others?
All the examples show only two sides with the effect - and my diddling to try and add the other two sides appears to cancel out the original two. I have also been unsuccessful with applying the styling directly to the image, though that's probably a padding or margin issue.
My questions:
Can this be done on 4 sides?
Two divs, one div nested and stacked on top of another with the image in the inner div?
Or, can it be done with one div and an image?
I'd appreciate any help in sorting this out because I am totally adrift.
Thanks!
UPDATE 12/1
#Vals
Thanks for your contribution! So many different methods to get a similar result! I posted 3 methods above, then found a 4th that uses box shadow and linear gradient, no rotate or skew:
http://cjwainwright.co.uk/webdev/liftedcorners/
Yours uses box shadow and transform, and I'm calling it method #5. I note that this covers 2 sides, top and bottom, where I was seeking a 4 sided solution.
I received a 4 sided solution (#6) that uses box shadow and rotate with spans, thankyou to Danny Williams from the WW list:
http://codepen.io/dsongman/pen/PPMdpb?editors=110
I am not sure if this is a duplicate , there are lots of examples about this.
But I don't see any with all 4 corners, so here is my solution
.test {
width: 700px;
height: 300px;
margin: 50px;
position: relative;
background-color: lightgreen;
}
.test:before {
content: "";
position: absolute;
width: 30%;
height: 96%;
top: 2%;
left: 40px;
transform: perspective(500px) rotateY(10deg);
transform-origin: left center;
box-shadow: 0px 0px 30px 10px black;
z-index: -1;
}
.test:after {
content: "";
position: absolute;
width: 30%;
height: 96%;
top: 2%;
right: 40px;
transform: perspective(500px) rotateY(-10deg);
transform-origin: right center;
box-shadow: 0px 0px 30px 10px black;
z-index: -1;
}
<div class="test"></div>
How can I make a shadow effect like the one below with pure CSS?
I am new to CSS.
The following is what I have tried so far, but I am unable to come close to what I want. Please advise how I can make it look like the shadow in the image? Thanks!
box-shadow: 1px 1px 5px #999999 inset
This is the closest I could get : Demo. I think it's actually not bad.
It combines a black shadow and a white one on top of it.
.yourclass{
background-color: #fff;
box-shadow: -15px 0px 60px 25px #ffffff inset,
5px 0px 10px -5px #000000 inset;
}
Browsers' shadows smoothing might differ. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
Read the CSS Tricks article about box-shadows to get how they're used.
For two shadows (both sides) you need 4 shadows (demo) :
Result:
.yourclass{
background-color: #fff;
box-shadow: 0px 100px 50px -40px #ffffff inset,
0px -100px 50px -40px #ffffff inset,
-5px 0px 10px -5px rgba(0,0,0,0.5) inset,
5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}
Beware, browsers' shadows rendering/smoothing can differ a lot. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
For more info on css shadows, read this article from CSS Tricks
What you want is basically the opposite of a page curl shadow. Take a look at this tutorial - you should be able to easily adapt it.
Here is an example: jsFiddle
div {
position: relative;
width: 250px;
height: 150px;
margin: 100px auto;
border: 1px solid black;
background-color: white;
}
div:after {
position: absolute;
height: 80%;
width: 10px;
content: " ";
right: 0px;
top: 10%;
background: transparent;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
z-index: -1;
}
We insert a pseudo-element, position it below our div and have it cast a shadow. This way, you have control over the shadows height and position.
I want to create multiple border, with some padding, around my image like shown below. I prefer to do this with CSS only, but I don't know if this is possible.
While I googled for this I only found examples like this with multiple borders directly around the object using box shadow.
I tried creating this just using a border and padding around the image. But the padding didn't even worked out and with box-shadow like in the example above I won't get something like I want.
How would you guys handle this problem, and is it even possible?
Edit:
Sorry, forget to show what I've currently have: code pen link
Easy peasy!
Padding, border and couple of box-shadows will do the trick.
img {
border-radius: 50%;
padding: 3px;
border: 1px solid #ddd;
box-shadow: 0 0 0 7px #fff,
0 0 0 8px #ddd;
}
Fiddle
When devising your markup, if possible to use a bg image instead of an inline image element this is highly recommended. A couple reasons, but the 2 main ones are:
Inline img elements cannot use the css pseudo classes, :before and
:after
Inline images are harder to mask the corners when using border
radius, especially will be trickky with multiple borders.
Also, that means this design can be created entirely using one div. Here's how I would do it:
HTML
<div class="thumbnail"></div>
CSS
.thumbnail {
height: 50px; width: 50px;
border-radius: 50px;
background: url(http://www.tapdog.co/images/welcome/satelite-bg.jpg) no-repeat;
background-size: cover;
border: solid 1px #aaa;
box-shadow: 0 0 0 4px #eee, 0 0 0 5px #aaa;
}
The key point here is that you can create as many pseudo borders as you want with box-shadow. You can still add a real border using the border property, and then can go even further and add borders using the pseudo classes, which each can take their own border and box-shadow properties.
Another notable point here is the use of the background-size property, which can be very helpful in getting the image to scale proportionally when cut by the borders. especially when dealing with user generated images, or images of variable sizes. Should add vendor prefixes for cross browser compatibility
And here's a codepen with an example. http://codepen.io/anon/pen/dKxbh
this might help you refer this fiddle
.round{
width:150px;
height:150px;
border-radius:50%;
border:10px solid #fff;
background-color: #eaeae7;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);
}
I think the link is exactly the right way to do this! I would use the box-shadows.
http://jsfiddle.net/chriscoyier/Vm9aM/
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
Here is another example with box-shadows from Lea Verou.
http://lea.verou.me/css3-secrets/#multiple-outlines
you mean something like this:
jsFiddle
HTML:
<div class="container">
<div class="inner"></div>
</div>
CSS:
.container{
width:100px;
height:100px;
padding:10px;
background:white;
border:1px solid #555;
border-radius:50%;
}
.inner{
width:100%;
height:100%;
background:tomato;
border:1px solid #555;
border-radius:50%;
margin-top:-1px;
margin-left:-1px;
}
<div class="border"> bipin kumar pal</div>
.border {
border: 5px solid hsl(0, 0%, 40%);
padding: 5px;
background: hsl(0, 0%, 20%);
outline: 5px solid hsl(0, 0%, 60%);
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
color:#fff;
}
I'm trying to position an element (a button) relative to the element 2 elements before it (a picture). There is a varying amount of text between the picture and the button. Take a look at my site:
http://gorilla-gym.com/product-category/fitness-attachments/
What I'm trying to achieve is having the "Shop Now" buttons align horizontally for each product listing regardless of how much text is underneath the picture.
It seemed to me the most logical way to do this way to position the button relative to the picture, but I can't figure out how to do this. Let me know if you guys have an idea of how to do this, or if there's a better way to achieve what I want to do.
Thanks in advance.
check this one i think you want something like this
http://jsfiddle.net/FWzzR/1/
css
ul.products {
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:10px;
}
.products > li {
background-color: #4F81BD;
border:2px solid #385D8A;
position: relative;
width: 22.05%;
display: table-cell;
padding:10px;
padding-bottom:50px;
text-align:center;
vertical-align:top;
}
.products > li >a {
display:block;
}
.products a.button {
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
font-size: 100%;
line-height: 1em;
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
font-family: inherit;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 0 #FF6311;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
border: 1px solid #973100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FD5200;
background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100));
background: -webkit-linear-gradient(#FD5200, #CA4100);
background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%);
background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
If all you want is to center align the "Shop Now" button at the bottom, then
.shopnow_button{
display: block;
margin: 0 auto; //something was overriding so I had to do !important here
width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
If there is a varying amount of text underneath the picture, then the elements will all be of varying height and you cannot align the "Shop Now" button horizontally beneath the picture. The only way to accomplish this is by making sure that all the divs are the same height, then you just position the shop now button as follows:
<div class="shop-now-div">
<img src="yourimage.jpg">
Lorem ipsum....
<a class="button" href="#">Shop Now</a>
</div>
.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }
There are two ways to make your div's the same height
1) JavaScript (not recommended, it's a pain)
2) A table (do it in CSS so you aren't messing with semantics)
UNFORTUNATELY, some modern browsers (Firefox, I believe) will not support position: relative on table-cell's (which you will need), so you are stuck with having to use JS to make your div's the same height....
Easiest solution:
Stick your shop now button on top of the image - that way you can easily align them horizontally. :)
This question is better answered here How to set relative position with Grandfather! element? simply setting position: relative on the grandfather element and position: absolute on the subject element.
That solution does rely on there being no positioning set on intermediate elements.
I've searched and found many questions and answers here but I just can't get this thing to work.
You can view my HTML and CSS here: http://jsfiddle.net/PqjqF/2/
HTML
<div id="SearchBox">
<div id="SearchFieldContainer">
<input class="SearchField" type="text" name="search" placeholder="Search..."/>
</div>
<div id="SearchButtonContainer">
Search
</div>
</div>
CSS
#SearchBox {
width: *;
background-color: #fff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #d2d2d2;
height: 40px;
padding: 14px 8px 8px 8px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(92%,#f3f3f3));
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 92%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 92%); /* W3C */
}
#SearchFieldContainer {
float: left;
width: 100%;
}
#SearchButtonContainer{
float:left;
}
.SearchField {
border: 1px solid #bdbdbd;
background: #f5f5f5;
-webkit-border-radius: 60px;
border-radius: 60px;
color: #0a0705;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px;
padding:8px;
margin-bottom:20px;
width:100%;
}
.SearchField:focus {
background: #fff;
color: #000000;
}
.SearchButton {
-webkit-box-shadow: 0px 2px 2px 0px #8a8a8a;
box-shadow: 0px 2px 2px 0px #8a8a8a;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2f3c47), color-stop(1, #0f1011) );
background-color:#2f3c47;
-webkit-border-radius:42px;
border-radius:42px;
border:1px solid #0d060d;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:18px;
font-weight:bold;
padding:5px 18px;
text-decoration:none;
}
What I want to have is that the input field will take all the space it has and the search button to be next to it, on the same line.
I tried so many things like hidden overflow and other but it refuses to work :-/
Any help here?
Thanks,
- Shai
Change your HTML a bit to let div#SearchButtonContainer appears before div#SearchFieldContainer.
Add margin-right to div#SearchFieldContainer make enough room for the button. Remove its float: left; style, then it will spread 100% width by default (with some margin at right);
Add float: right; to div#SearchButtonContainer.
View the modified example at jsFiddle
Hm, just try:
#SearchFieldContainer {
float: left;
width: 50%;
}
#SearchButtonContainer{
float:left;
width: 50%;
}
So both divs take each 50% of the width = 100% width. Some more work is need for perfect fit, but basically it should work. Remember to "clear" (If you don't know, look for clear:both).
You're issue is that certain things aren't adding up to 100%. For example the text field itself is set to 100% width but has padding which makes it larger than 100%. If you wrap the text-field in a border you can see it extends past it's containing div. There are a few ways to fix this... Either remove the paddings, calculate the paddings into your total 100% widths, or use the CSS: box-sizing: border-box; Which tells the browser to calculate the width including padding and borders.
The same is true for both of your containers.
I will use the box-sizing method I mentioned above first...
See the following fiddle: http://jsfiddle.net/PqjqF/4/
Here I have added box-sizing: border-box; to both of your containers, the text field and button. I left the borders in place so you can see the edges of your containers. (this is a great technique for debugging your layouts to see where your boxes are)
I have changed width of the containers to 80% and 20% respectively and set the width of the text-field to be 100%. You could also apply a 100% width to the button to make it fill it's container.
See the Can I Use It? for box-sizing for browser compatibility.
Now a solution without box-sizing: border-box;...
See the following fiddle: http://jsfiddle.net/PqjqF/5/
Here, I have calculated the padding's as a percentage, in this case 1% into the width of the element itself. So, 1% to padding left and right (top and bottom doesnt matter), and 98% width = 100%.