Round Cornered Navigation Menu without using Image-CSS

Mozilla CSS Extensions is a cool extension for designing attractive website, round corner box is one of the feature which allows you to add rounder corner to a div content or even a list item. I would like to add some of the CSS style using which a stylish Navigation Menu can be designed. This type of menu works fine in browsers like Mozilla Firefox, Opera and Chrome Browser. I have designed some 7 CSS here with id as ishumenu1, ishumenu2 and so on.

Demo

Mozilla CSS Extensions is a cool extension for designing attractive website, round corner box is one of the feature which allows you to add rounder corner to a div content or even a list item. I would like to add some of the CSS style using which a stylish Navigation Menu can be designed. This type of menu works fine in browsers like Mozilla Firefox, Opera and Chrome Browser. I have designed some 7 CSS here with id as ishumenu1, ishumenu2 and so on.

// Style 1
#ishumenu1 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu1 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu1 a {color: #ffffff;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu1 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu1 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px;-moz-border-radius:5px;background: #730948; -webkit-border-radius:5px;}
#ishumenu1 li:hover { background: #b13866;}
#ishumenu1 li:hover a { color: #ffffff;}

// Style 2
#ishumenu2 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu2 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu2 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu2 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu2 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px;-moz-border-radius:5px; -webkit-border-radius:5px;border:1px solid;}
#ishumenu2 li:hover { background: #b13866;}
#ishumenu2 li:hover a { color: #ffffff;}

// Style 3
#ishumenu3 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu3 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu3 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu3 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu3 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px;-moz-border-radius:5px; background: #ffffff;-webkit-border-radius:5px;}
#ishumenu3 li:hover { background: #a7a505;}
#ishumenu3 li:hover a { color: #ffffff;}

// Style 4
#ishumenu4 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu4 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu4 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu4 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu4 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px; -moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #ffffff;}
#ishumenu4 li:hover { border:1px solid #057fa7;}
#ishumenu4 li:hover a { color: #057fa7;}

// Style 5
#ishumenu5 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu5 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu5 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu5 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu5 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;background: #f5a146;-webkit-border-radius:5px; -moz-border-radius: 10px 2px;border-radius: 10px 2px;} #ishumenu5 li:hover { background: #bb660b;}
#ishumenu5 li:hover a { color: #ffffff;}

// Style 6
#ishumenu6 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu6 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu6 a {color: #ffffff;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu6 a:hover {color: #56bb33;display: block;text-decoration: none;}
#ishumenu6 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;background: #047ecc;-webkit-border-radius:5px;}
#ishumenu6 li:hover { background: #8fd0f9;} #ishumenu6 li:hover a { color: #000000;}

// Style 7
#ishumenu7 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu7 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu7 a {color: #ffffff;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu7 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu7 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:0px 0px 10px 10px;-moz-border-radius:0px 0px 10px 10px;background: #047ecc;-webkit-border-radius:5px;}
#ishumenu7 li:hover { background: #8fd0f9;}
#ishumenu7 li:hover a { color: #000000;}

Blogger Page Navigation Hack for colorful Numbering

Page Navigation hack for blogger is really awesome trick to stylish the older post and newer post link with attractive page number buttons. You can easily get the Page Navigation Hack trick in the web. Almost all the sites provide the same style of page numbering. I would like to share some of the CSS design which will really change the style of your Page Navigation. To add these styles. Just replace the CSS of the Page Navigation with the CSS available here. You can select the style with the preview. This style includes Gradient effect without any image and has round cornered edges which give more effect to the button.

The Default Buttons look like this.

/* www.techirsh.tk */
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #9dd53a; /* old browsers */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217),
color-stop(100%,#7cbc0a)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',
endColorstr='#7cbc0a',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #6db3f2; /* old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2),
color-stop(50%,#54a3ee), color-stop(51%,#3690f0),
color-stop(100%,#1e69de)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2',
endColorstr='#1e69de',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #789EB1; /* old browsers */
background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1),
color-stop(100%,#618FA7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1',
endColorstr='#618FA7',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #7d7e7d; /* old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d),
color-stop(100%,#6B6B6B)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d',
endColorstr='#6B6B6B',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #f85032; /* old browsers */
background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c),
color-stop(51%,#f6290c), color-stop(71%,#f02f17),
color-stop(100%,#e73827)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032',
endColorstr='#e73827',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #aebcbf; /* old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a),
color-stop(100%,#0a0809)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',
endColorstr='#0a0809',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #ffb76b; /* old browsers */
background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00),
color-stop(100%,#ff7f04)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b',
endColorstr='#ff7f04',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #9dd53a; /* old browsers */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217),
color-stop(100%,#7cbc0a)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',
endColorstr='#7cbc0a',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #3b679e; /* old browsers */
background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),
color-stop(100%,#7db9e8)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e',
endColorstr='#7db9e8',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #aebcbf; /* old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a),
color-stop(100%,#0a0809)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',
endColorstr='#0a0809',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

Styling 'Contact form 7' Contact form for Wordpress

The 'Contact Form 7' is really an awesome plugin for Wordpress for adding contact form to our wordpress blog and getting mail to our inbox instantly. I guess maximum number of users might be using it in their blog. I thought of making the contact form more stylish and colorful using the CSS3. Styling the contact form is no way difficult. You just need to add the code you get here in the bottom of the css code of Contact Form 7.
looks confusing ??

1. Go to Plugins
2. Click Edit in Contact Form 7
3. Click on contact-form-7/styles.css in Plugin Files list (which is at the right sidebar)

Now add the additional code in the bottom of the codes. You can see some sample contact forms and its code below the image preview

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #000;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),
color-stop(100%,#e5e5e5)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
endColorstr='#e5e5e5',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #000;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #49c0f0; /* old browsers */
background: -moz-linear-gradient(top, #49c0f0 0%, #2cafe3 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#49c0f0),
color-stop(100%,#2cafe3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0',
endColorstr='#2cafe3',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #000;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #ffd65e; /* old browsers */
background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e),
color-stop(100%,#febf04)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e',
endColorstr='#febf04',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #fff;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #a4b357; /* old browsers */
background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357),
color-stop(100%,#75890c)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357',
endColorstr='#75890c',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #09749f;
padding: 6px 6px 6px 8px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #a9e4f7; /* old browsers */
background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7),
color-stop(100%,#0fb4e7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7',
endColorstr='#0fb4e7',GradientType=0 ); /* ie */
}

.wpcf7 input,.wpcf7 textarea {
margin: 4px 0px;
color: #686868;
padding: 6px 6px 6px 8px;
border: 1px solid #5998f7;
outline: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 3px #5998f7;
-o-box-shadow: 0 1px 3px #5998f7;
-webkit-box-shadow: 0 1px 3px #5998f7;
-moz-box-shadow: 0 1px 3px #5998f7;
}

You can request me if you would like to have different design based on your website design.