Dez exemplos de texto com sombra – Shadow

O CSS nível 3 tem uma propriedade chamada ‘texto com sombras’ para adicionar uma sombra a cada letra do texto.

Apresento a seguir 10 exemplos com a finalidade de mostrar as definições básicas para este processo. As possibilidades são ilimitadas, bastando um pouco de criatividade para se obter efeitos bastante interessantes e decorativos.

Exemplo 1:

CSS:

#shadow1 {
color: #DA1B62;
font-family: ‘Leckerli One’,cursive;
font-size: 95px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 4px 4px 0 rgba(255, 255, 255, 0.8), 10px 10px 0 rgba(187, 187, 187, 0.5);
}

Exemplo 2:

CSS:

#shadow2 {
color: #FE6602;
font-family: ‘Aclonica’,serif;
font-size: 95px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;
letter-spacing: 1px;
}

Exemplo 3:

CSS:

#shadow3 {
color: white;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0.1em 0.1em 0.2em black;
}

Exemplo 4:

CSS:

#shadow4 {
color: #44CCF6;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Exemplo 5:

CSS:

#shadow5 {
color: rgba(0, 174, 239, 0.2);
font-size: 95px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 5px 2px rgba(0, 0, 30, 0.08);
}

Exemplo 6:

CSS:

#shadow6 {
color: #FFFFFF;
font-size: 105px;
font-weight: bold;
font-family: “League-Gothic”,Courier;
text-transform: uppercase;
text-shadow: 0 0 20px #FEFCC9, 10px -10px 30px #FEEC85, -20px -20px 40px #FFAE34, 20px -40px 50px #EC760C, -20px -10px 60px #CD4606, 0 -10px 70px #973716, 10px -20px 80px #451B0E;
}

Exemplo 7:

CSS:

#shadow7 {
color: #006666;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5);
}

Exemplo 8:

CSS:

#shadow8 {
color: #fff;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

Exemplo 9:

CSS:

#shadow9 {
color: #F9BAD4;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 2px 0 #F48CB7, 0 4px 0 #FBDAE8, 0 6px 0 #F48CB7, 0 8px 0 #F48CB7, 3px 8px 15px #FBDAE8, 3px 8px 5px #F48CB7;
}