How can I create shadows like this using CSS3:
I have tried playing around with:
box-shadow: 6px 6px 6px -6px #919191;
Unfortunately it does not turn out the way I want it.
try this:
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
<div class="box effect2"></div>
from [http://cssdeck.com/labs/different-css3-box-shadows-effects ][1]
Related
I'm trying to achieve page curl like this:
I've followed this example: http://codepen.io/anon/pen/fpjoa
If I create new PHP and CSS files and copy - paste code from link above, results are correct, shown as expected. But If I'm using this code for my Wordpress website, It not working with Internet Explorer, look at picture below:
As you see above, right corner went wrong. Have you ideas why It happening? Maybe I should change something for IE? But why sample from link above working correctly with IE?
I'm using css on page-wrap -> content-wrapper class in following:
.page-wrap .content-wrapper {
position: relative;
background: white;/* #f0ab67;*/
border:1px solid lightgray;
padding: 50px;
margin: 0 auto 20px auto;
}
.page-wrap .content-wrapper:before,
.page-wrap .content-wrapper:after {
position: absolute;
width: 48%;
height: 10px;
content: ' ';
left: 20px;
bottom: 40px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: skew(-5deg) rotate(-3deg);
-moz-transform: skew(-5deg) rotate(-3deg);
-ms-transform: skew(-5deg) rotate(-3deg);
-o-transform: skew(-5deg) rotate(-3deg);
transform: skew(-5deg) rotate(-3deg);
-webkit-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
z-index: -1;
}
.page-wrap .content-wrapper:after {
left: auto;
right: 20px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: skew(5deg) rotate(3deg);
-moz-transform: skew(5deg) rotate(3deg);
-ms-transform: skew(5deg) rotate(3deg);
-o-transform: skew(5deg) rotate(3deg);
transform: skew(5deg) rotate(3deg);
}
Note: I'm using Sydney theme.
How CBroe said, it is difficult without an example. But maybe this solution work for you:
.test {
position: relative;
margin: 0 auto;
width: 300px;
height: 150px;
border: 1px solid #ccc;
background: #fff;
}
.test:before {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 12px;
width: 45%;
height: 20px;
background: #777;
-webkit-box-shadow: 0 15px 19px #aaa;
-moz-box-shadow: 0 15px 19px #aaa;
box-shadow: 0 15px 19px #aaa;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.test:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 12px;
width: 45%;
height: 20px;
background: #777;
-webkit-box-shadow: 0 15px 19px #aaa;
-moz-box-shadow: 0 15px 19px #aaa;
box-shadow: 0 15px 19px #aaa;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
<div class="test">Test</div>
Can i add this style to all the coners and not only at the bottoms corners ? - and if yes how can i do it. I'm trying to make it at the sides not the bottom, it should look like it is a paper there has folded each corner. If you look at the ex. 2 if you press the link. i want to add the same styling there is at the bottom to the top so all 4 corners are folded..
http://cssdeck.com/labs/different-css3-box-shadows-effects
I have succesfully made it to the the top side corners, but i'm missing the bottom coners. heres my code..
HTML:
#d {
margin: auto;
width: 1140px;
position: relative;
z-index: 30000;
}
.content_wrapper {
margin: auto;
width: 1140px;
position: absolute;
z-index: 30;
}
.content_inner {
width: 1140px;
height: 800px;
float: left;
background-color: #baced8;
}
.effect {
position: relative;
}
.effect:before,
.effect:after {
z-index: -1;
position: absolute;
content: "";
bottom: 40px;
left: 19px;
width: 50%;
top: 4%;
max-width: 300px;
background: rgba(101, 102, 103, 0.9);
-webkit-box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
-moz-box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 19px;
left: auto;
}
#content_box {
width: 1134px;
height: 770px;
float: left;
margin-left: 3px;
background-color: white;
}
<div id="d">
<div class="content_wrapper">
<div class="content_inner effect effect2">
<div id="content_box">
</div>
<!--content_box-->
</div>
<!--content_inner-->
</div>
<!--content_wrapper-->
</div>
You could use another element like the .content_wrapper to get yourself another two pseudo-elements. Those two are showing the shadow to the bottom.
I assume it looks the way you want it:
http://codepen.io/anon/pen/pvmYXm
effect:before, .effect:after,
.content_wrapper:before, .content_wrapper:after {
content: "";
position: absolute; top: 4%; bottom: 40px; left: 19px;
width: 50%; max-width: 300px;
background: rgba(101,102,103,0.9);
box-shadow: 0 0 15px 10px rgba(101,102,103,0.9);
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
z-index: -1;
}
.effect:after, .content_wrapper:after {
right: 19px; left: auto;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
.content_wrapper:before {
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
.content_wrapper:after {
bottom: 40px; right: 19px;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
HTML code:
<div class="box">Paper Curl</div>
CSS3 code:
.box
{
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto 20px auto;
background: #f0ab67;
}
.box:before, .box:after
{
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 12px;
bottom: 12px;
background: transparent;
-webkit-transform: skew(-5deg) rotate(-5deg);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
z-index: -1;
}
.box:after
{
left: auto;
right: 12px;
-webkit-transform: skew(5deg) rotate(5deg);
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
transform: skew(5deg) rotate(5deg);
}
Below is the "paper curl" I wanted to achieve:
http://postimg.org/image/v0l84bmdv/
Below is the curve I could make so far:
http://codepen.io/anon/pen/BCLpE
Can anyone help me out on how to achieve the curves as perfect as in the image? I am not sure whether to go with image or we can do it with CSS3 itself.
Your demo shows that you had the right direction. You just need to tweak it a little by trial and error. Here is the edited code:
.box {
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto 20px auto;
background: white;/* #f0ab67;*/
border:1px solid lightgray;
}
.box:before, .box:after {
position: absolute;
width: 48%;
height: 10px;
content: ' ';
left: 20px;
bottom: 40px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transform: skew(-5deg) rotate(-3deg);
-moz-transform: skew(-5deg) rotate(-3deg);
-ms-transform: skew(-5deg) rotate(-3deg);
-o-transform: skew(-5deg) rotate(-3deg);
transform: skew(-5deg) rotate(-3deg);
-webkit-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
z-index: -1;
}
.box:after {
left: auto;
right: 20px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-transform: skew(5deg) rotate(3deg);
-moz-transform: skew(5deg) rotate(3deg);
-ms-transform: skew(5deg) rotate(3deg);
-o-transform: skew(5deg) rotate(3deg);
transform: skew(5deg) rotate(3deg);
}
NOTE: I've tried using the white color instead of the color you used originally to make it look like the paper in the picture. And it may not be exactly what you want, if so just wait for another better answer :)
Demo.
Tip: You can try yourself changing the box-shadow, especially the blur and the color to make it exactly what you need. The blur I used in the demo is 6px, but looks like 4px is better.
when creating shadows, sometimes its best to use the elements background as shadow while setting its opacity to a very low number.
here is a FIDDLE
html:
<div class="paper"></div>
css:
body {
background:#ededef;
padding:0;
margin:0;
}
.paper {
position: relative;
margin:0 auto;
height:100px;
width:500px;
background:#ffffff;
border:1px solid #dcdcdc;
}
.paper:before {
position: absolute;
width: 45%;
height: 20px;
content:' ';
left: 10px;
bottom: -8px;
background:black;
opacity:0.2;
-webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
-moz-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
-webkit-transform: skew(0deg,-5deg);
-moz-transform: skew(0deg,-5deg);
transform: skew(0deg,-5deg);
z-index: -1;
}
.paper:after {
position: absolute;
width: 45%;
height: 20px;
content:' ';
right: 10px;
bottom: -8px;
background:black;
opacity:0.2;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-webkit-transform: skew(0deg,5deg);
-moz-transform: skew(0deg,5deg);
transform: skew(0deg,5deg);
z-index: -1;
}
I'll go with my tunning too :) DEMO From my earlier comment
/* prefix auto-generated in demo link */.box
{
position: relative;
width: 500px;
padding: 50px;
margin: 0 auto 20px auto;
background:white;
box-shadow:inset 0 0 0 1px lightgray;
}
.box:before, .box:after
{
position: absolute;
width: 50%;
height: 20px;
content: ' ';
left: 25px;
bottom: 30px;
transform:
skew(-7deg)
rotate(-3deg);
box-shadow:
0 30px 2px 7px rgba(0, 0, 0, 0.3);
z-index: -1;
}
.box:after
{
left: auto;
right: 25px;
transform:
skew(4deg)
rotate(3deg);
}
img {
max-width:100%;
}
body {
background:#E7EBEC;
}
This question already has answers here:
how to achieve this css3 shadow effect? [closed]
(2 answers)
Closed 9 years ago.
can I create the shadow effect below the box with CSS? is this possible?
Try this:
.box {
width:70%;
height:200px;
background:#d6d6d6;
margin:40px auto;
position: relative;
}
.box:before, .box:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
background: #444;
-webkit-box-shadow: 0 15px 15px #444;
-moz-box-shadow: 0 15px 15px #444;
box-shadow: 0 15px 15px #444;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.box:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
Fiddle Demo
I was testing to create 3-d shadow like below
But I am not getting any shadow.Can anyone tell me why?Here is the home.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="outer_div">
<div class="box effect2">
<h3>Effect 1</h3>
</div>
</div>
</body>
</html>
Here is the style.css code.
#outer_div{
background-color:#f7f7f7;
width:300px;
height:200px;
}
.box h3{
text-align:center;
position:absolute;
top:80px;
}
.box {
width:150px;
height:100px;
background-color: #f7f7f7;
margin-left:80px ;
padding:30px 0 0 0;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
Actually the problem arises when I set background to outer div.Otherwise it works fine.
you need to do some css changes
here is a fiddle
#outer_div{
background-color:#f7f7f7;
width:300px;
height:200px;
text-align: center;
}
.box h3{
text-align:center;
}
.box {
width:300px;
height:150px;
background-color: #f7f7f7;
padding:50px 0 0 0;
}
.effect2{
position: relative;
}
.effect2:before, .effect2:after{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
As described over here: curved shadow disappears with background-color you can try to adjust the z-index of the container by adding
position:relative;
z-index:-2;
to #outer_div
Here's a simpler version using only 2 DOM elements (and my fiddle):
<div class="shadow-box">
<h1>effect 1</h1>
</div>
h1 {
position: relative;
padding-top: 100px;
top: -1ex;
text-transform: uppercase;
font-family: arial,helvetica,sans-serif;
font-weight: normal;
font-size: 20px;
}
.shadow-box {
width: 300px;
height: 200px;
margin: 25px auto;
position: relative;
background-color: #fff;
text-align: center;
}
.shadow-box:before, .shadow-box:after {
content: "";
display: block;
width: 280px;
height: 20px;
position: absolute;
left: 10px;
bottom: 13px;
z-index: -1;
-webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5);
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5);
}
.shadow-box:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.shadow-box:after {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
I think you want something along these lines. Your outer_div is hiding the :before and :after content of the effect.
http://jsfiddle.net/9FBTx/2
<div id="outer_div">
<div class="box effect2">
<h3>Effect 1</h3>
</div>
</div>
#outer_div{
position: relative;
background-color:#f7f7f7;
width:300px;
height:200px;
}
#outer_div:before, #outer_div:after
{
position: absolute;
z-index: -1;
left: 5px;
top: 100%;
width: 40%;
height: 20px;
margin-top: -33px;
content: "";
background-color: transparent;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
#outer_div:after {
left: auto;
right: 5px;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}