CADASTRE-SE

Criando sombra no CSS

Colocando sombra em um texto na página

Daniel Guimarães
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:


<HTML>

<HEAD>

<link rel="stylesheet" type="text/css" href="texto.css">

<TITLE>Texto com sombra em CSS</TITLE>

</HEAD>

<BODY BGCOLOR="#ffffff">



<DIV CLASS="sombra">

Oficina da NET

</DIV>



<DIV CLASS="texto">

Oficina da NET

</DIV>



</body>

</html>


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

Leia a seguir: O que é tableless e como funciona essa metodologia?

« Voltar à capa do site 0 0 0


Relacionados:

Comentários

TOPO