Awesome Capsule Type PureCSS3 Menu Widget

Click to Enlarge

How this Menu Works ?

This menu works with Css3. This menu requires Modern browsers for Its Background Support, Because those radial gradients works only with prefixes in some browsers, Though i've added prefixes but still this fails to work, then let me know about them.

Live Demo [ Yellow Only ]

Watch Live Demo of Yellow Menu.

Let's Start

# How to add this to your blog ?
# First open blogger dashboard,
# Navigate to template,
# Click on edit Html,
# find ]]></b:skin>
# If doesn't work Read Adding External CSS Code to Blogger Blog
# Now just above that code Paste Below written CSS code,

.cbtnav
{
width:965px;
margin:0px auto;
padding:10px;
}
.cbtnav li{
  display:inline-block;
}
.cbtnav a
{
  height:30px;
  width:130px;
  background:-webkit-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-moz-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-ms-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  text-decoration: none;
  color: rgb(143, 0, 0);
  text-transform: uppercase;
  display: inline-block;
  text-shadow: -1px 1px 0 rgba(255, 0, 0, 0.14);
  text-align:center;
  font-weight: bold;
  text-align:center;
  border:none;
  border-radius:35px;
  margin: 2px;padding-top:9px;
  -webkit-transition: all 0.12s linear;
  -moz-transition: all 0.12s linear;
  -o-transition: all 0.12s linear;
  transition: all 0.12s linear;
  -webkit-transform: translate3d(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow:0 6px 3px rgba(0,0,0,.3);
}
.red a{
  background:-webkit-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-moz-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
  background:-ms-radial-gradient(top center, rgb(255, 0, 0), rgb(143, 0, 0));
color:yellow;
}
.black a{
  background:-webkit-radial-gradient(top center, black, #B3B3B3);
  background:radial-gradient(top center, black, #B3B3B3);
  background:-moz-radial-gradient(top center, black, #B3B3B3);
  background:-ms-radial-gradient(top center, black, #B3B3B3);
  color:white;
}
.minimal a{
  background:-webkit-radial-gradient(top center, white, #C2C2C2);
  background:radial-gradient(top center, white, #C2C2C2);
  background:-moz-radial-gradient(top center, white, #C2C2C2);
  background:-ms-radial-gradient(top center, white, #C2C2C2);
  color:black;
}
.blue a{
  background:-webkit-radial-gradient(top center, #0047FF, #00E0FF);
  background:radial-gradient(top center, #0047FF, #00E0FF);
  background:-moz-radial-gradient(top center, #0047FF, #00E0FF);
  background:-ms-radial-gradient(top center, #0047FF, #00E0FF);
  color:white;
}
.yellow a{
  background:-webkit-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
  background:radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
  background:-moz-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
  background:-ms-radial-gradient(top center, rgb(255, 255, 0), rgb(255, 169, 0));
}
.cbtnav a:hover
{
opacity:0.8;
}
.cbtnav a:active
{
box-shadow:none;
  -webkit-transform: translate3d(0px, 7px, 0);
  -moz-transform: translate3d(0px, 7px, 0);
   transform: translate3d(0px, 7px, 0);
  -ms-transform: translate3d(0px, 7px, 0);
  -o-transform: translate3d(0px, 7px, 0);
}

# Now save template.

Menu Styles

# This menu has 5 ready styles to use within., Just follow the steps.
# After saving template, navigate to layout, Click add widget, Select html/javascript
# Now copy the below html code with instructions given below.

<ul class="cbtnav yellow">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
<li><a href="#">Link #4</a></li>
<li><a href="#">Link #5</a></li>
</ul>

Now Modify These Things

-+- Change all Yellow background texts with Link location,
-+- Change all red background texts with Link names Respectively.
-+- Change Black background text with Color styles you want in menu [Only Blue,Red, Black, Minimal,Yellow] will be available.

Welldone! You've Made it!

You're done adding the menu, If any problem is there then sure to inform me in comments below.

More about → Awesome Capsule Type PureCSS3 Menu Widget

Stitched Menu With PureCSS3

Click to Enlarge

Live Demo

This menu works with pureCSS3 and styled with stiched borders at top and bottom, You can add this to your blogger blog or website,

Just follow this steps,

Html Code

 <ul class="cbtnav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Help</a></li>
</ul>  

Now Replace Green Lighted text with Link Location and Yellow Lighted text with Link Name(Label).

Now let's give some style to this menu,
I used Custom font in this menu style, add this with css by copying the below code,

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

If you don't want custom font, then you may optout from above step,
Now copy css from below in blogger template(html),

( Above ]]></b:skin>)

.cbtnav

{
  width: 810px;
  margin: 30px auto;
  list-style: none;
  border-top: 1px dashed white;
  border-bottom: 1px dashed white;
  background: #000;
  background-image:linear-gradient(top left, #222,#333,#111,#222,#444);
  padding: 15px 0;
  padding-left: 15px;
  box-shadow: 0 -10px 0 #000, 0 10px 0 #000;
}
.cbtnav li
{
  font-family: 'Open Sans' , sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  width: 130px;
  text-align: center;
  border-right:1px solid #fff;
}
.cbtnav li a
{
  text-decoration: none;
  color: white;
  font-size: 18px;
  transition: .4s;
}
.cbtnav li a:hover
{
  color: greenyellow;
  border-bottom: 1px solid greenyellow;
}
.cbtnav li:nth-child(6)
{
  border:none;
}

Copy the above code in blogger template ( above ]]></b:skin>).
And add the html code where you want to show menu (widget/footer/sidebar widget..)
You're done with Awesome Stitched Navigation Menu.

Query

If you have any query / problem then leave comment here, it will be sort out.

More about → Stitched Menu With PureCSS3