advanced code snippet search

Posted By

jamepaul on 08/11/10


Tagged

menu CSS3 html5


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

SideSix
craftymethod


Rounded Menu Bar with html5 and css3

 / Published in: CSS
 

I tried a menu bar with html5 and css3. Please give me some advice for more advance.

Expand | Embed | Plain Text 
  1. a {
  2.     text-decoration: none;
  3. }
  4. nav {
  5.     background-color: #A3A5A8;
  6.     border: 1px solid #FFF;
  7.     border-radius: 6px;
  8.     display: block;
  9.     -moz-border-radius: 6px;
  10.     -webkit-border-radius: 6px;
  11.     -moz-box-shadow: 0 0 14px #123;
  12.     -webkit-box-shadow: 0 0 14px #123;
  13.     box-shadow: 0 0 14px #123;
  14.     font-size: 15px;
  15.     margin-bottom: 10px;
  16.     padding: 8px 2px;
  17.     width: 450px;
  18. }	
  19. nav a {
  20.     padding: 5px 10px;	
  21.     color: #141414;
  22. }
  23. nav .active,
  24. nav a:hover {
  25.     background-color: #000;
  26.     border-radius: 6px;
  27.     color: #FFF;
  28.     -moz-border-radius: 6px;
  29.     -webkit-border-radius: 6px;
  30. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Sverri on August 11, 2010

You should target a:link, a:visited, a:hover and a:active (to better remember: LoVe/HAte). While it does work targetting a on its own it is good practice to target all its states.

"background:#000" is the same as "background-color:#000". There are many short-hands in CSS and you can use them.

Other than that it seems quite okay :)

You need to login to post a comment.