[Tutorial] Efeito Outline


Olá minna!

Hoje venho trazer um efeito muito fofo na imagens.
O efeito é igual ao das imagens na sidebar.

Bem, primeiro, adicionem ao HTML do vosso blog, acima de ]]></b:skin>, este código:
** Efeito outline por CF **/
.outline {-moz-transition:all 2s;opacity: 0.8; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;-o-transition:all 1s;outline: 1px solid #ffe9ef;outline-offset: -13px; -webkit-transition:all 1s; background:#D4E3E8;border: solid 1px #e9daf2;box-shadow: inset 0 0 6px #ffe9ef, 0px 1px 1px #ffe9ef; }
.outline:hover {opacity:0.5; filter: contrast(100%); -webkit-filter: contrast(100%); -moz-filter: contrast (100%); -o-filter: contrast(100%); -ms-filter: contrast(100%); -webkit-transition-duration: .50s; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease;outline: 2px solid #ffe9ef; outline-offset: -5px;background:#ffe9ef;border: solid 2px #ffe9ef;box-shadow: inset 0 0 6px #e9daf2, 0px 1px 1px #e9daf2; }

E para usar é só usar este código:
<a href="Link"target="blank" title="NOME"><img src="IMAGEM"width="50" height="50" class = "outline"/></a>

2 comentários:

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 ♪ ♥ ஐ ▲☼゚ ♣ (๏̯͡๏) †