Posts

BOXED WIDTH ANIMATION

Step 1: Insert the following css code in the <HEAD> section of your page <style type="text/css"> body { background:#000; overflow:hidden; margin:0; padding:0; } .container { width:1000px; height:500px; margin:5% auto 0; padding:20px; background:#CCC; } .left-panel { background:#319400; width:780px; height:500px; float:left; margin:0 20px 0 0; padding:0; text-align:center; position:relative; transition-property: background; transition-duration: 1s; transition-timing-function: linear; } .left-panel:hover { background: #ff7b29; } .right-panel-visible { background:#0065e2; width:200px; height:500px; float:left; margin:0; padding:0; } .right-panel-hidden { background:#00a27a; width:475px; height:500px; float:left; margin:0; padd...
1 comment
Read more

Custom Tool Tip

Step 1: Insert the following css code in the <HEAD> section of your page <style type="text/css"> .bubbleInfo { float:left; width:100%; height:50px; position:relative; } .red { background:#FF0000 !important; } .trigger { position: absolute; } /* Bubble pop-up */ .popup { position: absolute; display: none; z-index: 50; border-collapse: collapse; background:#0000FF; width:250px; height:200px; left:350px !important; top:0px !important; } .main-div { width:350px; height:800px; margin:0 auto; position:relative; background:#333333; } </style> Step 1: Insert the following JS code in the <HEAD> section of your page <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(function () { $('.bubbleInfo').each(function () { ...
Post a Comment
Read more

Menu With Rounded Corners In CSS

Image
Step 1: Insert the following code in the <HEAD> section of your page <style type="text/css"> #menu { float: left; padding: 0px 10px; margin: 0px; border-bottom: 5px solid #05480a; } #menu li { display: inline; list-style: none; margin: 0px; padding: 0px; } #menu li a { float: left; color: #000000; text-decoration: none; background: url('menuleft.gif') top left no-repeat; margin: 0px 1px; padding: 9px 0px 6px 10px; } #menu li a span { background: url('menuright.gif') top right no-repeat; padding: 9px 25px 6px 15px; } #menu li a:hover, #menu li a.highlight { background: url('menuleft-hl.gif') top left no-repeat; color: #ffffff; } #menu li a:hover span, #menu li a.highlight span { background: url('menuright-hl.gif') top right no-repeat; } </style> Step 2: Insert the below sample code into the <BODY> section of your page: <ul id="menu"> <li><a href=...
Post a Comment
Read more

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