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: