CSS caixa com sombra – Código Fonte

Um efeito simples e que resulta num trabalho bonito e sem usar imagem, puro css.

Um efeito simples e que resulta num trabalho bonito e sem usar imagem, puro css. É a idéia deste pequeno tutorial. Eu estava um tempo sem escrever e estou aproveitando um tempo livre para postar algo. Acredito que agora eu consiga manter uma rotina de escrever mais tutoriais aqui.

Bem a ideia do html é simples, é uma caixa englobando tudo, para podermos dar a dimensão, que chamarei de ac_box. Uma caixa no topo para dar o efeito de borda mais fina, que darei a classe ac_box_top, e a caixa de conteudo,ac_box_cont, com uma borda mais grossa, dando a idéia de ter uma sombra atrás… vamos ao html:


      
            
			 Aprendendo macetes de CSS com Allan Carvalho

Prontinho, o html é apenas isso… ultra simples!

Agora o css, que também não fica pra trás.

.ac_box { width: 337px; }
.ac_box_top { border: 2px solid #E6E6E6; border-bottom: none; margin-left: 2px; height: 7px; width: 323px; }
.ac_box_cont { border-left: 4px solid #E6E6E6; border-right: 10px solid #E6E6E6; border-bottom: 10px solid #E6E6E6; height: 340px; padding: 5px 0; }

Ae! Prontinha a caixa.. vocês podem checar o efeito em

https://www.allancarvalho.com.br/tutoriais/exemplos/css-caixa-com-sombra.html

Espero ter ajudado mais uma vez.
Abs

Javascript: o diferencial