Tutorial: Publi/Friends style #1

Pegar en un gadget HTML:

 <style>

#comida a img{

width:43px;

height:43px;

display:inline;

margin-right:2px;

margin-left:1px;

margin-top:1px;

margin-bottom:1px;

padding: 3px;

background: #f1f1f1;

box-shadow: 1px 1px 0px #ccc;

outline: solid 1px #fff;

outline-offset: -5px;

-moz-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

#comida a:hover img{

outline: solid 3px transparent;

opacity: 0.5;

outline-offset: -20px;

}

</style>

<div id="comida">

<center>

<blackie><a href="linkfriend" title="friend1">  <img src="https://media.giphy.com/media/DVvC66lWbGB8s/giphy.gif" /></a>

<a href="linkfriend" title="friend2">  <img src="https://media.giphy.com/media/DVvC66lWbGB8s/giphy.gif" /></a>

<a href="linkfriend" title="friend3">  <img src="https://media.giphy.com/media/DVvC66lWbGB8s/giphy.gif" /></a>

<a href="linkfriend" title="friend4">  <img src="https://media.giphy.com/media/DVvC66lWbGB8s/giphy.gif" /></a>

<a href="linkfriend" title="friend5">  <img src="https://media.giphy.com/media/DVvC66lWbGB8s/giphy.gif" /></a>

<a href="linkfriend" title="friend6">  <img src="https://media.giphy.com/media/DVvC66lWbGB8s/giphy.gif" /></a>

<a href="linkfriend" title="friend7">  <img src="https://media.giphy.com/media/DVvC66lWbGB8s/giphy.gif" /></a>

<a href="linkfriend" title="friend8">  <img src="https://media.giphy.com/media/DVvC66lWbGB8s/giphy.gif" /></a>

<a href="linkfriend" title="name9">  <img src="https://media.giphy.com/media/DVvC66lWbGB8s/giphy.gif" /></a>

</blackie></center></div>

<style>

a.jeonjin1 {

letter-spacing:1px;

-webkit-transition: all 0.2s ease-out;

-moz-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

cursor:pointer;

display:inline-block;

font:8px tt;

text-align:center;

width:30px;

height:10px;

color:#888 !important;

padding:5px;

padding-top:15px;

background:#eee;

text-decoration:none;

-webkit-border-top-left-radius: 33px;

-webkit-border-top-right-radius: 33px;

-moz-border-radius-topleft: 33px;

-moz-border-radius-topright: 33px;

border-top-left-radius: 33px;

border-top-right-radius: 33px;

border:2px solid #ddd;

border-bottom:none;

}

a.jeonjin1:hover{

background: #fff;

color:#333 !important;

}

@font-face {

font-family:tt;

src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');

}