[Tutorial] Efeito Cute Outline


Olá minna!

Hoje venho trazer um dos tutoriais daqui do layout do blog.
O turorial é um efeito nas imagens super fofo mas que não é muito exagerado.
Dei o nome de Cute Outline.



Primeiro, vão ao HTML do vosso blog e procuram por:
]]></b:skin>
E em cima desse código, colam:
 .post img {
padding: 1px;
background: #f3f3f3;
-moz-opacity: 0.81;
-khtml-opacity: 0.81;
opacity: 0.81;
filter:alpha(opacity=81);
-webkit-transition-duration: .50s;
border: #ffd6de 1px solid;
box-shadow: inset 1px 1px 0 #fff5f7;
background: #ffe2e8;
padding:2px;
outline: solid 5px rgba(255, 255, 255, .5);
outline-offset: -12px;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;
}
.post img:hover {
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
filter:alpha(opacity=100);
-webkit-transition-duration: .3s;
border: #ffd6de 1px solid;
box-shadow: inset 1px 1px 0 #fff5f7;
background: #ffe2e8;
padding:2px;
outline: solid 5px rgba(255, 255, 255, .5);
outline-offset: -21px;-webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;
}

Gostaram?
Se usarem, por favor creditem o CF.

Quem quiser visualizar, o efeito está na imagem acima.
Kissus ^^

2 comentários:

  1. muito bonitinho, esse efeito, estou usando, a propósito, quando saí novas postagens? estou acompanhando o seu blog agora ≧ω≦

    ResponderEliminar

Hey, arigato por vires comentar.
Respondo a todos os comentários assim que possível.
Por favor, não uses palavras impróprias nem nada disso.
Não uses o comentários só para divulgar o teu blog, no entanto, se falares sobre o post, podes deixar o url.

Aviso: os comentários maldosos e com insinuações serão publicados, mas eliminarei o seu conteúdo e darei uma breve respostinha.

Sayonara^^


=((•̪●))= ๑(•ิ.•ั)๑ ٩(●̮̮̃•̃)۶ ε(●̮̮̃•̃)з ٩(×̯×)۶̿ ┌∩┐(◣_◢)┌∩┐ ⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙▽⊙ ⊙﹏⊙ ⊙△⊙ ◑▽◐ ◑ω◐ ◑﹏◐ ●︿● ●ω● ●﹏● ≧▂≦ ≧︿≦ ≧ω≦ ≧﹏≦ ≧▽≦ >︿< >ω< >﹏< >▽< ≡(▔﹏▔)≡ (¯▽¯;) <(“”"O”"”)> (-__-)b (;°○° ) \( ̄︶ ̄)> <( ̄︶ ̄)/ (/≧▽≦/) \(≧3≦)/ \(≧ω≦)/ o(≧ω≦)o o(≧o≦)o ㄟ(≧◇≦)ㄏ ╮(╯▽╰)╭ ╮( ̄▽ ̄)╭ (~o ̄▽ ̄)~o ~ 。。。(~ ̄▽ ̄)~[] (╯-╰)/ (*^3^) 'U_U ♪ ♥ ஐ ▲☼゚ ♣ (๏̯͡๏) †