Skip to main content

Create an Advanced CSS3 Menu


So i am going to tell how to make a CSS3 menu which looks like Javascript menu and you think that we use images too but there is no need to use images save time and space start with Css and end with it don't use any image.
Let's Start.
.cbdb-menu li a {
/* This generators the gradient on top of the solid color */
background-image: -webkit-gradient(
linear,
left top,
left bottombottom,
color-stop(0, rgba(255,255,255,.5)),
color-stop(1, rgba(0,0,0,.1))
);
background-image: -moz-linear-gradient(
center top,
rgba(255,255,255,.5) 0%,
rgba(0,0,0,.1) 100%
);
color: #f4f4f4; /* IE */
color: rgba(255, 255, 255, 0.8);
display: block;
font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;
outline:none;
padding: 5px 15px;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
}
.cbdb-menu li a:active {
background-image: -webkit-gradient(
linear,
left bottombottom,
left top,
color-stop(0,rgba(255,255,255,.5)),
color-stop(.1,rgba(255,255,255,.2)),
color-stop(.85, rgba(0,0,0,.2)),
color-stop(100, rgba(0,0,0,.4))
);
background-image: -moz-linear-gradient(
center bottombottom,
rgba(255,255,255,.5) 0%,
rgba(255,255,255,.2) 10%,
rgba(0,0,0,.2) 85%,
rgba(0,0,0,.4) 100%
);
}

This CSS is for the basic button, without any color. This applies the gradient to the button, using RGBA colors. RGBA allows the developer to set the color, as well as transparency (the A). The white and black in the gradient all has a transparency to it, allowing the solid color below to show through.
In this demo, color is added to the buttons with classes to demonstrate the flexibility. The colors are added using basic hex code to the link:
background: #B80202;
border: #B80202 1px solid
}
.red:hover, .red:focus{
background-color:#e30606
}

Now it's time to add html.
Menu 1
<h2>Light Text</h2>
<ul class="cbdb-menu">
  <li><a href="#" class="red">Better Link</a> </li>
  <li><a href="#" class="green">Big Better Link</a></li>
  <li><a href="#" class="yellow">More Efficient Code</a></li>
  <li><a href="#" class="cyan">Now With More CSS3</a> </li>
  <li><a href="#" class="blue">Link</a></li>
</ul>

Menu 2
<h2>Dark Text</h2>
<ul class="cbdb-menu">
  <li><a href="#" class="red dark">Better Link</a> </li>
  <li><a href="#" class="green dark">Big Better Link</a></li>
  <li><a href="#" class="yellow dark">More Efficient Code</a></li>
  <li><a href="#" class="cyan dark">Now With More CSS3</a> </li>
  <li><a href="#" class="blue dark">Link</a></li>
  </li>
</ul>


View Demo
Labels:

Comments

Post a Comment

Popular posts from this blog

Italics in Html

The italics tags use to highlight the fonts but not like bold it makes your font just like dance a step. These tags are not intended to to style your font. It's use to emphasize your fonts. Code: Italic <i>tag</i>! <em>Emphasized</em> Text! Example: Italic tag ! Emphasized Text! Code: <b>HTML</b> <i>Hyper Text Markup Language</i>  or <b>HTML</b> <em>Hyper Text Markup Language</em> Example: HTML Hyper Text Markup Language or HTML Hyper Text Markup Language Code: <p>Johnson is <b><i>DR.</i></b></p> Example: Johnson is DR.
Post a Comment
Read more

Submit Buttons in Html Forms

Submit buttons are use to submit the forms whenever user registration is needed submit buttons always used. How to make those submit buttons? Just simple you can make submit buttons if you know the <input> tag then make it's type= submit value="some name" just like submit, send etc. Submit Buttons Code: <input type="submit" value="Submit" /><br /> <input type="submit" value="Send" /><br /> <input type="submit" value="Submit Form" /><br /> Submit Buttons Example: Submit Buttons in Action Code: <form method="post" action="mailto:pateltutor1@gmail.com" > Name:<input type="text" name="First" size="12 maxlength="12" /> Email:<input type="text" name="Last" size="24" maxlength="24" /> <input type="submit" value="Send Email" /> </form> ...
Post a Comment
Read more

Reset Buttons in Html Forms

Reset Buttons: Reset buttons are use to reset the forms in Html. Sometime users put wrong information then the users don't be worry of removing whole the fields and fill them again just press the reset button and whole the form back to their original state. That's very useful for the user. Html Code: <input type="reset" value="Reset" /> <input type="reset" value="Start Over" /> Html Code: Reset Button in Action: Now we are giving some action for your understanding what reset button done don't panic we give some form tags and other just visit Forms in Html you will also learn how to make it. Reset Button Code: <form action="xyz.php" method="post"> First Name: <input type="text" size="20" maxlength="12" /><br /> Last Name: <input type="text" size="24" maxlength="24" /><br /> <input type="reset" value=...
Post a Comment
Read more