Criando sombra no CSS

Colocando sombra em um texto na página

Por | @oficinadanet Programação
Saudações galera que acessa o Portal Oficina da NET! Estamos voltando a postar novos artigos sobre o fantástico CSS.

Gostaria de apresentar uma idéia que tive para criar uma sombra em um texto na página em CSS.

A idéia é a seguinte: Imprimir dois textos iguais na página com formatações diferentes, padronizando a mesma fonte, tamanho, mudando somente a cor e posição.

Veja o arquivo(texto.css) em CSS abaixo:


.texto, .sombra {
font-family: Trebuchet MS, Arial;
font-size: 50px;
font-weight: bold;
}

.texto {
color: blue;
position: absolute;
left: 210px;
top: 110px;
}

.sombra {
color: black;
position: absolute;
left: 212px;
top: 112px;
}


Perceba que a classe texto e sombra estão recebendo a mesma formatação de fonte, tamanho e um negrito a mais.

Formatando depois as classes .sombra e .texto separadamente, pelo position

Depois criar uma página em HTML, imprimindo o texto na página junto com a formatação:




Texto com sombra em CSS




Oficina da NET



Oficina da NET





Espero que eu tenha explicado de forma clara.

Resultado Final:


Forte Abraço a Todos,

Daniel Guimarães da Mota
Contato: daniel@dgmdesigner.com.br
Diretor | DGM Designer
www.dgmdesigner.com.br

Recomendado
Siga nas redes
Últimas publicações
O QUE LER EM SEGUIDA
Assuntos css e sombra
Siga nas redes
Encontrou algum erro no texto?

Entre em contato com o autor e nos ajude a melhorar a qualidade dos posts cada vez mais!

AVISAR
Comentários
ASSINE NOSSA NEWSLETTER

As melhores publicações no
seu e-mail