Sejam bem vindos meu ao bloguinho, ele foi criado com o intuito de ensinar a quem necessita de ajuda em html e css, temos diversos tutoriais e materiais. Fiquem bem a vontade e qualquer dúvida que tiverem entrem em contato comigo ou peçam pela ask. Beijinhos caramelados e inté mais ♡
Search here
All that you want is here, css and html
Welcome to garota no mundo html.
- efeito legenda nas imagens de posts
- backgrounds grandes em aquarela
- Avatar do autor no post footer
- Leia mais na mesma linha do header
- Efeito Dragqueen e efeito Swing
- Três modelos de menus agenda
- Usando temas de tumblr no blog
- Criando seu próprio modelo de data
O tema atual do layout é: the fall of leafs
A meta dos posts do blog é de: 300 posts
A meta de comentários do blog é de: 3500
O blog foi inaugurado no dia: 27/12/2012
os Seguidores do blog atualmente são: 865
A versão atual do layout está na: 41ª vers.
folhinhas que estão no blog online agora:
folhinhas que já passaram por aqui:

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^)