-2

estou tentando fazer um efeito de warp shadow em minha div mas não estou conseguindo, alguem pode me ajudar?

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

3

1 Resposta 1

3

Acredito que o que esteja procurando seja isto

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

Pode acompanhar o resultado nesta DEMO

Fonte: Wrap Shadow with CSS3

1
  • valew. isso mesmo
    – Furlan
    23/07/2014 às 12:37

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .