terça-feira, 11 de junho de 2013

Tutorial - Efeito para postadoras

Good night pessoas <3
Estou realmente cansada de estudar, férias, cadê você?! Não aguento mais ouvir á voz da minha professora de português! Ottoke?! Mas enfim, ao menos eu acho que melhorei um pouco neste bimestre, exceto em física.

Antes que eu me esqueça, vocês acham que já esta na hora de eu mudar de layout? Minha cabeça esta formigando com algumas ideias um tanto, inovadoras. Mas, ainda gosto tanto desse... vamos esperar não é mesmo?

Trouxe para vocês um tutorial de um efeito muito lindo que eu achei lá no Things To Help You. Então, se usarem creditem á eles ok?



Devemos fazer duas imagens, uma sem o mouse por cima e outra com(efeito hover).
Eu fiz estas daqui:



Depois, cole isto no seu CSS:
.slide-up-boxes h5 {
color: #937560;
text-align: center;
height: 190px;
text-shadow: 1px 1px 0px #eee;
letter-spacing: 5px;
text-transform: uppercase;
font: normal 11px/104px Arial;
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}

.slide-up-boxes a:hover h5 {
margin-top: -200px;
opacity: 0;}

.slide-up-boxes div 
{position: relative;
color: #fff;
height: 190px;
padding: 0px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
text-decoration: none;}

.slide-up-boxes a:hover div {opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);} 
Entendendo o código:  

A class slide-up-boxes é o tamanho do local onde a minha boxzinha vai ficar. Ou seja, você pode dar o valor que sua imagem tem ou um valor maior. Isso você tem que descobrir tentando. Coloquei um display: inline-block para que a div ficasse uma ao lado da outra, CASO o espaço onde ela esteja caiba. É sempre bom arriscar, então arrisque. x3

A segunda class slide-up-boxes a, é onde determinamos o height da nossa imagem, então a minha imagem tem 104 de altura, então já determinei ali.

A class slide-up-boxes h5, é a class onde ficaria algo escrito, então ela deve ter o mesmo valor no height da sua imagem. Nessa class h5, temos um font: italic 18px/104px Georgia, Serif; a primeira numeração é o valor da fonte, o tamanho da nossa fonte, o segundo valor é o line-height então definimos o mesmo valor do height para que fique no centro.

A próxima class que é a h5 hover, temos um margin ali certo? Ele esta em negativo, ou seja, tem um menos antes da numeração. Note que o menus é o valor é o height da nossa imagem, então quando fizer com sua imagem determine o margin em negativo para que a imagem possa subir e aparecer. Bom depois disso, você não precisa mexer em nada, apenas nos valores mesmo. Pode usar um transition mais lento, caso queira.


Agora, copie este código e cole um gadget de HTML/Javascript:

<div class="slide-up-boxes">
<a href="OLINK">
<h5>
<img src="SUA_IMAGEM">
</h5>
<div>
<img src="SUA_IMAGEM">
</div></div>
</a>
Apenas isto! Ele é bem fácil, mas extenso e exige atenção. Novamente, os créditos ao Tumblr Things To Help You! Muito obrigada suas fofas ^U^
Espero que tenham gostado!
Bjs ^_^

12 comentários:

  1. sdds férias sdds -q Que venha \õ

    O efeito é lindo, gamei nele talvez eu use >3<

    ResponderExcluir
    Respostas
    1. Pois é rçrçr Chega de escola por este mês -n

      Awn obrigada *u*

      Excluir
  2. Adorei o efeito: é simples mas é muito legal
    Beijos

    ResponderExcluir
  3. Ótimo efeito, amo efeitinhos assim, talvez eu use² Ferias sdds mesmo, kkk, não gosto muito das aulas de espanhol, a professora só libera 20min depois, pq ela disse que só tem uma aula por semana TT_TT
    Chu~
    mutant-paradise.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu também *u* Lindo demais ;3
      Minha aula de espanhol só dura uma hora KKK' É toda terça e quinta a tarde T^T

      Bjs ^_^

      Excluir
  4. Nossa o efeito é muitoo lindoo

    Veja>>http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  5. Lindo blog! Estou seguindo.. pecadosfeminino.blogspot.com

    ResponderExcluir
  6. Férias vem ni mim rs' amei o efeito muito divo, salevi nos meu favoritos
    xoxooh~
    Daily-whin.blogspot.com

    ResponderExcluir
  7. Oi!Seu blog recebeu uma tag!
    http://lovemonsterhighbylala.blogspot.com.br/2013/06/tag.html

    Bjs!

    ResponderExcluir
  8. Aceita elite? responda em meu blog http://diarioboy-boy.blogspot.com.br/

    ResponderExcluir

- Comente a vontade, eu retribuo ^3^
- Palavras de baixo calão, xingamentos e outros tipos de ofensas não são permitidos. Para quê tanto ódio no coraçãozinho, gente? c: