- Código Fonte
- Artigos e Tutoriais
- Vídeo Aulas
- Notícias
- Entrevistas
- Downloads
- Conteúdo MX
- Fórum
- Atividades
PUBLICIDADE
Este artigo tem nota
10
imprimir
indique
assine
retwiteAutor
Allan Carvalho
membro deste agosto de 2008
Tags
Compartilhe e guarde
PUBLICIDADE
Enquete
Que tipo de conexão com a internet você utiliza?
sexta-feira, 5 de setembro de 2008
CSS caixa com sombra
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:
Prontinho, o html é apenas isso... ultra simples!
Agora o css, que também não fica pra trás.
Ae! Prontinha a caixa.. vocês podem checar o efeito em
http://www.allancarvalho.com.br/tutoriais/exemplos/css-caixa-com-sombra.html
Espero ter ajudado mais uma vez.
Abs
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:
<div class="ac_box">
<div class="ac_box_top"><div>
<div class="ac_box_cont">
Aprendendo macetes de CSS com Allan Carvalho
<div>
<div>
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
http://www.allancarvalho.com.br/tutoriais/exemplos/css-caixa-com-sombra.html
Espero ter ajudado mais uma vez.
Abs
Este artigo foi útil para você?
Regras:
Os comentários seguem as seguintes regras:
Os comentários seguem as seguintes regras:
- Todos os comentários são enviados por membros cadastrados no site.
- A pontuação de comentários de conteúdo do próprio membro não serão computados.
- Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
- Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
- O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
- Há um limite de 10 comentários por dia para cada membro.
- Qualquer comentário após ter sido publicado poderá ser retirado através da opção (
denunciar)
Comente
© 2006-2009 R&W Informática Ltda. - Todos os direitos reservados.