I need to move this navigation menu above the content box and below the logo. In other words, the order should be: (1) logo, (2) menu, and (3) content box.
I tried various margin adjustments to the CSS for #navigation to no avail.
How do I do this?
URL: http://ec2-174-129-169-80.compute-1.amazonaws.com/
See screenshot:
You could add top: -57px; to your #navigation CSS like so:
#navigation {
position: relative;
top: -57px;
clear: both;
margin-bottom: 3em;
display: none;
font: 14px/14px sans-serif;
border: 1px solid #D9D9D9;
background: white;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(whiteSmoke));
background: -webkit-linear-gradient(white, whiteSmoke);
background: -moz-linear-gradient(center top, white 0%, whiteSmoke 100%);
background: -moz-gradient(center top, white 0%, whiteSmoke 100%);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Make a jsFiddle or post your code please. Without seeing code, first thoughts are that you put the #navigation in the content area. If that's the case, then:
#navigation { margin-top: -50px; }
If #navigation is absolutely positioned:
#navigation { top: -50px; }
Related
I'm trying to create Tabbed Contents with some border and shadows.
This is slightly different from on questions in that I'm trying to create shadows. Additionally, the whole area of the tab should be clickable. Basically a complex div inside an anchor tag in a li
Attempt 1
Used a square box and rotated it with two border widths visible.
What I have now:
What I am wishing to obtain when a tab is opened/active (using CSS only):
Attempt 2
Used a right pointing triangle after every li element.
Positioned it just before next li element
Failed at the white padding in between (that could be fixed with margin between two li) but could not find a possible solution for shadow.
Attempt 3
Positioned colored right pointed triangle after an element
Positioned white triangle behind it and :before the next li element.
Shadows scared me this time.
So basically the problems are the tail of next li element and the shadow of the chevron of current element.
Demo of Attempt in Stack Snippets
.my-tabs {
width: 100%;
margin: 10px 0 !important;
display: flex;
overflow: hidden;
position: relative;
z-index: 100;
padding-top: 10px;
}
.my-tabs li a {
padding: 15px 20px 15px 50px;
background: #ff5050;
display: block;
height: 56px;
}
.my-tabs li {
display: block;
width: 20%;
font-size: 1.1em;
margin: 0;
}
.my-tabs li:last-child:after {
border-top: 28px solid #fff;
border-left: 28px solid transparent;
margin-right: 0;
border-style: solid;
border-right: 0;
border-bottom: 28px solid #fff;
content: '';
height: 0;
float: right;
margin-top: -56px;
transform: none;
width: 0;
}
.my-tabs:after {
border-left: 40px solid #ff5050 !important;
margin-top: 1px;
margin-left: -2px;
}
.my-tabs li:after {
margin-right: -7px;
border-style: solid;
border-width: 4px 4px 0 0;
border-color: white;
content: '';
height: 43px;
float: right;
margin-top: -43px;
transform-origin: center top;
transform: rotate(45deg);
width: 43px;
}
.my-tabs li.active:after {
-webkit-box-shadow: 8px 0px 4px -3px #090A09;
-moz-box-shadow: 8px 0px 4px -3px #090A09;
-o-box-shadow: 8px 0px 4px -3px #090A09;
box-shadow: 8px 0px 4px -3px #090A09;
}
.my-tabs li.active {
border-bottom: 8px solid white;
}
.my-tabs li.active a {
-webkit-box-shadow: 0px 8px 4px -3px #090A09;
-moz-box-shadow: 0px 8px 4px -3px #090A09;
-o-box-shadow: 0px 8px 4px -3px #090A09;
box-shadow: 0px 8px 4px -3px #090A09;
}
<ul class="my-tabs">
<li id="gtab0" class="">tab1</li>
<li id="gtab1" class="">tab2</li>
<li id="gtab2" class="active">tab3'</li>
<li id="gtab3" class="">tab4</li>
<li id="gtab4" class="">tab5</li>
</ul>
Here is a live demo for your need.
Just before, some notes:
You need to wrap the text inside the arrows in div like this: <div>Tab 1</div> because the div is hide the :after element box-shadow. (To understand this, try to unwrap the div.
You need to set their z-index in descending order, so the first one hides the second and so on. (I believe that there are no many arrows so I took a guess to maximum 5)
I added a :hover transition to the box-shadow so you can see how to do this if you want.
After the talks, here is the real thing:
ul {
list-style:none;
padding:0;
margin:0;
}
li {
display:inline-block;
background:#2980b9;
color:#fff;
position:relative;
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.5);
transition:all .3s ease;
cursor:pointer;
}
li:after {
content: "";
position: absolute;
top: 0;
right: -14px;
height: 26px;
width: 26px;
background: inherit;
transform: translateY(6px) rotate(45deg);
box-shadow: 2px 1px 3px 0 rgba(0,0,0,0.5);
transition:all .3s ease;
}
li:nth-child(1) {
z-index:5;
}
li:nth-child(2) {
z-index:4;
}
li:nth-child(3) {
z-index:3;
}
li:nth-child(4) {
z-index:2;
}
li:nth-child(5) {
z-index:1;
}
li:hover {
box-shadow: 0 2px 1px 0 rgba(0,0,0,0.3);
}
li:before:hover {
box-shadow: 2px 1px 1px 0 rgba(0,0,0,0.3);
}
li.active {
background:#c0392b;
}
li div {
background:inherit;
padding:10px 20px;
position:relative;
z-index:1;
}
<ul>
<li><div>Tab 1</div></li>
<li class="active"><div>Tab 2</div></li>
</ul>
http://jsbin.com/fedepe
Update
The other option to create this shape is using SVG.
Just note that this is a quick and dirty solution. With svg you can't say "I can't do this". Just take this code, play with it, until you will get the exact result that you want.
I'm using the use (info) tag so you don't need to duplicate many (svg) code to each of the items.
I'm using filter:drop-shadow for the shadow (obviously, info).
You can edit this shape using apps like Adobe Illustrator or similar.
* {
color:#fff;
}
ul {
list-style:none;
padding:0;
margin:0;
}
li {
position: relative;
padding: 10px 50px 10px 25px;
float: left;
}
svg {
position:absolute;
left:0;
top:0;
height:100%;
z-index:-1;
-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}
use.reg {
fill:red;
}
use.active {
fill: blue;
}
.hidden {
display:none;
}
li:first-child {
z-index:1;
}
<svg class="hidden" xmlns="http://www.w3.org/2000/svg" width="148.978px" height="41.791px" viewBox="0.522 375.104 148.978 41.791">
<defs>
<g id="aa" transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)">
<path d="M5.225-1766.523c0-2.09,81.318-2.432,590.644-2.432h590.82c0,0,298.311,205.298,298.311,209.653
c0,4.351-292.207,204.253-292.207,205.645c0,2.266-74.014,2.612-593.789,2.612c-451.167,0-593.779-0.522-593.779-2.09"/>
</g>
</defs>
</svg>
<ul>
<li>
Item 1
<svg viewBox="0.522 375.104 148.978 41.791">
<use class="reg" xlink:href="#aa"></use>
</svg>
</li>
<li>
Item 2
<svg viewBox="0.522 375.104 148.978 41.791">
<use class="active" xlink:href="#aa"></use>
</svg>
</li>
</ul>
http://jsbin.com/texasu
If you have some time to spend, you could relay on background linear gradient and rgba colors hover a single texture: demo
sample of snippet below:
.active {
background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%
}
ul {
background: url(http://lorempixel.com/500/52/abstract/4);
overflow: hidden;
border-bottom:3px solid transparent;
padding:0 0 3px 0;
margin:1em;
background-clip:content-box;
}
ul:before {
content:'';
height:1.9em;
display:inline-block;
border-right:solid white;
position:relative;
vertical-align:top;
}
li {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
vertical-align: top;
text-align: center;
min-width: 70px;
padding: 0.25em 2em 0.25em 1.5em;
border: 2px solid white;
border-right: none;
border-left: none;
}
li:before {
content: '';
padding: 0.7em;
margin: -0.25em -2.75em -0.5em 2em;
border: solid white;
border-left: none;
border-bottom: none;
float: right;
transform: rotate(45deg);
border-radius: 2px;
/* ? */
}
li:first-of-type {
margin-left: -1em;
}
.active {
background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%;
box-shadow:0 2px 2px black;
}
.active:before {
background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 255, 0.5) 56%);
box-shadow:3px 0px 2px black;
}
li:last-of-type {
background: linear-gradient(-310deg,transparent 0.75em, rgba(200, 0, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(200, 0, 0, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%
}
li:last-of-type:before {
background: linear-gradient(45deg, transparent 56%, rgba(200, 0, 0, 0.5) 56%)
}
li:hover {
background: linear-gradient(-310deg,transparent 0.75em, rgba(0, 100, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 0, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%;
box-shadow:0px 2px 2px black;
}
li:hover:before {
background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 0, 0.5) 56%);
box-shadow:3px 0px 2px black;
}
a {
color:#12374B;
font-weight:bold;
text-shadow:0 0 1px white;
font-variant:small-caps;
}
body {
background:#777;
}
<ul>
<li class="active">Qualify</li><li>
Develop</li><li>
Propose</li><li class="active">
Qualify</li><li>
Close</li>
</ul>
with nav + a
nav {
background: url(http://lorempixel.com/500/52/abstract/4);
overflow: hidden;
border-bottom:3px solid transparent;
padding:0 0 3px 0;
margin:1em;
background-clip:content-box;
white-space:nowrap; /* keep it on a single line */
}
nav:before {
content:'';
height:1.9em;
display:inline-block;
border-right:solid white;
position:relative;
vertical-align:top;
}
a {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
display: inline-block;
vertical-align: top;
text-align: center;
min-width: 70px;
padding: 0.25em 2em 0.25em 1.5em;
border: 2px solid white;
border-right: none;
border-left: none;
}
a:before {
content: '';
padding: 0.7em;
margin: -0.25em -2.75em -0.5em 2em;
border: solid white;
border-left: none;
border-bottom: none;
float: right;
transform: rotate(45deg);
border-radius: 2px;
/* ? */
}
a:first-of-type {
margin-left: -1em;
}
.active {
background: linear-gradient(-310deg, transparent 0.75em, rgba(0, 100, 255, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 255, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%;
box-shadow:0 2px 2px black;
}
.active:before {
background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 255, 0.5) 56%);
box-shadow:3px 0px 2px black;
}
a:last-of-type {
background: linear-gradient(-310deg,transparent 0.75em, rgba(200, 0, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(200, 0, 0, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%
}
a:last-of-type:before {
background: linear-gradient(45deg, transparent 56%, rgba(200, 0, 0, 0.5) 56%)
}
a:hover {
background: linear-gradient(-310deg,transparent 0.75em, rgba(0, 100, 0, 0.5) 0.75em) top left no-repeat, linear-gradient(125deg, transparent 0.5em, rgba(0, 100, 0, 0.5) 10px) bottom left no-repeat;
background-size: 100% 50%, 100% 50%;
box-shadow:0px 2px 2px black;
}
a:hover:before {
background: linear-gradient(45deg, transparent 56%, rgba(0, 100, 0, 0.5) 56%);
box-shadow:3px 0px 2px black;
}
a {
color:#12374B;
font-weight:bold;
text-shadow:0 0 1px white;
font-variant:small-caps;
}
body {
background:#777;
}
<nav>
Qualify<!-- white space can be killed here or else where if this method is not apprpriate to your coding
-->Develop<!--
-->Propose<!--
-->Qualify<!--
-->Close
</nav>
I have problem with my css code, I'm trying to put an image in a button, but the image goes down and not in the rigth side as I want.
What I need is that my image calendar to be in the same level as the text, I need this to be done in only one div, I know how to do it with two separate divs, but this is not the case, pelase help.
here is my code:
#import url("http://fonts.googleapis.com/css?family=Maven+Pro");
.date_Button {
height: 48px;
width: 150px;
font: bold 16px/48px arial;
margin: 20px 20px 20px 20px;
position: relative;
}
/* ===============================
========= GREY STYLE ==========
===============================
================================================== */
.grey-button-date:first-child {
/* styling for the left part */
padding-top: 10px;
width: 100px;
height:40px;
text-align: center;
/* border radius */
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#c6c6c6));
background: -moz-linear-gradient(#fbfbfb, #c6c6c6);
background-color: #ccc;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
.date_Button:hover .grey-button-date:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
background-color: #ddd;
}
.date_Button:active .grey-button-date:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
background: -moz-linear-gradient(#d5d5d5, #fafafa);
background-color: #fbfbfb;
}
.date_Button:hover .grey-button-date {
background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
background-color: #ddd;
}
.date_Button:active .grey-button-date {
background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
background: -moz-linear-gradient(#d5d5d5, #fafafa);
background-color: #fbfbfb;
}
.grey-button-date a {
/* link styling */
color: #333;
font: bold 16px/32px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
<h3>Date</h3>
<div class="date_Button">
<div class="grey-button-date">
09/02/15<img width="50px" src="calendar-03.svg">
</div>
</div>
You've defined a width and height for your grey-button-date. The image can't fit inside. Try removing your height:
.grey-button-date:first-child {
/* styling for the left part */
padding-top: 10px;
width: 100px;
text-align: center;
See this JSFiddle.
You also might want to look into putting the entire grey-button-date inside your <a> tag.
I want to create similiar page to this. Especially I am interesed in that image with a flag. I tried to make something similiar to that and this is what I already managed to do: Fiddle.
Html:
<div id="logo"> <img src="http://s20.postimg.org/9sr84gnw9/logo.png" alt="logo"></img>
<ul id="navbar">
<li>Maršrutai
</li>
<li>Nuotraukos
</li>
<li>Apie mane
</li>
<li>Dviračiai
</li>
<li>Kontaktai
</li>
</ul>
<div id="header">
<h1>MARŠRUTAI</h1>
</div>
<div id="content"></div>
CSS:
body {
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
background-color: #282828;
background-size: 16px 16px;
}
#header {
background-image:url(http://s20.postimg.org/gcpvgfth8/header.jpg);
position: fixed;
width: 100%;
height:150px;
text-align:center;
text-top:50%;
color: white;
top:70px;
left:0;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
padding: 50px 0;
}
#content {
width:100%;
height:100%;
position: absolute;
top:351px;
/*bacground gradients: http://lea.verou.me/css3patterns/# */
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
background-color: #282828;
background-size: 16px 16px;
left:0;
bottom:0;
}
#logo {
position:fixed;
}
ul {
text-shadow: 0px 2px #444;
font-size: 20px;
padding: 0;
list-style: none;
text-align: center;
display: table;
margin: 0 auto;
position: fixed;
left: 32%;
right: 25%;
top:15px;
}
ul li {
position: relative;
margin: 0;
padding: 0;
display: inline-block;
}
li ul {
display: none;
}
ul li a {
display: inline-block;
text-decoration: none;
color: #eee;
padding: 5px 0;
white-space: nowrap;
margin: 5px;
vertical-align: middle;
text-align: center;
border: 1px solid transparent;
}
ul li a:hover {
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
-moz-border-radius: 5px;
border-radius: 5px;
color: #CACACA;
As you can see, when you scrool down, content div with pisition:absolute, covers all other divs with position:fixed. But I want that when you scrool down, content div would cover just header div and logo and ul would stay on top of everything. Just like in this page.
I'm not sure that I'm doing it right because I'm newbie at creating html. Is there any other way to make something like that?
Just use an higher z-index on your logo and nav and it will work as you wish.
I am trying to fit a image into div but something going wrong, actualy i just want when i set a image into div it should not affect the div property.
i am trying like this:
#image_try {
background-color: white;
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
float: right;
border: 2px;
color: #FF0000;
overflow: hidden;
width: 164px;
display: table;
margin: 0 auto;
padding: 78px 31px 7px 233px;
background: #FFFFFF;
height: 79px;
margin-top: -174px;
margin-right: 25px;
background-image:url(images/weather.jpg) no-repeat;
}
updates:
Actualy when i did not set image in background then div looks like good but when i am setting image its height and width being affected
any idea... answer will be fully appreciate...thank you
I can see few dupe in your css like for background, you using color twice also you are setting it to gradient for Chrome and Firefox. You are repeating margin too. As far as i can under stand your problem was with padding. I removed that only. Kindly check the css and provide screenshot if possible.
#image_try {
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
border: 2px;
color: #FF0000;
width: 164px;
height: 79px;
background-image:url(images/weather.jpg) no-repeat;
}
Try above edited answer
I am presently doing a project with menus and trying to implement something which is the same menu appeared below:
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:
And this is how it looks in IE8 and firefox:
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">Home</li>
<li>About</li>
<li>Blog</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contacts</li>
<li>Back to Article</li>
<li>How it Works?</li>
</ul>
</div>
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);
}
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
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/.