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 8 of 8 pages « First < 6 7 8

Hi DD,
Its a really nice css menu.
I am going to use it right now.

Thanks
GetDiscountCoupon.com

Posted by Discount Couopns on 12/06, 02:00 AM

Why are there so many comments about uggs? All I know is that if you are looking to hire a good code designer, I would definitely run Inteligator Background Checks on potential hires first. I had some serious issues with one of my code writers and his sticky fingers. Save yourself the trouble.

Posted by inteligator on 12/06, 08:52 AM

You this passage is too good, I very much agree with your point of view.Newest stylish uggs boots online sale. ugg Caspia
ugg kensington boots
Babolat tennis racquet Export
GOOSE DOWN PARKA Export
sequin uggs save 40-70%,ugg boots sequin christmas clearance.sequin uggs save 40-70%,ugg boots sequin christmas clearance.Thank your bolog.Clearance of the most popular sparkly uggs boots for Christmas and New Year sales,ugg boots sparkle outlet store.Cheap ugg sparkles classic boots on sale discount 50%.Clearance of the most popular sparkle uggs boots for Christmas and New Year sales,uggs sparkle boots outlet store. you and me all choice ugg sparkles.

Posted by uggs sparkle on 12/06, 06:47 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 sequin uggs. uggs outlet in ct. ugg boots online store. sequin uggs on sale. ugg sequin boots. ugg Roslynn. ugg Adirondack. sequined uggs. sequin uggs.ugg boots uk store.ugg boots online store.ugg boots online store.kensington ugg boots sale.ugg boots online store.fake uggs.sparkle uggs.sparkle uggs.sparkle uggs.website!

Posted by uggs sparkle on 12/06, 06:51 PM

谷歌高质量外链命令：ugg boots "Notify me of follow-up comments?" "Submit the word you see below:"
外链按这种格式：

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 sparkly uggs sparkly uggs<strong> sparkly uggs

Posted by uggs sparkle on 12/06, 06:52 PM

Comment Pages 8 of 8 pages « First < 6 7 8

Commenting is not available in this weblog entry.