NEOSITE ILOGIC

Caixa com sombra em CSS

É comum ver nos sites caixas de texto com sombra utilizando imagens. Aqui temos um exemplo de como criar caixas sombreadas usando apenas códigos CSS.

Veja como fica:

exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo

Veja o código HTML e CSS do nosso exemplo:

<style>
/* Código CSS */
#shadow-container {
    position: relative;
    left: 6px;
    top: 6px;
    margin-right: 6px;
    margin-bottom: 6px;
}

    #shadow-container .shadow1 {
        background: #F1F0F1;
    }

    #shadow-container .shadow2 {
        background: #DBDADB;
        position: relative;
        left: -2px;
        top: -2px;
    }

    #shadow-container .shadow3 {
        background: #B8B6B8;
        position: relative;
        left: -2px;
        top: -2px;
    }

    #shadow-container .container {
        background: #ffffff;
        border: 1px solid #848284;
        position: relative;
        left: -2px;
        top: -2px;
        padding: 10px;
    }
/* Código CSS: Fim */
</style>

<|-- Código HTML da caixa de texto -->
<div id="shadow-container">
        <div class="shadow1">
            <div class="shadow2">
                <div class="shadow3">
                    <div class="container">
                    exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo exemplo
                    </div>
                </div>
            </div>
        </div>
    </div>
<|-- Fim do código HTML -->

< Artigo anterior		Artigo seguinte >

[ Voltar ]

Serviços

Ajuda

Gratuito