Efeitos de transicoes e sombras em textos

Olá boa noite meus amores ٩(ˊᗜˋ*)و✧ Eu de novo aqui? Haha pois é, eu estou tentando o máximo que eu puder adiantar os pedidos da ask pois semana que vem já volto a trabalhar dai já era postagens com bastante frequência. Quero deixar tudo certinho e sem nada de pendências, e eu só tenho a agradecer aos leitores pela confiança e pelo carinho que vocês vem mostrando ao blog. Sabiam que a última postagem foi a de número 300? Cara, 300 postagens acreditam nisto? Se Deus quiser mais 300 virão por ai, era para ter muito mais mas se eu não ficasse tanto tempo sem postar as vezes como eu fico hahaha, acho que irei fazer algo em relação a isso, aguardem (‘∇^)☆

Então, este pedido é sobre alguns efeitos em textos, a leitora me pediu para trazer o mesmo efeito que uso aqui no título da postagem, na verdade é muito simples e nem precisa de códigos mirambulantes, vocês mesmo podem fazer e criar, bastam pegar os efeitos de texto e porem no que quiserem, menus, textos etc.. Então, é isso meus amores, espero que ajude. vamos ao tutorial?

LIVE PREVIEW (#^3^*)

Modelo 1

.sombra1 {
font-family:cambria;
font-size:14px;
color:#777;
-webkit-transition-duration: .80s;
}
.sombra1:hover {
text-shadow: 0.2em 0.5em 0.1em #000,
-0.3em 0.1em 0.1em #eee,
0.4em -0.3em 0.1em #000;
-webkit-transition-duration: .80s;
}

<div class="sombra1">SEU TEXTO</div>

Modelo 2

.sombra2 {

font-family:cambria;

font-size:14px;

color:#777;

-webkit-transition-duration: .80s;

}

.sombra2:hover {

text-shadow: 1px 1px white, -1px -1px #333;

-webkit-transition-duration: .80s;

}

<div class="sombra2">SEU TEXTO</div>

Modelo 3

.sombra3 {

font-family:cambria;

font-size:14px;

color:#777;

-webkit-transition-duration: .80s;

}

.sombra3:hover {

text-shadow: 0.2em 0.5em 0.1em #333,-0.3em 0.1em 0.1em #666,0.4em -0.3em 0.1em #333;

text-shadow: -10px 10px 0px #000,-20px 20px 0px #666,-30px 30px 0px #333;

-webkit-transition-duration: .80s;

}

<div class="sombra3">SEU TEXTO</div>

Modelo 4

.sombra4 {

font-family:cambria;

font-size:14px;

color:#777;

-webkit-transition-duration: .80s;

}

.sombra4:hover {

text-shadow: 30px 15px #666, 20px 8px #333, 10px -10px #000;

-webkit-transition-duration: .80s;

}

<div class="sombra4">SEU TEXTO</div>

Modelo 5

.sombra5 {

font-family:cambria;

font-size:14px;

color:#777;

text-shadow:10px 0px transparent, -10px 0px transparent;

-webkit-transition-duration: .80s;

}

.sombra5:hover {

text-shadow:0px 0px #555, -0px 0px #000;

-webkit-transition-duration: .80s;

}

<div class="sombra5">SEU TEXTO</div>

Modelo 6

.sombra6 {

font-family:cambria;

font-size:14px;

color:#777;

text-shadow:10px 0px #fff, -10px 0px transparent;

-webkit-transition-duration: .80s;

}

.sombra6:hover {

text-shadow:5px 5px 5px #000;

text-shadow:5px 8px 1px #333, 10px -10px 1px #000;

-webkit-transition-duration: .80s;

}

<div class="sombra6">SEU TEXTO</div>