CSS›  sombra

Criando sombra no CSS

0 Comente abaixo Daniel Guimarães

Colocando sombra em um texto na página

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

Recomendamos para você
 

Comentários
Compartilhe com seus amigos:
Novidades
Compartilhe com seus amigos:
últimos reviews
  • 6,4
    Review Nokia Lumia 635
    Testamos hoje o Smartphone Nokia Lumia 635. Confira abaixo o que achamos.
  • 8,1
    Review Samsung Galaxy S5
    O smarphone primogênito da família Galaxy é a evolução de seus descendentes, evolução porque não há grandes novidades, m...
  • 8,0
    Review Motorola Moto G Segunda Geração
    Conheça o novo Moto G, que substitui seu antigo modelo com uma performance ainda melhor



TOPO