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

Newest vibram five fingers shoes is coming,with the fashion style,vibram five fingers komodosport become the newest darling in sport shoes' world.Among vibram five fingers shoes,vibram five fingers komodosport shoes is the only model that has a removable insole or footbed.If you only like running or walking with vibram shoes,the vibram five fingers speed and vibram five fingers bikila shoes must be best for you.If you want to do water sport,the vibram five fingers sprint,vibram five fingers kso and vibram five fingers flow must be your best choice.May be you are a people who want to travel,i think the vibram five fingers classic and vibram five fingers kso trek shoes must be your first choice.You can do everything with the vibram five fingers shoes,it likes your friends,you cann't leave it.So you must have it.Please coming to our cheap vibram five fingers shop,there have all kinds of vibram five fingers men and vibram five fingers women shoes,with the fashion styles,colors,and full size.If you coming in,you can find shopping online is a happy things,that you can find your love shoes and give the happiness and warm to your family and your friends.Welcome to our website to get full in the end!Having good time!<a >http://www.cheaptoeshoes.com/images/Women Komodo Sport Black Grey.jpg</a>

Posted by vibram five fingers on 11/27, 11:23 PM

ugg boots have become a fashion trend throughout the whole world over years.Now looking for one boots that fashion is easy,but not all the fashion boots are warm and cozy.I am sure only the uggs boots can meet all the requirements of us.In order to have a good time in winter,you need to buy a pair of ugg boot for yours.Now shopping online can help you to save much money and times.Shopping online,choose our ugg boots outlet store must be the smart choice!All of our cheap ugg boots are made of 100% sheepskin,different style,different colors,full size,ready to meet the different requirements from our customers.Now start a shopping trip from here!<a >http://www.stylishuggboot.com/images/samples/Cheap UGG Ultra Short 4.jpg</a>

Posted by cheap ugg boots sale on 11/27, 11:24 PM

uggs outlet
uggs outlet stores
ugg outlet stores
ugg outlet

Posted by uggs outlet on 11/28, 12:46 AM

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 ugg sequin boots on 11/28, 02:42 AM

This article is very good, I like it,and I also really like sequined uggs very much.

Posted by sequined uggs on 11/28, 05:52 AM

Posted by ugg boots sequin on 11/28, 06:59 AM

You are blog is too good,I hope to share more with you.Welcome to our ugg sequin boots store online, Provide unique design sequin uggs for sale,All ugg boots on sale 45-75%.hot selling in the Christmas.

Posted by sequin ugg on 11/28, 07:18 AM

I agree with your statement.Have time to look at sequin uggs,thank you!

Posted by sequin uggs on 11/28, 08:31 PM

Your article is really helpful to me.thanks!I think we can talk about ugg sequin boots.

Posted by ugg sequin boots on 11/28, 08:35 PM

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,All ugg boots on sale 45-75%.hot selling in the Christmas.

Posted by sequin uggs on 11/29, 04:11 AM

Comment Pages 4 of 8 pages « First < 2 3 4 5 6 > Last »

Commenting is not available in this weblog entry.