Why doesn't left:0 work here? - html

I was trying to make a sticky div inside the body, that has css like:
.call-us-alert {
background-color: #FFB100;
border-radius: 4px;
height: 31px;
width: 19%;
top: 50%;
margin-left:-107px;
position: fixed;
z-index: 10;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
}
It works fine on my screen but on a device with a smaller screen, the sticky div vanishes. I know the reason. I have given margin-left as -107px. But when I try left:0, it doesn't work. The div stays where it stays. What is the method to fix it?


Remove margin-left and use left: -9%; instead
.call-us-alert {
background-color: #FFB100;
border-radius: 4px;
height: 31px;
width: 19%;
top: 50%;
left: -9%;
position: fixed;
z-index: 10;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
}
<div class="call-us-alert"></div>


change this code with your original code...
.call-us-alert {
background-color: #FFB100;
border-radius: 4px;
height: 31px;
width: 19%;
top: 50%;
left:0;
position: relative;
z-index: 10;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
}
hope it will help...

Related

Css box shadow moving to the top and left

CSS & Html:
body {background:#ccc}
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect3
{
position: relative;
}
.effect3:before
{
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);
}
<div class="box effect3">
<h3>Effect 3</h3>
</div>
I am trying to decorate a box with a shadow.
The above css is for the shadow bottom and left (in the red circle).
What can be the css to apply to the top and left (red arrow)?

Please use these code for top left box-shadow:
.effect3:before {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 3px;
width: 18%;
top: 24px;
max-width: 300px;
background: #777;
-webkit-box-shadow: -8px 15px 10px #777;
-moz-box-shadow: -8px 15px 10px #777;
-webkit-transform: rotate(87deg);
-moz-transform: rotate(87deg);
transform: rotate(87deg);
}

body {
background: #ccc
}
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect3 {
position: relative;
}
.effect3:before {
z-index: -1;
position: absolute;
content: "";
left: -46px;
width: 20%;
bottom: 15px;
top: 25%;
max-width: 300px;
height: 20px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: -10px -5px 10px #777;
-webkit-transform: rotate(-93deg);
-moz-transform: rotate(-93deg);
-o-transform: rotate(-93deg);
-ms-transform: rotate(-93deg);
transform: rotate(-93deg);
}
I think this is what you asking...

-webkit-box-shadow: -6px -8px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -6px -8px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: -6px -8px 5px 0px rgba(50, 50, 50, 0.75);
Generated using http://css3gen.com/box-shadow/

Use an after and changing the before like so:
.effect3:before {
z-index: -1;
position: absolute;
content: "";
left: 15px;
width: 50%;
bottom: 15px;
top: 4%;
max-width: 300px;
height: 20px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: -10px -5px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(3deg);
}
.effect3: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);
}
Here is the JSFiddle demo

Is it possible to add box shadowing to inputs in forms css?

I have been trying to add some snazzy effects to my input boxes and one I found was box shadowing, I looked at the w3schools tutorial for box shadowing and tried multiple things to add it to my input box:
.l_input {
box-shadow: 10px;
}
That didn't seem to work for my code. I also tried to use it using a hover pseudo effect and it again didn't work for that, the pseudo code I tried doing:
.l_input {
box-shadow: 5px;
}
.l_input:hover {
box-shadow: 10px;
transition: 2s;
}
And again that didn't seem to work, if this is the right syntax for how the code should work or I am doing a small mistake thanks in advance, I have thought that maybe it isn't supported for inputs, but that sounded weird.

.l_input {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: 0.3s ease-in-out;
}
/* hover effect */
.l_input:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
<div class="l_input"> Content <div>

You can give box shadow like following way:
.l_input {
box-shadow: 5px 5px 5px #000;
}
You should give at least first two value.
First two describe horizontal shadow and vertical shadow. Third one is blur and color.
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
Reference link:
Working Fiddle
And you can give effect to shadow following way.
.l_input {
box-shadow: 5px 5px 5px #000;
}
.l_input:hover {
box-shadow: 10px 10px 10px #000;
transition: 2s;
}
Fiddle

It should be worked with below code.If your class is .l_input then it will be worked.Its depends on your mark.
.l_input {
box-shadow: 5px 5px 5px #000;
}
If not then try below code:
You can see in JSFIDDLE .
body {
background: #ccc
}
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
/*==================================================
* Effect 1
* ===============================================*/
.effect1 {
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
/*==================================================
* Effect 2
* ===============================================*/
.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;
}
/*==================================================
* Effect 3
* ===============================================*/
.effect3 {
position: relative;
}
.effect3:before {
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);
}
/*==================================================
* Effect 4
* ===============================================*/
.effect4 {
position: relative;
}
.effect4:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
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);
}
/*==================================================
* Effect 5
* ===============================================*/
.effect5 {
position: relative;
}
.effect5:before,
.effect5:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.effect5:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
/*==================================================
* Effect 6
* ===============================================*/
.effect6 {
position: relative;
-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;
}
.effect6:before,
.effect6:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.effect6:after {
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
/*==================================================
* Effect 7
* ===============================================*/
.effect7 {
position: relative;
-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;
}
.effect7:before,
.effect7:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
top: 0;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.effect7:after {
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
/*==================================================
* Effect 8
* ===============================================*/
.effect8 {
position: relative;
-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;
}
.effect8:before,
.effect8:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
top: 10px;
bottom: 10px;
left: 0;
right: 0;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.effect8:after {
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
<div class="box effect1">
<h3>Effect 1</h3>
</div>
<div class="box effect2">
<h3>Effect 2</h3>
</div>
<div class="box effect3">
<h3>Effect 3</h3>
</div>
<div class="box effect4">
<h3>Effect 4</h3>
</div>
<div class="box effect5">
<h3>Effect 5</h3>
</div>
<div class="box effect6">
<h3>Effect 6</h3>
</div>
<div class="box effect7">
<h3>Effect 7</h3>
</div>
<div class="box effect8">
<h3>Effect 8</h3>
</div>

Try This
.l_input {
box-shadow: 3px 3px 2px #666;
transition: 0.2s all linear;
border:1px solid #999;
}
.l_input:hover {
box-shadow: 0 5px 15px #666;
transition: 0.2s all linear;
}
<input type="text" class="l_input">

Pseudo-elements not visible on top of colored background div

I want to render a photo stack. I used a div with the before- and after-pseudo-elements.
This works fine.
Only caveat is: this div should be rendered on top of some unicolor background. So I place this div inside another div, which has the background color set. Now, the pseudo-elements are not visible anymore. What is going wrong?
This is the HTML:
<div id="main">
<div class="gallery-stackone"></div>
</div>
And here the CSS:
#main {
background-color: green;
border: 1px solid blue;
width: 100%;
height: 300px;
}
.gallery-stackone {
margin: 0; padding: 0;
background: red;
border: 6px solid #fff;
float: left;
height: 200px; width: 200px;
margin: 50px;
position: relative;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
border: 6px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.gallery-stackone:before {
content: "";
height: 200px; width: 200px;
background: #eff4de;
border: 6px solid #fff;
position: absolute;
z-index: -1;
top: 0px;
left: -10px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.gallery-stackone:after {
content: "";
height: 200px; width: 200px;
background: #768590;
border: 6px solid #fff;
position: absolute;
z-index: -1;
top: 5px;
left: 0px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
Here is the corresponding fiddle

Check the fiddle
I've changed the CSS as below
#main {
background-color: green;
border: 1px solid blue;
width: 100%;
height: 300px;
position:relative;
z-index: -2;
}
I've given an z-index value to -2 since you have given z-index:-1 for .gallery-stackone:after and for the z-index to work i also added a position:relative to the div..

Howto make a CSS3 ribbon rosette

I would like to find a ribbon rosette made in pure CSS3 and HTML or get tips on how to make one. I should look something like this one
Demo
Here's what I've tried...
<div class="star"></div>
<div class="circle">Ribbon Rosette</div>
.star {
left: 100px;
top: 100px;
height: 80px;
width: 80px;
background: silver;
position: absolute;
text-align:left;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.star:before {
height: 80px;
width: 80px;
background: silver;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.star:after {
padding-top: 10px;
text-align: center;
vertical-align: middle;
height: 70px;
width: 80px;
background: silver;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.circle {
font: 400 18px/1.1 "freight-sans-pro",sans-serif;
color: #000000;
left: 95px;
top: 95px;
position: absolute;
text-align:center;
padding-top: 25px;
width: 90px;
height: 65px;
background: silver;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* IE10+ */
background: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
}

First off all what you made is amazing, I added ribbons for you at the bottomby adding 2 span elements under div with a class .circle and added ribbon triangles virtually...
Demo
Demo 2 (Longer triangles tweaking border: 40px solid rgba(255,255,255,1);)
.circle span:nth-of-type(1) {
width: 40px;
height: 120px;
background: #F6C431;
content: "";
display: block;
position: absolute;
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
z-index: -1;
left: 10px;
}
.circle span:nth-of-type(1):after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
bottom: -1px;
left: 0;
border: 20px solid rgba(255,255,255,1);
border-top: 20px solid rgba(255,255,255,0);
border-left: 20px solid rgba(255,255,255,0);
border-right: 20px solid rgba(255,255,255,0);
}
.circle span:nth-of-type(2) {
width: 40px;
height: 80px;
background: #F6C431;
content: "";
display: block;
position: absolute;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
z-index: -1;
left: 50px;
box-shadow: -10px -20px 10px 1px #D5A002;
}
.circle span:nth-of-type(2):after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
bottom: -1px;
left: 0;
border: 20px solid rgba(255,255,255,1);
border-top: 20px solid rgba(255,255,255,0);
border-left: 20px solid rgba(255,255,255,0);
border-right: 20px solid rgba(255,255,255,0);
}

Border effect to let a picture stand out?

I'm looking for a special CSS (3?) border effect: when applied, it looked like the corners of the objects stand out a bit more then the middle of the sides. Which produces a nice effect as if a piece of paper would be lying on the website.
How do you call this effect?

This page contains a good looking "bent paper" shadow effect, with pure CSS:
http://matthamm.com/box-shadow-curl.html
Sample code for the shadow effect on <li> element from the source above:
HTML:
<ul class="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS:
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }
ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }
Note: If you are using a parent element. Make sure that the parent div has position: relative; z-index: 99; or those shadows won’t show up.

You can do this with CSS3 box-shadow and transforms. E.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {
width: 215px;
height: 80px;
border: 1px solid #ccc;
position: relative;
background: white;
}
div::before, div::after {
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
position: absolute;
left: 10px;
bottom: 12px;
z-index: -1;
width: 50%;
max-width: 100px;
height: 20px;
content: "";
}
div::after {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
http://codepen.io/anon/pen/JuwLd

You can do this with a little trick of setting the border width to different sizes. For example:
div{
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
width: 200px;
height: 400px;
}
Example
Don't know how this is called, though.