tag:blogger.com,1999:blog-51185766914041805402026-08-11T14:34:47.274+05:30varun harikumar , 9496369142 , Custom Web Tutorials, UI Developervarun harikumar , 9496369142 , Custom Web Tutorials, UI Developervarun harikumarhttp://www.blogger.com/profile/07750584912488895543noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-5118576691404180540.post-24697563485274319592014-09-08T12:49:00.003+05:302014-09-08T13:23:52.528+05:30BOXED WIDTH ANIMATION<div dir="ltr" style="text-align: left;" trbidi="on"> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight: bold;">Step 1: Insert the following css code in the <i>&lt;HEAD&gt;</i> section of your page</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding: 20px;"> <p>&lt;style type=&quot;text/css&quot;&gt;<br /> body<br /> {<br /> background:#000;<br /> overflow:hidden;<br /> margin:0;<br /> padding:0;<br /> }</p> <p>.container<br /> {<br /> width:1000px;<br /> height:500px;<br /> margin:5% auto 0;<br /> padding:20px;<br /> background:#CCC;<br /> }</p> <p>.left-panel<br /> {<br /> background:#319400;<br /> width:780px;<br /> height:500px;<br /> float:left;<br /> margin:0 20px 0 0;<br /> padding:0;<br /> text-align:center;<br /> position:relative;<br /> transition-property: background;<br /> transition-duration: 1s;<br /> transition-timing-function: linear;<br /> }</p> <p>.left-panel:hover {<br /> background: #ff7b29;<br /> }<br /> </p> <p>.right-panel-visible<br /> {<br /> background:#0065e2;<br /> width:200px;<br /> height:500px;<br /> float:left;<br /> margin:0;<br /> padding:0;<br /> }</p> <p>.right-panel-hidden<br /> {<br /> background:#00a27a;<br /> width:475px;<br /> height:500px;<br /> float:left;<br /> margin:0;<br /> padding:0;<br /> border-radius:20px;<br /> border:#fff 2px dotted;<br /> text-align:center;<br /> transition-property: background;<br /> transition-duration: 1s;<br /> transition-timing-function: linear;<br /> }</p> <p>.right-panel-hidden:hover {<br /> background: #ff7b29;<br /> }</p> <p>.button, .button2<br /> {<br /> background:#666;<br /> width:300px;<br /> padding:10px;<br /> border:none;<br /> margin:0;<br /> font-size:16px;<br /> font-family:Arial, Helvetica, sans-serif;<br /> color:#fff;<br /> cursor:pointer;<br /> position:relative;<br /> top:45%;<br /> }</p> <p>.button:hover, .button2:hover<br /> {<br /> background:#333;<br /> }</p> <p>.text {<br /> color: #FFFFFF;<br /> float: left;<br /> font-family: Arial,Helvetica,sans-serif;<br /> font-size: 60px;<br /> line-height: 80px;<br /> padding: 18% 0 0;<br /> text-align: center;<br /> width: 100%;<br /> text-decoration:blink;<br /> }</p> <p>&lt;/style&gt;</p> </div> <br /> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight: bold;">Step 1: Insert the following JS code in the <i>&lt;HEAD&gt;</i> section of your page</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding: 20px;"> <p>&lt;script src=&quot;http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;<br /> </p> <p>&lt;script type='text/javascript'&gt;//&lt;![CDATA[<br /> $(window).load(function(){<br /> $('.button').click(function(){<br /> $('.left-panel').animate({width:'500px'}, 1000);<br /> $('.right-panel-visible').fadeOut(1000);<br /> $('.button').fadeOut(1000);<br /> setTimeout(function(){$(&quot;.right-panel-hidden&quot;).fadeIn(1000)},1000);<br /> setTimeout(function(){$(&quot;.button2&quot;).fadeIn(1000)},1000);<br /> })<br /> $('.button2').click(function(){<br /> $('.left-panel').animate({width:'1000px'}, 1000);<br /> $('.right-panel-visible').fadeOut(0);<br /> $('.right-panel-hidden').fadeOut(0);<br /> $('.button').fadeOut(0);<br /> setTimeout(function(){$(&quot;.text&quot;).fadeIn(1000)},1000);<br /> })</p> <p>});//]]&gt;<br /> &lt;/script&gt;</p> <p><br> </p> </div> <br /> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight: bold;">Step 2: Insert the below sample code into the <i>&lt;BODY&gt;</i> section of your page:</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding: 20px 20px 0;"> <p>&lt;div class=&quot;container&quot;&gt;<br /> &lt;div class=&quot;left-panel&quot;&gt;<br /> &lt;input name=&quot;&quot; type=&quot;button&quot; value=&quot;CLICK HERE FOR BOX ANIMATION&quot; class=&quot;button&quot; /&gt;<br /> &lt;div class=&quot;text&quot; style=&quot;display:none;&quot;&gt;<br /> OK!&lt;br /&gt;<br /> WELL DONE<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;right-panel-visible&quot;&gt;&lt;/div&gt;<br /> &lt;div class=&quot;right-panel-hidden&quot; style=&quot;display:none;&quot;&gt;&lt;input name=&quot;&quot; type=&quot;button&quot; value=&quot;CLICK HERE FOR BOX ANIMATION&quot; class=&quot;button2&quot; /&gt;&lt;/div&gt;<br /> &lt;/div&gt;</p> </div> <br /> </div> varun harikumarhttp://www.blogger.com/profile/07750584912488895543noreply@blogger.com1tag:blogger.com,1999:blog-5118576691404180540.post-28442040669755341702014-09-08T11:05:00.000+05:302014-09-08T11:12:45.792+05:30Custom Tool Tip<div dir="ltr" style="text-align: left;" trbidi="on"> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight: bold;">Step 1: Insert the following css code in the <i>&lt;HEAD&gt;</i> section of your page</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding: 20px;"> &lt;style type="text/css"&gt;<br /> <br /> <p>.bubbleInfo<br> {<br> float:left;<br> width:100%;<br> height:50px;<br> position:relative;<br> }<br> <br> .red<br> {<br> background:#FF0000 !important;<br> }<br> <br> .trigger {<br> position: absolute;<br> }<br> <br> /* Bubble pop-up */</p> <p> .popup {<br> position: absolute;<br> display: none;<br> z-index: 50;<br> border-collapse: collapse;<br> background:#0000FF;<br> width:250px;<br> height:200px;<br> left:350px !important;<br> top:0px !important;<br> }<br> <br> .main-div<br> {<br> width:350px; height:800px; margin:0 auto; position:relative; background:#333333;<br> }<br> </p> <br /> <br /> &lt;/style&gt;</div> <br /> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight: bold;">Step 1: Insert the following JS code in the <i>&lt;HEAD&gt;</i> section of your page</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding: 20px;"> <p>&lt;script src=&quot;http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</p> <p>&lt;script type=&quot;text/javascript&quot;&gt;<br> &lt;!--</p> <p>$(function () {<br> $('.bubbleInfo').each(function () {<br> var distance = 10;<br> var time = 250;<br> var hideDelay = 500;</p> <p>var hideDelayTimer = null;</p> <p>var beingShown = false;<br> var shown = false;<br> var trigger = $('.trigger', this);<br> var info = $('.popup', this).css('opacity', 0);<br> </p> <p>$([trigger.get(0), info.get(0)]).mouseover(function () {<br> if (hideDelayTimer) clearTimeout(hideDelayTimer);<br> if (beingShown || shown) {<br> // don't trigger the animation again<br> return;<br> } else {<br> // reset position of info box<br> beingShown = true;</p> <p>info.css({<br> top: -90,<br> left: -33,<br> display: 'block'<br> }).animate({<br> top: '-=' + distance + 'px',<br> opacity: 1<br> }, time, 'swing', function() {<br> beingShown = false;<br> shown = true;<br> });<br> }</p> <p>return false;<br> }).mouseout(function () {<br> if (hideDelayTimer) clearTimeout(hideDelayTimer);<br> hideDelayTimer = setTimeout(function () {<br> hideDelayTimer = null;<br> info.animate({<br> top: '-=' + distance + 'px',<br> opacity: 0<br> }, time, 'swing', function () {<br> shown = false;<br> info.css('display', 'none');<br> });</p> <p>}, hideDelay);</p> <p>return false;<br> });<br> });<br> });</p> <p>//--&gt;<br> &lt;/script&gt;<br> </p> </div> <br /> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight: bold;">Step 2: Insert the below sample code into the <i>&lt;BODY&gt;</i> section of your page:</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding: 20px 20px 0;"> <p>&lt;div class=&quot;main-div&quot;&gt;<br> &lt;div class=&quot;bubbleInfo&quot;&gt;<br> &lt;div class=&quot;trigger&quot; id=&quot;download&quot; style=&quot;background:#ccc; width:100%; height:50px;&quot;&gt;&lt;/div&gt;<br> &lt;div class=&quot;popup&quot;&gt;<br> Your Details<br> &lt;/div&gt;<br> &lt;/div&gt;<br> &lt;div class=&quot;bubbleInfo&quot;&gt;<br> &lt;div class=&quot;trigger red&quot; id=&quot;download&quot; style=&quot;background:#ccc; width:100%; height:50px;&quot;&gt;&lt;/div&gt;<br> &lt;div class=&quot;popup&quot;&gt;<br> Your Details Two<br> &lt;/div&gt;<br> &lt;/div&gt;<br> &lt;/div&gt;</p> <p>&nbsp;</p> </div> <br /> </div> varun harikumarhttp://www.blogger.com/profile/07750584912488895543noreply@blogger.com0tag:blogger.com,1999:blog-5118576691404180540.post-55658548873196416262012-09-13T18:04:00.002+05:302012-09-13T18:07:25.285+05:30Menu With Rounded Corners In CSS<span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 1: Insert the following code in the <em>&lt;HEAD&gt;</em> section of your page</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px; margin:10px 0 0 0;">&lt;style type="text/css"&gt;<br /> <br /> #menu {<br /> float: left;<br /> padding: 0px 10px;<br /> margin: 0px;<br /> border-bottom: 5px solid #05480a;<br /> }<br /> <br /> #menu li {<br /> display: inline;<br /> list-style: none;<br /> margin: 0px;<br /> padding: 0px;<br /> }<br /> <br /> #menu li a {<br /> float: left;<br /> color: #000000;<br /> text-decoration: none;<br /> background: url('menuleft.gif') top left no-repeat;<br /> margin: 0px 1px;<br /> padding: 9px 0px 6px 10px;<br /> }<br /> <br /> #menu li a span {<br /> background: url('menuright.gif') top right no-repeat;<br /> padding: 9px 25px 6px 15px;<br /> }<br /> <br /> #menu li a:hover, <br /> #menu li a.highlight {<br /> background: url('menuleft-hl.gif') top left no-repeat;<br /> color: #ffffff;<br /> }<br /> <br /> #menu li a:hover span, <br /> #menu li a.highlight span {<br /> background: url('menuright-hl.gif') top right no-repeat;<br /> }<br /> <br /> &lt;/style&gt;<br /> </div><br /> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 2: Insert the below sample code into the <em>&lt;BODY&gt;</em> section of your page:</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px 20px 0; margin:10px 0 0 0;"><br /> &lt;ul id="menu"&gt;<br /> &lt;li&gt;&lt;a href="#" class="highlight"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; <br /> &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Lorem&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; <br /> &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Ipsum&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; <br /> &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Dolor&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; <br /> &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sit Amet&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; <br /> &lt;/ul&gt;<br /> </div><br /> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 3: Use these images</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px; margin:10px 0 0 0;"><img border="0" height="30" width="10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7EGdEqDtJob2LvrpKpu1IWlWntxR9NPh7pb2BUsEiU91VfuNHhYwrbDLwDDTaDfsDFJBYa8hAqx47VpgSQVgH17pTxLXSySHxzD9pJIAOgnXRU8Wt0RcpKJERZw21u_9o0y4rXs7pZGQ/s320/menuleft.gif" /><br /> <br /> <img border="0" height="30" width="10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgClbTNpVpSJcYwmr2ncus51GnI5_8-erHCh6uopRUlFWeXTEvYn9RIZpuYJ6eubRngVRpNosEmNJfbsGDsw4gjSqsuo6K4SohAuKxfUwsEF8Kr3N2GeFgxvCQYXp7JZHid0MLXMJmaZMA/s320/menuleft-hl.gif" /><br /> <br /> <img border="0" height="30" width="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjse-BUWLxxccnbYuTJi4xRjdULf3L3f07ERyprRUt9ULsxjBqIrNeTYcYKVOudWKuIDz1lGFjuV0TRfnVf4tpnZWDo6NEwM4xf6OcGTqxYa_wJ_cBhQIw49ay8KLj_nR9wnSgb1PzS2Hk/s320/menuright.gif" /><br /> <br /> <img border="0" height="30" width="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMTp3PH4JoaLGKQMU6t-wrqzkL6XMqHmo5Lgk2LmL3oAzwgT28a5jAG3ZX9Js7wtAC42nkIDq_2ZK_kw_zj8WRyiMU2JLm1gaJ92crGXUxp4Qy_8WrZHBlFMBFZFluPryra0UfdoSdsBs/s320/menuright-hl.gif" /><br /> <br /> </div>varun harikumarhttp://www.blogger.com/profile/07750584912488895543noreply@blogger.com0tag:blogger.com,1999:blog-5118576691404180540.post-41710893728330783452012-05-28T16:40:00.000+05:302012-05-28T16:40:25.663+05:30JQuery and CSS3 Tooltip<div dir="ltr" style="text-align: left;" trbidi="on"><div style="color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; margin:0 0 0px;">JQuery and CSS3 Tooltip<br /> </div><span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <br /> <span style="font-size: 16px; font-weight:bold;">Step 1: Insert the following code in the <em>&lt;HEAD&gt;</em> section of your page</span></span><br /> <br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px; margin:10px 0 0 0;"><br /> &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;<br /> <br /> &lt;script&gt;<br /> <br /> $( document ).ready( function()<br /> {<br /> var targets = $( '[rel~=tooltip]' ),<br /> target = false,<br /> tooltip = false,<br /> title = false;<br /> <br /> targets.bind( 'mouseenter', function()<br /> {<br /> target = $( this );<br /> tip = target.attr( 'title' );<br /> tooltip = $( '<div id="tooltip"></div>' );<br /> <br /> if( !tip || tip == '' )<br /> return false;<br /> <br /> target.removeAttr( 'title' );<br /> tooltip.css( 'opacity', 0 )<br /> .html( tip )<br /> .appendTo( 'body' );<br /> <br /> var init_tooltip = function()<br /> {<br /> if( $( window ).width() < tooltip.outerWidth() * 1.5 ) tooltip.css( 'max-width', $( window ).width() / 2 ); else tooltip.css( 'max-width', 340 ); var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ), pos_top = target.offset().top - tooltip.outerHeight() - 20; if( pos_left < 0 ) { pos_left = target.offset().left + target.outerWidth() / 2 - 20; tooltip.addClass( 'left' ); } else tooltip.removeClass( 'left' ); if( pos_left + tooltip.outerWidth() > $( window ).width() )<br /> {<br /> pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;<br /> tooltip.addClass( 'right' );<br /> }<br /> else<br /> tooltip.removeClass( 'right' );<br /> <br /> if( pos_top < 0 ) { var pos_top = target.offset().top + target.outerHeight(); tooltip.addClass( 'top' ); } else tooltip.removeClass( 'top' ); tooltip.css( { left: pos_left, top: pos_top } ) .animate( { top: '+=10', opacity: 1 }, 50 ); }; init_tooltip(); $( window ).resize( init_tooltip ); var remove_tooltip = function() { tooltip.animate( { top: '-=10', opacity: 0 }, 50, function() { $( this ).remove(); }); target.attr( 'title', tip ); }; target.bind( 'mouseleave', remove_tooltip ); tooltip.bind( 'click', remove_tooltip ); }); }); ( function( doc ) { var addEvent = 'addEventListener', type = 'gesturestart', qsa = 'querySelectorAll', scales = [ 1, 1 ], meta = qsa in doc ? doc[ qsa ]( 'meta[name=viewport]' ) : []; function fix() { meta.content = 'width=device-width,minimum-scale=' + scales[ 0 ] + ',maximum-scale=' + scales[ 1 ]; doc.removeEventListener( type, fix, true ); } if( ( meta = meta[ meta.length - 1 ] ) && addEvent in doc ) { fix(); scales = [ .25, 1.6 ]; doc[ addEvent ]( type, fix, true ); } }( document ) ); &lt;/script&gt; </div><br /> <br /> <br /> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <br /> <span style="font-size: 16px; font-weight:bold;">Step 1: Insert the following code in the <em>&lt;HEAD&gt;</em> section of your page</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px; margin:10px 0 0 0;"><br /> &lt;style type="text/css"&gt;<br /> <br /> body<br /> {<br /> font: normal 100%/1 'Noticia Text', 'Lucida Bright', Georgia, serif;<br /> color: #111;<br /> background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );<br /> background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );<br /> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');<br /> background-color:#dfdfdf;<br /> }<br /> <br /> <br /> #container<br /> {<br /> width: 220px;<br /> height: 61px;<br /> position: absolute;<br /> top: 361px;<br /> left: 741px;<br /> margin: -150px 0 0 -200px;<br /> }<br /> <br /> a<br /> {<br /> color: #F00;<br /> text-decoration: none;<br /> font-weight:bold;<br /> font-size:24px;<br /> }<br /> <br /> a:hover<br /> {<br /> color: #000;<br /> font-weight:bold;<br /> text-decoration:underline;<br /> font-size:24px;<br /> }<br /> <br /> #info<br /> {<br /> text-decoration: none;<br /> }<br /> <br /> #tooltip<br /> {<br /> font-family:Verdana, Geneva, sans-serif;<br /> font-size:20px;<br /> text-align: center;<br /> text-shadow: 0 1px rgba( 0, 0, 0, .5 );<br /> line-height: 1.5;<br /> color: #fff;<br /> background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bc80ea), color-stop(1, #dfbdfa) );<br /> background:-moz-linear-gradient( center top, #bc80ea 5%, #dfbdfa 100% );<br /> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc80ea', endColorstr='#dfbdfa');<br /> background-color:#bc80ea;<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br /> border-radius: 5px;<br /> border-top: 1px solid #fff;<br /> -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );<br /> -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );<br /> box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );<br /> position: absolute;<br /> z-index: 100;<br /> padding: 15px;<br /> }<br /> <br /> #tooltip:after<br /> {<br /> width: 0;<br /> height: 0;<br /> border-left: 10px solid transparent;<br /> border-right: 10px solid transparent;<br /> border-top-color: #333;<br /> border-top: 10px solid rgba( 0, 0, 0, .7 );<br /> content: '';<br /> position: absolute;<br /> left: 50%;<br /> bottom: -10px;<br /> margin-left: -10px;<br /> }<br /> <br /> #tooltip.top:after<br /> {<br /> border-top-color: transparent;<br /> border-bottom-color: #333;<br /> border-bottom: 10px solid rgba( 0, 0, 0, .6 );<br /> top: -20px;<br /> bottom: auto;<br /> }<br /> <br /> #tooltip.left:after<br /> {<br /> left: 10px;<br /> margin: 0;<br /> }<br /> <br /> #tooltip.right:after<br /> {<br /> right: 10px;<br /> left: auto;<br /> margin: 0;<br /> }<br /> <br /> <br /> &lt;/style&gt;<br /> <br /> </div> <br /> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 2: Insert the below sample code into the <em>&lt;BODY&gt;</em> section of your page:</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px 20px 0; margin:10px 0 0 0;"><br /> <br /> &lt;div id="container"&gt;<br /> <br /> <br /> <br /> &lt;p&gt;<br /> &lt;a href="#" title="Elegant CSS and jQuery Tooltip: Responsive, Mobile-Friendly" rel="tooltip" style="white-space: nowrap;"&gt;Mouseover Here&lt;/a&gt;&lt;/p&gt;<br /> <br /> &lt;/div&gt;<br /> <br /> </div></div>varun harikumarhttp://www.blogger.com/profile/07750584912488895543noreply@blogger.com1tag:blogger.com,1999:blog-5118576691404180540.post-20913516372989489162012-05-28T16:31:00.000+05:302012-05-28T16:31:19.339+05:30BEAUTIFUL CSS3 VERTICAL MENU<div dir="ltr" style="text-align: left;" trbidi="on"><div style="color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; margin:0 0 0px;">BEAUTIFUL CSS3 VERTICAL MENU<br /> </div><span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 1: Insert the following code in the <em>&lt;HEAD&gt;</em> section of your page</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px; margin:10px 0 0 0;">&lt;style type="text/css"&gt;<br /> <br /> <br /> .vert_menu {<br /> width: 125px;<br /> margin: 0;<br /> padding: 0;<br /> display: block;<br /> }<br /> <br /> .vert_menu ul {<br /> display: block;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .vert_menu ul li {<br /> display: block;<br /> float: left;<br /> width: 100%;<br /> margin: 0;<br /> padding: 0;<br /> <br /> }<br /> <br /> .vert_menu ul li a {<br /> display: block;<br /> margin:2px 0 0;<br /> width: 100%;<br /> text-transform: uppercase;<br /> font-family:arial;<br /> font-size:15px;<br /> font-weight:bold;<br /> color: #FFFFFF;<br /> padding:10px 24px;<br /> text-align:center;<br /> text-decoration: none;<br /> -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;<br /> -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;<br /> box-shadow:inset 0px 1px 0px 0px #bbdaf7;<br /> background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );<br /> background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );<br /> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');<br /> background-color:#79bbff;<br /> -moz-border-radius:6px;<br /> -webkit-border-radius:6px;<br /> border-radius:6px;<br /> border:1px solid #84bbf3;<br /> text-shadow:1px 1px 0px #528ecc;<br /> }<br /> <br /> <br /> /* MENU HOVER */<br /> .vert_menu ul li a:hover<br /> {<br /> background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );<br /> background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );<br /> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');<br /> background-color:#378de5;<br /> }<br /> <br /> <br /> &lt;/style&gt;<br /> <br /> </div> <br /> <span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 2: Insert the below sample code into the <em>&lt;BODY&gt;</em> section of your page:</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px 20px 0; margin:10px 0 0 0;"><br /> <br /> &lt;!--MENU_STARTS_HERE--&gt;<br /> <br /> &lt;div class='vert_menu'&gt;<br /> &lt;ul&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;MENU 1&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;MENU 2&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;MENU 3&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;MENU 4&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;MENU 5&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;MENU 6&lt;/a&gt;&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;!--MENU_ENDS_HERE--&gt;<br /> <br /> </div></div>varun harikumarhttp://www.blogger.com/profile/07750584912488895543noreply@blogger.com0tag:blogger.com,1999:blog-5118576691404180540.post-73398785511793404472012-05-28T15:38:00.000+05:302012-05-28T15:38:36.526+05:30CSS DROP DOWN MENU<div dir="ltr" style="text-align: left;" trbidi="on"><div style="color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; margin:0 0 0px;">CSS DROP DOWN MENU<br /> </div><span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 1: Insert the following code in the <em>&lt;HEAD&gt;</em> section of your page</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px; margin:10px 0 0 0;">&lt;style&gt;<br /> <br /> .top_menu{<br /> border:none;<br /> border:0px;<br /> margin:0;<br /> padding:0px;<br /> font-family:Arial, Helvetica, sans-serif;<br /> font-size:14px;<br /> font-weight:bold;<br /> width:100%;<br /> }<br /> <br /> .top_menu ul{<br /> background:#333333;<br /> height:35px;<br /> list-style:none;<br /> margin:0;<br /> padding:0;<br /> width:66%;<br /> -webkit-box-shadow: 0px 0px 3px 0px #000000; <br /> box-shadow: 0px 0px 3px 0px #000000; <br /> <br /> }<br /> <br /> .top_menu li{<br /> float:left;<br /> padding:0px;<br /> }<br /> <br /> .top_menu li a{<br /> border-left:#999 1px solid;<br /> color:#cccccc;<br /> display:block;<br /> font-weight:normal;<br /> line-height:35px;<br /> margin:0px;<br /> padding:0px 25px;<br /> text-align:center;<br /> text-decoration:none;<br /> }<br /> <br /> .top_menu li a:hover, .top_menu ul li:hover a{<br /> background: #2580a2 ;<br /> color:#FFFFFF;<br /> text-decoration:none;<br /> }<br /> <br /> .top_menu li ul{<br /> background:#333333;<br /> display:none;<br /> height:auto;<br /> padding:0px;<br /> margin:0px;<br /> border:0px;<br /> position:absolute;<br /> width:225px;<br /> z-index:200;<br /> }<br /> <br /> .top_menu li:hover ul{<br /> display:block; <br /> }<br /> <br /> .top_menu li li {<br /> <br /> display:block;<br /> float:none;<br /> margin:0px;<br /> padding:0px;<br /> width:225px;<br /> }<br /> <br /> .top_menu li:hover li a{<br /> background:none;<br /> font-family:Arial, Helvetica, sans-serif;<br /> font-size:14px;<br /> }<br /> <br /> .top_menu li ul a{<br /> display:block;<br /> height:35px;<br /> font-family:Arial, Helvetica, sans-serif;<br /> font-size:14px;<br /> margin:0px;<br /> padding:0px 10px 0px 15px;<br /> text-align:left;<br /> }<br /> <br /> .top_menu li ul a:hover, .top_menu li ul li:hover a{<br /> background:#2580a2 center left no-repeat;<br /> border:0px;<br /> color:#ffffff;<br /> text-decoration:none;<br /> }<br /> <br /> .top_menu p{<br /> clear:left;<br /> }<br /> <br /> &lt;/style&gt;<br /> <br /> </div><span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 2: Insert the below sample code into the <em>&lt;BODY&gt;</em> section of your page:</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px 20px 0; margin:10px 0 0 0;"><br /> <br /> &lt;!--MENU_STARTS_HERE--&gt;<br /> <br /> &lt;div class='top_menu'&gt;<br /> &lt;ul&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 2&lt;/span&gt;&lt;/a&gt;<br /> &lt;ul&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;subMenu 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;subMenu 2&lt;/span&gt;&lt;/a&gt;<br /> &lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 5&lt;/span&gt;&lt;/a&gt;<br /> &lt;ul&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;subMenu 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;subMenu 2&lt;/span&gt;&lt;/a&gt;<br /> &lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 6&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 7&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 8&lt;/span&gt;&lt;/a&gt;<br /> &lt;ul&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;subMenu 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;subMenu 2&lt;/span&gt;&lt;/a&gt;<br /> &lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 9&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Menu 10&lt;/span&gt;&lt;/a&gt;<br /> &lt;ul&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;subMenu 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;subMenu 2&lt;/span&gt;&lt;/a&gt;<br /> &lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;!--MENU_ENDS_HERE--&gt;<br /> <br /> </div></div>varun harikumarhttp://www.blogger.com/profile/07750584912488895543noreply@blogger.com0tag:blogger.com,1999:blog-5118576691404180540.post-61139076571353105912012-05-28T14:52:00.000+05:302012-05-28T14:52:27.020+05:30Beautiful css3 button<div dir="ltr" style="text-align: left;" trbidi="on"><div style="color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; margin:0 0 10px;">css3 buttons for to use on your web pages without the need for any images<br /> </div><span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 1: Insert the following code in the <em>&lt;HEAD&gt;</em> section of your page</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px;">&lt;style&gt;<br /> <br /> .css3_but {<br /> -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;<br /> -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;<br /> box-shadow:inset 0px 1px 0px 0px #bbdaf7;<br /> background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );<br /> background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );<br /> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');<br /> background-color:#79bbff;<br /> -moz-border-radius:6px;<br /> -webkit-border-radius:6px;<br /> border-radius:6px;<br /> border:1px solid #84bbf3;<br /> display:inline-block;<br /> color:#ffffff;<br /> font-family:arial;<br /> font-size:15px;<br /> font-weight:bold;<br /> padding:6px 24px;<br /> text-decoration:none;<br /> text-shadow:1px 1px 0px #528ecc;<br /> }<br /> <br /> .css3_but:hover {<br /> background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );<br /> background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );<br /> filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');<br /> background-color:#378de5;<br /> }<br /> <br /> .css3_but:active {<br /> position:relative;<br /> top:1px;<br /> }<br /> <br /> &lt;/style&gt;<br /> <br /> </div><span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 2: Insert the below sample code into the <em>&lt;BODY&gt;</em> section of your page:</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px 20px 0;"><br /> &lt;a href="#" class="classname"&gt;my button&lt;/a&gt;<br /> <br /> </div></div>varun harikumarhttp://www.blogger.com/profile/07750584912488895543noreply@blogger.com0tag:blogger.com,1999:blog-5118576691404180540.post-76957826917197655272012-05-25T19:20:00.005+05:302012-05-28T14:21:38.636+05:30SLIDE IMAGE HORIZONTALLY<div dir="ltr" style="text-align: left;" trbidi="on"><div style="color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; margin:0 0 10px;">I would like to basically have Y number of images positioned to the left, then when you click the hyperlink, it moves them into view.<br /> </div><span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 1: Insert the following code in the <em>< HEAD ></em> section of your page</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px;">window.onload=function()<br /> {<br /> document.getElementById("d2").onclick = slideIt;<br /> };<br /> <br /> function slideIt()<br /> {<br /> var slidingDiv = document.getElementById("d1");<br /> var stopPosition = 50;<br /> <br /> if (parseInt(slidingDiv.style.left) &lt; stopPosition ) { slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px"; setTimeout(slideIt, 1); } } </div><span style="color: #7abd0d; font-family: Verdana,Geneva,sans-serif;"><br /> <span style="font-size: 16px; font-weight:bold;">Step 2: Insert the below sample code into the <em>< BODY ></em> section of your page:</span></span><br /> <div style="background: #f7f7f7; border: #666666 1px solid; color: #8e8e8e; font-family: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; padding: 20px 20px 0;">&lt; a href="#" id="d2"&gt;click here to slide the div < /a><br /> <br /> <br /> &lt; img src="HTML.png" width="200" height="200" id="d1" style="position:absolute; left:-200px; top:30px" /&gt;<br /> <br /> </div></div>varun harikumarhttp://www.blogger.com/profile/07750584912488895543noreply@blogger.com0