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

Manipulating WW2 Fire AirCraft

In this tutorial we will be learning some indispensable techniques to use for any type of photo-manipulation. We will be doing this by taking a photograph of a model plane and editing it to to look like a photograph of a WW2 spitfire which has just been shot down and is on fire. The techniques used here are the same for any type of 'destruction' photo-manipulation. Below is the link you will learn how to create. In the second part of this tutorial we will go on to use this image in a movie poster/DVD cover design View Tutorial
Post a Comment
Read more

Beginner Html Lesson 2

In the previous lesson we just copy a code and paste it. In this lesson we will guide you through rest of the things what is that let's talk more. We made a webpage with something very weird for beginner don't worry go ahead. <html> : This is the essential thing for any web page and also closing tag </html>. Between these codes we add some more codes <head> </head> , <body> </body> between the body code actually body itself saying that i am body of your webpage. What Head tags containg (<head> </head>) ? Basically head tags contains following <title> <base> <link> <meta> <script> <styles>  What Body tags contains (<body> </body>) ? And a body tags contains anything like your bolded text , your content of any type.Paragraphs , Headings anything. I hope you understand.
Post a Comment
Read more

Beginner Html Lesson 1

Beginners Html Tutorial What is Html? You see a lot of webpages and websites which have many things and you think how it's made so let me explain you. Whenever a webpage made then it's done that some one coded that page with some coding and that coding is Html. How to make your first Webpage? Note: Before this remember whenever any tag start then it's end too like "<html>" this is a starting tag and ending tag is "</html>" this is the difference that it end with a slash. <html> <head> </head> <body> My First Web Page. </body> </html>  Just copy the above code and paste this code in a text file then save it but saved it as "name.html" (with out quotes ") whenever you place a .html while saving the document then it saved as a webpage. Now go to the place where you save "name.html" and double click it. It will open in a web browser. Yes you made it. Brief Description: What is tag ? A ...
Post a Comment
Read more