Posts

Showing posts from May 28, 2012

JQuery and CSS3 Tooltip

JQuery and CSS3 Tooltip Step 1: Insert the following code in the <HEAD> section of your page <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $( document ).ready( function() { var targets = $( '[rel~=tooltip]' ), target = false, tooltip = false, title = false; targets.bind( 'mouseenter', function() { target = $( this ); tip = target.attr( 'title' ); tooltip = $( ' ' ); if( !tip || tip == '' ) return false; target.removeAttr( 'title' ); tooltip.css( 'opacity', 0 ) .html( tip ) .appendTo( 'body' ); var init_tooltip = function() { if( $( window ).width() $( window ).width() ) { pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20; tooltip.addClass( 'right' ); } else tooltip.removeClass( 'right' ); if( pos_top Step 1:...
1 comment
Read more

BEAUTIFUL CSS3 VERTICAL MENU

BEAUTIFUL CSS3 VERTICAL MENU Step 1: Insert the following code in the <HEAD> section of your page <style type="text/css"> .vert_menu { width: 125px; margin: 0; padding: 0; display: block; } .vert_menu ul { display: block; list-style: none; margin: 0; padding: 0; } .vert_menu ul li { display: block; float: left; width: 100%; margin: 0; padding: 0; } .vert_menu ul li a { display: block; margin:2px 0 0; width: 100%; text-transform: uppercase; font-family:arial; font-size:15px; font-weight:bold; color: #FFFFFF; padding:10px 24px; text-align:center; text-decoration: none; -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; box-shadow:inset 0px 1px 0px 0px #bbdaf7; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); fi...
Post a Comment
Read more

CSS DROP DOWN MENU

CSS DROP DOWN MENU Step 1: Insert the following code in the <HEAD> section of your page <style> .top_menu{ border:none; border:0px; margin:0; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; width:100%; } .top_menu ul{ background:#333333; height:35px; list-style:none; margin:0; padding:0; width:66%; -webkit-box-shadow: 0px 0px 3px 0px #000000; box-shadow: 0px 0px 3px 0px #000000; } .top_menu li{ float:left; padding:0px; } .top_menu li a{ border-left:#999 1px solid; color:#cccccc; display:block; font-weight:normal; line-height:35px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; } .top_menu li a:hover, .top_menu ul li:hover a{ background: #2580a2 ; color:#FFFFFF; text-decoration:none; } .top_menu li ul{ background:#333333; display:none; height:auto; padding:0px; margin:0px; border:0px; po...
Post a Comment
Read more

Beautiful css3 button

css3 buttons for to use on your web pages without the need for any images Step 1: Insert the following code in the <HEAD> section of your page <style> .css3_but { -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7; -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7; box-shadow:inset 0px 1px 0px 0px #bbdaf7; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) ); background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5'); background-color:#79bbff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #84bbf3; display:inline-block; color:#ffffff; font-family:arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:1px 1px 0px #528ecc; } .css3_but:hover { background:-webkit-gradient( li...
Post a Comment
Read more