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
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>
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]
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);
}
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);
}
HTML:
<div class="entry-wrapper">
<div class="entry-paper"></div>
some content goes here
</div>
CSS:
.entry-wrapper {
background: white;
margin: 0 0 1.625em;
padding: 1.625em;
position: relative;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.entry-paper {
background: white;
height: 100%;
width: 99%;
position: absolute;
left: 2px;
top: 3px;
z-index: -1;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}
.entry-paper::before, .entry-paper::after {
position: absolute;
width: 40%;
height: 10px;
content: ' ';
left: 12px;
bottom: 2px;
background: red;
-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);
z-index: -1;
}
.entry-paper::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);
}
I need red blocks to be positioned under the .entry-paper block. And here is the link, guys - http://layot.prestatrend.com/?page_id=2 Can't figured out how to do that. Any help please?
If the goal is to display the red blocks underneath both .entry-wrapper and .entry-paper:
Change: .entry-paper:: to .entry-wrapper:
Change the z-index for .entry-wrapper:before, .entry-wrapper:after to -2 (any value less than the z-index for .entry-paper)
Adjust the bottom value for .entry-wrapper:before, .entry-wrapper:after (perhaps to -3px or so)
jsfiddle demo
Edit 1:
It didn't seem to be causing any harm, but the :: for before and after should be changed to :. Apparently the browsers ignored the extra :, but it might cause trouble at some point.