Warp Shadow - CSS [closed]

Question

Warp Shadow - CSS [closed]

Navigation

#1 by (3 votes)

-2

I'm trying to make a warp shadow effect on my div but I can not, can anyone help me?

www.planow.com.br/nobre/empresa.php

html css css3

asked by anonymous 23.07.2014 / 14:24

1 answer

How to determine the value of X using JavaScript How to get the magnet link from a .torrent file?

score 3 · Accepted Answer

I believe that what you are looking for is this

HTML

<div class="box boxColor shadow_box">
    Warp Shadow
    <span class="warp"></span>
</div>

CSS

.box {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 100px;
    width: 200px;
}

.boxColor {
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFDB4D), to(#EABB00));
    background: -webkit-linear-gradient(#FFDB4D, #EABB00);
    background: -moz-linear-gradient(#FFDB4D, #EABB00);
    background: -o-linear-gradient(#FFDB4D, #EABB00);
    background: linear-gradient(#FFDB4D, #EABB00);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFDB4D’, endColorstr=’#EABB00′);
}

.shadow_box {
    -moz-box-shadow: 0px 10px 5px #9C9C9C;
    -webkit-box-shadow: 0px 10px 5px #9C9C9C;
    box-shadow: 0px 10px 5px #9C9C9C;
    position: relative;
}

.shadow_box span.warp {
    width: 100%;
    height: 13px;
    position: absolute;
    bottom: -26px;
    right: 0px;
    box-shadow: 0px -10px 5px #fff;
    -moz-box-shadow: 0px -10px 5px #fff;
    -webkit-box-shadow: 0px -10px 5px #fff;
    border-radius: 50% / 20px;
    -moz-border-radius: 50% / 20px;
    -webkit-border-radius: 400px 20px;
}

You can follow the results in this DEMO

Source: Wrap Shadow with CSS3