Skocz do zawartości
Sn4Q

Ciekawy hover

Polecane posty

Sn4Q

Znalazłem w internecie ciekawy hover. 

W body wstawiamy:

<ul class="socialIcons"> 
                       <li><a href="LINK DO STRONY" alt="Facebook" />Facebook</a></li><br/> 
                       <li><a href="LINK DO STRONY" alt="Google+" />Google+</a></li><br/> 
                       <li><a href="LINK DO STRONY" alt="YouTube" />YouTube</a></li> 
                   </ul>

w CSS

ul.socialIcons { 
   float: left; 
   -webkit-border-radius: 5px; 
   -khtml-border-radius: 5px; 
   -moz-border-radius: 5px; 
   border-radius: 5px; 
   padding: 5px; 
   margin-left: 9px; 
} 
ul.socialIcons li { 
   float: left; 
   margin: 8px; 
   height: 44px; 
   width: 54px; 
   text-align: center; 
} 
ul.socialIcons li a { 
   font: 600 11px 'Open Sans', sans-serif; 
   color: #fff; 
   text-decoration: none; 
   display: block; 
   height: 12px; 
} 
ul.socialIcons li a:hover { 
   text-shadow: 0 1px 0 #FFF, 0 0 4px, 0 0 5px #FFF, 0 0 8px #FFF; 
} 
ul.socialIcons li a img { 
   height: 32px; 
   -webkit-transition-duration: 0.5s; 
   -moz-transition-duration: 0.5s; 
   -o-transition-duration: 0.5s; 
   -ms-transition-duration: 0.5s; 
   transition-duration: 0.5s; 
   -webkit-transition-duration: 0.5s; 
   -moz-transition-duration: 0.5s; 
   -o-transition-duration: 0.5s; 
   -ms-transition-duration: 0.5s; 
   transition-duration: 0.5s; 
   -webkit-transition-duration: 0.5s; 
   -moz-transition-duration: 0.5s; 
   -o-transition-duration: 0.5s; 
   -ms-transition-duration: 0.5s; 
   transition-duration: 0.5s; 
   -webkit-transition-duration: 0.5s; 
   -moz-transition-duration: 0.5s; 
   -o-transition-duration: 0.5s; 
   -ms-transition-duration: 0.5s; 
   transition-duration: 0.5s; 
   -webkit-transition-property: -webkit-transform; 
   -moz-transition-property: -moz-transform; 
   -o-transition-property: -o-transform; 
   -ms-transition-property: -ms-transform; 
   transition: transform transition-property: -webkit-transform; 
   -webkit-transition-property: -webkit-transform; 
   -moz-transition-property: -moz-transform; 
   -o-transition-property: -o-transform; 
   -ms-transition-property: -ms-transform; 
   transition: transform transition-property: -moz-transform; 
   -webkit-transition-property: -webkit-transform; 
   -moz-transition-property: -moz-transform; 
   -o-transition-property: -o-transform; 
   -ms-transition-property: -ms-transform; 
   transition: transform transition-property: -o-transform; 
   -webkit-transition-property: -webkit-transform; 
   -moz-transition-property: -moz-transform; 
   -o-transition-property: -o-transform; 
   -ms-transition-property: -ms-transform; 
   transition: transform transition-property: transform; 
} 
ul.socialIcons li a img:hover { 
   -moz-transform: rotate(7deg); 
   -webkit-transform: rotate(7deg); 
   -o-transform: rotate(7deg); 
}

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
SeNioR Online

Czy ciekawy to nie wiem to zwykłe podświetlenie poprzez text-shadow, ale na IE nie działa text-shadow wiec pozostaje tylko Mozilla, Opera i inne typu przeglądarki.

No i warto dodać że jest to z ikonkami..

Udostępnij ten post


Link to postu
Udostępnij na innych stronach
Gość
Temat jest zablokowany i nie można w nim pisać.
×
×
  • Utwórz nowe...