CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Textos com sombras

Por Benedito Silva Júnior - publicado em 14/07/2016


Com o CSS é possível aplicar sombras em textos utilizando a tag de parágrafo do HTML/XHTML

Esse recurso é muito interessante, pois as fontes utilizadas nos textos ganham sombras que realçam ainda mais as informações expostas.

Veja:

Código HTML/XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <html xmlns="estilo.css" rel="stylesheet" type="text/css" /> <title>CSS - Dicas</title> </head> <body> <h1>Exemplo de links></h1> </a href="" class="ex01">Exemplo 01</a><br /><br /> </a href="" class="ex02">Exemplo 02</a><br /><br /> </a href="" class="ex03">Exemplo 03</a><br /><br /> </body> </html>

Código CSS (arquivo estilo.css):

.texto { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20pt; color: #000000; line-height: center; margin-top: 6px } /* estilos de sombras */ .smb1a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24pt; font-weight: bold; color: #bcbcbc; line-height: 0; margin-top: 8px; margin-left: 8px; margin-bottom: 8px;} .smb2a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24pt; font-weight: bold; color: #e1e1e1; line-height: 0; margin-top: 8px; margin-left: 16px; margin-bottom: 8px; } .smb1b { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24pt; font-weight: bold; color: #bcbcbc; line-height: 0; margin-top: 8px; margin-left: -8px; margin-bottom: 8px; } .smb2b { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24pt; font-weight: bold; color: #e1e1e1; line-height: 0; margin-left: -16px; margin-bottom: 8px; } h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; width: 50%; margin-top: 2px; margin-bottom: 2px; border-top: 1px solid #000000; border-bottom: 1px dashed #000000; }


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo