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

Simple Hit counter

A hit counter will let us know how many times a page is accessed. Incase one visitors loads the page several times, the hit counter willincrease several times (but this is likely to happen only a few times). The code for the hit counter bellow will save the number of hits in afile named counter.txt (the name of this file may be changed). Each time the page is loaded,the file will be read, the number will be increased by one and the newnumber will be saved to the same file. Counter.php <?php //The file where number of hits will be saved; name may be changed;p.e. "/counter_files/counter1.txt" $counterfile = " counter.txt "; // Opening the file; number of hit is stored in variable $hits $fp = fopen($counterfile,"r"); $hits = fgets($fp,100); fclose($fp); //increading number of hits $hits ++; //saving number of hits $fp = fopen($counterfile,"w"); fputs($fp, $hits ); fclose($fp); //printing  hits; you may remove next lin...
1 comment
Read more

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