3D Box Shadow Effect

3D Box Shadow effect

Unfortunately box shadows are effectively just flat layers. However you can apply multiple box shadows to create this effect.

.box-shadow-3d{
    box-shadow: 1px 1px 0px #999,
                2px 2px 0px #999,
                3px 3px 0px #999,
                4px 4px 0px #999,
                5px 5px 0px #999,
                6px 6px 0px #999;
}

Can you apply 3d box shadow effects (lifted corners) on top and bottom of div?

I just wrapped your box with another div and got the desired output

EDIT: Demo had some alignment issue before, thanks for @zaqx for pointing out that. this is the updated fiddle.

Here is the fiddle

body {
  background-color: #e2e2e2;
}
.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * 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;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

.effect-wrapper {
  position: relative;   
}
 .effect-wrapper:before, .effect-wrapper:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 16%;
    width: 52%;
    top: 8%;
    height: 5px;
    max-width: 300px;
    background: #777;
    box-shadow: 0 15px 10px #777;
    transform: rotate(183deg);
}

.effect-wrapper:after {
    transform: rotate(177deg);
    right: 16%;
    left: auto;
}

<div class="effect-wrapper">
    <div class="box effect2 effect3">
        <h3>Effect 2</h3>
    </div>
</div>

CSS3 3D Box With Shadows

By setting the initial colour of the notification face to a darker version of the final color, we can use a CSS3 transition on the color attribute of that face to animate it to a lighter colour as the face is rotated.

I've added a new class with the lighter "green" that will be added/removed to/from the notification face and changed the initial color added a new transition to #cube .top.

I've also corrected some typos in the CSS (tranform → transform, transparant → transparent) and removed the duplicate -webkit-transform:translateZ(-25px); and non-prefixed version from the .show-front|top|back classes as they are being overridden in the same class.

Lastly, since the notification face is translated towards the viewer by 25px the text looks blurry (on Chrome). This seems to go away by removing the -webkit-perspective: 1000px; for me. I'll leave that up to you if you want to remove it.

See the demo or following code:

CSS

body {
    background: #ebebeb;
}
.container {
    width: 200px;
    height: 50px;
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
#cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    -webkit-transform: translateZ(-25px);
    transform: translateZ(-25px);
}
#cube figure {
    margin:0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#cube .front {
    background: transparent;
    -webkit-transform: translateZ(25px);
    transform: translateZ(25px);
}
#cube .top{
    background-color:darkgreen;
    -webkit-transform: rotateX(-90deg) translateZ(25px);
    transform: rotateX(-90deg);
    -webkit-transition:background-color .5s;
}
#cube .top.show {
    background-color:green;
}
#cube .back {
    background: transparent;
    -webkit-transform: rotateX( 180deg ) translateZ(25px);
    transform: rotate(180deg);
}
#cube.show-front{
}
#cube.show-top {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
}
#cube.show-back {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

JavaScript

$('.showfront').click(function () {
    $('.top').removeClass('show');
    $('#cube').removeClass().addClass('show-front');
});
$('.showtop').click(function () {
    $('.top').addClass('show');
    $('#cube').removeClass().addClass('show-top');
});
$('.showback').click(function(){
    $('.top').removeClass('show');
    $('#cube').removeClass().addClass('show-back');
});

3D shadow effect paper like styling

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);
  }

Apply box shadow to border in css

<style> 
#example3 {
  border: 10px solid red;
  border-radius: 5px
}
#bg{
background-color: #000;
color: #fff;
padding: 20px;
text-align: center
}
</style>

<div id="bg">
<div id="example3">
  <p>A pink shadow.</p>
</div>
</div>

3D Button effect with CSS Drop-shadow and transition

You have problem here

box-shadow: 1px 0px 0px #1976D2,0px 1px 0px #1976D2,
                2px 1px 0px #1976D2,1px 2px 0px #1976D2;

change to this:

box-shadow: 0px 0px 0px #1976D2,0px 0px 0px #1976D2,
                0px 0px 0px #1976D2,0px 0px 0px #1976D2;

button {

 /*  */

 padding:35px;

 margin: 0;

 width:350px;

 

 /* Font Styling */

 font-size:30px;

 font-weight:bold;

 color:#FFF;

 }

 

button:active {

 outline:none;

 }

.rightBottom {

 transition: margin-top 0.3s ease, 

    margin-left 0.3s ease, 

    box-shadow 0.3s ease;

 

 background:#03A9F4;

 border: solid 1px #1976D2;

   box-shadow: 1px 0px 0px #1976D2,0px 1px 0px #1976D2,

      2px 1px 0px #1976D2,1px 2px 0px #1976D2,

      3px 2px 0px #1976D2,2px 3px 0px #1976D2,

      4px 3px 0px #1976D2,3px 4px 0px #1976D2,

      5px 4px 0px #1976D2,4px 5px 0px #1976D2,

      6px 5px 0px #1976D2,5px 6px 0px #1976D2,

      7px 6px 0px #1976D2,6px 7px 0px #1976D2,

      8px 7px 0px #1976D2,7px 8px 0px #1976D2,

      9px 8px 0px #1976D2,8px 9px 0px #1976D2;

 }

 

.rightBottom:active{

 transition: margin-top 0.3s ease, 

    margin-left 0.3s ease, 

    box-shadow 0.3s ease;

    margin-left:10px;

 margin-top:10px;

 

  box-shadow: 0px 0px 0px #1976D2,0px 0px 0px #1976D2,

      0px 0px 0px #1976D2,0px 0px 0px #1976D2;

   

}

<button class="rightBottom">I am a Button!</button>

How create shadow effect for div

Your only option is to use multiple box-shadows. However, there are some restrictions:

• You must use a semi-opaque colour, because they will show through each other.
• You have to manually specify each box-shadow property, but you can do it programatically with either JS, or with a CSS pre-processing language (e.g. LESS or SASS).

div {

  background-color: steelblue;

  box-shadow:

    2px 2px 5px 0px #555,

    4px 4px 5px 0px #555,

    6px 6px 5px 0px #555,

    8px 8px 5px 0px #555,

    10px 10px 5px 0px #555,

    12px 12px 5px 0px #555,

    14px 14px 5px 0px #555,

    16px 16px 5px 0px #555,

    18px 18px 5px 0px #555,

    20px 20px 5px 0px #555,

    22px 22px 5px 0px #555,

    24px 24px 5px 0px #555,

    26px 26px 5px 0px #555,

    28px 28px 5px 0px #555,

    30px 30px 5px 0px #555,

    34px 34px 5px 0px #555,

    36px 36px 5px 0px #555;

  width: 100px;

  height: 100px;

}

<div></div>

CSS Box 2.5D Pop Out Shadow effect

You can actually do this in a very similar way to the answer that you linked to, by using multiple box-shadow declarations.

I also took the liberty of converting your outline to a border and setting box-sizing: border-box so that the border doesn't stick out from the effect.

Here is a Live Demo:

.bot-row:hover {

    transition: all 0.3s ease-in-out;

    transform: translate(10px, 10px);

    box-shadow: -1px -1px 0px #999, -2px -2px 0px #999, -3px -3px 0px #999, -4px -4px 0px #999, -5px -5px 0px #999, -6px -6px 0px #999, -7px -7px 0px #999, -8px -8px 0px #999, -9px -9px 0px #999, -10px -10px 0px #999, -11px -11px 0px #999, -12px -12px 0px #999;

}

.cat-box {

    box-sizing: border-box;

    background-color: grey;

    border: #DDD8D4 solid 3px;

    padding: 3px 5px 5px 5px;

    margin: 10px 30px 10px 30px;

    transition: all 0.3s ease-in-out;

}

<div class="cat-box bot-row">

     <h4>Hello World!</h4>

    <p>Info</p>

</div>

---

Related Topics