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

moncler jackets are filled with mostly upper white duck down, moncler sale polo shirt, the degree of warmth than fluffy duck down, so Moncler kid's is forever love with mothers. The shape and size of such materials are able to be manipulated to obtain certain softness, durability and water repellency, making these moncler outlet jackets suitable for even winter's rainy days. The Moncler is a brand which provides you with the best quality products that are surely great when you want others to look at you, and they praise your personality and taste in fashion. moncler outlet online offer many style of Moncler jackets for kids, it brings a warm and beautiful winter to the kids. With the development of area, the Moncler has changed for family depends on its material, which is secure and trusted by the world. Moncler online, the online moncler store jacket shop is your ultimate source for wide selection of moncler coats,Moncler men down jackets, which in variety of styles and colors from leading Moncler manufacturers. It is your considerate friend and it is just designed for the family.More and more styles have come out, like Moncler women's jacket, kids, and other accessories. You can buy Moncler clothing once for your whole family because that Moncler offeres the most convenient to you. The stylish moncler jackets sale men, the fashionable Moncler women, the cute Moncler children, all are adding the beauty of the winter. Thousands of varieties are available in winter. But if you have no jacket, it is unendurable in winter.As Moncler jacket, its fashion trend does not have to be limited to your geographic location.
Moncler pas cher doesn't matter where you are in the world you are always being exposed to fashion moncler down. It is not only about following the trends because ultimately each person's unique sense of style defines their own fashion in the end.

Posted by moncler pas cher on 12/04, 10:44 PM

uggs outlet
uggs boots on sale cheap
Ugg Australia outlet
ugg sales
ugg boots cheap prices
UGG boots outlet store offer all kinds of the classic and new style of Uggs, discount Ugg boots for cheap, 100% quality Uggs for shop!

Posted by glitter uggs on 12/04, 10:50 PM

<a >uggs outlet</a>
<a >ugg outlet</a>
<a >ugg outlet store</a>

Posted by uggs on 12/04, 11:19 PM

Uggs Clearance
Uggs On Clearance
Uggs Clearance Sale

Posted by seogo on 12/05, 02:19 AM

how this will work @ html ?

Posted by sarah on 12/05, 05:39 AM

Thank your bolog.Clearance of the most popular sparkle uggs boots for Christmas and New Year sales,ugg boots sparkle outlet store.

Posted by sparkly uggs on 12/05, 07:42 AM

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

Posted by sequined uggs on 12/05, 08:17 PM

thank you

Posted by karwina magtulis on 12/05, 08:48 PM

Top grade (AAA quality,100% original edition ) UGG boots;The great UGG boots in the world including Competitive price, timely delivery to worldwide,and abundant stock,welcome to order!
uggs boots on sale cheap
ugg sales
Ugg Australia outlet
ugg boots cheap prices

Posted by glitter uggs on 12/05, 10:40 PM

Ultraspeed provides managed hosting, Virtual Server Hosting and Cloud Hosting solutions to a broad range of clients from SMEs to FTSE companies.

Posted by UK Dedicated Server on 12/05, 11:47 PM

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

Commenting is not available in this weblog entry.