Bulles d'image en utilisant CSS3 transformer et transitions
widget facebook twiter rss ...vous pouvez ajouter des foto a votre widget
CSS3 est de transformer et de transition, les propriétés permettent de manipuler des éléments dans une variété de façons en utilisant seulement CSS. CSS transformer est utilisé pour redimensionner, faire pivoter ou même biaiser un élément sans perturber le contenu autour de lui, tandis que la transition est utilisé pour animer des propriétés CSS dans la vue. Les deux propriétés sont pris en charge dans les versions modernes de Safari, Chrome, Mozilla 3.5 + et Opera 9.5 + à des degrés divers. Après cette brève introduction de la route, les utilisations suivantes de CSS3 transformer et de transition, les propriétés de "gonflent" une image lorsque la souris survole, et il reviendra à son état original quand est sorti de:
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
<style type="text/css">
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
<ul class="bubblewrap">
<li><a href="votre lien ici"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSMw4BsYox4Dpt_jAez9gKsPVjwNF7527h8TMQJO5TEGbocG5-osukcO2u_sTlEE0zIqXwjzagz76EIwm2bInFkL4W0hSf4Kcfha__xAeGtf-Ub3vslMlJr5i3TaSvIPeLSkR1FxqcxyAc/s200/rssimg.png" title="Add RSS Feed" width="181" /></a></li>
<li><a href="http://awweb.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5fw7o7TQon-XRpp8_0bJjx16-9FHO7Bmx-kW1ECOPLh6zZMICstpLMrERXdF_3BGkmu7OU5YWvks5jZLfS227OdnAuwxUMJ6nylOn4rrZcpRcASE6e4n3lGBldd2j86Ouz4DuNwRQ06pR/s200/facebook.png" title="Add to Facebook" width="181" /></a></li>
<li><a href="http://awweb.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiQ7of1ozhXAd6PXvlu8U54cWUV3k14KhYh4jNFeIcjKpiv3sxWDWIk5VKYO_KZNYLX8cmqPu2o43vgnKdKihGb_1oARG_wlZFuLMMvIOa5RLDHIo6eP2PrSjH8esC8gM1nGOlYTNfV1gd/s200/digg.png" title="Add to Digg" width="181" /></a></li>
<li><a href="http://awweb.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2akEBc820yRBzsuZTgsCUd3YPouIgvy6f3vGCic_AO2JotrtgneQOBT2qEFWWBKpo53F-jCw-O00dErLdJHLMV5tdQq5twzUka3-PETJ0_BECoqVvJ7AqfnmDxW5WVN1DeqI2W02t48P/s200/twitter.png" title="Add to Twitter" width="181" /></a></li>
<li><a href="http://awweb.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh3xvuzWrnHvCAe-cyotA2cqkk5aK0ZpT9Cz8qelgG2IEC0aGxmrvDsBpbHav3joVOnMKEh3XhuXJZZqaBdo-HOB0z-3M5TBY8q83HcnuVhbaPCs18mTtczvNJkWIlX4onYAjOTUhnYMQ3/s200/stumbleupon.png" title="Add to Stumbleupon" width="181" /></a></li>
</ul>
0 commentaires:
Enregistrer un commentaire