Warp Shadow - CSS

Asked

Viewed 74 times

-2

I’m trying to make a warp shadow effect on my div but I’m not getting it, someone can help me?

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

html css css3
  • 1

    post your code, which you’ve done so far, makes it easier to help!

  • https://gist.github.com/anonymous/95bb3f2885cf8733090e

  • Put the code in the question, so that Pos may have the content needed to answer the question. In doubt see [Ask]

1 answer

3


I believe what you’re 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 result in this DEMO

Source: Wrap Shadow with CSS3

  • Valew. That’s right

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.