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ê
 

Compartilhe com seus amigos:
Mais de CSS
  • CSS: Design responsivo para menu, imagem e publicidade
    CSS: Design responsivo para menu, imagem e publicidade
  • Design responsivo com CSS3
    Design responsivo com CSS3
  • O que é tableless e como funciona essa metodologia?
    O que é tableless e como funciona essa metodologia?
  • Regras para como separar o HTML do CSS
    Regras para como separar o HTML do CSS
  • CSS Font-size: px, em, %, pt ou keyword?
    CSS Font-size: px, em, %, pt ou keyword?
Compartilhe com seus amigos:
últimos reviews
  • 8,4
    Review Samsung Galaxy K Zoom
    Nessas 2 últimas semanas passou por nossas mãos o potente Galaxy K Zoom, veja o que achamos dele.
  • 8,6
    Review Moto X - Segunda geração
    O aparelho da Motorola é a prova “viva” que o que está ótimo pode melhorar ainda mais.
  • 8,1
    Review Zenfone 5
    Tela de 5 polegadas, câmera de foto e vídeo superiores aos concorrentes, boa usabilidade e preço baixo. A Asus acertou n...

TOPO