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.
Related
I need to create an element with shadow like in the mockup:
http://take.ms/UdLFk
But I created only
http://take.ms/lns0J .
I have next styles:
.shadow {
width: 45px;
left: 37px;
position: relative;
box-shadow: 0 0px 2px 2px rgba(0,0,0,0.5);
}
My markup:
<div class=" shadow"></div>
So, how i can get a shadow like in mockup? I searched many articles but they did not help me.
Adding a border-radius (with a small height and a background-color that fits the shadow) to the element will give the shadow a nice rounded effect. Maybe decrease the opacity a little and you'll get pretty close. Also try using z-index: -1 to put the shadow behind the image.
.shadow {
width: 45px;
left: 37px;
position: relative;
box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.1);
border-radius: 50%;
height: 3px;
background: rgba(0, 0, 0, 0.1);
}
<div class="shadow"></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.
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