CSS menu z subtelną animacją

Proste menu uzyskane za pomocą CSS, którego elementy oprócz podświetlenia, odbijają się lekko w bok w momencie najechania kursorem.

Download: link
Źródło: http://cssdeck.com/labs/wxtftwhm

HTML

<!--//////////////Created by Ryan Bishop./////////////////// Check out more of my work at: http://dribbble.com/RyanBishop ---------------------------OR------------------------------- ------------Follow me on twitter: @abletroner--------------- //////////////////////////////////////////////////////////--> <!-- Google Fonts --> <link href="//fonts.googleapis.com/css?family=Strait" rel="stylesheet" type="text/css"></link> <!-- HTML --> <div class="menu-container"> <div class="nav"> <div class="settings"> </div> </div> <div class="menu"> <ul> <li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_se17RjuImND0AXK0DXjJF4I6BnJyXDeHW1ztse1OOt6zS_4ve0jVqI2vQlW5qpE8VyCv9BdUs5RfepL6TjRg=s0-d">Search</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tzeRAR7-P12EYdBGa9oflkPEKMex76FqNejcfMdFchghCSvqVwVIgwLRa6jW9o6GeJYN5FvmJn29glZlgfPw0=s0-d">Upload</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vT637i6gOligZi0qx_lHbA6EGrq79xhENi4qGXh_TdtkPPz3vHY5d-uqBa8MEwBhlXFLAy50JvKyAoYi9q-a0=s0-d">Location</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4817203568281494964#" target="_blank"><img src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uWQCb4_5OBuNxxpW-GwqWgSfsIzzlSUp2liq7T9uGwqwP2lVKQuIDLLx09oZ5-Rx3YSbuoCbNQlkb1sBzTLJQ=s0-d">Contacts</a></li> </ul> </div> </div>

CSS

/*///////////////Created by Ryan Bishop.//////////////////// Check out more of my work at: http://dribbble.com/RyanBishop ---------------------------OR------------------------------- ------------Follow me on twitter: @abletroner--------------- //////////////////////////////////////////////////////////*/ * { margin: 0; padding: 0; } body { background-color: #a3cabd; } .menu-container { display: block; position: relative; width: 300px; background-color: #f3f0ef; margin: 5% auto 0; padding: 0; border-radius:5px; box-shadow: inset 0 0 1px rgba(255,255,255,1); box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.1); } .nav{ background-color: #ed6b3a; height:40px; border-radius:5px 5px 0 0; } .settings { height:20px; float:right; background-image:url(http://i.imgur.com/CLs7u.png); width:20px; margin:10px; } .menu ul { list-style:none; } .menu ul li { border-top:1px solid rgba(0,0,0,0.1); padding:11px 10px; box-shadow:inset 0 1px 1px #fff; text-indent:10px; } .menu ul li a { font-size:14px; color:#a4a3a3; font-family: 'Strait', sans-serif; font-size:14px; text-decoration:none; text-shadow: 1px 1px 1px #fff; } .menu ul li img { float:left; margin:-2px 0 0 0; } .menu ul li:hover { border-left:3px solid #ed6b3a; background-color:rgba(0,0,0,0.02); }

0 komentarze:

Prześlij komentarz