<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ExtraTuts &#187; CSS &amp; Xhtml</title>
	<atom:link href="http://www.extratuts.com/category/css-xhtml-tutorials/feed" rel="self" type="application/rss+xml" />
	<link>http://www.extratuts.com</link>
	<description>ExtraTuts</description>
	<lastBuildDate>Wed, 31 Aug 2011 19:21:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>+15 useful ajax lightbox solutions</title>
		<link>http://www.extratuts.com/useful-ajax-lightbox-solutions</link>
		<comments>http://www.extratuts.com/useful-ajax-lightbox-solutions#comments</comments>
		<pubDate>Sun, 27 Dec 2009 15:50:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[web2 roundups]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[lightbox]]></category>
		<category><![CDATA[solutions]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=776</guid>
		<description><![CDATA[Lightbox or Modal dialog  is one of ajax creative solutions that helps you displaying any desired contents like images, galleries, flash movies , films of any formats and forms in the already loaded page itself. This solution overcome the constraint of pop ups that are blocked by any of well secured internet browser. The main [...]


Related posts:<ol><li><a href='http://www.extratuts.com/best-25-ajax-photo-sliding-solutions' rel='bookmark' title='BEST 25 ajax photo sliding solutions'>BEST 25 ajax photo sliding solutions</a></li>
<li><a href='http://www.extratuts.com/lightbox-futurebox-without-using-javascript' rel='bookmark' title='Lightbox , Futurebox Without Using JavaScript'>Lightbox , Futurebox Without Using JavaScript</a></li>
<li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Lightbox or Modal dialog  is one of ajax creative solutions that helps you displaying any desired contents like images, galleries, flash movies , films of any formats and forms in the already loaded page itself. This solution overcome the constraint of pop ups that are blocked by any of well secured internet browser. The main advantage <span id="more-776"></span>of using lightbox method is that you will be able to load only the relevant content in the specific box without needing to reload the whole page again, which decreases the loading time for more comfort browsing purposes.</p>
<p>Below here are a great useful chunk of light box solutions.</p>
<h2><span style="color: #99ccff;"><a href="http://www.phatfusion.net/multibox/">1.multi-box</a></span></h2>
<p><a href="http://www.phatfusion.net/multibox/"><img class="size-full wp-image-781 alignnone" title="1" src="http://www.extratuts.com/wp-content/uploads/2009/12/1.jpg" alt="1" width="500" height="300" /></a></p>
<p>This one  supports images, flash, video, mp3s, html.</p>
<h2><a href="http://orangoo.com/labs/GreyBox/">2.GreyBox</a></h2>
<p><span style="color: #99ccff;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/2.jpg"><img class="size-full wp-image-782 alignnone" title="2" src="http://www.extratuts.com/wp-content/uploads/2009/12/2.jpg" alt="2" width="500" height="300" /></a><br />
</span></p>
<p>This GreyBox can be used to display websites, images and other content easily. It is small, fast and easy to be used by anyone.</p>
<h2><span style="color: #99ccff;"><a href="http://www.nickstakenburg.com/projects/lightview/">3.LightView</a></span></h2>
<h2><a href="http://www.nickstakenburg.com/projects/lightview/"></a></h2>
<p><img class="size-full wp-image-783 alignnone" title="3" src="http://www.extratuts.com/wp-content/uploads/2009/12/3.jpg" alt="3" width="500" height="300" /></p>
<p>It&#8217;s considered one of the easiest lightboxes since it&#8217;s easily customized, looks great, resizes contents automatically to fit your screen.</p>
<h2><a href="http://www.digitalia.be/software/slimbox2#demo">4.SlimBox2</a></h2>
<p><a href="http://www.digitalia.be/software/slimbox2#demo"><span style="color: #99ccff;"> </span></a><a href="http://www.digitalia.be/software/slimbox2#demo"><img class="aligncenter size-full wp-image-784" title="4" src="http://www.extratuts.com/wp-content/uploads/2009/12/4.jpg" alt="4" width="500" height="300" /></a></p>
<p>It&#8217;s very small, efficient, standards-friendly, fully customizable.</p>
<h2><a href="http://jqueryui.com/demos/dialog/">5.Dialog</a></h2>
<h2 style="text-align: center;"><a href="http://jqueryui.com/demos/dialog/"><img class="aligncenter size-full wp-image-785" title="5" src="http://www.extratuts.com/wp-content/uploads/2009/12/5.jpg" alt="5" width="500" height="300" /></a></h2>
<p>It&#8217;s suitable to display information, also it could be moved and resized to the desired way.</p>
<h2><a href="http://prototype-window.xilinus.com/samples.html">6.prototype window</a></h2>
<h2><a href="http://prototype-window.xilinus.com/samples.html"><img class="aligncenter size-full wp-image-786" title="6" src="http://www.extratuts.com/wp-content/uploads/2009/12/6.jpg" alt="6" width="500" height="300" /></a></h2>
<p>A group of codes that enables you to load different things in your current page such different dialogs and windows.</p>
<h2><a href="http://mochaui.com/">7.MochaUI</a></h2>
<h2><a href="http://mochaui.com/"><img class="aligncenter size-full wp-image-787" title="7" src="http://www.extratuts.com/wp-content/uploads/2009/12/7.jpg" alt="7" width="500" height="300" /></a></h2>
<p>It&#8217;s web applications user interface library built on the Mootools JavaScript framework That used for Web Applications, Web Desktops,Web Sites, Widgets, Standalone Windows and Modal Dialogs</p>
<p style="text-align: center;"><script type="text/javascript"><!--
google_ad_client = "ca-pub-4023069866880559";
/* extra in post */
google_ad_slot = "5362203380";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<h2><a href="http://famspam.com/facebox/">8.facebox</a></h2>
<h2 style="text-align: left;"><a href="http://famspam.com/facebox/"><img class="aligncenter size-full wp-image-788" title="8" src="http://www.extratuts.com/wp-content/uploads/2009/12/8.jpg" alt="8" width="500" height="300" /></a></h2>
<p style="text-align: left;">Another jQuery-based application that has facebook style that you could use to display images, divs, or entire remote pages.</p>
<p style="text-align: left;">
<h2 style="text-align: left;"><a href="http://onehackoranother.com/projects/jquery/boxy/">9.Boxy</a></h2>
<h2 style="text-align: left;"><a href="http://onehackoranother.com/projects/jquery/boxy/"><img class="aligncenter size-full wp-image-789" title="8" src="http://www.extratuts.com/wp-content/uploads/2009/12/81.jpg" alt="8" width="500" height="300" /></a></h2>
<p style="text-align: left;">Facebook-style dialog box for jQuery that could be edited, moved and resized.</p>
<p style="text-align: left;">
<h2 style="text-align: left;"><a href="http://okonet.ru/projects/modalbox/">10.Modalbox</a></h2>
<p><a href="http://okonet.ru/projects/modalbox/"><img class="aligncenter size-full wp-image-790" title="10" src="http://www.extratuts.com/wp-content/uploads/2009/12/10.jpg" alt="10" width="500" height="300" /></a></p>
<h2><a href="http://www.stickmanlabs.com/lightwindow/">11.LightWindow v2.0</a></h2>
<h2><a href="http://www.stickmanlabs.com/lightwindow/"><img class="aligncenter size-full wp-image-792" title="11" src="http://www.extratuts.com/wp-content/uploads/2009/12/11.jpg" alt="11" width="500" height="300" /></a></h2>
<p>different types of lightboxes that you could be use for different purposes, as you will see you could use it for loading any content in your current page such as movies,images, flash movies and more. It&#8217;s compatible with all known browsers.</p>
<h2><a href="http://www.ericmmartin.com/projects/simplemodal-demos/">12.simplemoda</a></h2>
<h2><a href="http://www.ericmmartin.com/projects/simplemodal-demos/"><img class="aligncenter size-full wp-image-793" title="12" src="http://www.extratuts.com/wp-content/uploads/2009/12/12.jpg" alt="12" width="500" height="300" /></a></h2>
<p>awesome group of modal boxes that could be used for loading almost anything to you page like Dialog, Contact Form and Confirmation Override.</p>
<h2><a href="http://stimuli.ca/lightbox/">13.Lightbox 2.8.0 plugin for WordPress</a></h2>
<h2><a href="http://stimuli.ca/lightbox/"><img class="aligncenter size-full wp-image-794" title="13" src="http://www.extratuts.com/wp-content/uploads/2009/12/13.jpg" alt="13" width="500" height="300" /></a></h2>
<p>Another solution from lightbox helpful for wordpress users, this one makes  you present images in a slick window, while darkening the rest of the page in professional way easily.</p>
<h2><a href="http://web-argument.com/flexible-lightbox/">14.Flexible Lightbox</a></h2>
<p><a href="http://web-argument.com/flexible-lightbox/"><img class="aligncenter size-full wp-image-795" title="14" src="http://www.extratuts.com/wp-content/uploads/2009/12/14.jpg" alt="14" width="500" height="300" /></a></p>
<p>useful wordpress plugin used for displaying images in very good looking way.</p>
<h2><a href="http://www.shadowbox-js.com/">15.Shadowbox</a></h2>
<h2><a href="http://www.shadowbox-js.com/"><img class="aligncenter size-full wp-image-797" title="15" src="http://www.extratuts.com/wp-content/uploads/2009/12/15.jpg" alt="15" width="500" height="300" /></a></h2>
<p>Magnificent application that you could consider it a player for any type of media that can be displayed in a web page, it looks wonderful, customizable and very useful.</p>
<h2><a href="http://www.huddletogether.com/projects/lightbox2/">16.Lightbox 2</a></h2>
<h2 style="text-align: left;"><a href="http://www.huddletogether.com/projects/lightbox2/"><img class="aligncenter size-full wp-image-799" title="16" src="http://www.extratuts.com/wp-content/uploads/2009/12/16.jpg" alt="16" width="500" height="300" /></a></h2>
<p style="text-align: left;">Great application used to overlay images in your current page with sleek transitions and fancy shapes. Also it groups related images to be displayed as gallery.</p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/best-25-ajax-photo-sliding-solutions' rel='bookmark' title='BEST 25 ajax photo sliding solutions'>BEST 25 ajax photo sliding solutions</a></li>
<li><a href='http://www.extratuts.com/lightbox-futurebox-without-using-javascript' rel='bookmark' title='Lightbox , Futurebox Without Using JavaScript'>Lightbox , Futurebox Without Using JavaScript</a></li>
<li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/useful-ajax-lightbox-solutions/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>15 amazing jquery tabs tutorials</title>
		<link>http://www.extratuts.com/amazing-jquery-tabs-tutorials</link>
		<comments>http://www.extratuts.com/amazing-jquery-tabs-tutorials#comments</comments>
		<pubDate>Wed, 02 Dec 2009 17:52:35 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[web2 roundups]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[amazing]]></category>
		<category><![CDATA[java]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery tabs]]></category>
		<category><![CDATA[tabing]]></category>
		<category><![CDATA[Tabs]]></category>
		<category><![CDATA[tutorials]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=718</guid>
		<description><![CDATA[Who didn&#8217;t find jquery tabs in any website and didn&#8217;t fall in love with it? of course no one!! These tabs provide a lot of advantages, beside the great way it looks, it is very useful for any tabing purposes, specially when you will be able to add the content you want and view it [...]


Related posts:<ol><li><a href='http://www.extratuts.com/create-simple-tabs-with-jquery-and-css' rel='bookmark' title='Create Simple Tabs With jQuery and CSS'>Create Simple Tabs With jQuery and CSS</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/excellent-jquery-menus-tutorials' rel='bookmark' title='about 20 excellent jquery menus tutorials'>about 20 excellent jquery menus tutorials</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">
<p style="text-align: left;">
<p style="text-align: left;">
<p style="text-align: left;">Who didn&#8217;t find jquery tabs in any website and didn&#8217;t fall in love with it? of course no one!!</p>
<p style="text-align: left;">These tabs provide a lot of advantages, beside the great way it looks, it is very useful for any tabing purposes, specially when<span id="more-718"></span> you will be able to add the content you want and view it without needing to reload the web page that contains these tabs,THAT&#8217;S GREAT!!</p>
<p style="text-align: left;">Here are exceptional group of jquery tabs tutorials that we are sure it will attract and enhance your web designing skills and experience.</p>
<h2 style="text-align: center;">1.Slick Tabbed Content Area using CSS &amp; jQuery</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/1.png"><img class="size-full wp-image-723 aligncenter" title="1" src="http://www.extratuts.com/wp-content/uploads/2009/12/1.png" alt="1" width="287" height="370" /></a></p>
<p style="text-align: center;"><a href="http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">2.simple JQuery Tabs</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/2.png"><img class="size-full wp-image-724 aligncenter" title="2" src="http://www.extratuts.com/wp-content/uploads/2009/12/2.png" alt="2" width="500" height="150" /></a></p>
<p style="text-align: center;"><a href="http://go2.wordpress.com/?id=725X1342&amp;site=apricotstudios.wordpress.com&amp;url=http%3A%2F%2Fwww.apricot-studios.com%2Flab%2Fjquery%2Fjquery-tabs-tutorial.php">The Demo</a></p>
<p style="text-align: center;"><a href="http://apricotstudios.wordpress.com/2008/08/29/jquery-tabs-tutorial/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">3.A Tabbed Interface Using jQuery</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/3.png"><img class="size-full wp-image-725 aligncenter" title="3" src="http://www.extratuts.com/wp-content/uploads/2009/12/3.png" alt="3" width="333" height="248" /></a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://nettuts.s3.amazonaws.com/042_jQueryUITabs/demo/index.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://net.tutsplus.com/javascript-ajax/create-a-tabbed-interface-using-jquery/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">4.Simple Tabs w/ CSS &amp; jQuery</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/4.png"><img class="size-full wp-image-726 aligncenter" title="4" src="http://www.extratuts.com/wp-content/uploads/2009/12/4.png" alt="4" width="501" height="120" /></a></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.sohtanaka.com/web-design/examples/tabs/">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">5.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/5.png"><img class="size-full wp-image-727 aligncenter" title="5" src="http://www.extratuts.com/wp-content/uploads/2009/12/5.png" alt="5" width="228" height="302" /></a></p>
<p style="text-align: center;"><a href="http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;"><script type="text/javascript"><!--
google_ad_client = "ca-pub-4023069866880559";
/* extra in post */
google_ad_slot = "5362203380";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">6.Playing with jQuery Tabs</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/7.png"><img class="size-full wp-image-729 aligncenter" title="7" src="http://www.extratuts.com/wp-content/uploads/2009/12/7.png" alt="7" width="439" height="223" /></a></p>
<p style="text-align: center;"><a href="http://www.coldfusionjedi.com/demos/jquerytabs/test.cfm">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.insideria.com/2009/03/playing-with-jquery-tabs.html">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">7.How easy to create a slide tabbed box using jQuery</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/8.png"><img class="size-full wp-image-730 aligncenter" title="8" src="http://www.extratuts.com/wp-content/uploads/2009/12/8.png" alt="8" width="382" height="291" /></a></p>
<p style="text-align: center;"><a href="http://www.hieu.co.uk/examples/slidetabs/index.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.hieu.co.uk/blog/index.php/2009/01/28/how-easy-to-create-a-slide-tabbed-box-using-jquery/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">8.Javascript: JQuery Tabs</h2>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/9.png"><img class="size-full wp-image-731 aligncenter" title="9" src="http://www.extratuts.com/wp-content/uploads/2009/12/9.png" alt="9" width="232" height="124" /></a></p>
<p style="text-align: center;"><a href="http://progtuts.info/downloads/JQueryTabs/">The Demo</a></p>
<p style="text-align: center;"><a href="http://progtuts.info/232/javascript-jquery-tabs/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">9.Create Flipping Content Tabs Using jQuery</h2>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/10.png"><img class="size-full wp-image-732 aligncenter" title="10" src="http://www.extratuts.com/wp-content/uploads/2009/12/10.png" alt="10" width="300" height="246" /></a></p>
<p style="text-align: center;"><a href="http://demo.webdeveloperplus.com/flipping-tabs/">The Demo</a></p>
<p style="text-align: center;"><a href="http://webdeveloperplus.com/jquery/create-flipping-content-tabs-using-jquery/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">10.Ultra simple jQuery tabs</h2>
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/11.png"><img class="size-full wp-image-733 aligncenter" title="11" src="http://www.extratuts.com/wp-content/uploads/2009/12/11.png" alt="11" width="256" height="77" /></a></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://justfreetemplates.com/blog/wp-content/uploads/2009/08/simple-jquery-tabs.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.tutorialhero.com/click-62422-ultra_simple_jquery_tabs.php">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">11.jQuery Tabs made easy</h2>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/12.png"></a><a href="http://www.extratuts.com/wp-content/uploads/2009/12/121.png"><img class="size-full wp-image-735 aligncenter" title="12" src="http://www.extratuts.com/wp-content/uploads/2009/12/121.png" alt="12" width="318" height="282" /></a></p>
<p style="text-align: center;"><a href="http://www.ilovecolors.com.ar/wp-content/uploads/jquery-tabs/">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.ilovecolors.com.ar/jquery-tabs/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">12.Animated tapped content with jquery</h2>
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/13.png"><img class="size-full wp-image-736 aligncenter" title="13" src="http://www.extratuts.com/wp-content/uploads/2009/12/13.png" alt="13" width="443" height="197" /></a></p>
<p style="text-align: center;"><a href="http://www.gayadesign.com/scripts/tabbed/">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">13.<span style="color: #000000;"><strong>jQuery To Fade Effects tabs</strong></span></h2>
<p style="text-align: center;"><span style="color: #000000;"><strong><br />
</strong></span></p>
<p style="text-align: center;"><span style="color: #000000;"><strong><a href="http://www.extratuts.com/wp-content/uploads/2009/12/14.png"><img class="size-full wp-image-738 aligncenter" title="14" src="http://www.extratuts.com/wp-content/uploads/2009/12/14.png" alt="14" width="265" height="163" /></a></strong></span></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.roseindia.net/ajax/jquery/fadeEffectTab.html#T-1">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.roseindia.net/ajax/jquery/fadeEffectTabs.shtml">Visit the tutorial</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">14.JQuery TabContainer Theme with Tab Transition Animations</h2>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/15.png"><img class="size-full wp-image-739 aligncenter" title="15" src="http://www.extratuts.com/wp-content/uploads/2009/12/15.png" alt="15" width="571" height="250" /></a></p>
<p style="text-align: center;"><a href="http://mattberseth2.com/tab_animation/">The Demo</a></p>
<p style="text-align: center;"><a href="http://mattberseth.com/blog/2007/11/jquery_tabcontainer_theme_with.html">Visit the tutorial</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">15.jQuery Sliding Tab Menu for Sidebar Tutorial</h2>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.extratuts.com/wp-content/uploads/2009/12/16.png"><img class="size-full wp-image-740 aligncenter" title="16" src="http://www.extratuts.com/wp-content/uploads/2009/12/16.png" alt="16" width="267" height="384" /></a></p>
<p style="text-align: center;"><a href="http://www.queness.com/resources/html/scrollto/index.html">The Demo</a></p>
<p style="text-align: center;"><a href="http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial">Visit the tutorial</a></p>
<p style="text-align: center;">
<p style="text-align: center;">


<p>Related posts:<ol><li><a href='http://www.extratuts.com/create-simple-tabs-with-jquery-and-css' rel='bookmark' title='Create Simple Tabs With jQuery and CSS'>Create Simple Tabs With jQuery and CSS</a></li>
<li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/excellent-jquery-menus-tutorials' rel='bookmark' title='about 20 excellent jquery menus tutorials'>about 20 excellent jquery menus tutorials</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/amazing-jquery-tabs-tutorials/feed</wfw:commentRss>
		<slash:comments>33</slash:comments>
		</item>
		<item>
		<title>about 20 excellent jquery menus tutorials</title>
		<link>http://www.extratuts.com/excellent-jquery-menus-tutorials</link>
		<comments>http://www.extratuts.com/excellent-jquery-menus-tutorials#comments</comments>
		<pubDate>Sun, 29 Nov 2009 14:51:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[excellent jquery]]></category>
		<category><![CDATA[jquery menus]]></category>
		<category><![CDATA[jquery menus tutorials]]></category>
		<category><![CDATA[tutorials]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=658</guid>
		<description><![CDATA[Who didn&#8217;t see a jquery menus and didnt like it with its special effects that could catch both expert and beginners eyes? of course jquery menus is the most popular menus that depend on  both functionality and eye catching designs and moving effects. For this reason you will hardly find any website that don&#8217;t use [...]


Related posts:<ol><li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
<li><a href='http://www.extratuts.com/css-jquery-animated-navigation-2' rel='bookmark' title='CSS and jQuery Animated Navigation'>CSS and jQuery Animated Navigation</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">Who didn&#8217;t see a jquery menus and didnt like it with its special effects that could catch both expert and beginners eyes?</p>
<p style="text-align: left;">of course jquery menus is the most popular menus that depend on  both functionality and eye catching designs and moving effects. For this reason<span id="more-658"></span> you will hardly find any website that don&#8217;t use one of them. If you one of jquery fans and want to learn how you will be able to deal with them and to but theme in your website, here are about 20 jquery menus tutorials that will help you to learn, see and apply them easily in just few steps.</p>
<h2 style="text-align: center;">1. Sliding Top Menu With jQuery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-685" title="jquery-sliding-menu" src="http://www.extratuts.com/wp-content/uploads/2009/11/jquery-sliding-menu.jpg" alt="jquery-sliding-menu" width="480" height="150" /></p>
<p style="text-align: center;"><a href="http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">2.Sexy Drop Down Menu w/ jQuery &amp; CSS</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-686" title="image1" src="http://www.extratuts.com/wp-content/uploads/2009/11/image1.jpg" alt="image1" width="600" height="350" /></p>
<p style="text-align: center;"><a href="http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">3.jquery css example dropdown menu</h2>
<p style="text-align: center;"><img title="Untitled-10" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-10.png" alt="Untitled-10" width="453" height="150" /></p>
<p style="text-align: center;">
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">4.Color Fading Menu with jQuery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-687" title="fade-example" src="http://www.extratuts.com/wp-content/uploads/2009/11/fade-example.png" alt="fade-example" width="576" height="182" /></p>
<p style="text-align: center;"><a href="http://css-tricks.com/color-fading-menu-with-jquery/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">5. Making a Smooth Animated Menu with jQuery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-688" title="jquery-smooth-menu" src="http://www.extratuts.com/wp-content/uploads/2009/11/jquery-smooth-menu.jpg" alt="jquery-smooth-menu" width="500" height="220" /></p>
<p style="text-align: center;"><a href="http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">6.jQuery Drop Line Menu</h2>
<h2 style="text-align: center;"><img title="Untitled-2" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-21.png" alt="Untitled-2" width="353" height="91" /></h2>
<p style="text-align: center;"><a href="http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<p style="text-align: center;">
<h2 style="text-align: center;">7.Animated Menus Using jQuery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-689" title="Untitled-2d" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-2d.png" alt="Untitled-2d" width="317" height="125" /></p>
<p style="text-align: center;"><a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">8.Horizontal Scroll Menu with jQuery Tutorial</h2>
<h2 style="text-align: center;"><img class="aligncenter size-full wp-image-692" title="256" src="http://www.extratuts.com/wp-content/uploads/2009/11/256.gif" alt="256" width="190" height="120" /></h2>
<p style="text-align: center;"><a href="http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">9.Simple JQuery Accordion menu</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-673" title="1" src="http://www.extratuts.com/wp-content/uploads/2009/11/1.png" alt="1" width="218" height="216" /></p>
<p style="text-align: center;"><a href="http://www.i-marco.nl/weblog/jquery-accordion-menu/#">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">10.jQuery Pop-up Menu Tutorial</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-693" title="jqueryslidingmenu" src="http://www.extratuts.com/wp-content/uploads/2009/11/jqueryslidingmenu.jpg" alt="jqueryslidingmenu" width="540" height="109" /></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.ilovecolors.com.ar/sliding-menu-using-jquery/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">11.jquery feed menus</h2>
<h2 style="text-align: center;"><img class="aligncenter size-full wp-image-694" title="feed_menu_header" src="http://www.extratuts.com/wp-content/uploads/2009/11/feed_menu_header.png" alt="feed_menu_header" width="460" height="120" /></h2>
<p style="text-align: center;"><a href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">12.Creating a Floating HTML Menu Using jQuery and CSS</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-674" title="2" src="http://www.extratuts.com/wp-content/uploads/2009/11/2.png" alt="2" width="294" height="239" /></p>
<p style="text-align: center;"><a href="http://net.tutsplus.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">13. Sliding Jquery Menu</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-690" title="step1" src="http://www.extratuts.com/wp-content/uploads/2009/11/step1.gif" alt="step1" width="600" height="300" /></p>
<p style="text-align: center;"><a href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">14.Fading Menu – Replacing Content</h2>
<h2 style="text-align: center;"><img class="aligncenter size-full wp-image-691" title="fadingmenu" src="http://www.extratuts.com/wp-content/uploads/2009/11/fadingmenu.png" alt="fadingmenu" width="550" height="110" /></h2>
<p style="text-align: center;"><a href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">15.Make a Mega Drop-Down Menu with jQuery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-675" title="3" src="http://www.extratuts.com/wp-content/uploads/2009/11/3.png" alt="3" width="370" height="221" /></p>
<p style="text-align: center;"><a href="http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/#">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">16.accordion menu</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-676" title="Untitled-2" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-2.png" alt="Untitled-2" width="353" height="270" /></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.learningjquery.com/2007/03/accordion-madness">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">17.Simple animated menu with jquery</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-677" title="Untitled-4" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-4.png" alt="Untitled-4" width="178" height="164" /></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://lastwebdesigner.com/jquery/simple-animated-menu-with-jquery.html">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">18.apple style menu and improve it via jQuery</h2>
<p style="text-align: center;">
<p style="text-align: center;"><img class="aligncenter size-full wp-image-678" title="7" src="http://www.extratuts.com/wp-content/uploads/2009/11/7.png" alt="7" width="399" height="53" /></p>
<p style="text-align: center;"><a href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery">visit the tutorial from here</a></p>
<p style="text-align: center;">
<h2 style="text-align: center;">19.jQuery Sliding Tab Menu for Sidebar Tutorial</h2>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-679" title="Untitled-8" src="http://www.extratuts.com/wp-content/uploads/2009/11/Untitled-8.png" alt="Untitled-8" width="271" height="386" /></p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial">visit the tutorial from here</a></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/25-jquery-tutorials-roundup-with-examples' rel='bookmark' title='25+ jQuery Tutorials Roundup With Examples'>25+ jQuery Tutorials Roundup With Examples</a></li>
<li><a href='http://www.extratuts.com/amazing-jquery-tabs-tutorials' rel='bookmark' title='15 amazing jquery tabs tutorials'>15 amazing jquery tabs tutorials</a></li>
<li><a href='http://www.extratuts.com/css-jquery-animated-navigation-2' rel='bookmark' title='CSS and jQuery Animated Navigation'>CSS and jQuery Animated Navigation</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/excellent-jquery-menus-tutorials/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>CSS techniques web developer should use</title>
		<link>http://www.extratuts.com/css-techniques</link>
		<comments>http://www.extratuts.com/css-techniques#comments</comments>
		<pubDate>Tue, 29 Sep 2009 15:51:37 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[web2 roundups]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[techniques]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=469</guid>
		<description><![CDATA[in this article we will highlight some of the tricks and techniques using CSS to help you enhance your practical side using CSS. 1. conditional-css Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers. usage : http://www.conditional-css.com/usage 2. CSS Browser Selector [...]


Related posts:<ol><li><a href='http://www.extratuts.com/3-techniques-for-faux-image-cropping' rel='bookmark' title='3 Techniques For Faux Image Cropping'>3 Techniques For Faux Image Cropping</a></li>
<li><a href='http://www.extratuts.com/photoshop-a-picture-worth-a-thousand-words' rel='bookmark' title='Photoshop tutorial A Picture Worth a Thousand Words'>Photoshop tutorial A Picture Worth a Thousand Words</a></li>
<li><a href='http://www.extratuts.com/coding-a-html-5-layout-from-scratch' rel='bookmark' title='Coding A HTML 5 Layout From Scratch'>Coding A HTML 5 Layout From Scratch</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>in this article we will highlight some of the tricks and techniques using CSS to help you enhance your practical side using CSS.</p>
<p style="text-align: center;"><span id="more-469"></span></p>
<p><img class="image5" src="http://www.extratuts.com/wp-content/uploads/extutorials/7/1.jpg" alt="" width="590" height="170" title="1 CSS techniques web developer should use" /></p>
<h1 style="text-align: left;"><span style="color: #034f80;">1. conditional-css</span></h1>
<p>Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.</p>
<p><strong>usage </strong>: <a href="http://www.conditional-css.com/usage">http://www.conditional-css.com/usage</a></p>
<h1><span style="color: #034f80;">2. CSS Browser Selector</span></h1>
<p>CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.</p>
<p><strong>usage </strong>: <a href="http://rafael.adm.br/css_browser_selector/">http://rafael.adm.br/css_browser_selector/</a></p>
<h1><span style="color: #034f80;">3. adding a CSS StyleSheet to your RSS feeds</span></h1>
<p>it is an old technique , but we mentioned it as it is important to broke the regular pattern of the RSS readers viewing system .</p>
<p><strong>usage </strong>:</p>
<p>you will need to add the tag ( xml-stylesheet ) to your RSS feed file</p>
<div class="codesnip-container" >
<div class="html4strict codesnip" style="font-family:monospace;"><span class="sc2">&lt; ?xml <span class="kw3">version</span><span class="sy0">=</span><span class="st0">&quot;1.0&quot;</span> ?&gt;</span><br />
<span class="sc2">&lt; ?xml-stylesheet <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;rss.css&quot;</span> ?&gt;</span></div>
</div>
<p>Next you will need to create the CSS file called rss.css , how each RSS tag is displayed .</p>
<p>here&#8217;s an example for the RSS.css file</p>
<div class="codesnip-container" >
<div class="css codesnip" style="font-family:monospace;">rss<span class="sy0">,</span> title<span class="sy0">,</span> link<span class="sy0">,</span> item<span class="sy0">,</span> docs <span class="br0">&#123;</span><br />
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span><br />
rss <span class="br0">&#123;</span><br />
<span class="kw1">font-family</span><span class="sy0">:</span>tahoma<span class="sy0">;</span><br />
<span class="br0">&#125;</span><br />
title <span class="br0">&#123;</span><br />
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span><br />
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">2px</span><span class="sy0">;</span><br />
<span class="kw1">color</span><span class="sy0">:</span> <span class="kw2">gray</span><span class="sy0">;</span><br />
<span class="kw1">border-bottom</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="kw2">silver</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span><br />
link <span class="br0">&#123;</span><br />
<span class="kw1">font-size</span><span class="sy0">:</span> small<span class="sy0">;</span><br />
<span class="kw1">padding-right</span><span class="sy0">:</span> <span class="re3">10px</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span><br />
item <span class="br0">&#123;</span><br />
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">2px</span> <span class="re3">30px</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span><br />
docs <span class="br0">&#123;</span><br />
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#ffffe6</span><span class="sy0">;</span><br />
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">20px</span><span class="sy0">;</span><br />
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span><br />
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span><br />
<span class="kw1">color</span><span class="sy0">:</span> <span class="re0">#7f7f7f</span><span class="sy0">;</span><br />
<span class="kw1">border</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="kw2">solid</span> <span class="kw2">silver</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
<p>note : you can use the stylesheet to show or hide some feeds items to force the visitor to visit your site , but I do not support that .<br />
language, lastBuildDate, ttl, guid, category, description, pubDate {<br />
display: none;<br />
}</p>
<h1><span style="color: #034f80;">4. CSS Watermark Effect</span></h1>
<p>CSS Watermark is an unobtrusive and easy way for creating watermark (crossbrowser semi-transparent text) effect on your website&#8217;s images. You may choose between four standard and easy applicable text positions &#8211; topleft, topright, bottomright and bottomleft over the image.</p>
<p>Download : <a href="http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=50">http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=50</a></p>
<h1><span style="color: #034f80;">5. Alternative style sheets switching via the browser menu</span></h1>
<p>alternative style sheets allow the user to select the style in which the page is displayed using the View&gt;Page Style submenu. This provides a way for users to see multiple versions of a page, based on their needs or preferences.</p>
<p>Usage : <a href="https://developer.mozilla.org/en/Alternative_style_sheets">https://developer.mozilla.org/en/Alternative_style_sheets</a></p>
<h1><span style="color: #034f80;">6. Alternative style sheets switching via the website</span></h1>
<p>Usage :</p>
<p>we will add the alternative style sheets to the document , in our example we have three styles : default , blue and black , inside style.css we will define the formats which will appear in all styles , and default.css is for the formats belongs to the default but it will be change in the other styles .<br />
Note : I added the tag ( rel=”stylesheet” ) to the default style and the tag ( rel=”alternate stylesheet”  ) to the secondary.</p>
<div class="codesnip-container" >
<div class="html4strict codesnip" style="font-family:monospace;"><span class="sc2">&lt;<a href="http://december.com/html/4/element/link.html"><span class="kw2">link</span></a> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;stylesheet&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;style.css&quot;</span> <span class="sy0">/</span>&gt;</span><br />
<span class="sc2">&lt;<a href="http://december.com/html/4/element/link.html"><span class="kw2">link</span></a> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;stylesheet&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;default.css&quot;</span> <span class="sy0">/</span>&gt;</span><br />
<span class="sc2">&lt;<a href="http://december.com/html/4/element/link.html"><span class="kw2">link</span></a> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;alternate stylesheet&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span> <span class="kw3">media</span><span class="sy0">=</span><span class="st0">&quot;screen&quot;</span> <span class="kw3">title</span><span class="sy0">=</span><span class="st0">&quot;blue&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;blue.css&quot;</span> <span class="sy0">/</span>&gt;</span><br />
<span class="sc2">&lt;<a href="http://december.com/html/4/element/link.html"><span class="kw2">link</span></a> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">&quot;alternate stylesheet&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/css&quot;</span> <span class="kw3">media</span><span class="sy0">=</span><span class="st0">&quot;screen&quot;</span> <span class="kw3">title</span><span class="sy0">=</span><span class="st0">&quot;black&quot;</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;black.css&quot;</span> <span class="sy0">/</span>&gt;</span></div>
</div>
<p>next add the styleswitch.js file by adding this code at the head tag</p>
<div class="codesnip-container" >
<div class="html4strict codesnip" style="font-family:monospace;"><span class="sc2">&lt;<a href="http://december.com/html/4/element/script.html"><span class="kw2">script</span></a> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">&quot;js/styleswitch.js&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;text/javascript&quot;</span>&gt;&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/script.html"><span class="kw2">script</span></a>&gt;</span></div>
</div>
<p>you can download the styleswtich file<a href="http://www.extratuts.com/wp-content/uploads/extutorials/7/styleswitch.js"> from here </a></p>
<p>Now , the final step is to add the Switching style opthion by one of these methods :<br />
Radio menu :</p>
<div class="codesnip-container" >
<div class="html4strict codesnip" style="font-family:monospace;"><span class="sc2">&lt;<a href="http://december.com/html/4/element/form.html"><span class="kw2">form</span></a> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;switchform&quot;</span>&gt;</span> <span class="sc2">&lt;<a href="http://december.com/html/4/element/input.html"><span class="kw2">input</span></a> <span class="kw3">onclick</span><span class="sy0">=</span><span class="st0">&quot;chooseStyle(this.value, 60)&quot;</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;choice&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;radio&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;none&quot;</span> <span class="sy0">/</span>&gt;</span>default</p>
<p><span class="sc2">&lt;<a href="http://december.com/html/4/element/input.html"><span class="kw2">input</span></a> <span class="kw3">onclick</span><span class="sy0">=</span><span class="st0">&quot;chooseStyle(this.value, 60)&quot;</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;choice&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;radio&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;blue&quot;</span> <span class="sy0">/</span>&gt;</span>blue</p>
<p><span class="sc2">&lt;<a href="http://december.com/html/4/element/input.html"><span class="kw2">input</span></a> <span class="kw3">onclick</span><span class="sy0">=</span><span class="st0">&quot;chooseStyle(this.value, 60)&quot;</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;choice&quot;</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">&quot;radio&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;black&quot;</span> <span class="sy0">/</span>&gt;</span>black</p>
<p><span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/form.html"><span class="kw2">form</span></a>&gt;</span></div>
</div>
<p>Note : we used the titles of styles to define the value of the input .</p>
<p>URLs :</p>
<div class="codesnip-container" >
<div class="html4strict codesnip" style="font-family:monospace;"><span class="sc2">&lt;<a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;javascript:chooseStyle(&#8216;none&#8217;, 60)&quot;</span>&gt;</span>Default<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a>&gt;</span></p>
<p><span class="sc2">&lt;<a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;javascript:chooseStyle(&#8216;blue&#8217;, 60)&quot;</span>&gt;</span>Blue<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a>&gt;</span></p>
<p><span class="sc2">&lt;<a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">&quot;javascript:chooseStyle(&#8216;black&#8217;, 60)&quot;</span>&gt;</span>Black<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/a.html"><span class="kw2">a</span></a>&gt;</span></div>
</div>
<p>Opthions select menu (switchcontrol) :</p>
<div class="codesnip-container" >
<div class="html4strict codesnip" style="font-family:monospace;"><span class="sc2">&lt;<a href="http://december.com/html/4/element/form.html"><span class="kw2">form</span></a> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">&quot;switchform&quot;</span>&gt;</span> <span class="sc2">&lt;<a href="http://december.com/html/4/element/select.html"><span class="kw2">select</span></a> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;switchcontrol&quot;</span> <span class="kw3">size</span><span class="sy0">=</span><span class="st0">&quot;1&quot;</span>&gt;</span> <span class="sc2">&lt;<a href="http://december.com/html/4/element/option.html"><span class="kw2">option</span></a> <span class="kw3">selected</span><span class="sy0">=</span><span class="st0">&quot;selected&quot;</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;none&quot;</span>&gt;</span>Default<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/option.html"><span class="kw2">option</span></a>&gt;</span> <span class="sc2">&lt;<a href="http://december.com/html/4/element/option.html"><span class="kw2">option</span></a> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;blue&quot;</span>&gt;</span>Blue<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/option.html"><span class="kw2">option</span></a>&gt;</span> <span class="sc2">&lt;<a href="http://december.com/html/4/element/option.html"><span class="kw2">option</span></a> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">&quot;black&quot;</span>&gt;</span>Black<span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/option.html"><span class="kw2">option</span></a>&gt;</span> <span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/select.html"><span class="kw2">select</span></a>&gt;</span></p>
<p><span class="sc2">&lt;<span class="sy0">/</span><a href="http://december.com/html/4/element/form.html"><span class="kw2">form</span></a>&gt;</span></div>
</div>
<h1><span style="color: #034f80;">7. Forming Tooltip using CSS3</span></h1>
<p>We used to create tooltips using JavaScript , it was hard in changing colors and shapes but with CSS3 it is very easy.</p>
<p>Usage :</p>
<p>First we will make a div<br />
&lt;div title=&#8221; Tooltips Test&#8221;&gt;&lt;/div&gt;<br />
and adding the StyleSheet code which will hide the title when moving the cursor (pointer) on the div .</p>
<div class="codesnip-container" >
<div class="css codesnip" style="font-family:monospace;">div<span class="re2">:before</span><span class="br0">&#123;</span><br />
<span class="kw1">content</span><span class="sy0">:</span>attr<span class="br0">&#40;</span>title<span class="br0">&#41;</span><span class="sy0">;</span><br />
<span class="kw1">display</span><span class="sy0">:</span><span class="kw2">none</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>
<p>now add the CSS code to show the tooltip when you move the pointer on it .</p>
<div class="codesnip-container" >
<div class="css codesnip" style="font-family:monospace;">div<span class="re2">:hover</span><span class="sy0">:</span><span class="re2">:before</span><span class="br0">&#123;</span><br />
<span class="kw1">width</span><span class="sy0">:</span><span class="re3">250px</span><span class="sy0">;</span><br />
<span class="kw1">display</span><span class="sy0">:</span><span class="kw2">block</span><span class="sy0">;</span><br />
<span class="kw1">background</span><span class="sy0">:</span><span class="re0">#ccc</span><span class="sy0">;</span><br />
<span class="kw1">border</span><span class="sy0">:</span><span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#aaa</span><span class="sy0">;</span><br />
<span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span><br />
<span class="kw1">margin</span><span class="sy0">:</span><span class="re3">20px</span> 0 0 <span class="re3">10px</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span><br />
div<span class="re2">:hover</span><span class="br0">&#123;</span><br />
<span class="kw1">z-index</span><span class="sy0">:</span><span class="nu0">10</span><span class="sy0">;</span><br />
<span class="kw1">position</span><span class="sy0">:</span><span class="kw2">relative</span><span class="sy0">;</span><br />
<span class="br0">&#125;</span></div>
</div>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/3-techniques-for-faux-image-cropping' rel='bookmark' title='3 Techniques For Faux Image Cropping'>3 Techniques For Faux Image Cropping</a></li>
<li><a href='http://www.extratuts.com/photoshop-a-picture-worth-a-thousand-words' rel='bookmark' title='Photoshop tutorial A Picture Worth a Thousand Words'>Photoshop tutorial A Picture Worth a Thousand Words</a></li>
<li><a href='http://www.extratuts.com/coding-a-html-5-layout-from-scratch' rel='bookmark' title='Coding A HTML 5 Layout From Scratch'>Coding A HTML 5 Layout From Scratch</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/css-techniques/feed</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>3 Techniques For Faux Image Cropping</title>
		<link>http://www.extratuts.com/3-techniques-for-faux-image-cropping</link>
		<comments>http://www.extratuts.com/3-techniques-for-faux-image-cropping#comments</comments>
		<pubDate>Mon, 07 Sep 2009 20:58:28 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[Image Cropping]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[tutorials]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=445</guid>
		<description><![CDATA[This tutorial show you 3 easy and fast ways to control and faux image cropping with css , these techniques is to display only a portion of an image in your content ..this is image cropping ! . Related posts:CSS techniques web developer should use Ways to Browser Test and Validate Your Website How to [...]


Related posts:<ol><li><a href='http://www.extratuts.com/css-techniques' rel='bookmark' title='CSS techniques web developer should use'>CSS techniques web developer should use</a></li>
<li><a href='http://www.extratuts.com/ways-to-browser-test-and-validate-your-website' rel='bookmark' title='Ways to Browser Test and Validate Your Website'>Ways to Browser Test and Validate Your Website</a></li>
<li><a href='http://www.extratuts.com/how-to-display-delicious-counts-in-wordpress' rel='bookmark' title='How to Display Delicious Counts In WordPress'>How to Display Delicious Counts In WordPress</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>This tutorial show you 3 easy and fast ways to control and faux image cropping with css , these techniques is to display only a portion of an image in your content ..this is image cropping ! .</p>
<p style="text-align: center;"><span id="more-445"></span></p>
<p style="text-align: center;"><a href="http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/wp-post-thumbnail/tutorial35.jpg" alt="3 Techniques For Faux Image Cropping" width="590" height="170" /></a></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/css-techniques' rel='bookmark' title='CSS techniques web developer should use'>CSS techniques web developer should use</a></li>
<li><a href='http://www.extratuts.com/ways-to-browser-test-and-validate-your-website' rel='bookmark' title='Ways to Browser Test and Validate Your Website'>Ways to Browser Test and Validate Your Website</a></li>
<li><a href='http://www.extratuts.com/how-to-display-delicious-counts-in-wordpress' rel='bookmark' title='How to Display Delicious Counts In WordPress'>How to Display Delicious Counts In WordPress</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/3-techniques-for-faux-image-cropping/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How To Create a Beautiful Dropdown Blogroll Without Javascript</title>
		<link>http://www.extratuts.com/how-to-create-a-beautiful-dropdown-blogroll-without-javascript</link>
		<comments>http://www.extratuts.com/how-to-create-a-beautiful-dropdown-blogroll-without-javascript#comments</comments>
		<pubDate>Tue, 25 Aug 2009 13:28:10 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[blogroll]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Dropdown]]></category>
		<category><![CDATA[Xhtml]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=355</guid>
		<description><![CDATA[DropDown Blogroll is very useful technique to include a long list of links without taking much space from your page , This tutorial showa you how to make a DropDown Blogroll with css and xhtml without using Javascript . Related posts:Lightbox , Futurebox Without Using JavaScript Design a Beautiful Website From Scratch Create jQuery Sliders [...]


Related posts:<ol><li><a href='http://www.extratuts.com/lightbox-futurebox-without-using-javascript' rel='bookmark' title='Lightbox , Futurebox Without Using JavaScript'>Lightbox , Futurebox Without Using JavaScript</a></li>
<li><a href='http://www.extratuts.com/design-a-beautiful-website-from-scratch' rel='bookmark' title='Design a Beautiful Website From Scratch'>Design a Beautiful Website From Scratch</a></li>
<li><a href='http://www.extratuts.com/create-jquery-sliders-tutorial' rel='bookmark' title='Create jQuery Sliders Tutorial'>Create jQuery Sliders Tutorial</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>DropDown Blogroll is very useful technique to include a long list of links without taking much space from your page , This tutorial showa you how to make a DropDown Blogroll with css and xhtml without using Javascript .</p>
<p style="text-align: center;"><span id="more-355"></span></p>
<p style="text-align: center;"><a href="http://www.problogdesign.com/wordpress/how-to-create-a-beautiful-dropdown-blogroll-without-javascript/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/wp-post-thumbnail/tutorial31.jpg" alt="How To Create a Beautiful Dropdown Blogroll Without Javascript" width="590" height="170" /></a></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/lightbox-futurebox-without-using-javascript' rel='bookmark' title='Lightbox , Futurebox Without Using JavaScript'>Lightbox , Futurebox Without Using JavaScript</a></li>
<li><a href='http://www.extratuts.com/design-a-beautiful-website-from-scratch' rel='bookmark' title='Design a Beautiful Website From Scratch'>Design a Beautiful Website From Scratch</a></li>
<li><a href='http://www.extratuts.com/create-jquery-sliders-tutorial' rel='bookmark' title='Create jQuery Sliders Tutorial'>Create jQuery Sliders Tutorial</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/how-to-create-a-beautiful-dropdown-blogroll-without-javascript/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Coding A HTML 5 Layout From Scratch</title>
		<link>http://www.extratuts.com/coding-a-html-5-layout-from-scratch</link>
		<comments>http://www.extratuts.com/coding-a-html-5-layout-from-scratch#comments</comments>
		<pubDate>Sat, 08 Aug 2009 19:43:56 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html 5]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[Xhtml]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=260</guid>
		<description><![CDATA[This tutorial is going to show you how to use the new techniques XHTML5 &#38; CSS3 to code a layout from scratch . the layout we are going to make will cover most of the elements which will help you start coding HTML5 , like the page&#8217;s name and it&#8217;s slogan , a menu , [...]


Related posts:<ol><li><a href='http://www.extratuts.com/create-a-dark-and-sleek-web-layout-using-photoshop' rel='bookmark' title='Create a Dark and Sleek Web Layout Using Photoshop'>Create a Dark and Sleek Web Layout Using Photoshop</a></li>
<li><a href='http://www.extratuts.com/how-to-design-a-colorful-web-layout-in-photoshop' rel='bookmark' title='How To Design a Colorful Web Layout in Photoshop'>How To Design a Colorful Web Layout in Photoshop</a></li>
<li><a href='http://www.extratuts.com/sticky-fixed-sidenav-layout-with-css-and-jquery' rel='bookmark' title='Sticky (Fixed) SideNav Layout with CSS and jQuery'>Sticky (Fixed) SideNav Layout with CSS and jQuery</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>This tutorial is going to show you how to use the new techniques XHTML5 &amp; CSS3 to code a layout from scratch .<br />
the layout we are going to make will cover most of the elements which will help you start coding HTML5 , like the page&#8217;s name and it&#8217;s slogan , a menu , a highlightend area , a post listing , an extras section with some external links , about box and a copyright statement .</p>
<p style="text-align: center;"><span id="more-260"></span></p>
<p style="text-align: center;"><a href="http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/wp-post-thumbnail/tutorial28.jpg" alt="Lightbox Without Using JavaScript" width="590" height="170" /></a></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/create-a-dark-and-sleek-web-layout-using-photoshop' rel='bookmark' title='Create a Dark and Sleek Web Layout Using Photoshop'>Create a Dark and Sleek Web Layout Using Photoshop</a></li>
<li><a href='http://www.extratuts.com/how-to-design-a-colorful-web-layout-in-photoshop' rel='bookmark' title='How To Design a Colorful Web Layout in Photoshop'>How To Design a Colorful Web Layout in Photoshop</a></li>
<li><a href='http://www.extratuts.com/sticky-fixed-sidenav-layout-with-css-and-jquery' rel='bookmark' title='Sticky (Fixed) SideNav Layout with CSS and jQuery'>Sticky (Fixed) SideNav Layout with CSS and jQuery</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/coding-a-html-5-layout-from-scratch/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Create a Cartoon Landscape Website With a little jQuery</title>
		<link>http://www.extratuts.com/create-a-cartoon-landscape-website-with-a-little-jquery</link>
		<comments>http://www.extratuts.com/create-a-cartoon-landscape-website-with-a-little-jquery#comments</comments>
		<pubDate>Fri, 07 Aug 2009 18:09:51 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[tutorials]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=256</guid>
		<description><![CDATA[This tutorial will show you how to produce a website that is a little different to the typical ones you see around. It will be a cartonny or comic scene using a variety of different graphic vectors , it also going to show you how to add a little JQuery to spice it up! Related [...]


Related posts:<ol><li><a href='http://www.extratuts.com/create-simple-tabs-with-jquery-and-css' rel='bookmark' title='Create Simple Tabs With jQuery and CSS'>Create Simple Tabs With jQuery and CSS</a></li>
<li><a href='http://www.extratuts.com/create-jquery-sliders-tutorial' rel='bookmark' title='Create jQuery Sliders Tutorial'>Create jQuery Sliders Tutorial</a></li>
<li><a href='http://www.extratuts.com/how-to-create-tweet-counter-with-jquery' rel='bookmark' title='How To Create Tweet Counter With jQuery'>How To Create Tweet Counter With jQuery</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>This tutorial will show you how to produce a website that is a little different to the typical ones you see around. It will be a cartonny or comic scene using a variety of different graphic vectors , it also going to show you how to add a little JQuery to spice it up!</p>
<p style="text-align: center;"><span id="more-256"></span></p>
<p style="text-align: center;"><a href="http://blog.creativityden.com/create-a-cartoon-landscape-website-with-a-little-jquery/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/wp-post-thumbnail/tutorial27.jpg" alt="Lightbox Without Using JavaScript" width="590" height="170" /></a></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/create-simple-tabs-with-jquery-and-css' rel='bookmark' title='Create Simple Tabs With jQuery and CSS'>Create Simple Tabs With jQuery and CSS</a></li>
<li><a href='http://www.extratuts.com/create-jquery-sliders-tutorial' rel='bookmark' title='Create jQuery Sliders Tutorial'>Create jQuery Sliders Tutorial</a></li>
<li><a href='http://www.extratuts.com/how-to-create-tweet-counter-with-jquery' rel='bookmark' title='How To Create Tweet Counter With jQuery'>How To Create Tweet Counter With jQuery</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/create-a-cartoon-landscape-website-with-a-little-jquery/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Lightbox , Futurebox Without Using JavaScript</title>
		<link>http://www.extratuts.com/lightbox-futurebox-without-using-javascript</link>
		<comments>http://www.extratuts.com/lightbox-futurebox-without-using-javascript#comments</comments>
		<pubDate>Fri, 07 Aug 2009 05:53:07 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Futurebox]]></category>
		<category><![CDATA[lightbox]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[tutorials]]></category>
		<category><![CDATA[Xhtml]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=253</guid>
		<description><![CDATA[Now you are not in need to learn JavaScript or to use it to make a lightbox , because this tutorial is going to shwo you how to make a lightbox without using JavaScript , only  CSS &#38; Xhml . Related posts:How To Create a Beautiful Dropdown Blogroll Without Javascript +15 useful ajax lightbox solutions [...]


Related posts:<ol><li><a href='http://www.extratuts.com/how-to-create-a-beautiful-dropdown-blogroll-without-javascript' rel='bookmark' title='How To Create a Beautiful Dropdown Blogroll Without Javascript'>How To Create a Beautiful Dropdown Blogroll Without Javascript</a></li>
<li><a href='http://www.extratuts.com/useful-ajax-lightbox-solutions' rel='bookmark' title='+15 useful ajax lightbox solutions'>+15 useful ajax lightbox solutions</a></li>
<li><a href='http://www.extratuts.com/create-a-cartoon-landscape-website-with-a-little-jquery' rel='bookmark' title='Create a Cartoon Landscape Website With a little jQuery'>Create a Cartoon Landscape Website With a little jQuery</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Now you are not in need to learn JavaScript or to use it to make a lightbox , because this tutorial is going to shwo you how to make a lightbox without using JavaScript , only  CSS &amp; Xhml .</p>
<p style="text-align: center;"><span id="more-253"></span></p>
<p style="text-align: center;"><a href="http://www.thecssninja.com/xhtml/futurebox"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/wp-post-thumbnail/tutorial26.jpg" alt="Lightbox Without Using JavaScript" width="590" height="170" /></a></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/how-to-create-a-beautiful-dropdown-blogroll-without-javascript' rel='bookmark' title='How To Create a Beautiful Dropdown Blogroll Without Javascript'>How To Create a Beautiful Dropdown Blogroll Without Javascript</a></li>
<li><a href='http://www.extratuts.com/useful-ajax-lightbox-solutions' rel='bookmark' title='+15 useful ajax lightbox solutions'>+15 useful ajax lightbox solutions</a></li>
<li><a href='http://www.extratuts.com/create-a-cartoon-landscape-website-with-a-little-jquery' rel='bookmark' title='Create a Cartoon Landscape Website With a little jQuery'>Create a Cartoon Landscape Website With a little jQuery</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/lightbox-futurebox-without-using-javascript/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sticky (Fixed) SideNav Layout with CSS and jQuery</title>
		<link>http://www.extratuts.com/sticky-fixed-sidenav-layout-with-css-and-jquery</link>
		<comments>http://www.extratuts.com/sticky-fixed-sidenav-layout-with-css-and-jquery#comments</comments>
		<pubDate>Tue, 04 Aug 2009 21:57:10 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS & Xhtml]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[css . jQuery]]></category>
		<category><![CDATA[fixed]]></category>
		<category><![CDATA[sidenav layout]]></category>
		<category><![CDATA[sticky]]></category>

		<guid isPermaLink="false">http://www.extratuts.com/?p=240</guid>
		<description><![CDATA[This tutorial show you how to create a fixed sidenav layout , it allows your users to cruise through the content without scrolling back up to the top to navigate through the rest of the site . Related posts:Create a Dark and Sleek Web Layout Using Photoshop How To Design a Colorful Web Layout in [...]


Related posts:<ol><li><a href='http://www.extratuts.com/create-a-dark-and-sleek-web-layout-using-photoshop' rel='bookmark' title='Create a Dark and Sleek Web Layout Using Photoshop'>Create a Dark and Sleek Web Layout Using Photoshop</a></li>
<li><a href='http://www.extratuts.com/how-to-design-a-colorful-web-layout-in-photoshop' rel='bookmark' title='How To Design a Colorful Web Layout in Photoshop'>How To Design a Colorful Web Layout in Photoshop</a></li>
<li><a href='http://www.extratuts.com/coding-a-html-5-layout-from-scratch' rel='bookmark' title='Coding A HTML 5 Layout From Scratch'>Coding A HTML 5 Layout From Scratch</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>This tutorial show you how to create a fixed sidenav layout , it allows your users to cruise through the content without scrolling back up to the top to navigate through the rest of the site .<strong></strong></p>
<p style="text-align: center;"><span id="more-240"></span></p>
<p style="text-align: center;"><a href="http://designm.ag/tutorials/sticky-sidenav-layout/"><img class="image5" title="Visit Tutorial !" src="http://www.extratuts.com/wp-content/uploads/wp-post-thumbnail/tutorial23.jpg" alt="Using CSS Sprites and Photoshop : Create Menus With Images" width="590" height="170" /></a></p>


<p>Related posts:<ol><li><a href='http://www.extratuts.com/create-a-dark-and-sleek-web-layout-using-photoshop' rel='bookmark' title='Create a Dark and Sleek Web Layout Using Photoshop'>Create a Dark and Sleek Web Layout Using Photoshop</a></li>
<li><a href='http://www.extratuts.com/how-to-design-a-colorful-web-layout-in-photoshop' rel='bookmark' title='How To Design a Colorful Web Layout in Photoshop'>How To Design a Colorful Web Layout in Photoshop</a></li>
<li><a href='http://www.extratuts.com/coding-a-html-5-layout-from-scratch' rel='bookmark' title='Coding A HTML 5 Layout From Scratch'>Coding A HTML 5 Layout From Scratch</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.extratuts.com/sticky-fixed-sidenav-layout-with-css-and-jquery/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

