Free Computer Tutorials In Urdu

Sunday, 28 April 2013

Add Beautiful Drop Down Navigation Menu To Blog

Beautiful Drop Down Navigation Menu To Blog

Drop Down menu is the beauty in a blog's design. It looks pretty much cool when someone hovers the mouse and the list opens.CSS can be used to really jazz up a plain looking link and create an awesome "call to action" button, as in the case of our 3D depressible button here.o overcome a severe limitation of Google Chrome and Safari at the time of writing not supporting CSS3 transitions on pseudo elements, we use the "inherit" technique as described here, so the 3D side of the button is animated when the user presses down on the button.Read All Step Carefully Dropdown menu work Perfect. See Live Demo on our demo blog and check it our Drop Down Animated Effect.

CSS Code

How To Make A Beautiful 3D Depressible Buttons For Website

3D Depressible Button

CSS can be used to really jazz up a plain looking link and create an awesome "call to action" button, as in the case of our 3D depressible button here. It uses CSS2 pseudo element to add a lower 3D side to the link, and CSS3 shadows and transition to complete the look.Note that the default "depth" of the 3D effect is 12px. If you need to increase or decrease this value, change the "12px" value that occurs 3 times in the CSS.

CSS Code

<style>

a.css3dbutton {

background: darkred; /* background color of button */

color: white;

text-decoration: none;

font: bold 28px Arial; /* font size and style */

position: relative;

top: 0; /* anchor main button's position */

bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */

margin-bottom: 12px;

-moz-box-shadow: 0 -15px 5px darkred inset;

-webkit-box-shadow: 0 -15px 5px darkred inset;

box-shadow: 0 -15px 5px darkred inset;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

a.css3dbutton, a.css3dbutton:after {

display: inline-block;

padding: 10px 15px; /* vertical and horizontal padding of button */

-moz-border-radius: 8px/15px;

-webkit-border-radius: 8px/15px;

border-radius: 8px/15px;

outline: none;

}

a.css3dbutton:after { /* pseudo element to construct 3D side of button */

content: "";

position: absolute;

padding: 0;

z-index: -1;

bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */

left: 0;

width: 100%;

height: 100%;

background: #6e0e0c; /* background color of 3D effect */

-moz-box-shadow: 1px 0 3px gray;

-webkit-box-shadow: 1px 0 3px gray;

box-shadow: 1px 0 3px gray;

}

a.css3dbutton:hover {

-moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;

-webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;

box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;

background: #bc3835; /* background color when mouse rolls over button */

}

a.css3dbutton:active {

top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */

bottom: 0;

-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;

-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;

box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;

}

</style>

HTML Code

<a href="#" class="css3dbutton">Sign Up!</a>
<a href="#" class="css3dbutton">Sign In!</a>
<a href="http://allinone789.blogspot.com" class="css3dbutton">More</a>
<a href="http://allinone789.blogspot.com/search/label/CSS%20In%20Urdu" class="css3dbutton">CSS</a>
<a href="http://allinone789.blogspot.com/search/label/Make%20Free%20Website" class="css3dbutton">Make Free Website</a>