Shadow box css

Shadow box css

Dominar a arte do Shadow Box CSS pode elevar o design do seu site a outro nível, criando efeitos visuais impressionantes que certamente cativarão seus visitantes. Com essa técnica avançada de design, você pode adicionar profundidade e realismo aos elementos da sua página, dando a impressão de que eles estão flutuando no ar.

O Shadow Box CSS permite que você crie sombras suaves e detalhadas em torno de caixas de texto, imagens e outros elementos HTML.

Com a combinação certa de sombras, cores e opacidade, você pode trazer profundidade e dimensão aos seus designs, adicionando um toque de elegância e sofisticação.

Neste artigo, vamos explorar as técnicas essenciais do Shadow Box CSS, fornecendo dicas e truques para ajudar você a dominar essa arte.

Vamos mostrar como criar diferentes estilos de sombras, controlar a transparência e personalizar o efeito para se adequar às suas necessidades. Prepare-se para impressionar seus visitantes com designs modernos e atrativos usando o Shadow Box CSS.

Então, vamos mergulhar nesta jornada emocionante e descobrir como elevar seu web design com incríveis efeitos visuais usando o Shadow Box CSS!

O que é uma caixa de sombra em CSS?

No CSS, o Shadow box é uma propriedade utilizada para adicionar sombras internas (inner shadow) ou ao redor (drop shadow) de um elemento HTML. Esses recursos nos permite construir efeitos interessantes, como o deslocamento ou o desfoque da sombra, a definição da cor e muito mais. Por isso, ele é capaz de tornar a aplicação web mais elegante e dinâmica!

O que é a propriedade box shadow CSS?

A propriedade box-shadow é utilizada para inserir uma camada de sombra ao redor do elemento HTML. Este efeito podemos podemos configurar nos quatro lados do elemento ou apenas na posição desejada. A propriedade contém alguns atributos auxiliares que ajudam a definir como o sombreamento será aplicado.

Veja a sintaxe dessa propriedade!

A sintaxe da propriedade box-shadow é:

box-shadow: [inset][h-offset][v-offset][blur][spread][color];

Veja o exemplo abaixo:

box-shadow: inset 0 0 12px 12px blue;

Veja diferentes tipos de efeitos de sombra Shadow Box CSS

Entendendo a propriedade box shadow

A propriedade box shadow é uma das ferramentas mais poderosas disponíveis para web designers quando se trata de adicionar profundidade e dimensão aos elementos do site. Ela permite que você crie sombras realistas e sofisticadas que dão a ilusão de que os elementos estão flutuando ou se destacando da página. A propriedade box shadow é usada para controlar a cor, o desfoque, a propagação e a posição da sombra. Ela é aplicada a um elemento usando a sintaxe CSS `box-shadow: horizontal-offset vertical-offset, blur-radius, spread-radius, color;`. Vamos explorar cada uma dessas partes em detalhes

• inset: A propriedade `inset` é usada para criar uma sombra interna em vez de uma sombra externa. Essa propriedade é especialmente útil quando você deseja criar um efeito de botão afundado ou uma caixa de texto com uma aparência tridimensional;
• h-offset: indica a distância em relação ao elemento e ao eixo horizontal em que a sombra será projetada;
• v-offset: funciona como o atributo anterior, porém, em relação ao eixo vertical;
• blur: Este valor define o desfoque da sombra. Quanto maior o valor, mais borrada será a sombra.;
• spread: A propriedade `spread radius` controla a propagação da sombra. Um valor positivo aumenta a propagação da sombra, enquanto um valor negativo reduz a propagação. Isso pode ser usado para criar sombras mais suaves ou sombras mais nítidas e definidas.;
• color: Este valor define a cor da sombra. Você pode usar nomes de cores, códigos hexadecimais ou valores RGB para especificar a cor da sombra.

Além disso também é possível aplicarmos mais que um efeito em um mesmo elemento. Para isso, basta você separar por vírgula os valores dos atributos. veja o exemplo abaixo:

box-shadow: 5px 5px 10px green, 
            -5px 0 darkgreen;

Nesta seção, projetaremos uma estrutura simples na tag <div> e <article>. 

Essas são as tags que usaremos para criar o nossa Box formatado com css com o efeito de sombras.

Estrutura Código HTML

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, vamos adicionar as tags HTML para montar a estrutura do box.

    <div class="centraliza-items">
    
        <article class="box-branco sombra-1">
            Sombra - 1
        </article>

        <article class="box-branco sombra-2">
            Sombra - 2
        </article>

        <article class="box-branco sombra-3">
            Sombra - 3
        </article>

        <article class="box-branco sombra-4">
            Sombra - 4
        </article>

        <article class="box-branco sombra-5">
            Sombra - 5
        </article>

        <article class="box-branco sombra-6">
            Sombra - 6
        </article>

        <article class="box-branco sombra-7">
            Sombra - 7
        </article>

        <article class="box-branco sombra-8">
            Sombra - 8
        </article>

        <article class="box-branco sombra-9">
            Sombra - 9
        </article>

        <article class="box-branco sombra-10">
            Sombra - 10
        </article>

        <article class="box-branco sombra-11">
            Sombra - 11
        </article>

        <article class="box-branco sombra-12">
            Sombra - 12
        </article>
        
        <article class="box-branco sombra-13">
            Sombra - 13
        </article>

        <article class="box-branco sombra-14">
            Sombra - 14
        </article>

        <article class="box-branco sombra-15">
            Sombra - 15
        </article>
        
        <article class="box-branco sombra-16">
            Sombra - 16
        </article>

        <article class="box-branco sombra-17">
            Sombra - 17
        </article>

        <article class="box-branco sombra-18">
            Sombra - 18
        </article>
        
        <article class="box-branco sombra-19">
            Sombra - 19
        </article>

        <article class="box-branco sombra-20">
            Sombra - 20
        </article>

        <article class="box-branco sombra-21">
            Sombra - 21
        </article>                    

        <article class="box-branco sombra-22">
            Sombra - 22
        </article>

    </div>

Estrutura Código CSS

Para conseguirmos um design mais atraente com os efeito de sombras, vamos adicionar algumas propriedades  CSS  para as tags que foram colocadas na sessão HTML que usamos acima.

.sombra-1  { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }

.sombra-2  { box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; }

.sombra-3  { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }

.sombra-4  { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }

.sombra-5  { box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; }

.sombra-6  { box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; }

.sombra-7  { box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; }

.sombra-8  { box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; }

.sombra-9  { box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; }

.sombra-10 { box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }

.sombra-11 { box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; }

.sombra-12 { box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; }

.sombra-13 { box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; }

.sombra-14 { box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; }

.sombra-15 { box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; }

.sombra-16 { box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; }

.sombra-17 { box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; }

.sombra-18 { box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }

.sombra-19 { box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset; }

.sombra-20 { box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px; }

.sombra-21 { box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px; }

.sombra-22 { box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px; }

Combinando as Duas seções acima com Html e Css  temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Conclusão

Neste artigo, você aprendeu o passo a passo de como criar um Efeitos de sombras com CSS, existem diversos formas de criar sombras com cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.

A imaginação é mais importante que o conhecimento. O conhecimento é limitado, enquanto a imaginação abraça o mundo inteiro, estimulando o progresso, dando à luz à evolução.– (Albert Einstein)