Dynamic Drive CSS Library- CSS3 Semi Opaque Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

CSS3 Semi Opaque Menu

Author: Dynamic Drive

Linear gradient backgrounds in CSS3 lets you add a graduating background to any element on the page. It's supported in FF3.6, Safari 2+ and Google Chrome. In IE9 (which currently doesn't support CSS3 Linear Gradients), SVG is used to create a similar look while IE gets its act together. With that said, this menu takes advantage of CSS3 gradient background to produce a menu with a semi opaque rollover effect. Whatever the solid background color of the main UL behind it, the menu item's background peeks through. Peek-a-boo!

The CSS:

<style type="text/css">

div.bottombar{ /* bar that runs across the bottom of the menu */
height: 10px;
background: #1a1109;
}

ul.semiopaquemenu{ /* main menu UL */
font: bold 14px Georgia ;
width: 100%;
background: #b1e958;
padding: 11px 0 8px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}

ul.semiopaquemenu li{
display: inline;
}

ul.semiopaquemenu li a{
color:black;
padding: 6px 8px 6px 8px; /* padding of the 4 sides of each menu link */
margin-right: 15px; /* spacing between each menu link */
text-decoration: none;
}

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: black;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* IE9+ SVG equivalent  of linear gradients */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 12px; /* large padding to get menu item to protrude upwards */
padding-bottom: 20px; /* large padding to get menu item to protrude downwards */
}

</style>

The HTML:

<ul class="semiopaquemenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="selected">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
<div class="bottombar"></div>

Code Info

Rate this code:

Date Posted: 11/07/2011

Revision History: None

Usage Terms: Click here

Your Comments (75)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 3 of 8 pages < 1 2 3 4 5 > Last »

In cold winter, most people are considered warm, and easy action. ugg kensingtonvery famous professional keep warming around the world.

Posted by ugg Slippers on 11/25, 11:28 PM

Hello, you published a tennis point of view is pretty good, I like tennis, we can exchange this is my home. Best tennis racket head tennis rackets UGG boots clearance sale Ugg sequin boots sequin uggs ugg Bailey Button ugg kensington ugg Slippers

Posted by ugg Slippers on 11/25, 11:30 PM

Your writing is good, I am a fan. See what you are writing, I see more. Want to know

more about the more thorough enter [url="http://www.ugg-sequinboots.net/"

title="sequined uggs"] sequined uggs[/url].website!

Posted by sequined uggs on 11/25, 11:32 PM

Your writing is good, I am a fan. See what you are writing, I see more. Want to know more about the more thorough enter sequined uggs.website!

Posted by sequined uggs on 11/26, 12:14 AM

ugg boots "Notify me of follow-up comments?" "Submit the word you see below:"

Posted by ugg tularosa on 11/26, 12:58 AM

QFGPfeSC, Ugg Sale Clearance ,xvJMElVb, <a >Ugg For Sale</a> ,VyRgolnk, http://on-sale-uggs-boots.com/ Ugg Sale Uk , EIxWoleK

Posted by Ugg On Sale on 11/26, 03:38 PM

The Kensington boots with the warmer and comfortable design is a for match motorcycle. such as your come expect from UGG® surface layer is plush leather fully lined with genuine sheepskin, has buckle detail and signature UGG® logo on the heel of the metal hardware. Is the real sheepskin insole, EVA molded rubber soles are the best durability and traction POD insert. Newest stylish ugg kensington boots online store providing ugg kensington uk sale,discount 40-50%,free shipping.

Posted by ugg kensington boots on 11/26, 11:37 PM

ugg Caspia
ugg kensington boots
Moncler kids
Moncler jassen
doudoune moncler
doudoune moncler pas cher
cheap moncler jackets
moncler jackets online shop

Posted by ugg Caspia on 11/26, 11:51 PM

I couldn't make it work on IE and I don't ge the black sidebar at the bottom for some reason... Any ideas?

Posted by E on 11/27, 06:03 PM

You this passage is too good, I very much agree with your point of view.An update to a favorite silhouette, the ugg Caspia is one of our new surf-inspired boots. Wrapped lacing gives this causal boot some edge while staying true to its surf roots. A molded rubber outsole and sheepskin lined uppers make the Surf Collection one of our most comfortable collections.Unique design that you choose ugg Caspia boots another big reason.

Posted by ugg Caspia on 11/27, 08:08 PM

Comment Pages 3 of 8 pages < 1 2 3 4 5 > Last »

Commenting is not available in this weblog entry.