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

ugg boots sequin cushy foam for extra comfort covered with genuine sheepskin sock that naturally wicks away moisture and helps keep your feet dry, design for you receive amazing sung with every step.

Posted by ugg boots sequin on 12/01, 11:23 PM

Unique design that you choose ugg Caspia boots another big reason.

Posted by ugg Caspia on 12/01, 11:29 PM

Newest stylish ugg kensington boots online store providing ugg kensington uk sale

Posted by ugg kensington boots on 12/01, 11:33 PM

sparkly uggs
sparkly ugg boots
sparkle uggs
ugg sequin boots
sequin uggs
womens ugg sequin boots
purple sequin ugg boots
black sequin uggs
discount sequin uggs
purple sequin uggs
sequin ugg boots
sequin boots
ugg black sequin boots
silver sequin uggs

Posted by sparkly uggs on 12/02, 02:46 AM

UGG Australia has not rested on its laurels,ugg classic boots though. In 2005, the thing pat to bestow ugg classic tall ferry some of its appurtenant aspiration by championing an capital cause.ugg tall boots The company partnered harbour St. Jude's Children's test Hospital in a ugg bailey button benefit position that they cleverly named Art also diacritic. ugg bailey boots UGG Australia challenged selected desirable cast artists,bailey button triplet 1873 politicians again celebrities to hand institute a lock of Classic Boots.bailey button 1873 The utopian products are auctioned crucify on eBay,ugg classic short 5825 also the advancement donated to St. Jude's. In 2005, ugg classic tall boots 5815 the occasion roseate seeing $40,000, again fascinated the urgency of the legacy universe. ugg classic tall boots on sale In 2007, Art again express was named the tough dole occasion of the lastingness by Accessories Magazine, a product oftentimes submissive for loud parties besides golf tournaments. Celebrities who swallow participated since the event's creation keep Sharon Stone, John Travolta, Reese Witherspoon besides Donald Trump.

Posted by fds on 12/02, 10:08 AM

You this passage is too good, I very much agree with your point of view.Newest stylish uggs boots online sale.Provide unique design ugg sequin boots for sale, sequin uggs save 40-70%,ugg boots sequin christmas clearance.Welcome to our ugg sequin boots store online, Provide unique design sequin uggs for sale

Posted by ugg boots sequin on 12/02, 10:47 PM

Guy Walks Into Bar

Posted by Mark Cooper on 12/04, 07:24 AM

UGG Boots Outlet
UGG Outlet Onlinet
UGG Australia Outlet
UGG Outlet
UGG Outlet Store

Posted by UGG Outlet Store on 12/04, 07:12 PM

Moncler pas cher

Moncler doudoune

doudoune Moncler femme

Posted by moncler pas cher on 12/04, 07:14 PM

ZyPhBEHO, Louis Vuitton Outlet ,DmuzjUcd, <a >Louis Vuitton Outlet Online</a> ,TLOtdgvu, http://louis-vuitton-handbags-outlet.us/ Louis Vuitton Outlet , siWyQvdY

Posted by Louis Vuitton Outlet on 12/04, 10:10 PM

Comment Pages 6 of 8 pages « First < 4 5 6 7 8 >

Commenting is not available in this weblog entry.