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.
Related
I need to shade the background image.
background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("background.png");
This code works OK, but is there a simpler way to do it?
You can add a semitransparent pseudoelement covering the whole image:
.element {
position: relative;
}
.element:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: rgba(0,0,0,0.5);
pointer-events: none; /* if the element below needs to be clickable */
}
That's just one of the ways you can implement it. It'll render faster than a gradient but I'm not sure about simplicity of it ;)
Don't use background images for making shadows. Its increase your site loading time gradually.
Best way for adding this css to your element:
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
I recommend this site for generating shadows: http://www.cssmatic.com/box-shadow
Why use gradient ?
Just set background like this :
background: url("background.png"), rgba(0, 0, 0, 0.5);
Depending of what you need, you could use box-shadow.
box-shadow: inset 0 0 100px black;
The only problem is that shadows will also come from the sides.
Is it possible to achieve a Fadeout effect with CSS3 Box Shadow?
Here's what I have so far
This only adds inset/inner shadow to the vertical sides but I need to achieve a fade out effect at the top.
-moz-box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
-webkit-box-shadow: inset 5px 0 5px -5px #a4a4a4, inset -5px 0 5px -5px #a4a4a4;
box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
See the image below to see the Expected Results and what I currently have.
I also needed something like that:
Basically it is about giving the outer div a drop-shadow and placing the inner div with position:relativ to the outer div with a gradient from transparent to the needed background color:
http://jsfiddle.net/vBuxt/1/
Here is a codepen example of how I tackled this for a project I worked on recently:
http://codepen.io/byronj/pen/waOxqM
I added a box-shadow to my main content section. I then added a absolute positioned div at the bottom of my content section that contains a CSS gradient with the content background color on one end and a transparent background on the other end as seen below:
.container {
width: 1024px;
margin: 0 auto;
}
.container article {
background-color: #fff;
margin: -6em auto 10em auto;
padding-top: 2em;
width: 100%;
box-shadow: 0px -2px 20px 2px rgba(0, 0, 0, 0.4);
}
/** GRADIENT **/
.bottom-gradient {
position: absolute;
width: 115%;
height: 60%;
z-index: 1;
bottom: -20px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.59) 10%, white 50%, white 100%);
}
To ensure the content is not covered up by the gradient, I set my "p" elements to position:relative with a z-index of 2, as seen below:
p {
padding: 1em 3em;
position: relative;
z-index: 2;
margin: 1em auto;
font-size: 1.3em;
line-height: 1.5em;
}
For Eric's situation, you would inverse this effect by placing the gradient at the top of the element containing the box-shadow.
Hope this helps.
You can not transition CSS3 styles that contain multiple values -:
You CAN transition from say one color to another in CSS3 but you can NOT transition between gradiens in CSS3 as it gets confused with the multiple values, it will be the same with your multiple shadow values also.
Ah, I think I see what you are trying to achieve. A solution maybe would be to try and reproduce the look you are after without using Shadows - A link below shows a possible solution using borders instead of shadows, see what you think. http://css-tricks.com/examples/GradientBorder/
This question already has answers here:
Creating a CSS3 box-shadow on all sides but one
(10 answers)
Closed 3 years ago.
I want to have box-shadow on three sides of a div (except top side). How could I do that?
Here's a JS Fiddle for you, it only uses one single div to work.
#shadowBox {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 10px gray,
-10px 8px 15px gray, 10px 8px 15px gray;
}
You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.
If you are looking for something like Google material design shadows:
.shadow1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
Source: https://medium.com/#Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10
Here's an example of the negative Y value suggested by #Vigrond
box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);
I like #Chris C answer but I think, we do not need the first line of code. This is shorter and gives the same effect:
box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
10px 8px 15px lightgray; /*right and bottom*/
#note{
position: absolute;
top: 20px; left: 30px;
width:100px; height: 100px;
background-color: #eee;
box-shadow: -10px 8px 15px lightgray,
10px 8px 15px lightgray;
}
<div id="note"></div>
If you have a solid background color, then you can accomplish this by using a combination of background-color and z-index. The trick is to give the element with box-shadow and its previous sibling positioning, then give the previous sibling a background color and set it to have a higher z-index so that it's stacked on top of the element with box-shadow, in effect covering its top shadow.
You can see a demo here: http://codepen.io/thdoan/pen/vNvpKv
If there's no immediate previous sibling to work with, then you can also use a pseudo-element such as :before or :after: http://codepen.io/thdoan/pen/ojJEMj
For translucent shadows with hard corners (i.e. no blur radius) I used this:
.shadow-no-top {
position: relative;
box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
content: "";
position: absolute;
top: 100%;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(0,0,0,.2);
}
This uses a shadow for the left and right parts and adds the :after pseudo content as the bottom shadow. This avoids overlaps which make the shadow darker or missing corners.
However, this does require the background of the element to be solid.
Here's my source image:
And my source image zoomed in:
Any thoughts on how to accomplish this with only CSS3? Notice the slight bleed upwards into the element.
Update: I've removed the vendor prefixes, since almost every browser that supports these properties do not need them. Dropping them is considered a best practice at this point.
See Caniuse page for border-radius and box-shadow.
the best (and only) way to do this is to use multiple box-shadows:
element {
box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
border-radius: 20px;
}
box-shadow works like this:
box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size];
border-radius works like this:
border-radius: [size];
/*or*/
border-radius: [topleft/bottomright size] [topright/bottomleft size];
/*or*/
border-radius: [topleft] [topright] [bottomright] [bottomleft];
you can specify the Height an length of the curve like this:
border-radius: [tl-width] [tr-width] [br-width] [bl-width] / [tl-height] [tr-height] [br-height] [bl-height];
It's just using two box shadows, one inset and the other outset, i.e:
.box {
width: 100px;
height: 100px;
box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1);
border: solid #ccc 1px;
border-radius: 10px;
margin: 50px 0 0 50px;
}
See it here: http://jsfiddle.net/WYLJv/
This is actually done with two CSS3 box-shadows.
CSS:
#fuzz
{
height: 100px;
width: 100px;
border-radius: 5px;
border: 1px solid #333;
box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333;
}
You can see it in action when i get back to real computer to edit the fiddle :-) (using my tablet now)
Obviously change the colors to your taste :)
Look at css3 property border-radius. It has options for x and y offset color and the blur radius. In your case a greyish color no offset and blur if 4px ought to work.
I'm a bit late but, yes, use border radius and box-shadow(s) and you should be good to go.
.block {
border-radius:6px;
box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee;
}
Try adding a border-radius and a text-shadow in your css.
.box {
border-radius:20px;
text-shadow:2px 2px black;
}
Hope this helps.
You can probably just get away with setting the border to a light colour and outline to a darker colour, then just set the border-radius. Note I haven't tested this, and if memory serves the outline does not curve with border-radius. Also note that border-radius requires several attributes to be set to become cross-browser compatible. Refer to http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/ for more info.
If this fails, you could always use an inner-div, which you set to position absolute, left 0, right 0, top 0 and bottom 0 and then use that as either the inner or outer border. Setting the border-radius will definitely work then.
Regards,
Richard
I need to apply the border shadow on border-bottom by CSS3. I just want to apply CSS3 shadow on bottom. Is this possible?
The issue is shadow coming out the side of the containing div. In order to avoid this, the blur value must equal the absolute value of the spread value.
div {
-webkit-box-shadow: 0 4px 6px -6px #222;
-moz-box-shadow: 0 4px 6px -6px #222;
box-shadow: 0 4px 6px -6px #222;
}
<div>wefwefwef</div>
covered in depth here
Try:
div{
-webkit-box-shadow:0px 1px 1px #de1dde;
-moz-box-shadow:0px 1px 1px #de1dde;
box-shadow:0px 1px 1px #de1dde;
}
<div>wefwefwef</div>
It generally adds a 1px blurred shadow 1px from the bottom of the box
box-shadow: [horizontal offset] [vertical offset] [blur radius] [color];
use box-shadow with no horizontal offset.
http://www.css3.info/preview/box-shadow/
eg.
div {
-webkit-box-shadow: 0 10px 5px #888888;
-moz-box-shadow: 0 10px 5px #888888;
box-shadow: 0 10px 5px #888888;
}
<div>wefwefwef</div>
There will be a slight shadow on the sides with a large blur radius (5px in above example)
I'm a little late on the party, but its actualy possible to emulate borders using a box-shadow
.border {
background-color: #ededed;
padding: 10px;
margin-bottom: 5px;
}
.border-top {
box-shadow: inset 0 3px 0 0 cornflowerblue;
}
.border-right {
box-shadow: inset -3px 0 0 cornflowerblue;
}
.border-bottom {
box-shadow: inset 0 -3px 0 0 cornflowerblue;
}
.border-left {
box-shadow: inset 3px 0 0 cornflowerblue;
}
<div class="border border-top">border-top</div>
<div class="border border-right">border-right</div>
<div class="border border-bottom">border-bottom</div>
<div class="border border-left">border-left</div>
EDIT: I understood this question wrong, but I will leave the answer as more people might misunderstand the question and came for the answer I supplied.
New method for an old question
It seems like in the answers provided the issue was always how the box border would either be visible on the left and right of the object or you'd have to inset it so far that it didn't shadow the whole length of the container properly.
This example uses the :after pseudo element along with a linear gradient with transparency in order to put a drop shadow on a container that extends exactly to the sides of the element you wish to shadow.
Worth noting with this solution is that if you use padding on the element that you wish to drop shadow, it won't display correctly. This is because the after pseudo element appends it's content directly after the elements inner content. So if you have padding, the shadow will appear inside the box. This can be overcome by eliminating padding on outer container (where the shadow applies) and using an inner container where you apply needed padding.
Example with padding and background color on the shadowed div:
If you want to change the depth of the shadow, simply increase the height style in the after pseudo element. You can also obviously darken, lighten, or change colors in the linear gradient styles.
body {
background: #eee;
}
.bottom-shadow {
width: 80%;
margin: 0 auto;
}
.bottom-shadow:after {
content: "";
display: block;
height: 8px;
background: transparent;
background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.bottom-shadow div {
padding: 18px;
background: #fff;
}
<div class="bottom-shadow">
<div>
Shadows, FTW!
</div>
</div>
Under the css:
box-shadow: 5px 5px 10px rgba(0,0,0, 0.3);
funny, that in the most answer you create a box with the text (or object), instead of it create the text (or object) div and under that a box with 100% width (or at least what it should) and with height what equal with your "border" px... So, i think this is the most simple and perfect answer:
<h3>Your Text</h3><div class="border-shadow"></div>
and the css:
.shadow {
width:100%;
height:1px; // = "border height (without the shadow)!"
background:#000; // = "border color!"
-webkit-box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
-moz-box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
box-shadow: 0px 1px 8px 1px rgba(0,0,0,1); // rbg = "border shadow color!"
}
Here you can experiment with the radius, etc. easy: https://www.cssmatic.com/box-shadow