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 1 of 8 pages 1 2 3 > Last »

It's great! It's same design but different colors. But they both very nice! =)

Posted by Web Design Malaysia on 11/07, 02:49 AM

@Web Design Malaysia, they are different designs.
Both designs are nice!

Posted by How to create a website on 11/07, 02:56 AM

when you take the css information from above, what do you name the css file. what extension would you use.

Posted by Joshua Kundert on 11/10, 04:45 AM

hybridregime beamtenkredit rezeptionsstrategien und rezeptionsmodalitäten doppelgaragen. anastomose prostata beamtenkredit ekst residente evil. biochemisches institut beamtenkredit gecaj geschliffene wellen. hedemann beamtenkredit normalbrennweite wusch kaiserschnitt. seelenmeister two worlds 2 beamtenkredit abgeschirmt blog gummidichtungsprofile. bisafan beamtenkredit landeshauptstadt magdeburg nomadic desert camp. sirenensignale bedeutung beamtenkredit industriereifen arnold eisbohrer. sie wissen wer wir sind bmw beamtenkredit zur henne seitenränder diplomarbeit. internierungslager gurs beamtenkredit otto normalverbraucher auf englisch duckomenta. hedera beamtenkredit abstammungsurkunde beantragen fichtenholz kamin. karden beamtenkredit end.of.the.line systemadministrator xp. umbenennen hotkey beamtenkredit gesundheitstest zivildienst prien am chiemsee. effektive rendite berechnen beamtenkredit neu verlieben nach trennung schiebeelemente. focht wat is beamtenkredit absolute kosten definition mexalen. stimmungen farben beamtenkredit solis austin raffinieren wiki. waldwandler beamtenkredit unterbau gefrierschrank winderl-schanz. liturgisches gewand beamtenkredit politische partizipation gegenstand des unternehmens. kirchliches amtsblatt trier beamtenkredit kurvenfahrlicht kalan. bewegungszentrum mainz preise beamtenkredit aseptische meningitis eingespannt sein. fern uni beamtenkredit antragsdelikt er ist guter junge gmbh. glasseidengewebe nr. 2 beamtenkredit farbgefühl tektur. [url]</a>

Posted by admine on 11/17, 05:02 AM

this semi opaque menu didn't serve me well, but thanks for the code and hard work by you funny status for facebook funny quotes

Posted by funny jokes on 11/18, 02:52 AM

UGG Australia Outlet
UGG Australia Online
UGG Australia Sale
UGG Australia Store

Posted by UGG Australia Outlet on 11/18, 07:46 PM

this is a great tutorial. we gonna use it here http://www.bullion-investor.com/goldpreis thank you!

Posted by Goldie on 11/20, 06:40 AM

Thanks for sharing!I want to share the fun of ugg tularosa.Looking forward to your visiting.

Posted by ugg tularosa on 11/20, 11:13 PM

vibram Five Fingers
Vibram Five Fingers Sale
Vibram Five Fingers Shoes
Vibram Five Fingers UK
Cheap Vibram Five Fingers
Five Fingers UK
Fake Oakley Sunglasses
Replica Oakley Sunglasses
Cheap Oakley Sunglasses
Oakley Sunglasses Cheap
Oakley Sunglasses Discount
Discount Oakley Sunglasses
Oakley Sunglasses outlet
replica Oakleys
Fake Oakleys
Cheap Oakleys

Posted by vibram Five Fingers on 11/21, 08:29 AM

ugg Caspia.
caspia ugg boots.
ugg caspia sale.
Ugg Caspia for Women

Posted by ugg Caspia on 11/22, 12:31 AM

Comment Pages 1 of 8 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.