28.2.15

Efeito view


Então...

Para segundo tutorial de hoje, deixem-me começar por dizer uma coisa: este tutorial não é originalmente meu, mas nunca vi ninguém usá-lo, e é das maiores relíquias que já encontrei. Créditos ao blog Sonho mais profundo, a única coisa que eu alterei no tuto foi uma das fontes e cores e a organização. Uma coisa importantíssima para fazer o tutorial funcionar: TEM DE SER TUDO ESCRITO EM MAIÚSCULAS!!! Uma única letra minúscula, e já era. Demorei imenso tempo a compreendê-lo e é por isso que o estou a salientar aqui, vou até ensinar um truque para passar a url da imagem para maiúsculas sem terem de o fazer letra a letra. Em suma, o tuto está cheio de dicas importantes, portanto leiam tudo.


Preview

Tutorial
Procure por: 
/b:skin
Em baixo acrescente o código seguinte. Só pode alterar as cores, mais nada:
.view {

outline: 1px dashed #fff;
outline-offset: -3px;
border: 3px solid #7676de;
cursor: pointer;
height: 60px;
width: 60px;
margin: 5px 1px 1px 0px;
overflow: hidden;
position: relative;
text-align: center;
display: inline-block;
}
.view img { /* a imagem */
display: inline-block;
position: relative;
opacity: 1;
filter: alpha(opacity=100);
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
.view:hover img { /* se "anima quando passamos o mouse em cima */
opacity: 0;
filter: alpha(opacity=0);
-moz-transform: rotate(620deg) scale(0);
-webkit-transform: rotate(620deg) scale(0);
-o-transform: rotate(620deg) scale(0);
-ms-transform: rotate(620deg) scale(0);
transform: rotate(620deg) scale(0);
}
.view .mask {
background-color: #98abe3;
height: 60px;
width: 60px;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask {
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);
}
.view h4 {
background-color: #e9daed;
opacity: 0.8;
color: #c195cf;
text-align: center;
position: relative;
font-family: Silkscreen;
font-size: 8px;
margin: 9px 0 0 0;
padding: 5px 0;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 { /* título é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p { /* o texto permanece oculto */
color: #c195cf;
font-family: pf arma five;
font-size: 8px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p { /* texto é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info { /* o link permanece oculto */
background-color: #f8f8f8;
border-radius: 5px;
box-shadow: 0 0 2px #fff, 0 0 5px #c8c9db inset;
color: #95a6cf;
display: inline-block;
padding: 2px 10px;
text-decoration: none;
margin-top: 8px;
font-family: silkscreen;
font-size: 8px;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #968ca3;
}
.view:hover a.info { /* link é mostrado */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}

Agora, adicione um gadget html/javascript e cole o código:
<DIV ID="CIRCLE">
<CENTER><DIV ID="CINSIDE">
<CTITULO>TITULO</CTITULO>
<CDESC>DESCRIÇÃO AQUI E BLÁ BLÁ BLÁ... ISSO É SÓ UM EXEMPLO, RSRS.</CDESC>
</DIV>
<DIV ID="CIRCLEPIC"><IMG SRC="LINK_IMG" /></DIV>
</CENTER></DIV>

Onde diz URL-DA-IMAGEM, troque pela sua, e troque também o texto. Não se esqueça que tem de ficar tudo em maiúscula. Para passar a url da imagem para letras maiúsculas sem ter de o fazer letra a letra, é simples, siga os passos:
  1. consiga a url normalmente
  2. cole num documento word
  3. Selecione a url
  4. use CTRL+D
  5. Marque a opção MAIÚSCULAS, e depois em OK
  6. copie o resultado e faça a substituição no gadget

Voilá. Descobri também que, para não desconfigurar, é melhor adicionar o gadget no rodapé e, só depois de guardar, arrastá-lo para a sidebar. Não me perguntem porquê. E a imagem seguinte serve para ilustrar os passos que acabei de referir:

2 comentários:

  1. u-u às vezes acho essas coisas estranhas no efeito tipo... Por que tem que ser letra maiúscula o-O ? ~ só eu penso nisso, ok ~
    O efeito é bem básico e fácil, mas o tutorial ta bem explicado u-u

    Bejins e Sayoo~~ >3<

    Cherriitea

    ResponderEliminar
  2. Que efeito diwooo. Como tudo que tu faz, é óbvio ¬¬
    Beijoss

    ResponderEliminar