Working with CSS3 Menu

Question

I am presently doing a project with menus and trying to implement something which is the same menu appeared below:

enter image description here

And now I have got which is similar to this menu and trying to modify it but I am stucked with it.

Here is the screenshot of my menu how it looks in chrome: enter image description here

And this is how it looks in IE8 and firefox:

enter image description here

The problem is I am able to get rounded corners but the gloss and the bump over the menu which is shown in 1st menu is not appearing in my menu as it is showing as flat in chrome,IE as well as firefox.So how do I modify in order to get the same menu as shown in 1st figure.

Here is my menu css:

.menu 
{
height: 18px;
margin-left:318px;
margin-top:10px;
width:914px;
border: 1px solid #d6d6d6;
background: #fff;
padding: 14px;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #1612CE;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1612CE), to(#3B91F1));
background: -webkit-linear-gradient(#1612CE, #3B91F1);
background: -moz-linear-gradient(#1612CE, #3B91F1);
background: -ms-linear-gradient(#1612CE, #3B91F1);
background: -o-linear-gradient(#1612CE, #3B91F1);
background: linear-gradient(#1612CE, #3B91F1);
behavior: url(css/ie-css3.htc);
}

.blue {
    background : rgb(52,119,210);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(52,119,210)), to(rgb(34,98,188)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(52,119,210)), to(rgb(34,98,188)));
    border: 1px solid #2f8893;

}

 .blue li a
 {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}


a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

ul 
{
     margin: 0;
    padding: 0;
    z-index: 300;
    text-align:right;
}
li 
{
 padding: 0 10px;
    display:inline-block;
}
li:first-child {
    float:left;   
}

This is how I'm showing it:

<div class="menu blue">
    <ul >
        <li class="active"><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contacts</a></li>
        <li><a href="">Back to Article</a></li>
        <li><a href="">How it Works?</a></li>
    </ul>
   </div>

I've just copy paste your code in a fiddle and it doesn't work jsfiddle.net/zBYsA — ChristopheCVB
– ChristopheCVB, Commented Jan 8, 2012 at 13:25
@Christophe-I have asked yesterday regarding another issue and I have created the fiddle jsfiddle.net/TLS3Y and it worked great. — coder
– coder, Commented Jan 8, 2012 at 13:27

Andres I Perez · Accepted Answer · 2012-01-08 13:53:22Z

2

Try this combination of colors: http://jsfiddle.net/TLS3Y/4/

CSS3 Please! makes all these CSS3 rules so easy :)

.menu {
    border-color: #598FD1 #598FD1 #1A53A2;
    border-style: solid;
    border-width: 2px 1px 3px;
    height: 18px;
    margin-left: 318px;
    margin-top: 10px;
    padding: 14px;
    text-align: center;
    width: 914px;
    background-color: #2A72D8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2A72D8), to(#1A53A2));
    background-image: -webkit-linear-gradient(top, #2A72D8, #1A53A2);
    background-image:    -moz-linear-gradient(top, #2A72D8, #1A53A2);
    background-image:     -ms-linear-gradient(top, #2A72D8, #1A53A2);
    background-image:      -o-linear-gradient(top, #2A72D8, #1A53A2);
    background-image:         linear-gradient(top, #2A72D8, #1A53A2);
    -webkit-box-shadow: inset 0px 0px 9px #2A72D8;
     -moz-box-shadow: inset 0px 0px 9px #2A72D8;
          box-shadow: inset 0px 0px 9px #2A72D8;
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
    behavior: url(css/ie-css3.htc);
}

answered Jan 8, 2012 at 13:53

Andres I Perez

75.5k21 gold badges159 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

coder Over a year ago

llich-Thanks for your suggestions.It worked well and one problem is in IE it looks somethink like blurred.So any thing need to change in IE.

Andres I Perez Over a year ago

@Kiran IE does not support CSS3, you can polyfill your way through a bit like you did with the .htc polyfill in your CSS but it will never look as in the other browsers. You can give CSS3 Pie a chance, it is one of the most complete polyfills i've seen around.

andrei · Accepted Answer · 2012-01-08 13:35:12Z

1

First of all i encourage you to use Lea Verou's http://leaverou.github.com/prefixfree/ which saves you the pain of having to add all those prefixes for different browsers and makes just one linear-gradient declaration

Second you are not using the proper declarations for linear-gradient in webkit. Should be

 -webkit-linear-gradient(rgb(52,119,210),rgb(34,98,188))

This is the shorthand method which you should use since you are not specifying any angles for your gradient This is also available in FF

background: -moz-linear-gradient(rgb(52,119,210),rgb(34,98,188)); /* Firefox */
background: -webkit-linear-gradient(rgb(52,119,210),rgb(34,98,188)); /* Webkit */

For a 3d-er look add box-shadow set on inset

box-shadow:inset 0 1px 0 #fff; // for a nice thing white line at the top of the menu

You can also chain the box-shadow declarations and have

box-shadow:inset 0 1px 0 #fff, 0 2px 5px #222 // thing white line at the top and drop shadow

edited Jan 8, 2012 at 13:35

answered Jan 8, 2012 at 13:29

andrei

8,64014 gold badges53 silver badges68 bronze badges

2 Comments

coder Over a year ago

@andrei-Yeh I don't know actually.I am trying to use css3 gradients for the first time.

coder Over a year ago

@andrei-Thanks for all your suggestions.sure I will try to get something out of it.

Lennart · Accepted Answer · 2012-01-08 13:28:43Z

0

You can emboss the ul using box-shadow:

div.blue {
  box-shadow: 2px 2px 2px #888888;
}

Gradient can be made with linear-gradient. I like the generator at http://gradients.glrzad.com/.

answered Jan 8, 2012 at 13:28

Lennart

1,0482 gold badges12 silver badges29 bronze badges

1 Comment

coder Over a year ago

@Lennart-I have tried using that but it shows me the same way without any emboss effect.And I too liked the link you provided.

Collectives™ on Stack Overflow

Working with CSS3 Menu

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related