Olá gatinhos, tudo bem? Sintam-se a vontade e sejam bem vindos ao meu cantinho, este bloguinho foi criado em julho de 2012 e até hoje é direcionado a área de html e css. E se desejarem algo não exitem e peçam pela ask! beijinhos, bye ♡

27.8.15

Efeitos de transições 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>

6 comentários:

  1. Olá Girl in HTML ✌
    Como vai??~ Achei lindo voce declarar seu amor por nós nessa tua postagem. 300? Oh! Parabens de verdade! Eu ainda nem estou nas centenas de postagens. Sim, que mais 300 postagens venham. Imagine só ver o GNMH evoluindo com a gente? Lindo show. Gostei muito do tutorial, nem sabia que era assim tão simples. Vou tentar com certeza no meu prox. layout. Kissus my flor~

    ❤ --- cake-sugar.blogspot.com --- ❤

    ResponderExcluir
  2. Oi, acebei de conhecer seu blog e adorei ele (principalmente o fato do layout ser BTS haha). Mesmo não tendo acompanhado ele, parabéns pela 300 postagens. Estava procurando por esse efeito pra criar o layout do meu novo blog. Thank's.

    http://alea-torius.blogspot.com.br/

    ResponderExcluir
  3. Que efeitos legais *u* Adorei todos, o tutorial tá ótimo!

    Tem sorteio lá no blog, participe! (∩˃o˂∩)♡
    ♥ Rendas e Doces

    ResponderExcluir
  4. Oi Roh, 300 postagens? Nossa! Que venha mais 300 mesmo! haha
    Adorei o tutorial, não sei como utilizar nos links do blog :/
    Kisu ~ Bleeding

    ResponderExcluir
  5. Muito legais esses efeitos, talvez no meu próximo layout eu precise. Adorei o post.

    www.avidadoguh.com

    ResponderExcluir
  6. Adorei o post,eu vou usar e deixarei créditos >.<

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

LAYOUT E CODIFICAÇÃO POR ROH A. RAMOS OS DIREITOS ESTÃO RESERVADOS | Tecnologia do Blogger © 2017