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>
Tutorial muito útil! ^ ^
ResponderEliminarAdorei Luci-chan!
Kiss
Arigatou Mie^^
ResponderEliminar(*^3^)
Kissus~