<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>PriteshGupta.com</title>
	
	<link>http://www.priteshgupta.com</link>
	<description>Web and Technology blog</description>
	<lastBuildDate>Sun, 15 Jan 2012 12:11:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/priteshgupta" /><feedburner:info uri="priteshgupta" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>priteshgupta</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>Disable textarea Resizing</title>
		<link>http://feedproxy.google.com/~r/priteshgupta/~3/XhL2gkg8ctc/</link>
		<comments>http://www.priteshgupta.com/2012/01/disable-textarea-resizing/#comments</comments>
		<pubDate>Sun, 15 Jan 2012 12:11:59 +0000</pubDate>
		<dc:creator>Pritesh Gupta</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://www.priteshgupta.com/?p=2034</guid>
		<description><![CDATA[Normally whenever we use textarea in pages, the browser allows the user to resize it, but at times this is not wanted(as it might screw the other aspects of the design). Here is how we can disable textarea resizing using basic CSS. Old Method In the old method, we needed to to specify the value [...]]]></description>
			<content:encoded><![CDATA[<p>Normally whenever we use <strong>textarea</strong> in pages, the browser allows the user to <strong>resize</strong> it, but at times this is not wanted(as it might screw the other aspects of the design). Here is how we can <strong>disable textarea resizing</strong> using basic <strong>CSS</strong>.</p>
<h2>Old Method</h2>
<p>In the old method, we needed to to specify the value of the CSS property of the <code><strong>max-height</strong></code>/<code><strong>max-width</strong></code> same as <code><strong>height</strong></code>/<code><strong>width</strong></code>.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
</pre>
<pre><span class="css">textarea{
        <span class="css-property">height<span class="css-selector">:</span><span class="css-value">300px</span></span>;
        <span class="css-property">width<span class="css-selector">:</span><span class="css-value">400px</span></span>;
        <span class="css-property">max-height<span class="css-selector">:</span><span class="css-value">300px</span></span>;
        <span class="css-property">max-width<span class="css-selector">:</span><span class="css-value">400px</span></span>;
    }</span></pre>
</div>
<p>Though this method will work out well, but we still see that &#8220;resize&#8221; icon in corner. </p>
<h2>New CSS3 Method</h2>
<p>Hence, there is a better way to do this in CSS3. Instead of specifying the <code><strong>max-height</strong></code>/<code><strong>max-width</strong></code>, we can simply mention <code><strong>resize: none</strong></code>.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
</pre>
<pre><span class="css">textarea{
        <span class="css-property">height<span class="css-selector">:</span><span class="css-value">300px</span></span>;
        <span class="css-property">width<span class="css-selector">:</span><span class="css-value">400px</span></span>;
        <span class="css-property">resize<span class="css-selector">:</span><span class="css-value">none</span></span>;
    }</span></pre>
</div>
<p>It works the same way, and this time without the &#8220;resize&#8221; icon in corner. </p>
<h2>Optional/Conditional Resizing</h2>
<p>For enabling only the <strong>horizontal</strong> resizing, we can replace the <code><strong>none</strong></code> with <code><strong>horizontal</strong></code>. </p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
</pre>
<pre><span class="css">textarea{
        <span class="css-property">height<span class="css-selector">:</span><span class="css-value">300px</span></span>;
        <span class="css-property">width<span class="css-selector">:</span><span class="css-value">400px</span></span>;
        <span class="css-property">resize<span class="css-selector">:</span><span class="css-value">horizontal</span></span>;
    }</span></pre>
</div>
<p>Similarly for enabling only the <strong>vertical</strong> resizing, we can replace the <code><strong>none</strong></code> with <code><strong>vertical</strong></code>. </p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
</pre>
<pre><span class="css">textarea{
        <span class="css-property">height<span class="css-selector">:</span><span class="css-value">300px</span></span>;
        <span class="css-property">width<span class="css-selector">:</span><span class="css-value">400px</span></span>;
        <span class="css-property">resize<span class="css-selector">:</span><span class="css-value">vertical</span></span>;
    }</span></pre>
</div>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=Disable+textarea+Resizing&amp;link=http://www.priteshgupta.com/2012/01/disable-textarea-resizing/&amp;notes=Normally%20whenever%20we%20use%20textarea%20in%20pages%2C%20the%20browser%20allows%20the%20user%20to%20resize%20it%2C%20but%20at%20times%20this%20is%20not%20wanted%28as%20it%20might%20screw%20the%20other%20aspects%20of%20the%20design%29.%20Here%20is%20how%20we%20can%20disable%20textarea%20resizing%20using%20basic%20CSS.%0D%0A%0D%0AOld%20Method%0D%0AIn%20the%20old%20method%2C%20we%20needed%20to%20to%20specify%20the%20value%20&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=Disable+textarea+Resizing&amp;link=http://www.priteshgupta.com/2012/01/disable-textarea-resizing/&amp;notes=Normally%20whenever%20we%20use%20textarea%20in%20pages%2C%20the%20browser%20allows%20the%20user%20to%20resize%20it%2C%20but%20at%20times%20this%20is%20not%20wanted%28as%20it%20might%20screw%20the%20other%20aspects%20of%20the%20design%29.%20Here%20is%20how%20we%20can%20disable%20textarea%20resizing%20using%20basic%20CSS.%0D%0A%0D%0AOld%20Method%0D%0AIn%20the%20old%20method%2C%20we%20needed%20to%20to%20specify%20the%20value%20&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://www.shareaholic.com/api/share/?title=Disable+textarea+Resizing&amp;link=http://www.priteshgupta.com/2012/01/disable-textarea-resizing/&amp;notes=Normally%20whenever%20we%20use%20textarea%20in%20pages%2C%20the%20browser%20allows%20the%20user%20to%20resize%20it%2C%20but%20at%20times%20this%20is%20not%20wanted%28as%20it%20might%20screw%20the%20other%20aspects%20of%20the%20design%29.%20Here%20is%20how%20we%20can%20disable%20textarea%20resizing%20using%20basic%20CSS.%0D%0A%0D%0AOld%20Method%0D%0AIn%20the%20old%20method%2C%20we%20needed%20to%20to%20specify%20the%20value%20&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=3&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.shareaholic.com/api/share/?title=Disable+textarea+Resizing&amp;link=http://www.priteshgupta.com/2012/01/disable-textarea-resizing/&amp;notes=Normally%20whenever%20we%20use%20textarea%20in%20pages%2C%20the%20browser%20allows%20the%20user%20to%20resize%20it%2C%20but%20at%20times%20this%20is%20not%20wanted%28as%20it%20might%20screw%20the%20other%20aspects%20of%20the%20design%29.%20Here%20is%20how%20we%20can%20disable%20textarea%20resizing%20using%20basic%20CSS.%0D%0A%0D%0AOld%20Method%0D%0AIn%20the%20old%20method%2C%20we%20needed%20to%20to%20specify%20the%20value%20&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=257&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=Disable+textarea+Resizing&amp;link=http://www.priteshgupta.com/2012/01/disable-textarea-resizing/&amp;notes=Normally%20whenever%20we%20use%20textarea%20in%20pages%2C%20the%20browser%20allows%20the%20user%20to%20resize%20it%2C%20but%20at%20times%20this%20is%20not%20wanted%28as%20it%20might%20screw%20the%20other%20aspects%20of%20the%20design%29.%20Here%20is%20how%20we%20can%20disable%20textarea%20resizing%20using%20basic%20CSS.%0D%0A%0D%0AOld%20Method%0D%0AIn%20the%20old%20method%2C%20we%20needed%20to%20to%20specify%20the%20value%20&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.priteshgupta.com/2012/01/disable-textarea-resizing/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.shareaholic.com/api/share/?title=Disable+textarea+Resizing&amp;link=http://www.priteshgupta.com/2012/01/disable-textarea-resizing/&amp;notes=Normally%20whenever%20we%20use%20textarea%20in%20pages%2C%20the%20browser%20allows%20the%20user%20to%20resize%20it%2C%20but%20at%20times%20this%20is%20not%20wanted%28as%20it%20might%20screw%20the%20other%20aspects%20of%20the%20design%29.%20Here%20is%20how%20we%20can%20disable%20textarea%20resizing%20using%20basic%20CSS.%0D%0A%0D%0AOld%20Method%0D%0AIn%20the%20old%20method%2C%20we%20needed%20to%20to%20specify%20the%20value%20&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=38&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://www.shareaholic.com/api/share/?title=Disable+textarea+Resizing&amp;link=http://www.priteshgupta.com/2012/01/disable-textarea-resizing/&amp;notes=Normally%20whenever%20we%20use%20textarea%20in%20pages%2C%20the%20browser%20allows%20the%20user%20to%20resize%20it%2C%20but%20at%20times%20this%20is%20not%20wanted%28as%20it%20might%20screw%20the%20other%20aspects%20of%20the%20design%29.%20Here%20is%20how%20we%20can%20disable%20textarea%20resizing%20using%20basic%20CSS.%0D%0A%0D%0AOld%20Method%0D%0AIn%20the%20old%20method%2C%20we%20needed%20to%20to%20specify%20the%20value%20&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=10&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.shareaholic.com/api/share/?title=Disable+textarea+Resizing&amp;link=http://www.priteshgupta.com/2012/01/disable-textarea-resizing/&amp;notes=Normally%20whenever%20we%20use%20textarea%20in%20pages%2C%20the%20browser%20allows%20the%20user%20to%20resize%20it%2C%20but%20at%20times%20this%20is%20not%20wanted%28as%20it%20might%20screw%20the%20other%20aspects%20of%20the%20design%29.%20Here%20is%20how%20we%20can%20disable%20textarea%20resizing%20using%20basic%20CSS.%0D%0A%0D%0AOld%20Method%0D%0AIn%20the%20old%20method%2C%20we%20needed%20to%20to%20specify%20the%20value%20&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=43&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>


<p><a href="http://feedads.g.doubleclick.net/~a/KKyBThPc1ljwAX-K6sXkEmKQ92o/0/da"><img src="http://feedads.g.doubleclick.net/~a/KKyBThPc1ljwAX-K6sXkEmKQ92o/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/KKyBThPc1ljwAX-K6sXkEmKQ92o/1/da"><img src="http://feedads.g.doubleclick.net/~a/KKyBThPc1ljwAX-K6sXkEmKQ92o/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/priteshgupta?a=XhL2gkg8ctc:-sAnRDuiSgo:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/priteshgupta?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/priteshgupta?a=XhL2gkg8ctc:-sAnRDuiSgo:caC8GWrvNc4"><img src="http://feeds.feedburner.com/~ff/priteshgupta?i=XhL2gkg8ctc:-sAnRDuiSgo:caC8GWrvNc4" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/priteshgupta/~4/XhL2gkg8ctc" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.priteshgupta.com/2012/01/disable-textarea-resizing/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.priteshgupta.com/2012/01/disable-textarea-resizing/</feedburner:origLink></item>
		<item>
		<title>15 Free And Bracing Navigation Menus PSD</title>
		<link>http://feedproxy.google.com/~r/priteshgupta/~3/jwGw2nwdZuc/</link>
		<comments>http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/#comments</comments>
		<pubDate>Fri, 23 Dec 2011 12:17:24 +0000</pubDate>
		<dc:creator>Pritesh Gupta</dc:creator>
				<category><![CDATA[Design and Development]]></category>
		<category><![CDATA[Freebies]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[PSD]]></category>

		<guid isPermaLink="false">http://www.priteshgupta.com/?p=1970</guid>
		<description><![CDATA[Here are 15 fresh and modern navigation menus with layered PSDs, you can find plenty of them in Internet, I have just filtered the best and most bracing ones. Please contact the respective authors of these PSD&#8217;s if you have any usage restrictions query. Dark Navigation Download&#160; Navigation &#038; Search Download&#160; Dropdown Navigation Bar Download&#160; [...]]]></description>
			<content:encoded><![CDATA[<p>Here are 15 <strong>fresh</strong> and <strong>modern</strong> navigation menus with <strong>layered PSDs</strong>, you can find plenty of them in Internet, I have just filtered the <strong>best</strong> and most <strong>bracing</strong> ones. Please contact the respective authors of these PSD&#8217;s if you have any usage restrictions query. </p>
<h2>Dark Navigation</h2>
<p><img src="http://www.purtypixels.com/wp-content/uploads/2011/12/darky-nav-copy.jpg" alt="Dark Navigation" width="580" /></p>
<div class="fix"></div>
<p><a href="http://www.purtypixels.com/darky-navigation-psd/" class="woo-sc-button  silver xl" title="Dark Navigation Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Navigation &#038; Search</h2>
<p><img src="http://juicygraphics.net/wp-content/uploads/2011/12/JuicyGraphics-navsearch-freebie.png" alt="Navigation &#038; Search" width="580" /></p>
<div class="fix"></div>
<p><a href="http://juicygraphics.net/freebies/navigation-search/" class="woo-sc-button  silver xl" title="Navigation &#038; Search Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Dropdown Navigation Bar</h2>
<p><img src="http://cdn.designmoo.com/wp-content/uploads/2011/10/046-preview.jpg" alt="Dropdown Navigation Bar" width="580" /></p>
<div class="fix"></div>
<p><a href="http://designmoo.com/12467/dropdown-navigation-bar-free-psd/" class="woo-sc-button  silver xl" title="Dropdown Navigation Bar Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Modern menu &#038; GUI elements</h2>
<p><img src="http://www.graphicsfuel.com/wp-content/uploads/2011/08/ribbon-menu.jpg" alt="Modern menu &#038; GUI elements" width="580" /></p>
<div class="fix"></div>
<p><a href="http://www.graphicsfuel.com/2011/08/modern-menu-gui-elements-psd/" class="woo-sc-button  silver xl" title="Modern menu &#038; GUI elements Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>AWESOME MENU</h2>
<p><img src="http://fc00.deviantart.net/fs70/i/2011/117/f/6/free_psd_source___2_by_prkdeviant-d3f02j1.jpg" alt="AWESOME MENU" width="580" /></p>
<div class="fix"></div>
<p><a href="http://prkdeviant.deviantart.com/art/Free-PSD-Source-2-206596045" class="woo-sc-button  silver xl" title="AWESOME MENU Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Breadcrumbs Navigation</h2>
<p><img src="http://pixelentity.com/wp-content/uploads/2011/06/breadcrumbs.jpg" alt="Breadcrumbs Navagation" width="580" /></p>
<div class="fix"></div>
<p><a href="http://pixelentity.com/freebies/breadcrumbs-navagation-psd/" class="woo-sc-button  silver xl" title="Breadcrumbs Navagation Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Ribbon Navigation</h2>
<p><img src="http://fc08.deviantart.net/fs71/i/2011/105/b/a/free_ribbon_navigation__psd_by_willyepp-d3e1wyw.png" alt="Ribbon Navigation" width="580" /></p>
<div class="fix"></div>
<p><a href="http://willyepp.deviantart.com/art/Free-Ribbon-Navigation-PSD-205002536" class="woo-sc-button  silver xl" title="Ribbon Navigation Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Sleek Dark Navigation Menu</h2>
<p><img src="http://pixelspiral.com/wp-content/uploads/2011/10/freebie-menu-preview.jpg" alt="Sleek Dark Navigation Menu Navigation" width="580" /></p>
<div class="fix"></div>
<p><a href="http://pixelspiral.com/freebies/free-sleek-dark-navigation-menu-psd/" class="woo-sc-button  silver xl" title="Sleek Dark Navigation Menu Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>HORIZONTAL MENU</h2>
<p><img src="http://www.swiftpsd.com/wp-content/uploads/HorizontalMenu_full-908x400.jpg" alt="HORIZONTAL MENU" width="580" /></p>
<div class="fix"></div>
<p><a href="http://www.swiftpsd.com/posts/horizontal-menu-psd/" class="woo-sc-button  silver xl" title="HORIZONTAL MENU Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Simple Light Navigation</h2>
<p><img src="http://cdn.designmoo.com/wp-content/uploads/2011/03/Navigation-Preview-little1.png" alt="Simple Light Navigation"/></p>
<div class="fix"></div>
<p><a href="http://designmoo.com/3643/simple-light-navigation/" class="woo-sc-button  silver xl" title="Simple Light Navigation Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Breadcrumbs navigation</h2>
<p><img src="http://pixelsdaily.com/wp-content/uploads/2011/05/breadcrumbs.png" alt="Breadcrumbs navigation" width="580" /></p>
<div class="fix"></div>
<p><a href="http://pixelsdaily.com/resources/photoshop/psds/psd-breadcrumbs-navigation/" class="woo-sc-button  silver xl" title="Breadcrumbs navigation Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Navigation Bar</h2>
<p><img src="http://cdn.designmoo.com/wp-content/uploads/2011/08/dribbble.jpg" alt="Navigation Bar"  /></p>
<div class="fix"></div>
<p><a href="http://designmoo.com/7272/navigation-bar/" class="woo-sc-button  silver xl" title="Navigation Bar<br />
 Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>BREADCRUMBS</h2>
<p><img src="http://www.swiftpsd.com/wp-content/uploads/Breadcrumbs_postimage.jpg" alt="BREADCRUMBS" width="580" /></p>
<div class="fix"></div>
<p><a href="http://www.swiftpsd.com/posts/breadcrumbs-psd/" class="woo-sc-button  silver xl" title="BREADCRUMBS Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Simple navigation menu</h2>
<p><img src="http://freebiesbooth.com/wp-content/uploads/2011/08/030_big.jpg" alt="Simple navigation menu"/></p>
<div class="fix"></div>
<p><a href="http://freebiesbooth.com/simple-navigation-menu" class="woo-sc-button  silver xl" title="Simple navigation menu Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>
<h2>Ribbon menu</h2>
<p><img src="http://cdn.designmoo.com/wp-content/uploads/2011/03/screenshot.png" alt="Ribbon menu"/></p>
<div class="fix"></div>
<p><a href="http://designmoo.com/4017/ribbon-menu/" class="woo-sc-button  silver xl" title="Ribbon menu Download" target="_blank"><span class="woo-download">Download&nbsp;</span></a></p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=15+Free+And+Bracing+Navigation+Menus+PSD&amp;link=http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/&amp;notes=Here%20are%2015%20fresh%20and%20modern%20navigation%20menus%20with%20layered%20PSDs%2C%20you%20can%20find%20plenty%20of%20them%20in%20Internet%2C%20I%20have%20just%20filtered%20the%20best%20and%20most%20bracing%20ones.%20Please%20contact%20the%20respective%20authors%20of%20these%20PSD%27s%20if%20you%20have%20any%20usage%20restrictions%20query.%20%0D%0A%0D%0ADark%20Navigation%0D%0A%0D%0A%0D%0ADownload%26nbsp%3B%0D%0A%0D%0A%0D%0AN&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=15+Free+And+Bracing+Navigation+Menus+PSD&amp;link=http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/&amp;notes=Here%20are%2015%20fresh%20and%20modern%20navigation%20menus%20with%20layered%20PSDs%2C%20you%20can%20find%20plenty%20of%20them%20in%20Internet%2C%20I%20have%20just%20filtered%20the%20best%20and%20most%20bracing%20ones.%20Please%20contact%20the%20respective%20authors%20of%20these%20PSD%27s%20if%20you%20have%20any%20usage%20restrictions%20query.%20%0D%0A%0D%0ADark%20Navigation%0D%0A%0D%0A%0D%0ADownload%26nbsp%3B%0D%0A%0D%0A%0D%0AN&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://www.shareaholic.com/api/share/?title=15+Free+And+Bracing+Navigation+Menus+PSD&amp;link=http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/&amp;notes=Here%20are%2015%20fresh%20and%20modern%20navigation%20menus%20with%20layered%20PSDs%2C%20you%20can%20find%20plenty%20of%20them%20in%20Internet%2C%20I%20have%20just%20filtered%20the%20best%20and%20most%20bracing%20ones.%20Please%20contact%20the%20respective%20authors%20of%20these%20PSD%27s%20if%20you%20have%20any%20usage%20restrictions%20query.%20%0D%0A%0D%0ADark%20Navigation%0D%0A%0D%0A%0D%0ADownload%26nbsp%3B%0D%0A%0D%0A%0D%0AN&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=3&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.shareaholic.com/api/share/?title=15+Free+And+Bracing+Navigation+Menus+PSD&amp;link=http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/&amp;notes=Here%20are%2015%20fresh%20and%20modern%20navigation%20menus%20with%20layered%20PSDs%2C%20you%20can%20find%20plenty%20of%20them%20in%20Internet%2C%20I%20have%20just%20filtered%20the%20best%20and%20most%20bracing%20ones.%20Please%20contact%20the%20respective%20authors%20of%20these%20PSD%27s%20if%20you%20have%20any%20usage%20restrictions%20query.%20%0D%0A%0D%0ADark%20Navigation%0D%0A%0D%0A%0D%0ADownload%26nbsp%3B%0D%0A%0D%0A%0D%0AN&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=257&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=15+Free+And+Bracing+Navigation+Menus+PSD&amp;link=http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/&amp;notes=Here%20are%2015%20fresh%20and%20modern%20navigation%20menus%20with%20layered%20PSDs%2C%20you%20can%20find%20plenty%20of%20them%20in%20Internet%2C%20I%20have%20just%20filtered%20the%20best%20and%20most%20bracing%20ones.%20Please%20contact%20the%20respective%20authors%20of%20these%20PSD%27s%20if%20you%20have%20any%20usage%20restrictions%20query.%20%0D%0A%0D%0ADark%20Navigation%0D%0A%0D%0A%0D%0ADownload%26nbsp%3B%0D%0A%0D%0A%0D%0AN&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.shareaholic.com/api/share/?title=15+Free+And+Bracing+Navigation+Menus+PSD&amp;link=http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/&amp;notes=Here%20are%2015%20fresh%20and%20modern%20navigation%20menus%20with%20layered%20PSDs%2C%20you%20can%20find%20plenty%20of%20them%20in%20Internet%2C%20I%20have%20just%20filtered%20the%20best%20and%20most%20bracing%20ones.%20Please%20contact%20the%20respective%20authors%20of%20these%20PSD%27s%20if%20you%20have%20any%20usage%20restrictions%20query.%20%0D%0A%0D%0ADark%20Navigation%0D%0A%0D%0A%0D%0ADownload%26nbsp%3B%0D%0A%0D%0A%0D%0AN&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=38&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://www.shareaholic.com/api/share/?title=15+Free+And+Bracing+Navigation+Menus+PSD&amp;link=http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/&amp;notes=Here%20are%2015%20fresh%20and%20modern%20navigation%20menus%20with%20layered%20PSDs%2C%20you%20can%20find%20plenty%20of%20them%20in%20Internet%2C%20I%20have%20just%20filtered%20the%20best%20and%20most%20bracing%20ones.%20Please%20contact%20the%20respective%20authors%20of%20these%20PSD%27s%20if%20you%20have%20any%20usage%20restrictions%20query.%20%0D%0A%0D%0ADark%20Navigation%0D%0A%0D%0A%0D%0ADownload%26nbsp%3B%0D%0A%0D%0A%0D%0AN&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=10&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.shareaholic.com/api/share/?title=15+Free+And+Bracing+Navigation+Menus+PSD&amp;link=http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/&amp;notes=Here%20are%2015%20fresh%20and%20modern%20navigation%20menus%20with%20layered%20PSDs%2C%20you%20can%20find%20plenty%20of%20them%20in%20Internet%2C%20I%20have%20just%20filtered%20the%20best%20and%20most%20bracing%20ones.%20Please%20contact%20the%20respective%20authors%20of%20these%20PSD%27s%20if%20you%20have%20any%20usage%20restrictions%20query.%20%0D%0A%0D%0ADark%20Navigation%0D%0A%0D%0A%0D%0ADownload%26nbsp%3B%0D%0A%0D%0A%0D%0AN&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=43&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>


<p><a href="http://feedads.g.doubleclick.net/~a/nF97MPO94uNDhwcudd4-C9lZadQ/0/da"><img src="http://feedads.g.doubleclick.net/~a/nF97MPO94uNDhwcudd4-C9lZadQ/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/nF97MPO94uNDhwcudd4-C9lZadQ/1/da"><img src="http://feedads.g.doubleclick.net/~a/nF97MPO94uNDhwcudd4-C9lZadQ/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/priteshgupta?a=jwGw2nwdZuc:ljFivYnO9K4:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/priteshgupta?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/priteshgupta?a=jwGw2nwdZuc:ljFivYnO9K4:caC8GWrvNc4"><img src="http://feeds.feedburner.com/~ff/priteshgupta?i=jwGw2nwdZuc:ljFivYnO9K4:caC8GWrvNc4" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/priteshgupta/~4/jwGw2nwdZuc" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://www.priteshgupta.com/2011/12/15-free-and-bracing-navigation-menus-psd/</feedburner:origLink></item>
		<item>
		<title>CSS3 Content Filter Using negation pseudo-class</title>
		<link>http://feedproxy.google.com/~r/priteshgupta/~3/my_Meh3USrc/</link>
		<comments>http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/#comments</comments>
		<pubDate>Thu, 08 Dec 2011 08:06:10 +0000</pubDate>
		<dc:creator>Pritesh Gupta</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[featured]]></category>

		<guid isPermaLink="false">http://www.priteshgupta.com/?p=1952</guid>
		<description><![CDATA[This tutorial shows how we filter content only by using CSS3 and then add some easing transitions to it. Content Filtering is done by CSS&#8217; negation pseudo-class and the class attribute and the transitions are again by CSS only, there is no JavaScript/jQuery involved. You can see the code(s) below, download the full working file [...]]]></description>
			<content:encoded><![CDATA[<p>This tutorial shows how we <strong>filter</strong> <strong>content</strong> only by using <strong>CSS3</strong> and then add some <strong>easing transitions</strong> to it. <strong>Content Filtering</strong> is done by CSS&#8217; <strong><a href="http://www.w3.org/TR/selectors/#negation" title="negation pseudo-class" target="_blank">negation pseudo-class</a></strong> and the <strong>class attribute</strong> and the transitions are again by <strong>CSS</strong> only, there is <strong>no JavaScript/jQuery</strong> involved. You can see the code(s) below, download the full working file or check out a live demo.<br />
<em><strong><br />
<h4>via <a href="http://blog.vogtjosh.com/post/12237994218/element-filtering-using-css3-negation-pseudo-class">vogtjosh.com</a></h4>
<p></strong></em><br />
<img src="http://www.priteshgupta.com/wp-content/uploads/2011/12/CSS3-Content-Filter.png" alt="CSS3 Content Filter" title="CSS3 Content Filter" width="580" /></p>
<div style="float: left; margin-left: 65px;">
<a target="_blank" href="http://priteshgupta.com/demos/css3-content-filter/" class="woo-sc-button  silver xl" title="CSS3 Content Filter Preview"><span class="woo-info">Live Demo</span></a><br /> 
</div>
<div style="float:left; margin-left: 65px;">
<a href="http://priteshgupta.com/demos/css3-content-filter/CSS3-Content-Filter.zip" class="woo-sc-button  silver xl" title="CSS3 Content Filter Download"><span class="woo-download">Download&nbsp;</span></a><br />

</div>
<div class="woo-sc-hr"></div>
<h1>The Code</h1>
<h2>The CSS</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
</pre>
<pre><span class="css">body {
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value"> 980px</span></span>;
	<span class="css-property">margin-left<span class="css-selector">:</span><span class="css-value"> auto</span></span>;
	<span class="css-property">margin-right<span class="css-selector">:</span><span class="css-value">auto</span></span>;
	<span class="css-property">font-family<span class="css-selector">:</span><span class="css-value"><span class="css-string">&quot;Myriad Pro&quot;</span>, <span class="css-string">&quot;Myriad Web&quot;</span>, Myriad, Frutiger, Calibri, sans-serif, Arial Black, Gadget</span></span>;
	<span class="css-property">overflow<span class="css-selector">:</span><span class="css-value">hidden</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value"> #545454</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value">-webkit-gradient(linear, left top, right bottom, from(#545454), color-stop(.5, #7e7e7e), to(#545454)) fixed</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value">-webkit-linear-gradient(45deg, #545454, #7e7e7e .5, #545454)</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value">-moz-linear-gradient(45deg, #545454, #7e7e7e .5, #545454)</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value">-o-linear-gradient(45deg, #545454, #7e7e7e .5, #545454)</span></span>;
}
section {
	<span class="css-property">display<span class="css-selector">:</span><span class="css-value">block</span></span>;
	<span class="css-property">float<span class="css-selector">:</span><span class="css-value">left</span></span>;
	<span class="css-property">min-height<span class="css-selector">:</span><span class="css-value">450px</span></span>;
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value">100%</span></span>;
}
a {
	<span class="css-property">display<span class="css-selector">:</span><span class="css-value">block</span></span>;
	<span class="css-property">float<span class="css-selector">:</span><span class="css-value">left</span></span>;
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value">25%</span></span>;
	<span class="css-property">text-decoration<span class="css-selector">:</span><span class="css-value">none</span></span>;
	<span class="css-property">text-align<span class="css-selector">:</span><span class="css-value">center</span></span>;
	<span class="css-property">padding<span class="css-selector">:</span><span class="css-value">5px 0</span></span>;
	<span class="css-property">color<span class="css-selector">:</span><span class="css-value">#a9a9a9</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value">#d7d7d7</span></span>;
	<span class="css-property">font-weight<span class="css-selector">:</span><span class="css-value">bold</span></span>;
	<span class="css-property">font-size<span class="css-selector">:</span><span class="css-value"> 30px</span></span>;
	<span class="css-property">border-top<span class="css-selector">:</span><span class="css-value">5px solid #999</span></span>;
	<span class="css-property">border-bottom<span class="css-selector">:</span><span class="css-value">5px solid #999
</span></span>}
div {
	<span class="css-property">display<span class="css-selector">:</span><span class="css-value">block</span></span>;
	<span class="css-property">float<span class="css-selector">:</span><span class="css-value">left</span></span>;
	<span class="css-property">height<span class="css-selector">:</span><span class="css-value">150px</span></span>;
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value">205px</span></span>;
	<span class="css-property">border<span class="css-selector">:</span><span class="css-value">10px solid #999</span></span>;
	<span class="css-property">margin<span class="css-selector">:</span><span class="css-value">10px</span></span>;
	<span class="css-property">-webkit-transition<span class="css-selector">:</span><span class="css-value">all .85s linear</span></span>;
	<span class="css-property">-moz-transition<span class="css-selector">:</span><span class="css-value">all .85s linear</span></span>;
	<span class="css-property">-o-transition<span class="css-selector">:</span><span class="css-value">all .85s linear</span></span>;
	<span class="css-property">-ms-transition<span class="css-selector">:</span><span class="css-value">all .85s linear</span></span>;
	transition:all .85s linear;
	<span class="css-property">margin-top<span class="css-selector">:</span><span class="css-value">20px</span></span>;
}
div[class=<span class="css-string">&quot;web&quot;</span>] {
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value">url(images/web.jpg)</span></span>;
}
div[class=<span class="css-string">&quot;graphic&quot;</span>] {
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value">url(images/graphic.jpg)</span></span>;
}
div[class=<span class="css-string">&quot;music&quot;</span>] {
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value">url(images/music.jpg)</span></span>;
}
a:focus[class] {
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value"> #ebebeb</span></span>;
	<span class="css-property">outline<span class="css-selector">:</span><span class="css-value">none</span></span>;
}
 a[class=<span class="css-string">&quot;web&quot;</span>]:focus ~ div:not([class=<span class="css-string">&quot;web&quot;</span>]) {
 <span class="css-property">height<span class="css-selector">:</span><span class="css-value">0px</span></span>;
 <span class="css-property">width<span class="css-selector">:</span><span class="css-value">0px</span></span>;
 <span class="css-property">border<span class="css-selector">:</span><span class="css-value">none</span></span>;
 <span class="css-property">margin<span class="css-selector">:</span><span class="css-value">0</span></span>;
}
 a[class=<span class="css-string">&quot;graphic&quot;</span>]:focus ~ div:not([class=<span class="css-string">&quot;graphic&quot;</span>]) {
 <span class="css-property">height<span class="css-selector">:</span><span class="css-value">0px</span></span>;
 <span class="css-property">width<span class="css-selector">:</span><span class="css-value">0px</span></span>;
 <span class="css-property">border<span class="css-selector">:</span><span class="css-value">none</span></span>;
 <span class="css-property">margin<span class="css-selector">:</span><span class="css-value">0</span></span>;
}
 a[class=<span class="css-string">&quot;music&quot;</span>]:focus ~ div:not([class=<span class="css-string">&quot;music&quot;</span>]) {
 <span class="css-property">height<span class="css-selector">:</span><span class="css-value">0px</span></span>;
 <span class="css-property">width<span class="css-selector">:</span><span class="css-value">0px</span></span>;
 <span class="css-property">border<span class="css-selector">:</span><span class="css-value">none</span></span>;
 <span class="css-property">margin<span class="css-selector">:</span><span class="css-value">0</span></span>;
}</span></pre>
</div>
<h2>The HTML</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre>
<pre><span class="html"><span class="html-other-element">&lt;section&gt;</span>
  <span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#&quot;</span> class=<span class="html-attribute">&quot;all&quot;</span> tabindex=<span class="html-attribute">&quot;-1&quot;</span>&gt;</span>All<span class="html-anchor-element">&lt;/a&gt;</span>
  <span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#&quot;</span> class=<span class="html-attribute">&quot;web&quot;</span> tabindex=<span class="html-attribute">&quot;-1&quot;</span>&gt;</span>Web<span class="html-anchor-element">&lt;/a&gt;</span>
  <span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#&quot;</span> class=<span class="html-attribute">&quot;graphic&quot;</span> tabindex=<span class="html-attribute">&quot;-1&quot;</span>&gt;</span>Graphic<span class="html-anchor-element">&lt;/a&gt;</span>
  <span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#&quot;</span> class=<span class="html-attribute">&quot;music&quot;</span> tabindex=<span class="html-attribute">&quot;-1&quot;</span>&gt;</span>Music<span class="html-anchor-element">&lt;/a&gt;</span>
  <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;web&quot;</span>&gt;</span><span class="html-other-element">&lt;/div&gt;</span>
  <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;music&quot;</span>&gt;</span><span class="html-other-element">&lt;/div&gt;</span>
  <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;graphic&quot;</span>&gt;</span><span class="html-other-element">&lt;/div&gt;</span>
  <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;web&quot;</span>&gt;</span><span class="html-other-element">&lt;/div&gt;</span>
  <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;music&quot;</span>&gt;</span><span class="html-other-element">&lt;/div&gt;</span>
  <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;graphic&quot;</span>&gt;</span><span class="html-other-element">&lt;/div&gt;</span>
  <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;music&quot;</span>&gt;</span><span class="html-other-element">&lt;/div&gt;</span>
  <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;graphic&quot;</span>&gt;</span><span class="html-other-element">&lt;/div&gt;</span>
<span class="html-other-element">&lt;/section&gt;</span></span></pre>
</div>
<h1>Adding New Filters</h1>
<p>Adding new filter is fairly easy, you can add as many filters as your want, add an anchor tag like below to the HTML Code.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
</pre>
<pre><span class="html"><span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#&quot;</span> class=<span class="html-attribute">&quot;FILTER&quot;</span> tabindex=<span class="html-attribute">&quot;-1&quot;</span>&gt;</span>Filter Name<span class="html-anchor-element">&lt;/a&gt;</span></span></pre>
</div>
<p>With correspoing div for the Filter Content.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
</pre>
<pre><span class="html"><span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;FILTER&quot;</span>&gt;</span><span class="html-other-element">&lt;/div&gt;</span></span></pre>
</div>
<p>And add the CSS like below to the CSS Code.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
</pre>
<pre><span class="css">a[class=<span class="css-string">&quot;FILTER&quot;</span>]:focus ~ div:not([class=<span class="css-string">&quot;FILTER&quot;</span>]) {
 <span class="css-property">height<span class="css-selector">:</span><span class="css-value">0px</span></span>;
 <span class="css-property">width<span class="css-selector">:</span><span class="css-value">0px</span></span>;
 <span class="css-property">border<span class="css-selector">:</span><span class="css-value">none</span></span>;
 <span class="css-property">margin<span class="css-selector">:</span><span class="css-value">0</span></span>;
}</span></pre>
</div>
<p>Where <strong><code>FILTER</code></strong> is the filter name, you will also need to change CSS of the layout if you intent to use the default file only.</p>
<h1>Compatibility</h1>
<h2>For Working:</h2>
<div class="shortcode-unorderedlist green-dot"></p>
<ul>
<li>Firefox 3+</li>
<li>Safari 3+</li>
<li>Chrome (any)</li>
<li>Opera 10+</li>
<li>Internet Explorer 9+</li>
</ul>
<p></div>

<h2>For Transitions:</h2>
<div class="shortcode-unorderedlist green-dot"></p>
<ul>
<li>Firefox 4+</li>
<li>Safari 4+</li>
<li>Chrome 4+</li>
<li>Opera 10.5+</li>
</ul>
<p></div>



<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Content+Filter+Using+negation+pseudo-class&amp;link=http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/&amp;notes=This%20tutorial%20shows%20how%20we%20filter%20content%20only%20by%20using%20CSS3%20and%20then%20add%20some%20easing%20transitions%20to%20it.%20Content%20Filtering%20is%20done%20by%20CSS%27%20negation%20pseudo-class%20and%20the%20class%20attribute%20and%20the%20transitions%20are%20again%20by%20CSS%20only%2C%20there%20is%20no%20JavaScript%2FjQuery%20involved.%20You%20can%20see%20the%20code%28s%29%20below%2C%20d&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Content+Filter+Using+negation+pseudo-class&amp;link=http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/&amp;notes=This%20tutorial%20shows%20how%20we%20filter%20content%20only%20by%20using%20CSS3%20and%20then%20add%20some%20easing%20transitions%20to%20it.%20Content%20Filtering%20is%20done%20by%20CSS%27%20negation%20pseudo-class%20and%20the%20class%20attribute%20and%20the%20transitions%20are%20again%20by%20CSS%20only%2C%20there%20is%20no%20JavaScript%2FjQuery%20involved.%20You%20can%20see%20the%20code%28s%29%20below%2C%20d&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Content+Filter+Using+negation+pseudo-class&amp;link=http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/&amp;notes=This%20tutorial%20shows%20how%20we%20filter%20content%20only%20by%20using%20CSS3%20and%20then%20add%20some%20easing%20transitions%20to%20it.%20Content%20Filtering%20is%20done%20by%20CSS%27%20negation%20pseudo-class%20and%20the%20class%20attribute%20and%20the%20transitions%20are%20again%20by%20CSS%20only%2C%20there%20is%20no%20JavaScript%2FjQuery%20involved.%20You%20can%20see%20the%20code%28s%29%20below%2C%20d&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=3&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Content+Filter+Using+negation+pseudo-class&amp;link=http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/&amp;notes=This%20tutorial%20shows%20how%20we%20filter%20content%20only%20by%20using%20CSS3%20and%20then%20add%20some%20easing%20transitions%20to%20it.%20Content%20Filtering%20is%20done%20by%20CSS%27%20negation%20pseudo-class%20and%20the%20class%20attribute%20and%20the%20transitions%20are%20again%20by%20CSS%20only%2C%20there%20is%20no%20JavaScript%2FjQuery%20involved.%20You%20can%20see%20the%20code%28s%29%20below%2C%20d&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=257&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Content+Filter+Using+negation+pseudo-class&amp;link=http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/&amp;notes=This%20tutorial%20shows%20how%20we%20filter%20content%20only%20by%20using%20CSS3%20and%20then%20add%20some%20easing%20transitions%20to%20it.%20Content%20Filtering%20is%20done%20by%20CSS%27%20negation%20pseudo-class%20and%20the%20class%20attribute%20and%20the%20transitions%20are%20again%20by%20CSS%20only%2C%20there%20is%20no%20JavaScript%2FjQuery%20involved.%20You%20can%20see%20the%20code%28s%29%20below%2C%20d&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Content+Filter+Using+negation+pseudo-class&amp;link=http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/&amp;notes=This%20tutorial%20shows%20how%20we%20filter%20content%20only%20by%20using%20CSS3%20and%20then%20add%20some%20easing%20transitions%20to%20it.%20Content%20Filtering%20is%20done%20by%20CSS%27%20negation%20pseudo-class%20and%20the%20class%20attribute%20and%20the%20transitions%20are%20again%20by%20CSS%20only%2C%20there%20is%20no%20JavaScript%2FjQuery%20involved.%20You%20can%20see%20the%20code%28s%29%20below%2C%20d&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=38&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Content+Filter+Using+negation+pseudo-class&amp;link=http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/&amp;notes=This%20tutorial%20shows%20how%20we%20filter%20content%20only%20by%20using%20CSS3%20and%20then%20add%20some%20easing%20transitions%20to%20it.%20Content%20Filtering%20is%20done%20by%20CSS%27%20negation%20pseudo-class%20and%20the%20class%20attribute%20and%20the%20transitions%20are%20again%20by%20CSS%20only%2C%20there%20is%20no%20JavaScript%2FjQuery%20involved.%20You%20can%20see%20the%20code%28s%29%20below%2C%20d&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=10&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Content+Filter+Using+negation+pseudo-class&amp;link=http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/&amp;notes=This%20tutorial%20shows%20how%20we%20filter%20content%20only%20by%20using%20CSS3%20and%20then%20add%20some%20easing%20transitions%20to%20it.%20Content%20Filtering%20is%20done%20by%20CSS%27%20negation%20pseudo-class%20and%20the%20class%20attribute%20and%20the%20transitions%20are%20again%20by%20CSS%20only%2C%20there%20is%20no%20JavaScript%2FjQuery%20involved.%20You%20can%20see%20the%20code%28s%29%20below%2C%20d&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=43&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>


<p><a href="http://feedads.g.doubleclick.net/~a/QWTg0kCoBIOmGaVrcarAg0Sg9Lg/0/da"><img src="http://feedads.g.doubleclick.net/~a/QWTg0kCoBIOmGaVrcarAg0Sg9Lg/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/QWTg0kCoBIOmGaVrcarAg0Sg9Lg/1/da"><img src="http://feedads.g.doubleclick.net/~a/QWTg0kCoBIOmGaVrcarAg0Sg9Lg/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/priteshgupta?a=my_Meh3USrc:nYfBDOJcfvI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/priteshgupta?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/priteshgupta?a=my_Meh3USrc:nYfBDOJcfvI:caC8GWrvNc4"><img src="http://feeds.feedburner.com/~ff/priteshgupta?i=my_Meh3USrc:nYfBDOJcfvI:caC8GWrvNc4" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/priteshgupta/~4/my_Meh3USrc" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		<feedburner:origLink>http://www.priteshgupta.com/2011/12/css3-content-filter-using-negation-pseudo-class/</feedburner:origLink></item>
		<item>
		<title>Simple Tooltip using jQuery</title>
		<link>http://feedproxy.google.com/~r/priteshgupta/~3/RXUtveAr9IE/</link>
		<comments>http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/#comments</comments>
		<pubDate>Sat, 22 Oct 2011 15:24:26 +0000</pubDate>
		<dc:creator>Pritesh Gupta</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.priteshgupta.com/?p=1913</guid>
		<description><![CDATA[There are bunch of jQuery/JavaScript Tooltip plugins available on Internet, but most of them are heavy, and since generally our requirement is not that much, they become unfavorable to use. Thus, I wrote a small and simple code snippet for Tooltips which can be achieved via jQuery, it is easy to implement and use. Live [...]]]></description>
			<content:encoded><![CDATA[<p>There are bunch of <a href="http://www.priteshgupta.com/tag/jquery/" title="jQuery"><strong>jQuery</strong></a>/<a href="http://www.priteshgupta.com/category/javascript/" title="JavaScript"><strong>JavaScript</strong></a> Tooltip plugins available on Internet, but most of them are heavy, and since generally our requirement is not that much, they become unfavorable to use. Thus, I wrote a small and simple code snippet for <strong>Tooltips</strong> which can be achieved via jQuery, it is easy to implement and use.</p>
<p><img src="http://www.priteshgupta.com/wp-content/uploads/2011/10/Tooltip.png" alt="CSS3 Tabs with CSS3 Navigation Menu" title="CSS3 Tabs with CSS3 Navigation Menu" width="580" /></p>
<div style="float: left; margin-left: 65px;">
<a target="_blank" href="http://priteshgupta.com/demos/tooltip/simple_tooltip.html" class="woo-sc-button  silver xl" title="CSS3 Tabs with CSS3 Navigation Menu Preview"><span class="woo-info">Live Demo</span></a><br /> 
</div>
<div style="float:left; margin-left: 65px;">
<a href="http://priteshgupta.com/demos/tooltip/simple_tooltip.zip" class="woo-sc-button  silver xl" title="CSS3 Tabs with CSS3 Navigation Menu Download"><span class="woo-download">Download&nbsp;</span></a><br />

</div>
<div class="woo-sc-hr"></div>
<h1>The Code</h1>
<h2>The JavaScript</h2>
<p>Unlike other plugins for this same functionality, the JavaScript/jQuery code here is really small(and assumes that you have already included the jQuery library).</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
</pre>
<pre><span class="js">$<span class="js-bracket">(</span><span class="js-client-keyword">document</span><span class="js-bracket">)</span>.ready<span class="js-bracket">(</span><span class="js-function-keyword">function</span><span class="js-bracket">(</span><span class="js-bracket">)</span> <span class="js-bracket">{</span>
    $<span class="js-bracket">(</span><span class="js-string">'.simpleTooltip'</span><span class="js-bracket">)</span>.hover<span class="js-bracket">(</span><span class="js-function-keyword">function</span><span class="js-bracket">(</span><span class="js-bracket">)</span><span class="js-bracket">{</span>
        <span class="js-reserved-keyword">var</span> title <span class="js-operator">=</span> $<span class="js-bracket">(</span><span class="js-reserved-keyword">this</span><span class="js-bracket">)</span>.attr<span class="js-bracket">(</span><span class="js-string">'title'</span><span class="js-bracket">)</span>;
        $<span class="js-bracket">(</span><span class="js-reserved-keyword">this</span><span class="js-bracket">)</span>.data<span class="js-bracket">(</span><span class="js-string">'tipText'</span>, title<span class="js-bracket">)</span>.removeAttr<span class="js-bracket">(</span><span class="js-string">'title'</span><span class="js-bracket">)</span>;
        $<span class="js-bracket">(</span><span class="js-string">'&lt;p class=&quot;tooltip&quot;&gt;&lt;/p&gt;'</span><span class="js-bracket">)</span>
        .text<span class="js-bracket">(</span>title<span class="js-bracket">)</span>
        .appendTo<span class="js-bracket">(</span><span class="js-string">'body'</span><span class="js-bracket">)</span>
        .fadeIn<span class="js-bracket">(</span><span class="js-string">'slow'</span><span class="js-bracket">)</span>;
    <span class="js-bracket">}</span>, <span class="js-function-keyword">function</span><span class="js-bracket">(</span><span class="js-bracket">)</span> <span class="js-bracket">{</span>
        $<span class="js-bracket">(</span><span class="js-reserved-keyword">this</span><span class="js-bracket">)</span>.attr<span class="js-bracket">(</span><span class="js-string">'title'</span>, $<span class="js-bracket">(</span><span class="js-reserved-keyword">this</span><span class="js-bracket">)</span>.data<span class="js-bracket">(</span><span class="js-string">'tipText'</span><span class="js-bracket">)</span><span class="js-bracket">)</span>;
        $<span class="js-bracket">(</span><span class="js-string">'.tooltip'</span><span class="js-bracket">)</span>.remove<span class="js-bracket">(</span><span class="js-bracket">)</span>;
    <span class="js-bracket">}</span><span class="js-bracket">)</span>.mousemove<span class="js-bracket">(</span><span class="js-function-keyword">function</span><span class="js-bracket">(</span>e<span class="js-bracket">)</span> <span class="js-bracket">{</span>
        <span class="js-reserved-keyword">var</span> mousex <span class="js-operator">=</span> e.pageX <span class="js-operator">+</span> <span class="js-number">2</span><span class="js-number">0</span>;
        <span class="js-reserved-keyword">var</span> mousey <span class="js-operator">=</span> e.pageY <span class="js-operator">+</span> <span class="js-number">2</span><span class="js-number">0</span>;
        $<span class="js-bracket">(</span><span class="js-string">'.tooltip'</span><span class="js-bracket">)</span>
        .css<span class="js-bracket">(</span><span class="js-bracket">{</span> top<span class="js-operator">:</span> mousey, left<span class="js-operator">:</span> mousex <span class="js-bracket">}</span><span class="js-bracket">)</span>
    <span class="js-bracket">}</span><span class="js-bracket">)</span>;
<span class="js-bracket">}</span><span class="js-bracket">)</span>;</span></pre>
</div>
<h2>The CSS</h2>
<p>This is the CSS for the actual tooltip, I have added some additional styling properties like circular borders, opacity and box shadow, though they are completely optional. If you encounter problems with width of the tooltip, you might try fixing the width of the tooltip rather than <code>auto</code>.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
</pre>
<pre><span class="css">.tooltip {
	<span class="css-property">display<span class="css-selector">:</span><span class="css-value">none</span></span>;
	<span class="css-property">position<span class="css-selector">:</span><span class="css-value">absolute</span></span>;
	<span class="css-property">opacity<span class="css-selector">:</span><span class="css-value"> 0.80</span></span>;
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value"> auto</span></span>;
	<span class="css-property">background-color<span class="css-selector">:</span><span class="css-value">#000</span></span>;
	<span class="css-property">padding<span class="css-selector">:</span><span class="css-value">10px</span></span>;
	<span class="css-property">color<span class="css-selector">:</span><span class="css-value">#fff</span></span>;
	<span class="css-property">-webkit-border-radius<span class="css-selector">:</span><span class="css-value">5px</span></span>;
	<span class="css-property">-moz-border-radius<span class="css-selector">:</span><span class="css-value">5px</span></span>;
	<span class="css-property">border-radius<span class="css-selector">:</span><span class="css-value">5px</span></span>;
	<span class="css-property">-moz-box-shadow<span class="css-selector">:</span><span class="css-value"> 0 0 3px 3px #959595</span></span>;
	<span class="css-property">-webkit-box-shadow<span class="css-selector">:</span><span class="css-value"> 0 0 3px 3px #959595</span></span>;
	<span class="css-property">box-shadow<span class="css-selector">:</span><span class="css-value"> 0 0 3px 3px #959595</span></span>;
}</span></pre>
</div>
<h2>The HTML</h2>
<p>The HTML again is very simple, just add the class <code>simpleTooltip</code> to any anchor link, and it&#8217;s title becomes the tooltip. </p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
</pre>
<pre><span class="html"><span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#&quot;</span> title=<span class="html-attribute">&quot;Text to be displayed in Tooltip&quot;</span> class=<span class="html-attribute">&quot;simpleTooltip&quot;</span>&gt;</span>Hover for Tooltip<span class="html-anchor-element">&lt;/a&gt;</span></span></pre>
</div>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=Simple+Tooltip+using+jQuery&amp;link=http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/&amp;notes=There%20are%20bunch%20of%20jQuery%2FJavaScript%20Tooltip%20plugins%20available%20on%20Internet%2C%20but%20most%20of%20them%20are%20heavy%2C%20and%20since%20generally%20our%20requirement%20is%20not%20that%20much%2C%20they%20become%20unfavorable%20to%20use.%20Thus%2C%20I%20wrote%20a%20small%20and%20simple%20code%20snippet%20for%20Tooltips%20which%20can%20be%20achieved%20via%20jQuery%2C%20it%20is%20easy%20to%20imp&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=Simple+Tooltip+using+jQuery&amp;link=http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/&amp;notes=There%20are%20bunch%20of%20jQuery%2FJavaScript%20Tooltip%20plugins%20available%20on%20Internet%2C%20but%20most%20of%20them%20are%20heavy%2C%20and%20since%20generally%20our%20requirement%20is%20not%20that%20much%2C%20they%20become%20unfavorable%20to%20use.%20Thus%2C%20I%20wrote%20a%20small%20and%20simple%20code%20snippet%20for%20Tooltips%20which%20can%20be%20achieved%20via%20jQuery%2C%20it%20is%20easy%20to%20imp&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://www.shareaholic.com/api/share/?title=Simple+Tooltip+using+jQuery&amp;link=http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/&amp;notes=There%20are%20bunch%20of%20jQuery%2FJavaScript%20Tooltip%20plugins%20available%20on%20Internet%2C%20but%20most%20of%20them%20are%20heavy%2C%20and%20since%20generally%20our%20requirement%20is%20not%20that%20much%2C%20they%20become%20unfavorable%20to%20use.%20Thus%2C%20I%20wrote%20a%20small%20and%20simple%20code%20snippet%20for%20Tooltips%20which%20can%20be%20achieved%20via%20jQuery%2C%20it%20is%20easy%20to%20imp&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=3&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.shareaholic.com/api/share/?title=Simple+Tooltip+using+jQuery&amp;link=http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/&amp;notes=There%20are%20bunch%20of%20jQuery%2FJavaScript%20Tooltip%20plugins%20available%20on%20Internet%2C%20but%20most%20of%20them%20are%20heavy%2C%20and%20since%20generally%20our%20requirement%20is%20not%20that%20much%2C%20they%20become%20unfavorable%20to%20use.%20Thus%2C%20I%20wrote%20a%20small%20and%20simple%20code%20snippet%20for%20Tooltips%20which%20can%20be%20achieved%20via%20jQuery%2C%20it%20is%20easy%20to%20imp&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=257&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=Simple+Tooltip+using+jQuery&amp;link=http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/&amp;notes=There%20are%20bunch%20of%20jQuery%2FJavaScript%20Tooltip%20plugins%20available%20on%20Internet%2C%20but%20most%20of%20them%20are%20heavy%2C%20and%20since%20generally%20our%20requirement%20is%20not%20that%20much%2C%20they%20become%20unfavorable%20to%20use.%20Thus%2C%20I%20wrote%20a%20small%20and%20simple%20code%20snippet%20for%20Tooltips%20which%20can%20be%20achieved%20via%20jQuery%2C%20it%20is%20easy%20to%20imp&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.shareaholic.com/api/share/?title=Simple+Tooltip+using+jQuery&amp;link=http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/&amp;notes=There%20are%20bunch%20of%20jQuery%2FJavaScript%20Tooltip%20plugins%20available%20on%20Internet%2C%20but%20most%20of%20them%20are%20heavy%2C%20and%20since%20generally%20our%20requirement%20is%20not%20that%20much%2C%20they%20become%20unfavorable%20to%20use.%20Thus%2C%20I%20wrote%20a%20small%20and%20simple%20code%20snippet%20for%20Tooltips%20which%20can%20be%20achieved%20via%20jQuery%2C%20it%20is%20easy%20to%20imp&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=38&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://www.shareaholic.com/api/share/?title=Simple+Tooltip+using+jQuery&amp;link=http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/&amp;notes=There%20are%20bunch%20of%20jQuery%2FJavaScript%20Tooltip%20plugins%20available%20on%20Internet%2C%20but%20most%20of%20them%20are%20heavy%2C%20and%20since%20generally%20our%20requirement%20is%20not%20that%20much%2C%20they%20become%20unfavorable%20to%20use.%20Thus%2C%20I%20wrote%20a%20small%20and%20simple%20code%20snippet%20for%20Tooltips%20which%20can%20be%20achieved%20via%20jQuery%2C%20it%20is%20easy%20to%20imp&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=10&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.shareaholic.com/api/share/?title=Simple+Tooltip+using+jQuery&amp;link=http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/&amp;notes=There%20are%20bunch%20of%20jQuery%2FJavaScript%20Tooltip%20plugins%20available%20on%20Internet%2C%20but%20most%20of%20them%20are%20heavy%2C%20and%20since%20generally%20our%20requirement%20is%20not%20that%20much%2C%20they%20become%20unfavorable%20to%20use.%20Thus%2C%20I%20wrote%20a%20small%20and%20simple%20code%20snippet%20for%20Tooltips%20which%20can%20be%20achieved%20via%20jQuery%2C%20it%20is%20easy%20to%20imp&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=43&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>


<p><a href="http://feedads.g.doubleclick.net/~a/mE3KGro1MPCZevJ5onRnxFgB2c4/0/da"><img src="http://feedads.g.doubleclick.net/~a/mE3KGro1MPCZevJ5onRnxFgB2c4/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/mE3KGro1MPCZevJ5onRnxFgB2c4/1/da"><img src="http://feedads.g.doubleclick.net/~a/mE3KGro1MPCZevJ5onRnxFgB2c4/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/priteshgupta?a=RXUtveAr9IE:m-2DdTVlZ9o:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/priteshgupta?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/priteshgupta?a=RXUtveAr9IE:m-2DdTVlZ9o:caC8GWrvNc4"><img src="http://feeds.feedburner.com/~ff/priteshgupta?i=RXUtveAr9IE:m-2DdTVlZ9o:caC8GWrvNc4" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/priteshgupta/~4/RXUtveAr9IE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://www.priteshgupta.com/2011/10/simple-tooltip-using-jquery/</feedburner:origLink></item>
		<item>
		<title>Prevent or Disable Copy or Paste In Input Fields</title>
		<link>http://feedproxy.google.com/~r/priteshgupta/~3/Q5q88vk94OY/</link>
		<comments>http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/#comments</comments>
		<pubDate>Fri, 14 Oct 2011 06:51:59 +0000</pubDate>
		<dc:creator>Pritesh Gupta</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.priteshgupta.com/?p=1898</guid>
		<description><![CDATA[Using jQuery we can disable or prevent copy or pasting of input fields, jQuery has built-in access to this functionality in browsers by exposing them as events, that is by binding any input element like text input, text area, etc, with these events and calling the preventDefault() event which prevents the user from copy or [...]]]></description>
			<content:encoded><![CDATA[<p>Using <strong>jQuery</strong> we can <strong>disable</strong> or <strong>prevent</strong> <strong>copy</strong> or <strong>pasting</strong> of input <strong>fields</strong>, jQuery has built-in access to this functionality in browsers by exposing them as events, that is by binding any input element like text input, text area, etc, with these events and calling the <a href="http://api.jquery.com/event.preventDefault/" title="event.preventDefault()" target="_blank"><strong>preventDefault()</strong></a> event which prevents the user from copy or pasting text into these fields. We observe these in many forms, especially ones those of more secure websites(like online banking). Check out the below snippets of its implementation.  </p>
<h2>Disable Copying</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
</pre>
<pre><span class="js">$<span class="js-bracket">(</span><span class="js-string">'input'</span><span class="js-bracket">)</span>.bind<span class="js-bracket">(</span><span class="js-string">'copy'</span>, <span class="js-function-keyword">function</span><span class="js-bracket">(</span>e<span class="js-bracket">)</span> <span class="js-bracket">{</span>
 e.preventDefault<span class="js-bracket">(</span><span class="js-bracket">)</span>;
<span class="js-bracket">}</span><span class="js-bracket">)</span>;</span></pre>
</div>
<h2>Disable Copying and Pasting</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
</pre>
<pre><span class="js">$<span class="js-bracket">(</span><span class="js-string">'input'</span><span class="js-bracket">)</span>.bind<span class="js-bracket">(</span><span class="js-string">'copy paste'</span>, <span class="js-function-keyword">function</span><span class="js-bracket">(</span>e<span class="js-bracket">)</span> <span class="js-bracket">{</span>
 e.preventDefault<span class="js-bracket">(</span><span class="js-bracket">)</span>;
<span class="js-bracket">}</span><span class="js-bracket">)</span>;</span></pre>
</div>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=Prevent+or+Disable+Copy+or+Paste+In+Input+Fields&amp;link=http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/&amp;notes=Using%20jQuery%20we%20can%20disable%20or%20prevent%20copy%20or%20pasting%20of%20input%20fields%2C%20jQuery%20has%20built-in%20access%20to%20this%20functionality%20in%20browsers%20by%20exposing%20them%20as%20events%2C%20that%20is%20by%20binding%20any%20input%20element%20like%20text%20input%2C%20text%20area%2C%20etc%2C%20with%20these%20events%20and%20calling%20the%20preventDefault%28%29%20event%20which%20preven&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=Prevent+or+Disable+Copy+or+Paste+In+Input+Fields&amp;link=http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/&amp;notes=Using%20jQuery%20we%20can%20disable%20or%20prevent%20copy%20or%20pasting%20of%20input%20fields%2C%20jQuery%20has%20built-in%20access%20to%20this%20functionality%20in%20browsers%20by%20exposing%20them%20as%20events%2C%20that%20is%20by%20binding%20any%20input%20element%20like%20text%20input%2C%20text%20area%2C%20etc%2C%20with%20these%20events%20and%20calling%20the%20preventDefault%28%29%20event%20which%20preven&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://www.shareaholic.com/api/share/?title=Prevent+or+Disable+Copy+or+Paste+In+Input+Fields&amp;link=http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/&amp;notes=Using%20jQuery%20we%20can%20disable%20or%20prevent%20copy%20or%20pasting%20of%20input%20fields%2C%20jQuery%20has%20built-in%20access%20to%20this%20functionality%20in%20browsers%20by%20exposing%20them%20as%20events%2C%20that%20is%20by%20binding%20any%20input%20element%20like%20text%20input%2C%20text%20area%2C%20etc%2C%20with%20these%20events%20and%20calling%20the%20preventDefault%28%29%20event%20which%20preven&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=3&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.shareaholic.com/api/share/?title=Prevent+or+Disable+Copy+or+Paste+In+Input+Fields&amp;link=http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/&amp;notes=Using%20jQuery%20we%20can%20disable%20or%20prevent%20copy%20or%20pasting%20of%20input%20fields%2C%20jQuery%20has%20built-in%20access%20to%20this%20functionality%20in%20browsers%20by%20exposing%20them%20as%20events%2C%20that%20is%20by%20binding%20any%20input%20element%20like%20text%20input%2C%20text%20area%2C%20etc%2C%20with%20these%20events%20and%20calling%20the%20preventDefault%28%29%20event%20which%20preven&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=257&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=Prevent+or+Disable+Copy+or+Paste+In+Input+Fields&amp;link=http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/&amp;notes=Using%20jQuery%20we%20can%20disable%20or%20prevent%20copy%20or%20pasting%20of%20input%20fields%2C%20jQuery%20has%20built-in%20access%20to%20this%20functionality%20in%20browsers%20by%20exposing%20them%20as%20events%2C%20that%20is%20by%20binding%20any%20input%20element%20like%20text%20input%2C%20text%20area%2C%20etc%2C%20with%20these%20events%20and%20calling%20the%20preventDefault%28%29%20event%20which%20preven&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.shareaholic.com/api/share/?title=Prevent+or+Disable+Copy+or+Paste+In+Input+Fields&amp;link=http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/&amp;notes=Using%20jQuery%20we%20can%20disable%20or%20prevent%20copy%20or%20pasting%20of%20input%20fields%2C%20jQuery%20has%20built-in%20access%20to%20this%20functionality%20in%20browsers%20by%20exposing%20them%20as%20events%2C%20that%20is%20by%20binding%20any%20input%20element%20like%20text%20input%2C%20text%20area%2C%20etc%2C%20with%20these%20events%20and%20calling%20the%20preventDefault%28%29%20event%20which%20preven&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=38&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://www.shareaholic.com/api/share/?title=Prevent+or+Disable+Copy+or+Paste+In+Input+Fields&amp;link=http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/&amp;notes=Using%20jQuery%20we%20can%20disable%20or%20prevent%20copy%20or%20pasting%20of%20input%20fields%2C%20jQuery%20has%20built-in%20access%20to%20this%20functionality%20in%20browsers%20by%20exposing%20them%20as%20events%2C%20that%20is%20by%20binding%20any%20input%20element%20like%20text%20input%2C%20text%20area%2C%20etc%2C%20with%20these%20events%20and%20calling%20the%20preventDefault%28%29%20event%20which%20preven&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=10&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.shareaholic.com/api/share/?title=Prevent+or+Disable+Copy+or+Paste+In+Input+Fields&amp;link=http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/&amp;notes=Using%20jQuery%20we%20can%20disable%20or%20prevent%20copy%20or%20pasting%20of%20input%20fields%2C%20jQuery%20has%20built-in%20access%20to%20this%20functionality%20in%20browsers%20by%20exposing%20them%20as%20events%2C%20that%20is%20by%20binding%20any%20input%20element%20like%20text%20input%2C%20text%20area%2C%20etc%2C%20with%20these%20events%20and%20calling%20the%20preventDefault%28%29%20event%20which%20preven&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=43&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>


<p><a href="http://feedads.g.doubleclick.net/~a/A1dQkzz6zEz_cIqHnftJ3FmIwEI/0/da"><img src="http://feedads.g.doubleclick.net/~a/A1dQkzz6zEz_cIqHnftJ3FmIwEI/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/A1dQkzz6zEz_cIqHnftJ3FmIwEI/1/da"><img src="http://feedads.g.doubleclick.net/~a/A1dQkzz6zEz_cIqHnftJ3FmIwEI/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/priteshgupta?a=Q5q88vk94OY:dOxyEtyQozY:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/priteshgupta?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/priteshgupta?a=Q5q88vk94OY:dOxyEtyQozY:caC8GWrvNc4"><img src="http://feeds.feedburner.com/~ff/priteshgupta?i=Q5q88vk94OY:dOxyEtyQozY:caC8GWrvNc4" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/priteshgupta/~4/Q5q88vk94OY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://www.priteshgupta.com/2011/10/prevent-or-disable-copy-or-paste-in-input-fields/</feedburner:origLink></item>
		<item>
		<title>Redirect Website to PC/Windows, Mac and Linux/Ubuntu Version</title>
		<link>http://feedproxy.google.com/~r/priteshgupta/~3/YNiv3S1pBH8/</link>
		<comments>http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/#comments</comments>
		<pubDate>Fri, 07 Oct 2011 07:20:34 +0000</pubDate>
		<dc:creator>Pritesh Gupta</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[Microsoft]]></category>

		<guid isPermaLink="false">http://www.priteshgupta.com/?p=1864</guid>
		<description><![CDATA[Here is a JavaScript code snippet for PC/Windows, Mac and Linux/Ubuntu User Agent Detection and then redirecting them to their version of website. Earlier I&#8217;d also posted how we can easily redirect website to their respective iPhone/iPod/iPad version, you might like to check that out as well. Replace PC Version with PC Version of your [...]]]></description>
			<content:encoded><![CDATA[<p>Here is a <strong>JavaScript</strong> code snippet for <strong>PC/Windows</strong>, <strong>Mac</strong> and <strong>Linux/Ubuntu</strong> <strong>User Agent Detection</strong> and then redirecting them to their version of website. </p>
<p>Earlier I&#8217;d also posted how we can easily <a href="http://www.priteshgupta.com/2011/02/easiest-redirect-website-iphone-ipod-ipad-version/" title="Easiest way to redirect your website to iPhone/iPod Touch/iPad Version  " target="_blank">redirect website to their respective iPhone/iPod/iPad version</a>, you might like to check that out as well.</p>
<p>Replace <code>PC Version</code> with PC Version of your Website and <code>Mac Version</code> for Mac Version of your Website and <code>Linux Version</code> with Linux Version of your Website in the below code.<br />
<span class="fix"></span></p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre>
<pre><span class="html"><span class="html-script-element">&lt;script type=<span class="html-attribute">&quot;text/javascript&quot;</span>&gt;<span class="js"><span class="js">
<span class="js-reserved-keyword">if</span><span class="js-bracket">(</span><span class="js-bracket">(</span><span class="js-client-keyword">navigator</span>.userAgent.<span class="js-native-keyword">match</span><span class="js-bracket">(</span><span class="js-operator">/</span>MSIE<span class="js-operator">/</span>i<span class="js-bracket">)</span><span class="js-bracket">)</span> <span class="js-operator">|</span><span class="js-operator">|</span> <span class="js-bracket">(</span><span class="js-client-keyword">navigator</span>.userAgent.<span class="js-native-keyword">match</span><span class="js-bracket">(</span><span class="js-operator">/</span>Windows<span class="js-operator">/</span>i<span class="js-bracket">)</span><span class="js-bracket">)</span><span class="js-bracket">)</span>
<span class="js-bracket">{</span>
location.<span class="js-native-keyword">replace</span><span class="js-bracket">(</span><span class="js-string">&quot;PC Version&quot;</span><span class="js-bracket">)</span>;
<span class="js-bracket">}</span>
<span class="js-reserved-keyword">else</span> <span class="js-reserved-keyword">if</span><span class="js-bracket">(</span><span class="js-client-keyword">navigator</span>.userAgent.<span class="js-native-keyword">match</span><span class="js-bracket">(</span><span class="js-operator">/</span>Macintosh<span class="js-operator">/</span>i<span class="js-bracket">)</span><span class="js-bracket">)</span>
<span class="js-bracket">{</span>
location.<span class="js-native-keyword">replace</span><span class="js-bracket">(</span><span class="js-string">&quot;Mac Version&quot;</span><span class="js-bracket">)</span>;
<span class="js-bracket">}</span>
<span class="js-reserved-keyword">else</span> <span class="js-reserved-keyword">if</span><span class="js-bracket">(</span><span class="js-client-keyword">navigator</span>.userAgent.<span class="js-native-keyword">match</span><span class="js-bracket">(</span><span class="js-operator">/</span>Linux<span class="js-operator">/</span>i<span class="js-bracket">)</span><span class="js-bracket">)</span>
<span class="js-bracket">{</span>
location.<span class="js-native-keyword">replace</span><span class="js-bracket">(</span><span class="js-string">&quot;Linux Version&quot;</span><span class="js-bracket">)</span>;
<span class="js-bracket">}</span>
</span></span>&lt;/script&gt;</span></span></pre>
</div>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=Redirect+Website+to+PC%2FWindows%2C+Mac+and+Linux%2FUbuntu+Version++&amp;link=http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/&amp;notes=Here%20is%20a%20JavaScript%20code%20snippet%20for%20PC%2FWindows%2C%20Mac%20and%20Linux%2FUbuntu%20User%20Agent%20Detection%20and%20then%20redirecting%20them%20to%20their%20version%20of%20website.%20%0D%0A%0D%0AEarlier%20I%27d%20also%20posted%20how%20we%20can%20easily%20redirect%20website%20to%20their%20respective%20iPhone%2FiPod%2FiPad%20version%2C%20you%20might%20like%20to%20check%20that%20out%20as%20well.%0D%0A%0D&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=Redirect+Website+to+PC%2FWindows%2C+Mac+and+Linux%2FUbuntu+Version++&amp;link=http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/&amp;notes=Here%20is%20a%20JavaScript%20code%20snippet%20for%20PC%2FWindows%2C%20Mac%20and%20Linux%2FUbuntu%20User%20Agent%20Detection%20and%20then%20redirecting%20them%20to%20their%20version%20of%20website.%20%0D%0A%0D%0AEarlier%20I%27d%20also%20posted%20how%20we%20can%20easily%20redirect%20website%20to%20their%20respective%20iPhone%2FiPod%2FiPad%20version%2C%20you%20might%20like%20to%20check%20that%20out%20as%20well.%0D%0A%0D&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://www.shareaholic.com/api/share/?title=Redirect+Website+to+PC%2FWindows%2C+Mac+and+Linux%2FUbuntu+Version++&amp;link=http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/&amp;notes=Here%20is%20a%20JavaScript%20code%20snippet%20for%20PC%2FWindows%2C%20Mac%20and%20Linux%2FUbuntu%20User%20Agent%20Detection%20and%20then%20redirecting%20them%20to%20their%20version%20of%20website.%20%0D%0A%0D%0AEarlier%20I%27d%20also%20posted%20how%20we%20can%20easily%20redirect%20website%20to%20their%20respective%20iPhone%2FiPod%2FiPad%20version%2C%20you%20might%20like%20to%20check%20that%20out%20as%20well.%0D%0A%0D&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=3&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.shareaholic.com/api/share/?title=Redirect+Website+to+PC%2FWindows%2C+Mac+and+Linux%2FUbuntu+Version++&amp;link=http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/&amp;notes=Here%20is%20a%20JavaScript%20code%20snippet%20for%20PC%2FWindows%2C%20Mac%20and%20Linux%2FUbuntu%20User%20Agent%20Detection%20and%20then%20redirecting%20them%20to%20their%20version%20of%20website.%20%0D%0A%0D%0AEarlier%20I%27d%20also%20posted%20how%20we%20can%20easily%20redirect%20website%20to%20their%20respective%20iPhone%2FiPod%2FiPad%20version%2C%20you%20might%20like%20to%20check%20that%20out%20as%20well.%0D%0A%0D&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=257&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=Redirect+Website+to+PC%2FWindows%2C+Mac+and+Linux%2FUbuntu+Version++&amp;link=http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/&amp;notes=Here%20is%20a%20JavaScript%20code%20snippet%20for%20PC%2FWindows%2C%20Mac%20and%20Linux%2FUbuntu%20User%20Agent%20Detection%20and%20then%20redirecting%20them%20to%20their%20version%20of%20website.%20%0D%0A%0D%0AEarlier%20I%27d%20also%20posted%20how%20we%20can%20easily%20redirect%20website%20to%20their%20respective%20iPhone%2FiPod%2FiPad%20version%2C%20you%20might%20like%20to%20check%20that%20out%20as%20well.%0D%0A%0D&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.shareaholic.com/api/share/?title=Redirect+Website+to+PC%2FWindows%2C+Mac+and+Linux%2FUbuntu+Version++&amp;link=http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/&amp;notes=Here%20is%20a%20JavaScript%20code%20snippet%20for%20PC%2FWindows%2C%20Mac%20and%20Linux%2FUbuntu%20User%20Agent%20Detection%20and%20then%20redirecting%20them%20to%20their%20version%20of%20website.%20%0D%0A%0D%0AEarlier%20I%27d%20also%20posted%20how%20we%20can%20easily%20redirect%20website%20to%20their%20respective%20iPhone%2FiPod%2FiPad%20version%2C%20you%20might%20like%20to%20check%20that%20out%20as%20well.%0D%0A%0D&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=38&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://www.shareaholic.com/api/share/?title=Redirect+Website+to+PC%2FWindows%2C+Mac+and+Linux%2FUbuntu+Version++&amp;link=http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/&amp;notes=Here%20is%20a%20JavaScript%20code%20snippet%20for%20PC%2FWindows%2C%20Mac%20and%20Linux%2FUbuntu%20User%20Agent%20Detection%20and%20then%20redirecting%20them%20to%20their%20version%20of%20website.%20%0D%0A%0D%0AEarlier%20I%27d%20also%20posted%20how%20we%20can%20easily%20redirect%20website%20to%20their%20respective%20iPhone%2FiPod%2FiPad%20version%2C%20you%20might%20like%20to%20check%20that%20out%20as%20well.%0D%0A%0D&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=10&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.shareaholic.com/api/share/?title=Redirect+Website+to+PC%2FWindows%2C+Mac+and+Linux%2FUbuntu+Version++&amp;link=http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/&amp;notes=Here%20is%20a%20JavaScript%20code%20snippet%20for%20PC%2FWindows%2C%20Mac%20and%20Linux%2FUbuntu%20User%20Agent%20Detection%20and%20then%20redirecting%20them%20to%20their%20version%20of%20website.%20%0D%0A%0D%0AEarlier%20I%27d%20also%20posted%20how%20we%20can%20easily%20redirect%20website%20to%20their%20respective%20iPhone%2FiPod%2FiPad%20version%2C%20you%20might%20like%20to%20check%20that%20out%20as%20well.%0D%0A%0D&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=43&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>


<p><a href="http://feedads.g.doubleclick.net/~a/IwubWldCirEx6xlG_yp4fPVaDR4/0/da"><img src="http://feedads.g.doubleclick.net/~a/IwubWldCirEx6xlG_yp4fPVaDR4/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/IwubWldCirEx6xlG_yp4fPVaDR4/1/da"><img src="http://feedads.g.doubleclick.net/~a/IwubWldCirEx6xlG_yp4fPVaDR4/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/priteshgupta?a=YNiv3S1pBH8:Et_mAMJlNuQ:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/priteshgupta?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/priteshgupta?a=YNiv3S1pBH8:Et_mAMJlNuQ:caC8GWrvNc4"><img src="http://feeds.feedburner.com/~ff/priteshgupta?i=YNiv3S1pBH8:Et_mAMJlNuQ:caC8GWrvNc4" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/priteshgupta/~4/YNiv3S1pBH8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.priteshgupta.com/2011/10/redirect-website-to-pcwindows-mac-and-linuxubuntu-version/</feedburner:origLink></item>
		<item>
		<title>CSS3 Tabs with CSS3 Navigation Menu</title>
		<link>http://feedproxy.google.com/~r/priteshgupta/~3/i9qEOSbFQoE/</link>
		<comments>http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/#comments</comments>
		<pubDate>Wed, 28 Sep 2011 06:12:32 +0000</pubDate>
		<dc:creator>Pritesh Gupta</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[featured]]></category>

		<guid isPermaLink="false">http://www.priteshgupta.com/?p=1837</guid>
		<description><![CDATA[Whenever we think about tabs, we think about JavaScript. But tabs can be created using CSS only as well. Even the transitions can be achieved using CSS. These tabs behave like general JavaScript Tabs. I am using the Navigation Menu which I created a while ago, the navigation menu gives the ability to link to [...]]]></description>
			<content:encoded><![CDATA[<p>Whenever we think about <strong>tabs</strong>, we think about <strong>JavaScript</strong>. But tabs can be created using <strong>CSS</strong> only as well. Even the transitions can be achieved using CSS. These tabs behave like general JavaScript Tabs. I am using the <a href="http://www.priteshgupta.com/2011/08/css3-animated-navigation-menu/" title="CSS3 Animated Navigation Menu" target="_blank"><strong>Navigation Menu</strong></a> which I created a while ago, the navigation menu gives the ability to link to specific tabs through hash tags in the URL. </p>
<p><img src="http://www.priteshgupta.com/wp-content/uploads/2011/09/css-nav-tabs.png" alt="CSS3 Tabs with CSS3 Navigation Menu" title="CSS3 Tabs with CSS3 Navigation Menu" width="580" /></p>
<div style="float: left; margin-left: 65px;">
<a target="_blank" href="http://priteshgupta.com/demos/tabs-nav/" class="woo-sc-button  silver xl" title="CSS3 Tabs with CSS3 Navigation Menu Preview"><span class="woo-info">Live Demo</span></a><br /> 
</div>
<div style="float:left; margin-left: 65px;">
<a href="http://priteshgupta.com/demos/tabs-nav/CSS_TABS_WITH_CSS_NAVIGATION_MENU.zip" class="woo-sc-button  silver xl" title="CSS3 Tabs with CSS3 Navigation Menu Download"><span class="woo-download">Download&nbsp;</span></a><br />

</div>
<div class="woo-sc-hr"></div>
<h1>The Code</h1>
<h2>The CSS</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
</pre>
<pre><span class="css">body {
	<span class="css-property">font-family<span class="css-selector">:</span><span class="css-value"><span class="css-string">'Lucida Sans Unicode'</span>, <span class="css-string">'Lucida Grande'</span>, sans-serif</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value">#545454</span></span>;
	<span class="css-property">margin<span class="css-selector">:</span><span class="css-value"> 0</span></span>;
	<span class="css-property">border-top<span class="css-selector">:</span><span class="css-value">7px solid #52a8e8</span></span>;
	<span class="css-property">text-shadow<span class="css-selector">:</span><span class="css-value">0 0 3px rgba(0, 0, 0, 1)</span></span>;
	<span class="css-property">letter-spacing<span class="css-selector">:</span><span class="css-value"> 2px</span></span>;
	<span class="css-property">font-size<span class="css-selector">:</span><span class="css-value"> 20px</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value"> #fff url(grain.png)</span></span>;
}
a {
	<span class="css-property">text-decoration<span class="css-selector">:</span><span class="css-value">none</span></span>;
	<span class="css-property">color<span class="css-selector">:</span><span class="css-value">#fff</span></span>;
}
header {
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value">870px</span></span>;
	<span class="css-property">margin-left<span class="css-selector">:</span><span class="css-value">auto</span></span>;
	<span class="css-property">margin-right<span class="css-selector">:</span><span class="css-value">auto</span></span>;
}
header nav a {
	<span class="css-property">position<span class="css-selector">:</span><span class="css-value">relative</span></span>;
	<span class="css-property">float<span class="css-selector">:</span><span class="css-value"> left</span></span>;
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value">150px</span></span>;
	<span class="css-property">text-align<span class="css-selector">:</span><span class="css-value">center</span></span>;
	<span class="css-property">padding-top<span class="css-selector">:</span><span class="css-value">23px</span></span>;
	<span class="css-property">padding-bottom<span class="css-selector">:</span><span class="css-value">30px</span></span>;
	<span class="css-property">margin-right<span class="css-selector">:</span><span class="css-value">20px</span></span>;
	<span class="css-property">-webkit-border-bottom-right-radius<span class="css-selector">:</span><span class="css-value"> 5px</span></span>;
	<span class="css-property">-webkit-border-bottom-left-radius<span class="css-selector">:</span><span class="css-value"> 5px</span></span>;
	<span class="css-property">-moz-border-radius-bottomright<span class="css-selector">:</span><span class="css-value"> 5px</span></span>;
	<span class="css-property">-moz-border-radius-bottomleft<span class="css-selector">:</span><span class="css-value"> 5px</span></span>;
	<span class="css-property">border-bottom-right-radius<span class="css-selector">:</span><span class="css-value"> 5px</span></span>;
	<span class="css-property">border-bottom-left-radius<span class="css-selector">:</span><span class="css-value"> 5px</span></span>;
        <span class="css-property">-webkit-transition<span class="css-selector">:</span><span class="css-value"> all .25s ease-out</span></span>;
        <span class="css-property">-moz-transition<span class="css-selector">:</span><span class="css-value"> all .25s ease-out</span></span>;
        <span class="css-property">-o-transition<span class="css-selector">:</span><span class="css-value"> all .25s ease-out</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value">#52a8e8</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value"> -webkit-gradient(linear, left top, left bottom, color-stop(.2, #52a8e8), color-stop(1, #4984ce))</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value"> -moz-linear-gradient(center top, #52a8e8 20%, #4984ce 100%)</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value"> -o-linear-gradient(#52a8e8, #4984ce)</span></span>;
}
header nav a:hover {
	<span class="css-property">padding-top<span class="css-selector">:</span><span class="css-value">53px</span></span>;
	<span class="css-property">padding-bottom<span class="css-selector">:</span><span class="css-value">60px</span></span>;
        <span class="css-property">-webkit-transition<span class="css-selector">:</span><span class="css-value"> all .25s ease-out</span></span>;
        <span class="css-property">-moz-transition<span class="css-selector">:</span><span class="css-value"> all .25s ease-out</span></span>;
        <span class="css-property">-o-transition<span class="css-selector">:</span><span class="css-value"> all .25s ease-out</span></span>;
}
h1 {
	<span class="css-property">clear<span class="css-selector">:</span><span class="css-value">both</span></span>;
	<span class="css-property">text-align<span class="css-selector">:</span><span class="css-value">center</span></span>;
	<span class="css-property">font-size<span class="css-selector">:</span><span class="css-value"> 45px</span></span>;
}
blockquote {
	<span class="css-property">font<span class="css-selector">:</span><span class="css-value"> 16px normal helvetica, sans-serif</span></span>;
	<span class="css-property">margin-top<span class="css-selector">:</span><span class="css-value"> 10px</span></span>;
	<span class="css-property">margin-bottom<span class="css-selector">:</span><span class="css-value"> 10px</span></span>;
	<span class="css-property">margin-left<span class="css-selector">:</span><span class="css-value"> 50px</span></span>;
	<span class="css-property">padding-left<span class="css-selector">:</span><span class="css-value"> 15px</span></span>;
	<span class="css-property">border-left<span class="css-selector">:</span><span class="css-value"> 3px solid #222</span></span>;
	<span class="css-property">text-shadow<span class="css-selector">:</span><span class="css-value">0 0 2px rgba(0, 0, 0, 0.50)</span></span>;
}
.author {
	<span class="css-property">float<span class="css-selector">:</span><span class="css-value"> right</span></span>;
	<span class="css-property">padding-right<span class="css-selector">:</span><span class="css-value"> 75px</span></span>;
	<span class="css-property">text-shadow<span class="css-selector">:</span><span class="css-value">0 0 2px rgba(0, 0, 0, 0.50)</span></span>;
}
#box {
	<span class="css-property">margin<span class="css-selector">:</span><span class="css-value"> 150px auto</span></span>;
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value"> auto</span></span>;
	<span class="css-property">text-align<span class="css-selector">:</span><span class="css-value"> left</span></span>;
}
a {
	<span class="css-property">text-decoration<span class="css-selector">:</span><span class="css-value">none</span></span>;
}
ul {
	<span class="css-property">list-style<span class="css-selector">:</span><span class="css-value"> none</span></span>;
}
#boxes {
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value">925px</span></span>;
	<span class="css-property">margin-left<span class="css-selector">:</span><span class="css-value">auto</span></span>;
	<span class="css-property">margin-right<span class="css-selector">:</span><span class="css-value">auto</span></span>;
	<span class="css-property">position<span class="css-selector">:</span><span class="css-value"> relative</span></span>;
	<span class="css-property">min-height<span class="css-selector">:</span><span class="css-value"> auto</span></span>;
}
.box:<span class="css-property">target, .box<span class="css-selector">:</span><span class="css-value">first-child {
	opacity: 1</span></span>;
	<span class="css-property">-moz-opacity<span class="css-selector">:</span><span class="css-value"> 1</span></span>;
}
.box {
	<span class="css-property">opacity<span class="css-selector">:</span><span class="css-value"> 0</span></span>;
	<span class="css-property">-moz-opacity<span class="css-selector">:</span><span class="css-value"> 0</span></span>;
	<span class="css-property">position<span class="css-selector">:</span><span class="css-value"> absolute</span></span>;
	<span class="css-property">top<span class="css-selector">:</span><span class="css-value"> 0</span></span>;
	<span class="css-property">left<span class="css-selector">:</span><span class="css-value"> 0</span></span>;
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value"> auto</span></span>;
        <span class="css-property">-webkit-transition<span class="css-selector">:</span><span class="css-value"> all .5s</span></span>;
        <span class="css-property">-moz-transition<span class="css-selector">:</span><span class="css-value"> all .5s</span></span>;
        <span class="css-property">-o-transition<span class="css-selector">:</span><span class="css-value"> all .5s</span></span>;
        transition: all .5s;
}
.box:<span class="css-property">target span {
	height<span class="css-selector">:</span><span class="css-value"> auto</span></span>;
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value"> auto</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value"> #fff</span></span>;
	<span class="css-property">display<span class="css-selector">:</span><span class="css-value"> block</span></span>;
	<span class="css-property">position<span class="css-selector">:</span><span class="css-value"> absolute</span></span>;
	<span class="css-property">top<span class="css-selector">:</span><span class="css-value"> -32px</span></span>;
	<span class="css-property">z-index<span class="css-selector">:</span><span class="css-value"> 0</span></span>;
}
.box ul, .box p {
	<span class="css-property">line-height<span class="css-selector">:</span><span class="css-value"> 1.5em</span></span>;
	<span class="css-property">padding-top<span class="css-selector">:</span><span class="css-value"> 1em</span></span>;
}
#boxes a {
	<span class="css-property">color<span class="css-selector">:</span><span class="css-value"> #52a8e8</span></span>;
	<span class="css-property">text-shadow<span class="css-selector">:</span><span class="css-value">0 1px 1px rgba(0, 0, 0, 1)</span></span>;
}
.box li a {
	<span class="css-property">display<span class="css-selector">:</span><span class="css-value"> block</span></span>;
	<span class="css-property">line-height<span class="css-selector">:</span><span class="css-value"> 2.2em</span></span>;
	<span class="css-property">font-size<span class="css-selector">:</span><span class="css-value"> 14px</span></span>;
	<span class="css-property">margin-bottom<span class="css-selector">:</span><span class="css-value"> 6px</span></span>;
	<span class="css-property">padding-left<span class="css-selector">:</span><span class="css-value"> 10px</span></span>;
}
#boxes ul li a:hover {
	<span class="css-property">color<span class="css-selector">:</span><span class="css-value"> #fff</span></span>;
	<span class="css-property">font-weight<span class="css-selector">:</span><span class="css-value"> bold</span></span>;
	<span class="css-property">text-decoration<span class="css-selector">:</span><span class="css-value"> none</span></span>;
}
.container {
	<span class="css-property">height<span class="css-selector">:</span><span class="css-value"> 300px</span></span>;
	<span class="css-property">width<span class="css-selector">:</span><span class="css-value"> 925px</span></span>;
	<span class="css-property">margin-left<span class="css-selector">:</span><span class="css-value"> auto</span></span>;
	<span class="css-property">margin-right<span class="css-selector">:</span><span class="css-value"> auto</span></span>;
	<span class="css-property">background<span class="css-selector">:</span><span class="css-value"> #fff url(lines.png)</span></span>;
	<span class="css-property">-webkit-box-shadow<span class="css-selector">:</span><span class="css-value"> #131313 0px 2px 10px</span></span>;
	<span class="css-property">-moz-box-shadow<span class="css-selector">:</span><span class="css-value"> #131313 0px 3px 10px</span></span>;
	<span class="css-property">box-shadow<span class="css-selector">:</span><span class="css-value"> #131313 0px 3px 10px</span></span>;
	<span class="css-property">-webkit-border-bottom-right-radius<span class="css-selector">:</span><span class="css-value"> 5px</span></span>;
	<span class="css-property">-webkit-border-radius<span class="css-selector">:</span><span class="css-value"> 5px</span></span>;
	<span class="css-property">-moz-border-radius<span class="css-selector">:</span><span class="css-value"> 5px</span></span>;
	<span class="css-property">border-radius<span class="css-selector">:</span><span class="css-value"> 5px</span></span>;
}</span></pre>
</div>
<h2>The HTML</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
</pre>
<pre><span class="html"><span class="html-other-element">&lt;header&gt;</span>
  <span class="html-other-element">&lt;nav&gt;</span> <span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#1&quot;</span>&gt;</span>TAB 1<span class="html-anchor-element">&lt;/a&gt;</span> <span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#2&quot;</span>&gt;</span>TAB 2<span class="html-anchor-element">&lt;/a&gt;</span> <span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#3&quot;</span>&gt;</span>TAB 3<span class="html-anchor-element">&lt;/a&gt;</span> <span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#4&quot;</span>&gt;</span>TAB 4<span class="html-anchor-element">&lt;/a&gt;</span> <span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;#5&quot;</span>&gt;</span>TAB 5<span class="html-anchor-element">&lt;/a&gt;</span> <span class="html-other-element">&lt;/nav&gt;</span>
<span class="html-other-element">&lt;/header&gt;</span>
<span class="html-other-element">&lt;div id=<span class="html-attribute">&quot;box&quot;</span>&gt;</span>
  <span class="html-other-element">&lt;ul id=<span class="html-attribute">&quot;boxes&quot;</span>&gt;</span>
    <span class="html-other-element">&lt;li id=<span class="html-attribute">&quot;1&quot;</span> class=<span class="html-attribute">&quot;box&quot;</span>&gt;</span>
      <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;container&quot;</span>&gt;</span>
        <span class="html-other-element">&lt;h1&gt;</span><span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;http://www.priteshgupta.com/&quot;</span> target=<span class="html-attribute">&quot;_blank&quot;</span>&gt;</span>Tab 1<span class="html-anchor-element">&lt;/a&gt;</span><span class="html-other-element">&lt;/h1&gt;</span>
        <span class="html-other-element">&lt;blockquote&gt;</span>As an example to others, and not that I care for moderation myself, it has always been my rule never to smoke when asleep, and never to refrain from smoking when awake <span class="html-other-element">&lt;br&gt;</span>
        <span class="html-other-element">&lt;/blockquote&gt;</span>
        <span class="html-other-element">&lt;em class=<span class="html-attribute">&quot;author&quot;</span>&gt;</span>~ Mark Twain<span class="html-other-element">&lt;/em&gt;</span> <span class="html-other-element">&lt;/div&gt;</span>
      <span class="html-other-element">&lt;span&gt;</span><span class="html-other-element">&lt;/span&gt;</span> <span class="html-other-element">&lt;/li&gt;</span>
    <span class="html-other-element">&lt;li id=<span class="html-attribute">&quot;2&quot;</span> class=<span class="html-attribute">&quot;box&quot;</span>&gt;</span>
      <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;container&quot;</span>&gt;</span>
        <span class="html-other-element">&lt;h1&gt;</span><span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;http://www.priteshgupta.com/&quot;</span> target=<span class="html-attribute">&quot;_blank&quot;</span>&gt;</span>Tab 2<span class="html-anchor-element">&lt;/a&gt;</span><span class="html-other-element">&lt;/h1&gt;</span>
        <span class="html-other-element">&lt;blockquote&gt;</span>Anger is an acid that can do more harm to the vessel in which it is stored than to anything on which it is poured <span class="html-other-element">&lt;br&gt;</span>
        <span class="html-other-element">&lt;/blockquote&gt;</span>
        <span class="html-other-element">&lt;em class=<span class="html-attribute">&quot;author&quot;</span>&gt;</span>~ Mark Twain<span class="html-other-element">&lt;/em&gt;</span> <span class="html-other-element">&lt;/div&gt;</span>
      <span class="html-other-element">&lt;span&gt;</span><span class="html-other-element">&lt;/span&gt;</span> <span class="html-other-element">&lt;/li&gt;</span>
    <span class="html-other-element">&lt;li id=<span class="html-attribute">&quot;3&quot;</span> class=<span class="html-attribute">&quot;box&quot;</span>&gt;</span>
      <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;container&quot;</span>&gt;</span>
        <span class="html-other-element">&lt;h1&gt;</span><span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;http://www.priteshgupta.com/&quot;</span> target=<span class="html-attribute">&quot;_blank&quot;</span>&gt;</span>Tab 3<span class="html-anchor-element">&lt;/a&gt;</span><span class="html-other-element">&lt;/h1&gt;</span>
        <span class="html-other-element">&lt;blockquote&gt;</span>A man's character may be learned from the adjectives which he habitually uses in conversation <span class="html-other-element">&lt;br&gt;</span>
        <span class="html-other-element">&lt;/blockquote&gt;</span>
        <span class="html-other-element">&lt;em class=<span class="html-attribute">&quot;author&quot;</span>&gt;</span>~ Mark Twain<span class="html-other-element">&lt;/em&gt;</span> <span class="html-other-element">&lt;/div&gt;</span>
      <span class="html-other-element">&lt;span&gt;</span><span class="html-other-element">&lt;/span&gt;</span> <span class="html-other-element">&lt;/li&gt;</span>
    <span class="html-other-element">&lt;li id=<span class="html-attribute">&quot;4&quot;</span> class=<span class="html-attribute">&quot;box&quot;</span>&gt;</span>
      <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;container&quot;</span>&gt;</span>
        <span class="html-other-element">&lt;h1&gt;</span><span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;http://www.priteshgupta.com/&quot;</span> target=<span class="html-attribute">&quot;_blank&quot;</span>&gt;</span>Tab 4<span class="html-anchor-element">&lt;/a&gt;</span><span class="html-other-element">&lt;/h1&gt;</span>
        <span class="html-other-element">&lt;blockquote&gt;</span>Biographies are but the clothes and buttons of the man. The biography of the man himself cannot be written <span class="html-other-element">&lt;br&gt;</span>
        <span class="html-other-element">&lt;/blockquote&gt;</span>
        <span class="html-other-element">&lt;em class=<span class="html-attribute">&quot;author&quot;</span>&gt;</span>~ Mark Twain<span class="html-other-element">&lt;/em&gt;</span> <span class="html-other-element">&lt;/div&gt;</span>
      <span class="html-other-element">&lt;span&gt;</span><span class="html-other-element">&lt;/span&gt;</span> <span class="html-other-element">&lt;/li&gt;</span>
    <span class="html-other-element">&lt;li id=<span class="html-attribute">&quot;5&quot;</span> class=<span class="html-attribute">&quot;box&quot;</span>&gt;</span>
      <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;container&quot;</span>&gt;</span>
        <span class="html-other-element">&lt;h1&gt;</span><span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;http://www.priteshgupta.com/&quot;</span> target=<span class="html-attribute">&quot;_blank&quot;</span>&gt;</span>Tab 5<span class="html-anchor-element">&lt;/a&gt;</span><span class="html-other-element">&lt;/h1&gt;</span>
        <span class="html-other-element">&lt;blockquote&gt;</span>But who prays for Satan? Who, in eighteen centuries, has had the common humanity to pray for the one sinner that needed it most? <span class="html-other-element">&lt;br&gt;</span>
        <span class="html-other-element">&lt;/blockquote&gt;</span>
        <span class="html-other-element">&lt;em class=<span class="html-attribute">&quot;author&quot;</span>&gt;</span>~ Mark Twain<span class="html-other-element">&lt;/em&gt;</span> <span class="html-other-element">&lt;/div&gt;</span>
      <span class="html-other-element">&lt;span&gt;</span><span class="html-other-element">&lt;/span&gt;</span> <span class="html-other-element">&lt;/li&gt;</span>
  <span class="html-other-element">&lt;/ul&gt;</span>
<span class="html-other-element">&lt;/div&gt;</span></span></pre>
</div>
<h1>Adding New Tabs</h1>
<p>Adding new tabs is really easy, you can add as many tabs as you want, just add another hyperlink within <code><strong>&lt;nav&gt;</strong></code> with the anchor link as the hash-tag that matches the ID of the Tab.<br />
And then, to add the Tab(Content), add something like: </p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre>
<pre><span class="html"><span class="html-other-element">&lt;li id=<span class="html-attribute">&quot;ID&quot;</span> class=<span class="html-attribute">&quot;box&quot;</span>&gt;</span>
      <span class="html-other-element">&lt;div class=<span class="html-attribute">&quot;container&quot;</span>&gt;</span>
        <span class="html-other-element">&lt;h1&gt;</span><span class="html-anchor-element">&lt;a href=<span class="html-attribute">&quot;http://www.priteshgupta.com/&quot;</span> target=<span class="html-attribute">&quot;_blank&quot;</span>&gt;</span>Some Heading<span class="html-anchor-element">&lt;/a&gt;</span><span class="html-other-element">&lt;/h1&gt;</span>
        <span class="html-other-element">&lt;blockquote&gt;</span>Biographies are but the clothes and buttons of the man. The biography of the man himself cannot be written <span class="html-other-element">&lt;br&gt;</span>
        <span class="html-other-element">&lt;/blockquote&gt;</span>
      <span class="html-other-element">&lt;em class=<span class="html-attribute">&quot;author&quot;</span>&gt;</span>~ Mark Twain<span class="html-other-element">&lt;/em&gt;</span>
	  <span class="html-other-element">&lt;/div&gt;</span>
      <span class="html-other-element">&lt;span&gt;</span><span class="html-other-element">&lt;/span&gt;</span>
<span class="html-other-element">&lt;/li&gt;</span></span></pre>
</div>
<p>Within <strong><code>&lt;ul id="boxes"&gt;</code></strong>, where &#8216;ID&#8217; is is the ID of the Tab.</p>
<h1>Compatibility</h1>
<h2>For Working:</h2>
<div class="shortcode-unorderedlist green-dot"></p>
<ul>
<li>Firefox 3+</li>
<li>Safari 3+</li>
<li>Chrome (any)</li>
<li>Opera 10+</li>
<li>Internet Explorer 9+</li>
</ul>
<p></div>

<h2>For Transitions:</h2>
<div class="shortcode-unorderedlist green-dot"></p>
<ul>
<li>Firefox 4+</li>
<li>Safari 4+</li>
<li>Chrome 4+</li>
<li>Opera 10.5+</li>
</ul>
<p></div>



<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Tabs+with+CSS3+Navigation+Menu&amp;link=http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/&amp;notes=Whenever%20we%20think%20about%20tabs%2C%20we%20think%20about%20JavaScript.%20But%20tabs%20can%20be%20created%20using%20CSS%20only%20as%20well.%20Even%20the%20transitions%20can%20be%20achieved%20using%20CSS.%20These%20tabs%20behave%20like%20general%20JavaScript%20Tabs.%20I%20am%20using%20the%20Navigation%20Menu%20which%20I%20created%20a%20while%20ago%2C%20the%20navigation%20menu%20gives%20the%20ability%20t&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Tabs+with+CSS3+Navigation+Menu&amp;link=http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/&amp;notes=Whenever%20we%20think%20about%20tabs%2C%20we%20think%20about%20JavaScript.%20But%20tabs%20can%20be%20created%20using%20CSS%20only%20as%20well.%20Even%20the%20transitions%20can%20be%20achieved%20using%20CSS.%20These%20tabs%20behave%20like%20general%20JavaScript%20Tabs.%20I%20am%20using%20the%20Navigation%20Menu%20which%20I%20created%20a%20while%20ago%2C%20the%20navigation%20menu%20gives%20the%20ability%20t&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Tabs+with+CSS3+Navigation+Menu&amp;link=http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/&amp;notes=Whenever%20we%20think%20about%20tabs%2C%20we%20think%20about%20JavaScript.%20But%20tabs%20can%20be%20created%20using%20CSS%20only%20as%20well.%20Even%20the%20transitions%20can%20be%20achieved%20using%20CSS.%20These%20tabs%20behave%20like%20general%20JavaScript%20Tabs.%20I%20am%20using%20the%20Navigation%20Menu%20which%20I%20created%20a%20while%20ago%2C%20the%20navigation%20menu%20gives%20the%20ability%20t&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=3&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Tabs+with+CSS3+Navigation+Menu&amp;link=http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/&amp;notes=Whenever%20we%20think%20about%20tabs%2C%20we%20think%20about%20JavaScript.%20But%20tabs%20can%20be%20created%20using%20CSS%20only%20as%20well.%20Even%20the%20transitions%20can%20be%20achieved%20using%20CSS.%20These%20tabs%20behave%20like%20general%20JavaScript%20Tabs.%20I%20am%20using%20the%20Navigation%20Menu%20which%20I%20created%20a%20while%20ago%2C%20the%20navigation%20menu%20gives%20the%20ability%20t&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=257&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Tabs+with+CSS3+Navigation+Menu&amp;link=http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/&amp;notes=Whenever%20we%20think%20about%20tabs%2C%20we%20think%20about%20JavaScript.%20But%20tabs%20can%20be%20created%20using%20CSS%20only%20as%20well.%20Even%20the%20transitions%20can%20be%20achieved%20using%20CSS.%20These%20tabs%20behave%20like%20general%20JavaScript%20Tabs.%20I%20am%20using%20the%20Navigation%20Menu%20which%20I%20created%20a%20while%20ago%2C%20the%20navigation%20menu%20gives%20the%20ability%20t&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Tabs+with+CSS3+Navigation+Menu&amp;link=http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/&amp;notes=Whenever%20we%20think%20about%20tabs%2C%20we%20think%20about%20JavaScript.%20But%20tabs%20can%20be%20created%20using%20CSS%20only%20as%20well.%20Even%20the%20transitions%20can%20be%20achieved%20using%20CSS.%20These%20tabs%20behave%20like%20general%20JavaScript%20Tabs.%20I%20am%20using%20the%20Navigation%20Menu%20which%20I%20created%20a%20while%20ago%2C%20the%20navigation%20menu%20gives%20the%20ability%20t&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=38&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Tabs+with+CSS3+Navigation+Menu&amp;link=http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/&amp;notes=Whenever%20we%20think%20about%20tabs%2C%20we%20think%20about%20JavaScript.%20But%20tabs%20can%20be%20created%20using%20CSS%20only%20as%20well.%20Even%20the%20transitions%20can%20be%20achieved%20using%20CSS.%20These%20tabs%20behave%20like%20general%20JavaScript%20Tabs.%20I%20am%20using%20the%20Navigation%20Menu%20which%20I%20created%20a%20while%20ago%2C%20the%20navigation%20menu%20gives%20the%20ability%20t&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=10&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.shareaholic.com/api/share/?title=CSS3+Tabs+with+CSS3+Navigation+Menu&amp;link=http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/&amp;notes=Whenever%20we%20think%20about%20tabs%2C%20we%20think%20about%20JavaScript.%20But%20tabs%20can%20be%20created%20using%20CSS%20only%20as%20well.%20Even%20the%20transitions%20can%20be%20achieved%20using%20CSS.%20These%20tabs%20behave%20like%20general%20JavaScript%20Tabs.%20I%20am%20using%20the%20Navigation%20Menu%20which%20I%20created%20a%20while%20ago%2C%20the%20navigation%20menu%20gives%20the%20ability%20t&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=43&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>


<p><a href="http://feedads.g.doubleclick.net/~a/za-LMYeFhObxdb5ncNcDxpyt7Mw/0/da"><img src="http://feedads.g.doubleclick.net/~a/za-LMYeFhObxdb5ncNcDxpyt7Mw/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/za-LMYeFhObxdb5ncNcDxpyt7Mw/1/da"><img src="http://feedads.g.doubleclick.net/~a/za-LMYeFhObxdb5ncNcDxpyt7Mw/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/priteshgupta?a=i9qEOSbFQoE:8CNXGUlLZXo:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/priteshgupta?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/priteshgupta?a=i9qEOSbFQoE:8CNXGUlLZXo:caC8GWrvNc4"><img src="http://feeds.feedburner.com/~ff/priteshgupta?i=i9qEOSbFQoE:8CNXGUlLZXo:caC8GWrvNc4" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/priteshgupta/~4/i9qEOSbFQoE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://www.priteshgupta.com/2011/09/css3-tabs-with-css3-navigation-menu/</feedburner:origLink></item>
		<item>
		<title>Download Windows 8 Developer Preview</title>
		<link>http://feedproxy.google.com/~r/priteshgupta/~3/QpxQ0rz3G3w/</link>
		<comments>http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/#comments</comments>
		<pubDate>Thu, 15 Sep 2011 16:46:41 +0000</pubDate>
		<dc:creator>Pritesh Gupta</dc:creator>
				<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[Software and Applications]]></category>
		<category><![CDATA[Beta]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://www.priteshgupta.com/?p=1824</guid>
		<description><![CDATA[The Windows 8 Developer Preview is now available for download on Windows Dev Center, this is a pre-beta version of Windows 8(and is for production environment mainly). What gives Windows 8 an edge over predecessor Windows 7 is that, Windows 8 is a tablet oriented operating system and has a very friendly and interactive interface [...]]]></description>
			<content:encoded><![CDATA[<p>The <strong>Windows 8 Developer Preview</strong> is now available for <strong>download</strong> on <a href="http://msdn.microsoft.com/en-us/windows/home/" title="Windows Dev Center" target="_blank"><strong>Windows Dev Center</strong></a>, this is a pre-beta version of Windows 8(and is for production environment mainly). What gives <strong>Windows 8</strong> an edge over predecessor <strong>Windows 7</strong> is that, Windows 8 is a tablet oriented operating system and has a very friendly and interactive interface for <strong>tablets/touchscreens</strong> while being equally good with normal <strong>PCs</strong>(ones with a Keyboard and a Mouse). The download is available <a href="http://msdn.microsoft.com/en-us/windows/apps/br229516" title="Windows Metro Style Apps Developer Downloads" target="_blank"><strong>here</strong></a> which includes the <strong>prerelease software</strong>. Since this a preview, many new features still need to be implemented(and some might get removed too) and do remember, this release is <strong>not</strong> really very <strong>stable</strong>. Folks at Ars Technica have written a nice <strong>Hands-on</strong> article on the prerelease software, check it out <a href="http://arstechnica.com/microsoft/news/2011/09/hands-on-with-windows-8-a-tablet-operating-system-for-the-pc-age.ars" title="Hands-on with Windows 8: it's good stuff on the PC, too " target="_blank"><strong>here</strong></a>.<br />
<img src="http://www.priteshgupta.com/wp-content/uploads/2011/09/Start_Screen.png" alt="" title="Start_Screen" width="580" height="326" class="alignnone size-full wp-image-1826" /><br />
Also, if you will like to experience a <strong>similar</strong> interface on your Windows, then you can check out <strong><a href="http://omnimo.info/index.html" title="Omnimo UI" target="_blank">Omnimo UI</a></strong>(Which is used with <a href="http://rainmeter.net/RainCMS/" title="Rainmeter" target="_blank"><strong>Rainmeter</strong></a>), its actually pretty good in giving you a <strong>Windows 8 like interface</strong> and even <a href="http://priteshgupta.deviantart.com/#/d46kxzb" title="August 2011 Desktop" target="_blank"><strong>I use it</strong></a>.</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=Download+Windows+8+Developer+Preview&amp;link=http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/&amp;notes=The%20Windows%208%20Developer%20Preview%20is%20now%20available%20for%20download%20on%20Windows%20Dev%20Center%2C%20this%20is%20a%20pre-beta%20version%20of%20Windows%208%28and%20is%20for%20production%20environment%20mainly%29.%20What%20gives%20Windows%208%20an%20edge%20over%20predecessor%20Windows%207%20is%20that%2C%20Windows%208%20is%20a%20tablet%20oriented%20operating%20system%20and%20has%20a%20very%20frie&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=Download+Windows+8+Developer+Preview&amp;link=http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/&amp;notes=The%20Windows%208%20Developer%20Preview%20is%20now%20available%20for%20download%20on%20Windows%20Dev%20Center%2C%20this%20is%20a%20pre-beta%20version%20of%20Windows%208%28and%20is%20for%20production%20environment%20mainly%29.%20What%20gives%20Windows%208%20an%20edge%20over%20predecessor%20Windows%207%20is%20that%2C%20Windows%208%20is%20a%20tablet%20oriented%20operating%20system%20and%20has%20a%20very%20frie&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://www.shareaholic.com/api/share/?title=Download+Windows+8+Developer+Preview&amp;link=http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/&amp;notes=The%20Windows%208%20Developer%20Preview%20is%20now%20available%20for%20download%20on%20Windows%20Dev%20Center%2C%20this%20is%20a%20pre-beta%20version%20of%20Windows%208%28and%20is%20for%20production%20environment%20mainly%29.%20What%20gives%20Windows%208%20an%20edge%20over%20predecessor%20Windows%207%20is%20that%2C%20Windows%208%20is%20a%20tablet%20oriented%20operating%20system%20and%20has%20a%20very%20frie&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=3&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.shareaholic.com/api/share/?title=Download+Windows+8+Developer+Preview&amp;link=http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/&amp;notes=The%20Windows%208%20Developer%20Preview%20is%20now%20available%20for%20download%20on%20Windows%20Dev%20Center%2C%20this%20is%20a%20pre-beta%20version%20of%20Windows%208%28and%20is%20for%20production%20environment%20mainly%29.%20What%20gives%20Windows%208%20an%20edge%20over%20predecessor%20Windows%207%20is%20that%2C%20Windows%208%20is%20a%20tablet%20oriented%20operating%20system%20and%20has%20a%20very%20frie&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=257&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=Download+Windows+8+Developer+Preview&amp;link=http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/&amp;notes=The%20Windows%208%20Developer%20Preview%20is%20now%20available%20for%20download%20on%20Windows%20Dev%20Center%2C%20this%20is%20a%20pre-beta%20version%20of%20Windows%208%28and%20is%20for%20production%20environment%20mainly%29.%20What%20gives%20Windows%208%20an%20edge%20over%20predecessor%20Windows%207%20is%20that%2C%20Windows%208%20is%20a%20tablet%20oriented%20operating%20system%20and%20has%20a%20very%20frie&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.shareaholic.com/api/share/?title=Download+Windows+8+Developer+Preview&amp;link=http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/&amp;notes=The%20Windows%208%20Developer%20Preview%20is%20now%20available%20for%20download%20on%20Windows%20Dev%20Center%2C%20this%20is%20a%20pre-beta%20version%20of%20Windows%208%28and%20is%20for%20production%20environment%20mainly%29.%20What%20gives%20Windows%208%20an%20edge%20over%20predecessor%20Windows%207%20is%20that%2C%20Windows%208%20is%20a%20tablet%20oriented%20operating%20system%20and%20has%20a%20very%20frie&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=38&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://www.shareaholic.com/api/share/?title=Download+Windows+8+Developer+Preview&amp;link=http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/&amp;notes=The%20Windows%208%20Developer%20Preview%20is%20now%20available%20for%20download%20on%20Windows%20Dev%20Center%2C%20this%20is%20a%20pre-beta%20version%20of%20Windows%208%28and%20is%20for%20production%20environment%20mainly%29.%20What%20gives%20Windows%208%20an%20edge%20over%20predecessor%20Windows%207%20is%20that%2C%20Windows%208%20is%20a%20tablet%20oriented%20operating%20system%20and%20has%20a%20very%20frie&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=10&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.shareaholic.com/api/share/?title=Download+Windows+8+Developer+Preview&amp;link=http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/&amp;notes=The%20Windows%208%20Developer%20Preview%20is%20now%20available%20for%20download%20on%20Windows%20Dev%20Center%2C%20this%20is%20a%20pre-beta%20version%20of%20Windows%208%28and%20is%20for%20production%20environment%20mainly%29.%20What%20gives%20Windows%208%20an%20edge%20over%20predecessor%20Windows%207%20is%20that%2C%20Windows%208%20is%20a%20tablet%20oriented%20operating%20system%20and%20has%20a%20very%20frie&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=43&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>


<p><a href="http://feedads.g.doubleclick.net/~a/28w_3zB49Ja8nSZCWMbIujliS70/0/da"><img src="http://feedads.g.doubleclick.net/~a/28w_3zB49Ja8nSZCWMbIujliS70/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/28w_3zB49Ja8nSZCWMbIujliS70/1/da"><img src="http://feedads.g.doubleclick.net/~a/28w_3zB49Ja8nSZCWMbIujliS70/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/priteshgupta?a=QpxQ0rz3G3w:bjyp16VyPjo:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/priteshgupta?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/priteshgupta?a=QpxQ0rz3G3w:bjyp16VyPjo:caC8GWrvNc4"><img src="http://feeds.feedburner.com/~ff/priteshgupta?i=QpxQ0rz3G3w:bjyp16VyPjo:caC8GWrvNc4" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/priteshgupta/~4/QpxQ0rz3G3w" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.priteshgupta.com/2011/09/download-windows-8-developer-preview/</feedburner:origLink></item>
		<item>
		<title>Flip or Reverse Text Using CSS</title>
		<link>http://feedproxy.google.com/~r/priteshgupta/~3/kVrrAe8ReWY/</link>
		<comments>http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/#comments</comments>
		<pubDate>Sun, 11 Sep 2011 06:18:24 +0000</pubDate>
		<dc:creator>Pritesh Gupta</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://www.priteshgupta.com/?p=1797</guid>
		<description><![CDATA[As title says, we can Flip Text Upside Down or Reverse Text using CSS only(Rather than some jQuery Plugin or JavaScript). The CSS is completely Cross-browser compatible(Yeah, even older IEs), check out the CSS below. Flipping Text Upside Down 1 2 3 4 5 6 7 8 9 10 11 -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); ms-filter:&#34;progid:DXImageTransform.Microsoft.BasicImage(rotation=2)&#34;; [...]]]></description>
			<content:encoded><![CDATA[<p>As title says, we can <strong>Flip Text Upside Down</strong> or <strong>Reverse Text</strong> using <strong>CSS</strong> only(Rather than some jQuery Plugin or JavaScript). The CSS is completely <strong>Cross-browser</strong> compatible(Yeah, even older IEs), check out the CSS below.</p>
<h2>Flipping Text Upside Down</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
</pre>
<pre><span class="css"><span class="css-property">-webkit-transform<span class="css-selector">:</span><span class="css-value">rotate(-180deg)</span></span>;
<span class="css-property">-moz-transform<span class="css-selector">:</span><span class="css-value">rotate(-180deg)</span></span>;
<span class="css-property">-o-transform<span class="css-selector">:</span><span class="css-value">rotate(-180deg)</span></span>;
transform:rotate(-180deg);
ms-filter:<span class="css-string">&quot;progid:DXImageTransform.Microsoft.BasicImage(rotation=2)&quot;</span>;
filter:progid:DXImageTransform.Microsoft.BasicImage(<span class="css-property">rotation=2)</span>;</span></pre>
</div>
<h2>Reversing Text</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
</pre>
<pre><span class="css"><span class="css-property">direction<span class="css-selector">:</span><span class="css-value"> rtl</span></span>;
unicode-bidi: bidi-override;</span></pre>
</div>
<h2>Live Demo</h2>
<p>Here is a live demo of implementation of above snippets:</p>
<h2>Flipping Text</h2>
<p><iframe src="http://www.priteshgupta.com/demos/text/text-flip.html" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height: 50px; margin-left: 15px;" allowTransparency="true"></iframe></p>
<h2>Reversing Text</h2>
<p><iframe src="http://www.priteshgupta.com/demos/text/text-reverse.html" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height: 50px; margin-left: 15px;" allowTransparency="true"></iframe></p>
<p>Alternatively, you can see them <a href="http://www.priteshgupta.com/demos/text/text.html" target="_blank">here</a>.</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=Flip+or+Reverse+Text+Using+CSS&amp;link=http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/&amp;notes=As%20title%20says%2C%20we%20can%20Flip%20Text%20Upside%20Down%20or%20Reverse%20Text%20using%20CSS%20only%28Rather%20than%20some%20jQuery%20Plugin%20or%20JavaScript%29.%20The%20CSS%20is%20completely%20Cross-browser%20compatible%28Yeah%2C%20even%20older%20IEs%29%2C%20check%20out%20the%20CSS%20below.%0D%0AFlipping%20Text%20Upside%20Down%0D%0A%7Bcode%20type%3Dcss%7D%0D%0A-webkit-transform%3Arotate%28-180deg%29%3B%0D%0A-m&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=Flip+or+Reverse+Text+Using+CSS&amp;link=http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/&amp;notes=As%20title%20says%2C%20we%20can%20Flip%20Text%20Upside%20Down%20or%20Reverse%20Text%20using%20CSS%20only%28Rather%20than%20some%20jQuery%20Plugin%20or%20JavaScript%29.%20The%20CSS%20is%20completely%20Cross-browser%20compatible%28Yeah%2C%20even%20older%20IEs%29%2C%20check%20out%20the%20CSS%20below.%0D%0AFlipping%20Text%20Upside%20Down%0D%0A%7Bcode%20type%3Dcss%7D%0D%0A-webkit-transform%3Arotate%28-180deg%29%3B%0D%0A-m&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://www.shareaholic.com/api/share/?title=Flip+or+Reverse+Text+Using+CSS&amp;link=http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/&amp;notes=As%20title%20says%2C%20we%20can%20Flip%20Text%20Upside%20Down%20or%20Reverse%20Text%20using%20CSS%20only%28Rather%20than%20some%20jQuery%20Plugin%20or%20JavaScript%29.%20The%20CSS%20is%20completely%20Cross-browser%20compatible%28Yeah%2C%20even%20older%20IEs%29%2C%20check%20out%20the%20CSS%20below.%0D%0AFlipping%20Text%20Upside%20Down%0D%0A%7Bcode%20type%3Dcss%7D%0D%0A-webkit-transform%3Arotate%28-180deg%29%3B%0D%0A-m&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=3&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.shareaholic.com/api/share/?title=Flip+or+Reverse+Text+Using+CSS&amp;link=http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/&amp;notes=As%20title%20says%2C%20we%20can%20Flip%20Text%20Upside%20Down%20or%20Reverse%20Text%20using%20CSS%20only%28Rather%20than%20some%20jQuery%20Plugin%20or%20JavaScript%29.%20The%20CSS%20is%20completely%20Cross-browser%20compatible%28Yeah%2C%20even%20older%20IEs%29%2C%20check%20out%20the%20CSS%20below.%0D%0AFlipping%20Text%20Upside%20Down%0D%0A%7Bcode%20type%3Dcss%7D%0D%0A-webkit-transform%3Arotate%28-180deg%29%3B%0D%0A-m&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=257&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=Flip+or+Reverse+Text+Using+CSS&amp;link=http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/&amp;notes=As%20title%20says%2C%20we%20can%20Flip%20Text%20Upside%20Down%20or%20Reverse%20Text%20using%20CSS%20only%28Rather%20than%20some%20jQuery%20Plugin%20or%20JavaScript%29.%20The%20CSS%20is%20completely%20Cross-browser%20compatible%28Yeah%2C%20even%20older%20IEs%29%2C%20check%20out%20the%20CSS%20below.%0D%0AFlipping%20Text%20Upside%20Down%0D%0A%7Bcode%20type%3Dcss%7D%0D%0A-webkit-transform%3Arotate%28-180deg%29%3B%0D%0A-m&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.shareaholic.com/api/share/?title=Flip+or+Reverse+Text+Using+CSS&amp;link=http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/&amp;notes=As%20title%20says%2C%20we%20can%20Flip%20Text%20Upside%20Down%20or%20Reverse%20Text%20using%20CSS%20only%28Rather%20than%20some%20jQuery%20Plugin%20or%20JavaScript%29.%20The%20CSS%20is%20completely%20Cross-browser%20compatible%28Yeah%2C%20even%20older%20IEs%29%2C%20check%20out%20the%20CSS%20below.%0D%0AFlipping%20Text%20Upside%20Down%0D%0A%7Bcode%20type%3Dcss%7D%0D%0A-webkit-transform%3Arotate%28-180deg%29%3B%0D%0A-m&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=38&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://www.shareaholic.com/api/share/?title=Flip+or+Reverse+Text+Using+CSS&amp;link=http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/&amp;notes=As%20title%20says%2C%20we%20can%20Flip%20Text%20Upside%20Down%20or%20Reverse%20Text%20using%20CSS%20only%28Rather%20than%20some%20jQuery%20Plugin%20or%20JavaScript%29.%20The%20CSS%20is%20completely%20Cross-browser%20compatible%28Yeah%2C%20even%20older%20IEs%29%2C%20check%20out%20the%20CSS%20below.%0D%0AFlipping%20Text%20Upside%20Down%0D%0A%7Bcode%20type%3Dcss%7D%0D%0A-webkit-transform%3Arotate%28-180deg%29%3B%0D%0A-m&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=10&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.shareaholic.com/api/share/?title=Flip+or+Reverse+Text+Using+CSS&amp;link=http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/&amp;notes=As%20title%20says%2C%20we%20can%20Flip%20Text%20Upside%20Down%20or%20Reverse%20Text%20using%20CSS%20only%28Rather%20than%20some%20jQuery%20Plugin%20or%20JavaScript%29.%20The%20CSS%20is%20completely%20Cross-browser%20compatible%28Yeah%2C%20even%20older%20IEs%29%2C%20check%20out%20the%20CSS%20below.%0D%0AFlipping%20Text%20Upside%20Down%0D%0A%7Bcode%20type%3Dcss%7D%0D%0A-webkit-transform%3Arotate%28-180deg%29%3B%0D%0A-m&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=43&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>


<p><a href="http://feedads.g.doubleclick.net/~a/60zpQrrwfVdcmbcplHNYtfd_EFM/0/da"><img src="http://feedads.g.doubleclick.net/~a/60zpQrrwfVdcmbcplHNYtfd_EFM/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/60zpQrrwfVdcmbcplHNYtfd_EFM/1/da"><img src="http://feedads.g.doubleclick.net/~a/60zpQrrwfVdcmbcplHNYtfd_EFM/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/priteshgupta?a=kVrrAe8ReWY:E7eYDRawLHw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/priteshgupta?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/priteshgupta?a=kVrrAe8ReWY:E7eYDRawLHw:caC8GWrvNc4"><img src="http://feeds.feedburner.com/~ff/priteshgupta?i=kVrrAe8ReWY:E7eYDRawLHw:caC8GWrvNc4" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/priteshgupta/~4/kVrrAe8ReWY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://www.priteshgupta.com/2011/09/flip-or-reverse-text-using-css/</feedburner:origLink></item>
		<item>
		<title>Advanced Image Functions using PHP</title>
		<link>http://feedproxy.google.com/~r/priteshgupta/~3/llEvYXEV19E/</link>
		<comments>http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/#comments</comments>
		<pubDate>Sat, 10 Sep 2011 20:45:37 +0000</pubDate>
		<dc:creator>Pritesh Gupta</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://www.priteshgupta.com/?p=1735</guid>
		<description><![CDATA[Here are some PHP Functions for Images which I came across recently, these come under GD and Image Functions and require GD library. I have taken most of these from PHP Manual and they are quite helpful. Sharpening All Images 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 [...]]]></description>
			<content:encoded><![CDATA[<p>Here are some <a href="/category/php-2/" title="PHP" target="_blank">PHP</a> Functions for Images which I came across recently, these come under <strong>GD and Image Functions</strong> and require <strong>GD library</strong>. I have taken most of these from PHP Manual and they are quite helpful.</p>
<h2>Sharpening All Images</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre>
<pre><span class="php"><span class="php-function">function</span> imagesharpen<span class="php-brackets">(</span> <span class="php-var">$image</span><span class="php-brackets">)</span> <span class="php-brackets">{</span>

        <span class="php-var">$matrix</span> <span class="php-operator">=</span> <span class="php-keyword">array</span><span class="php-brackets">(</span>
            <span class="php-keyword">array</span><span class="php-brackets">(</span><span class="php-operator">-</span><span class="php-number">1</span>, <span class="php-operator">-</span><span class="php-number">1</span>, <span class="php-operator">-</span><span class="php-number">1</span><span class="php-brackets">)</span>,
            <span class="php-keyword">array</span><span class="php-brackets">(</span><span class="php-operator">-</span><span class="php-number">1</span>, <span class="php-number">1</span><span class="php-number">6</span>, <span class="php-operator">-</span><span class="php-number">1</span><span class="php-brackets">)</span>,
            <span class="php-keyword">array</span><span class="php-brackets">(</span><span class="php-operator">-</span><span class="php-number">1</span>, <span class="php-operator">-</span><span class="php-number">1</span>, <span class="php-operator">-</span><span class="php-number">1</span><span class="php-brackets">)</span>,
        <span class="php-brackets">)</span>;

        <span class="php-var">$divisor</span> <span class="php-operator">=</span> <span class="php-function">array_sum</span><span class="php-brackets">(</span><span class="php-function">array_map</span><span class="php-brackets">(</span><span class="php-string">'array_sum'</span>, <span class="php-var">$matrix</span><span class="php-brackets">)</span><span class="php-brackets">)</span>;
        <span class="php-var">$offset</span> <span class="php-operator">=</span> <span class="php-number">0</span>;
        <span class="php-function">imageconvolution</span><span class="php-brackets">(</span><span class="php-var">$image</span>, <span class="php-var">$matrix</span>, <span class="php-var">$divisor</span>, <span class="php-var">$offset</span><span class="php-brackets">)</span>;

        <span class="php-keyword">return</span> <span class="php-var">$image</span>;
    <span class="php-brackets">}</span></span></pre>
</div>
<h2>Sharpening Images via Function</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
</pre>
<pre><span class="php"><span class="php-script-tag">&lt;?php</span>  

    <span class="php-function">function</span> GDThrowError<span class="php-brackets">(</span><span class="php-var">$message</span><span class="php-brackets">)</span>
    <span class="php-brackets">{</span>
        <span class="php-comment">// don't throw plain text errors in a function that's supposed to return an image
</span>
        <span class="php-comment">// as per &quot;the principle of least astonishment&quot;: the user is expecting
</span>
        <span class="php-comment">// a jpeg, and they'll be less astonished to get a JPEG error message
</span>
        <span class="php-comment">// than they would be if they got plain text.  Imagine this was called
</span>
        <span class="php-comment">// from an image tag, which makes sense, that's how you use images:
</span>
        <span class="php-comment">// plain text errors won't even reach most users, they'd have to copy
</span>
        <span class="php-comment">// the img src into the address bar.  It probably wont' even occur to
</span>
        <span class="php-comment">// them, as it's not typically helpful to view the source of an image
</span>
        <span class="php-comment">// resource.
</span>
        <span class="php-var">$font</span> <span class="php-operator">=</span> <span class="php-number">2</span>;
        <span class="php-comment">// create a canvas with a bit of padding
</span>
        <span class="php-var">$errimg</span> <span class="php-operator">=</span> <span class="php-function">imagecreate</span><span class="php-brackets">(</span><span class="php-brackets">(</span><span class="php-function">imagefontwidth</span><span class="php-brackets">(</span><span class="php-var">$font</span><span class="php-brackets">)</span> <span class="php-operator">*</span> <span class="php-function">strlen</span><span class="php-brackets">(</span><span class="php-var">$message</span><span class="php-brackets">)</span><span class="php-brackets">)</span> <span class="php-operator">+</span> <span class="php-number">2</span><span class="php-number">0</span>, <span class="php-function">imagefontheight</span><span class="php-brackets">(</span><span class="php-var">$font</span><span class="php-brackets">)</span> <span class="php-operator">+</span> <span class="php-number">1</span><span class="php-number">0</span><span class="php-brackets">)</span>;
        <span class="php-var">$bg</span> <span class="php-operator">=</span> <span class="php-function">imagecolorallocate</span><span class="php-brackets">(</span><span class="php-var">$errimg</span>, <span class="php-number">2</span><span class="php-number">5</span><span class="php-number">5</span>, <span class="php-number">2</span><span class="php-number">5</span><span class="php-number">5</span>, <span class="php-number">2</span><span class="php-number">5</span><span class="php-number">5</span><span class="php-brackets">)</span>;
        <span class="php-var">$textcol</span> <span class="php-operator">=</span> <span class="php-function">imagecolorallocate</span><span class="php-brackets">(</span><span class="php-var">$errimg</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">0</span><span class="php-brackets">)</span>;
        <span class="php-function">imagestring</span><span class="php-brackets">(</span><span class="php-var">$errimg</span>, <span class="php-number">2</span>, <span class="php-number">1</span><span class="php-number">0</span>, <span class="php-number">5</span>, <span class="php-var">$message</span>, <span class="php-var">$textcol</span><span class="php-brackets">)</span>;
        <span class="php-function">header</span><span class="php-brackets">(</span><span class="php-string">'Content-type: image/jpeg'</span><span class="php-brackets">)</span>;
        <span class="php-function">imagejpeg</span><span class="php-brackets">(</span><span class="php-var">$errimg</span><span class="php-brackets">)</span>;
        <span class="php-function">imagedestroy</span><span class="php-brackets">(</span><span class="php-var">$errimg</span><span class="php-brackets">)</span>;
    <span class="php-brackets">}</span> 

    <span class="php-function">function</span> GDMakeJpegLookLikeCrap<span class="php-brackets">(</span><span class="php-var">$target</span><span class="php-brackets">)</span>
    <span class="php-brackets">{</span>
        <span class="php-comment">// image dimensions are no longer needed (see below), but getimagesize can do some simple validation
</span>
        <span class="php-keyword">if</span> <span class="php-brackets">(</span><span class="php-brackets">(</span><span class="php-var">$dims</span> <span class="php-operator">=</span> @<span class="php-function">getimagesize</span><span class="php-brackets">(</span><span class="php-var">$target</span><span class="php-brackets">)</span><span class="php-brackets">)</span> <span class="php-operator">=</span><span class="php-operator">=</span><span class="php-operator">=</span> <span class="php-keyword">false</span> <span class="php-operator">|</span><span class="php-operator">|</span> <span class="php-var">$dims</span><span class="php-brackets">[</span><span class="php-string">'mime'</span><span class="php-brackets">]</span> <span class="php-operator">!</span><span class="php-operator">=</span> <span class="php-string">'image/jpeg'</span><span class="php-brackets">)</span>
        <span class="php-brackets">{</span>
            GDThrowError<span class="php-brackets">(</span><span class="php-string">'The file you specified couldn\'t be found or is not a valid jpeg image.  Make sure you spelled it correctly and provided the correct path.'</span><span class="php-brackets">)</span>;
           <span class="php-keyword">return</span><span class="php-brackets">(</span><span class="php-keyword">false</span><span class="php-brackets">)</span>;
        <span class="php-brackets">}</span>
        <span class="php-comment">// the original function creates a new image and resamples the source to it using the same height and width here.
</span>
        <span class="php-comment">// I imagine this was to add future resizing functionality but as it is it does nothing but waste resources
</span>
        <span class="php-var">$image</span> <span class="php-operator">=</span> <span class="php-function">imagecreatefromjpeg</span><span class="php-brackets">(</span><span class="php-var">$target</span><span class="php-brackets">)</span>;
        <span class="php-comment">// don't really know/care what this is.  If you're interested see http://us2.php.net/imageconvolution
</span>
        <span class="php-comment">// try tweaking these three vars for different effects, but there is a sharpening function in the php docs (above links) and it's not a trivial operation
</span>
        <span class="php-var">$spnMatrix</span> <span class="php-operator">=</span> <span class="php-keyword">array</span><span class="php-brackets">(</span> <span class="php-keyword">array</span><span class="php-brackets">(</span><span class="php-operator">-</span><span class="php-number">1</span>,<span class="php-operator">-</span><span class="php-number">1</span>,<span class="php-operator">-</span><span class="php-number">1</span>,<span class="php-brackets">)</span>,
                            <span class="php-keyword">array</span><span class="php-brackets">(</span><span class="php-operator">-</span><span class="php-number">1</span>,<span class="php-number">1</span><span class="php-number">6</span>,<span class="php-operator">-</span><span class="php-number">1</span>,<span class="php-brackets">)</span>,
                            <span class="php-keyword">array</span><span class="php-brackets">(</span><span class="php-operator">-</span><span class="php-number">1</span>,<span class="php-operator">-</span><span class="php-number">1</span>,<span class="php-operator">-</span><span class="php-number">1</span><span class="php-brackets">)</span><span class="php-brackets">)</span>;
        <span class="php-var">$divisor</span> <span class="php-operator">=</span> <span class="php-number">8</span>;
        <span class="php-var">$offset</span> <span class="php-operator">=</span> <span class="php-number">0</span>;
        <span class="php-function">imageconvolution</span><span class="php-brackets">(</span><span class="php-var">$image</span>, <span class="php-var">$spnMatrix</span>, <span class="php-var">$divisor</span>, <span class="php-var">$offset</span><span class="php-brackets">)</span>;
        <span class="php-comment">// I like to send headers as late as possible to avoid already sent errors and duplicate header content
</span>
        <span class="php-function">header</span><span class="php-brackets">(</span><span class="php-string">'Content-type: image/jpeg'</span><span class="php-brackets">)</span>;
        <span class="php-function">imagejpeg</span><span class="php-brackets">(</span><span class="php-var">$image</span>, null, <span class="php-number">1</span><span class="php-number">0</span><span class="php-number">0</span><span class="php-brackets">)</span>;
        <span class="php-function">imagedestroy</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span>;
<span class="php-brackets">}</span> 

<span class="php-comment">// example call
</span>
<span class="php-var">$s_image</span> <span class="php-operator">=</span> <span class="php-brackets">(</span><span class="php-keyword">isset</span><span class="php-brackets">(</span><span class="php-var">$_GET</span><span class="php-brackets">[</span><span class="php-string">'image'</span><span class="php-brackets">]</span><span class="php-brackets">)</span><span class="php-brackets">)</span> <span class="php-operator">?</span> <span class="php-var">$_GET</span><span class="php-brackets">[</span><span class="php-string">'image'</span><span class="php-brackets">]</span> <span class="php-operator">:</span> null; 

<span class="php-keyword">if</span> <span class="php-brackets">(</span><span class="php-function">preg_match</span><span class="php-brackets">(</span><span class="php-string">'/\.(jpg|jpeg)$/i'</span>, <span class="php-var">$s_image</span><span class="php-brackets">)</span><span class="php-brackets">)</span>
<span class="php-brackets">{</span>
    GDMakeJpegLookLikeCrap<span class="php-brackets">(</span><span class="php-var">$s_image</span><span class="php-brackets">)</span>;
<span class="php-brackets">}</span>
<span class="php-keyword">else</span>
<span class="php-brackets">{</span>
    GDThrowError<span class="php-brackets">(</span><span class="php-string">'Please specify a jpeg file to sharpen in the form: '</span> <span class="php-operator">.</span> <span class="php-var">$_SERVER</span><span class="php-brackets">[</span><span class="php-string">'PHP_SELF'</span><span class="php-brackets">]</span> <span class="php-operator">.</span> <span class="php-string">'?image=filename.jpg'</span><span class="php-brackets">)</span>;
<span class="php-brackets">}</span>
<span class="php-script-tag">?&gt;<span class="html"></span></span></span></pre>
</div>
<h2>Convert Image To PGM/Grayscale</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
</pre>
<pre><span class="php"><span class="php-script-tag">&lt;?php</span>
    <span class="php-function">function</span> imagepgm<span class="php-brackets">(</span><span class="php-var">$image</span>, <span class="php-var">$filename</span> <span class="php-operator">=</span> null<span class="php-brackets">)</span>
    <span class="php-brackets">{</span>
        <span class="php-var">$pgm</span> <span class="php-operator">=</span> <span class="php-string">&quot;P5 &quot;</span><span class="php-operator">.</span><span class="php-function">imagesx</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span><span class="php-operator">.</span><span class="php-string">&quot; &quot;</span><span class="php-operator">.</span><span class="php-function">imagesy</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span><span class="php-operator">.</span><span class="php-string">&quot; 255\n&quot;</span>;
        <span class="php-keyword">for</span><span class="php-brackets">(</span><span class="php-var">$y</span> <span class="php-operator">=</span> <span class="php-number">0</span>; <span class="php-var">$y</span> <span class="php-operator">&lt;</span> <span class="php-function">imagesy</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span>; <span class="php-var">$y</span><span class="php-operator">+</span><span class="php-operator">+</span><span class="php-brackets">)</span>
        <span class="php-brackets">{</span>
            <span class="php-keyword">for</span><span class="php-brackets">(</span><span class="php-var">$x</span> <span class="php-operator">=</span> <span class="php-number">0</span>; <span class="php-var">$x</span> <span class="php-operator">&lt;</span> <span class="php-function">imagesx</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span>; <span class="php-var">$x</span><span class="php-operator">+</span><span class="php-operator">+</span><span class="php-brackets">)</span>
            <span class="php-brackets">{</span>
                <span class="php-var">$colors</span> <span class="php-operator">=</span> <span class="php-function">imagecolorsforindex</span><span class="php-brackets">(</span><span class="php-var">$image</span>, <span class="php-function">imagecolorat</span><span class="php-brackets">(</span><span class="php-var">$image</span>, <span class="php-var">$x</span>, <span class="php-var">$y</span><span class="php-brackets">)</span><span class="php-brackets">)</span>;
                <span class="php-var">$pgm</span> <span class="php-operator">.</span><span class="php-operator">=</span> <span class="php-function">chr</span><span class="php-brackets">(</span><span class="php-number">0</span><span class="php-operator">.</span><span class="php-number">3</span> <span class="php-operator">*</span> <span class="php-var">$colors</span><span class="php-brackets">[</span><span class="php-string">&quot;red&quot;</span><span class="php-brackets">]</span> <span class="php-operator">+</span> <span class="php-number">0</span><span class="php-operator">.</span><span class="php-number">5</span><span class="php-number">9</span> <span class="php-operator">*</span> <span class="php-var">$colors</span><span class="php-brackets">[</span><span class="php-string">&quot;green&quot;</span><span class="php-brackets">]</span> <span class="php-operator">+</span> <span class="php-number">0</span><span class="php-operator">.</span><span class="php-number">1</span><span class="php-number">1</span> <span class="php-operator">*</span> <span class="php-var">$colors</span><span class="php-brackets">[</span><span class="php-string">&quot;blue&quot;</span><span class="php-brackets">]</span><span class="php-brackets">)</span>;
            <span class="php-brackets">}</span>
        <span class="php-brackets">}</span>
        <span class="php-keyword">if</span><span class="php-brackets">(</span><span class="php-var">$filename</span> <span class="php-operator">!</span><span class="php-operator">=</span> null<span class="php-brackets">)</span>
        <span class="php-brackets">{</span>
            <span class="php-var">$fp</span> <span class="php-operator">=</span> <span class="php-function">fopen</span><span class="php-brackets">(</span><span class="php-var">$filename</span>, <span class="php-string">&quot;w&quot;</span><span class="php-brackets">)</span>;
            <span class="php-function">fwrite</span><span class="php-brackets">(</span><span class="php-var">$fp</span>, <span class="php-var">$pgm</span><span class="php-brackets">)</span>;
            <span class="php-function">fclose</span><span class="php-brackets">(</span><span class="php-var">$fp</span><span class="php-brackets">)</span>;
        <span class="php-brackets">}</span>
        <span class="php-keyword">else</span>
        <span class="php-brackets">{</span>
            <span class="php-keyword">return</span> <span class="php-var">$pgm</span>;
        <span class="php-brackets">}</span>
    <span class="php-brackets">}</span>
<span class="php-script-tag">?&gt;<span class="html"></span></span></span></pre>
</div>
<h2>Giving Image Sepia Effect</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
</pre>
<pre><span class="php"><span class="php-script-tag">&lt;?php</span>
   <span class="php-comment">// replace with your files
</span>
    <span class="php-var">$originalFileName</span>    <span class="php-operator">=</span> <span class="php-var">$filename</span>;
    <span class="php-var">$destinationFileName</span> <span class="php-operator">=</span> <span class="php-string">&quot;2&quot;</span><span class="php-operator">.</span><span class="php-var">$filename</span>;

    <span class="php-comment">// create a copy of the original image
</span>
    <span class="php-comment">// works with jpg images
</span>
    <span class="php-comment">// fell free to adapt to other formats <img src='http://www.priteshgupta.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />
</span>
    <span class="php-var">$fullPath</span> <span class="php-operator">=</span> <span class="php-function">explode</span><span class="php-brackets">(</span><span class="php-string">&quot;.&quot;</span>,<span class="php-var">$originalFileName</span><span class="php-brackets">)</span>;
    <span class="php-var">$lastIndex</span> <span class="php-operator">=</span> <span class="php-function">sizeof</span><span class="php-brackets">(</span><span class="php-var">$fullPath</span><span class="php-brackets">)</span> <span class="php-operator">-</span> <span class="php-number">1</span>;
    <span class="php-var">$extension</span> <span class="php-operator">=</span> <span class="php-var">$fullPath</span><span class="php-brackets">[</span><span class="php-var">$lastIndex</span><span class="php-brackets">]</span>;
    <span class="php-keyword">if</span> <span class="php-brackets">(</span><span class="php-function">preg_match</span><span class="php-brackets">(</span><span class="php-string">&quot;/jpg|jpeg|JPG|JPEG/&quot;</span>, <span class="php-var">$extension</span><span class="php-brackets">)</span><span class="php-brackets">)</span>
    <span class="php-brackets">{</span>
        <span class="php-var">$sourceImage</span> <span class="php-operator">=</span> <span class="php-function">imagecreatefromjpeg</span><span class="php-brackets">(</span><span class="php-var">$originalFileName</span><span class="php-brackets">)</span>;
    <span class="php-brackets">}</span>

    <span class="php-comment">// get image dimensions
</span>
    <span class="php-var">$img_width</span>  <span class="php-operator">=</span> imageSX<span class="php-brackets">(</span><span class="php-var">$sourceImage</span><span class="php-brackets">)</span>;
    <span class="php-var">$img_height</span> <span class="php-operator">=</span> imageSY<span class="php-brackets">(</span><span class="php-var">$sourceImage</span><span class="php-brackets">)</span>;

    <span class="php-comment">// convert to grayscale
</span>
    <span class="php-comment">// note: this will NOT affect your original image, unless
</span>
    <span class="php-comment">// originalFileName and destinationFileName are the same
</span>
    <span class="php-keyword">for</span> <span class="php-brackets">(</span><span class="php-var">$y</span> <span class="php-operator">=</span> <span class="php-number">0</span>; <span class="php-var">$y</span> <span class="php-operator">&lt;</span><span class="php-var">$img_height</span>; <span class="php-var">$y</span><span class="php-operator">+</span><span class="php-operator">+</span><span class="php-brackets">)</span>
    <span class="php-brackets">{</span>
        <span class="php-keyword">for</span> <span class="php-brackets">(</span><span class="php-var">$x</span> <span class="php-operator">=</span> <span class="php-number">0</span>; <span class="php-var">$x</span> <span class="php-operator">&lt;</span><span class="php-var">$img_width</span>; <span class="php-var">$x</span><span class="php-operator">+</span><span class="php-operator">+</span><span class="php-brackets">)</span>
        <span class="php-brackets">{</span>
            <span class="php-var">$rgb</span> <span class="php-operator">=</span> <span class="php-function">imagecolorat</span><span class="php-brackets">(</span><span class="php-var">$sourceImage</span>, <span class="php-var">$x</span>, <span class="php-var">$y</span><span class="php-brackets">)</span>;
            <span class="php-var">$red</span>   <span class="php-operator">=</span> <span class="php-brackets">(</span><span class="php-var">$rgb</span> <span class="php-operator">&gt;</span><span class="php-operator">&gt;</span> <span class="php-number">1</span><span class="php-number">6</span><span class="php-brackets">)</span> <span class="php-operator">&amp;</span> <span class="php-number">0</span>xFF;
            <span class="php-var">$green</span> <span class="php-operator">=</span> <span class="php-brackets">(</span><span class="php-var">$rgb</span> <span class="php-operator">&gt;</span><span class="php-operator">&gt;</span> <span class="php-number">8</span><span class="php-brackets">)</span>  <span class="php-operator">&amp;</span> <span class="php-number">0</span>xFF;
            <span class="php-var">$blue</span>  <span class="php-operator">=</span> <span class="php-var">$rgb</span> <span class="php-operator">&amp;</span> <span class="php-number">0</span>xFF;

          <span class="php-comment">//sepia
</span>
            <span class="php-var">$red2</span> <span class="php-operator">=</span> <span class="php-function">min</span><span class="php-brackets">(</span><span class="php-var">$red</span><span class="php-operator">*</span><span class="php-operator">.</span><span class="php-number">3</span><span class="php-number">9</span><span class="php-number">3</span> <span class="php-operator">+</span> <span class="php-var">$green</span><span class="php-operator">*</span><span class="php-operator">.</span><span class="php-number">7</span><span class="php-number">6</span><span class="php-number">9</span> <span class="php-operator">+</span> <span class="php-var">$blue</span><span class="php-operator">*</span><span class="php-operator">.</span><span class="php-number">1</span><span class="php-number">8</span><span class="php-number">9</span>,<span class="php-number">2</span><span class="php-number">5</span><span class="php-number">5</span><span class="php-brackets">)</span>;
            <span class="php-var">$green2</span> <span class="php-operator">=</span> <span class="php-function">min</span><span class="php-brackets">(</span><span class="php-var">$red</span><span class="php-operator">*</span><span class="php-operator">.</span><span class="php-number">3</span><span class="php-number">4</span><span class="php-number">9</span> <span class="php-operator">+</span> <span class="php-var">$green</span><span class="php-operator">*</span><span class="php-operator">.</span><span class="php-number">6</span><span class="php-number">8</span><span class="php-number">6</span> <span class="php-operator">+</span> <span class="php-var">$blue</span><span class="php-operator">*</span><span class="php-operator">.</span><span class="php-number">1</span><span class="php-number">6</span><span class="php-number">8</span>,<span class="php-number">2</span><span class="php-number">5</span><span class="php-number">5</span><span class="php-brackets">)</span>;
            <span class="php-var">$blue2</span>  <span class="php-operator">=</span> <span class="php-function">min</span><span class="php-brackets">(</span><span class="php-var">$red</span><span class="php-operator">*</span><span class="php-operator">.</span><span class="php-number">2</span><span class="php-number">7</span><span class="php-number">2</span> <span class="php-operator">+</span> <span class="php-var">$green</span><span class="php-operator">*</span><span class="php-operator">.</span><span class="php-number">5</span><span class="php-number">3</span><span class="php-number">4</span> <span class="php-operator">+</span> <span class="php-var">$blue</span><span class="php-operator">*</span><span class="php-operator">.</span><span class="php-number">1</span><span class="php-number">3</span><span class="php-number">1</span>,<span class="php-number">2</span><span class="php-number">5</span><span class="php-number">5</span><span class="php-brackets">)</span>;
            <span class="php-comment">// shift gray level to the left
</span>

            <span class="php-var">$grayR</span> <span class="php-operator">=</span> <span class="php-var">$red2</span> <span class="php-operator">&lt;</span><span class="php-operator">&lt;</span> <span class="php-number">1</span><span class="php-number">6</span>;   <span class="php-comment">// R: red
</span>
            <span class="php-var">$grayG</span> <span class="php-operator">=</span> <span class="php-var">$green2</span> <span class="php-operator">&lt;</span><span class="php-operator">&lt;</span> <span class="php-number">8</span> ;    <span class="php-comment">// G: green
</span>
            <span class="php-var">$grayB</span> <span class="php-operator">=</span> <span class="php-var">$blue2</span>;         <span class="php-comment">// B: blue
</span>

            <span class="php-comment">// OR operation to compute gray value
</span>
            <span class="php-var">$grayColor</span> <span class="php-operator">=</span> <span class="php-var">$grayR</span> <span class="php-operator">|</span> <span class="php-var">$grayG</span> <span class="php-operator">|</span> <span class="php-var">$grayB</span>;

            <span class="php-comment">// set the pixel color
</span>
            <span class="php-function">imagesetpixel</span> <span class="php-brackets">(</span><span class="php-var">$sourceImage</span>, <span class="php-var">$x</span>, <span class="php-var">$y</span>, <span class="php-var">$grayColor</span><span class="php-brackets">)</span>;
            <span class="php-function">imagecolorallocate</span> <span class="php-brackets">(</span><span class="php-var">$sourceImage</span>, <span class="php-var">$gray</span>, <span class="php-var">$gray</span>, <span class="php-var">$gray</span><span class="php-brackets">)</span>;
        <span class="php-brackets">}</span>
    <span class="php-brackets">}</span>

    <span class="php-comment">// copy pixel values to new file buffer
</span>
    <span class="php-var">$destinationImage</span> <span class="php-operator">=</span> ImageCreateTrueColor<span class="php-brackets">(</span><span class="php-var">$img_width</span>, <span class="php-var">$img_height</span><span class="php-brackets">)</span>;
    <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$destinationImage</span>, <span class="php-var">$sourceImage</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$img_width</span>, <span class="php-var">$img_height</span><span class="php-brackets">)</span>;

    <span class="php-comment">// create file on disk
</span>
    <span class="php-function">imagejpeg</span><span class="php-brackets">(</span><span class="php-var">$destinationImage</span>, <span class="php-var">$destinationFileName</span><span class="php-brackets">)</span>;

    <span class="php-comment">// destroy temp image buffers
</span>
    <span class="php-function">imagedestroy</span><span class="php-brackets">(</span><span class="php-var">$destinationImage</span><span class="php-brackets">)</span>;
    <span class="php-function">imagedestroy</span><span class="php-brackets">(</span><span class="php-var">$sourceImage</span><span class="php-brackets">)</span>;
<span class="php-script-tag">?&gt;<span class="html"></span></span></span></pre>
</div>
<h2>Image Reflection</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
</pre>
<pre><span class="php"><span class="php-script-tag">&lt;?php</span>
<span class="php-function">function</span> imagereflection<span class="php-brackets">(</span><span class="php-var">$src_img</span><span class="php-brackets">)</span> <span class="php-brackets">{</span>
  <span class="php-var">$src_height</span> <span class="php-operator">=</span> <span class="php-function">imagesy</span><span class="php-brackets">(</span><span class="php-var">$src_img</span><span class="php-brackets">)</span>;
  <span class="php-var">$src_width</span> <span class="php-operator">=</span> <span class="php-function">imagesx</span><span class="php-brackets">(</span><span class="php-var">$src_img</span><span class="php-brackets">)</span>;
  <span class="php-var">$dest_height</span> <span class="php-operator">=</span> <span class="php-var">$src_height</span> <span class="php-operator">+</span> <span class="php-brackets">(</span><span class="php-var">$src_height</span> <span class="php-operator">/</span> <span class="php-number">2</span><span class="php-brackets">)</span>;
  <span class="php-var">$dest_width</span> <span class="php-operator">=</span> <span class="php-var">$src_width</span>;

  <span class="php-var">$reflected</span> <span class="php-operator">=</span> <span class="php-function">imagecreatetruecolor</span><span class="php-brackets">(</span><span class="php-var">$dest_width</span>, <span class="php-var">$dest_height</span><span class="php-brackets">)</span>;
  <span class="php-function">imagealphablending</span><span class="php-brackets">(</span><span class="php-var">$reflected</span>, <span class="php-keyword">false</span><span class="php-brackets">)</span>;
  <span class="php-function">imagesavealpha</span><span class="php-brackets">(</span><span class="php-var">$reflected</span>, <span class="php-keyword">true</span><span class="php-brackets">)</span>;

  <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$reflected</span>, <span class="php-var">$src_img</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$src_width</span>, <span class="php-var">$src_height</span><span class="php-brackets">)</span>;
  <span class="php-var">$reflection_height</span> <span class="php-operator">=</span> <span class="php-var">$src_height</span> <span class="php-operator">/</span> <span class="php-number">2</span>;
  <span class="php-var">$alpha_step</span> <span class="php-operator">=</span> <span class="php-number">8</span><span class="php-number">0</span> <span class="php-operator">/</span> <span class="php-var">$reflection_height</span>;
  <span class="php-keyword">for</span> <span class="php-brackets">(</span><span class="php-var">$y</span> <span class="php-operator">=</span> <span class="php-number">1</span>; <span class="php-var">$y</span> <span class="php-operator">&lt;</span><span class="php-operator">=</span> <span class="php-var">$reflection_height</span>; <span class="php-var">$y</span><span class="php-operator">+</span><span class="php-operator">+</span><span class="php-brackets">)</span> <span class="php-brackets">{</span>
    <span class="php-keyword">for</span> <span class="php-brackets">(</span><span class="php-var">$x</span> <span class="php-operator">=</span> <span class="php-number">0</span>; <span class="php-var">$x</span> <span class="php-operator">&lt;</span> <span class="php-var">$dest_width</span>; <span class="php-var">$x</span><span class="php-operator">+</span><span class="php-operator">+</span><span class="php-brackets">)</span> <span class="php-brackets">{</span>
      <span class="php-comment">// copy pixel from x / $src_height - y to x / $src_height + y
</span>
      <span class="php-var">$rgba</span> <span class="php-operator">=</span> <span class="php-function">imagecolorat</span><span class="php-brackets">(</span><span class="php-var">$src_img</span>, <span class="php-var">$x</span>, <span class="php-var">$src_height</span> <span class="php-operator">-</span> <span class="php-var">$y</span><span class="php-brackets">)</span>;
      <span class="php-var">$alpha</span> <span class="php-operator">=</span> <span class="php-brackets">(</span><span class="php-var">$rgba</span> <span class="php-operator">&amp;</span> <span class="php-number">0</span>x<span class="php-number">7</span>F<span class="php-number">0</span><span class="php-number">0</span><span class="php-number">0</span><span class="php-number">0</span><span class="php-number">0</span><span class="php-number">0</span><span class="php-brackets">)</span> <span class="php-operator">&gt;</span><span class="php-operator">&gt;</span> <span class="php-number">2</span><span class="php-number">4</span>;
      <span class="php-var">$alpha</span> <span class="php-operator">=</span>  <span class="php-function">max</span><span class="php-brackets">(</span><span class="php-var">$alpha</span>, <span class="php-number">4</span><span class="php-number">7</span> <span class="php-operator">+</span> <span class="php-brackets">(</span><span class="php-var">$y</span> <span class="php-operator">*</span> <span class="php-var">$alpha_step</span><span class="php-brackets">)</span><span class="php-brackets">)</span>;
      <span class="php-var">$rgba</span> <span class="php-operator">=</span> <span class="php-function">imagecolorsforindex</span><span class="php-brackets">(</span><span class="php-var">$src_img</span>, <span class="php-var">$rgba</span><span class="php-brackets">)</span>;
      <span class="php-var">$rgba</span> <span class="php-operator">=</span> <span class="php-function">imagecolorallocatealpha</span><span class="php-brackets">(</span><span class="php-var">$reflected</span>, <span class="php-var">$rgba</span><span class="php-brackets">[</span><span class="php-string">'red'</span><span class="php-brackets">]</span>, <span class="php-var">$rgba</span><span class="php-brackets">[</span><span class="php-string">'green'</span><span class="php-brackets">]</span>, <span class="php-var">$rgba</span><span class="php-brackets">[</span><span class="php-string">'blue'</span><span class="php-brackets">]</span>, <span class="php-var">$alpha</span><span class="php-brackets">)</span>;
      <span class="php-function">imagesetpixel</span><span class="php-brackets">(</span><span class="php-var">$reflected</span>, <span class="php-var">$x</span>, <span class="php-var">$src_height</span> <span class="php-operator">+</span> <span class="php-var">$y</span> <span class="php-operator">-</span> <span class="php-number">1</span>, <span class="php-var">$rgba</span><span class="php-brackets">)</span>;
    <span class="php-brackets">}</span>
  <span class="php-brackets">}</span>

  <span class="php-keyword">return</span> <span class="php-var">$reflected</span>;
<span class="php-brackets">}</span>
<span class="php-script-tag">?&gt;<span class="html"></span></span></span></pre>
</div>
<h2>Putting Text Vertically On Images</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
</pre>
<pre><span class="php"><span class="php-script-tag">&lt;?php</span>
<span class="php-var">$string</span> <span class="php-operator">=</span> <span class="php-string">'Your Text'</span>;
<span class="php-var">$font_size</span> <span class="php-operator">=</span> <span class="php-number">2</span>;
<span class="php-var">$img</span> <span class="php-operator">=</span> <span class="php-function">imagecreate</span><span class="php-brackets">(</span><span class="php-number">2</span><span class="php-number">0</span>,<span class="php-number">9</span><span class="php-number">0</span><span class="php-brackets">)</span>;
<span class="php-var">$bg</span> <span class="php-operator">=</span> <span class="php-function">imagecolorallocate</span><span class="php-brackets">(</span><span class="php-var">$img</span>,<span class="php-number">2</span><span class="php-number">2</span><span class="php-number">5</span>,<span class="php-number">2</span><span class="php-number">2</span><span class="php-number">5</span>,<span class="php-number">2</span><span class="php-number">2</span><span class="php-number">5</span><span class="php-brackets">)</span>;
<span class="php-var">$black</span> <span class="php-operator">=</span> <span class="php-function">imagecolorallocate</span><span class="php-brackets">(</span><span class="php-var">$img</span>,<span class="php-number">0</span>,<span class="php-number">0</span>,<span class="php-number">0</span><span class="php-brackets">)</span>;

<span class="php-var">$len</span> <span class="php-operator">=</span> <span class="php-function">strlen</span><span class="php-brackets">(</span><span class="php-var">$string</span><span class="php-brackets">)</span>;
<span class="php-keyword">for</span> <span class="php-brackets">(</span><span class="php-var">$i</span><span class="php-operator">=</span><span class="php-number">1</span>; <span class="php-var">$i</span><span class="php-operator">&lt;</span><span class="php-operator">=</span><span class="php-var">$len</span>; <span class="php-var">$i</span><span class="php-operator">+</span><span class="php-operator">+</span><span class="php-brackets">)</span> <span class="php-brackets">{</span>
    <span class="php-function">imagecharup</span><span class="php-brackets">(</span><span class="php-var">$img</span>, <span class="php-var">$font_size</span>, <span class="php-number">5</span>, <span class="php-function">imagesy</span><span class="php-brackets">(</span><span class="php-var">$img</span><span class="php-brackets">)</span><span class="php-operator">-</span><span class="php-brackets">(</span><span class="php-var">$i</span><span class="php-operator">*</span><span class="php-function">imagefontwidth</span><span class="php-brackets">(</span><span class="php-var">$font_size</span><span class="php-brackets">)</span><span class="php-brackets">)</span>, <span class="php-var">$string</span>, <span class="php-var">$black</span><span class="php-brackets">)</span>;
    <span class="php-var">$string</span> <span class="php-operator">=</span> <span class="php-function">substr</span><span class="php-brackets">(</span><span class="php-var">$string</span>,<span class="php-number">1</span><span class="php-brackets">)</span>;
<span class="php-brackets">}</span>
<span class="php-function">header</span><span class="php-brackets">(</span><span class="php-string">'Content-type: image/png'</span><span class="php-brackets">)</span>;
<span class="php-function">imagepng</span><span class="php-brackets">(</span><span class="php-var">$img</span><span class="php-brackets">)</span>;
<span class="php-function">imagedestroy</span><span class="php-brackets">(</span><span class="php-var">$img</span><span class="php-brackets">)</span>;
<span class="php-script-tag">?&gt;<span class="html"></span></span></span></pre>
</div>
<h2>Putting Watermark On Images</h2>
<p>Watermark can be a png(with transparency) and can be placed anywhere on the image. </p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
</pre>
<pre><span class="php"><span class="php-script-tag">&lt;?php</span>
<span class="php-function">function</span> imagelogo <span class="php-brackets">(</span><span class="php-operator">&amp;</span><span class="php-var">$dst_image</span>, <span class="php-var">$src_image</span>, <span class="php-var">$dst_w</span>, <span class="php-var">$dst_h</span>, <span class="php-var">$src_w</span>, <span class="php-var">$src_h</span>, <span class="php-var">$position</span><span class="php-operator">=</span><span class="php-string">'bottom-left'</span><span class="php-brackets">)</span> <span class="php-brackets">{</span>
    <span class="php-function">imagealphablending</span><span class="php-brackets">(</span><span class="php-var">$dst_image</span>,<span class="php-keyword">true</span><span class="php-brackets">)</span>;
    <span class="php-function">imagealphablending</span><span class="php-brackets">(</span><span class="php-var">$src_image</span>,<span class="php-keyword">true</span><span class="php-brackets">)</span>;
    <span class="php-keyword">if</span> <span class="php-brackets">(</span><span class="php-var">$position</span> <span class="php-operator">=</span><span class="php-operator">=</span> <span class="php-string">'random'</span><span class="php-brackets">)</span> <span class="php-brackets">{</span>
        <span class="php-var">$position</span> <span class="php-operator">=</span> <span class="php-function">rand</span><span class="php-brackets">(</span><span class="php-number">1</span>,<span class="php-number">8</span><span class="php-brackets">)</span>;
    <span class="php-brackets">}</span>
    <span class="php-keyword">switch</span> <span class="php-brackets">(</span><span class="php-var">$position</span><span class="php-brackets">)</span> <span class="php-brackets">{</span>
        <span class="php-keyword">case</span> <span class="php-string">'top-right'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-string">'right-top'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-number">1</span><span class="php-operator">:</span>
            <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$dst_image</span>, <span class="php-var">$src_image</span>, <span class="php-brackets">(</span><span class="php-var">$dst_w</span><span class="php-operator">-</span><span class="php-var">$src_w</span><span class="php-brackets">)</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$src_w</span>, <span class="php-var">$src_h</span><span class="php-brackets">)</span>;
        <span class="php-keyword">break</span>;
        <span class="php-keyword">case</span> <span class="php-string">'top-left'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-string">'left-top'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-number">2</span><span class="php-operator">:</span>
            <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$dst_image</span>, <span class="php-var">$src_image</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$src_w</span>, <span class="php-var">$src_h</span><span class="php-brackets">)</span>;
        <span class="php-keyword">break</span>;
        <span class="php-keyword">case</span> <span class="php-string">'bottom-right'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-string">'right-bottom'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-number">3</span><span class="php-operator">:</span>
            <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$dst_image</span>, <span class="php-var">$src_image</span>, <span class="php-brackets">(</span><span class="php-var">$dst_w</span><span class="php-operator">-</span><span class="php-var">$src_w</span><span class="php-brackets">)</span>, <span class="php-brackets">(</span><span class="php-var">$dst_h</span><span class="php-operator">-</span><span class="php-var">$src_h</span><span class="php-brackets">)</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$src_w</span>, <span class="php-var">$src_h</span><span class="php-brackets">)</span>;
        <span class="php-keyword">break</span>;
        <span class="php-keyword">case</span> <span class="php-string">'bottom-left'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-string">'left-bottom'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-number">4</span><span class="php-operator">:</span>
            <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$dst_image</span>, <span class="php-var">$src_image</span>, <span class="php-number">0</span> , <span class="php-brackets">(</span><span class="php-var">$dst_h</span><span class="php-operator">-</span><span class="php-var">$src_h</span><span class="php-brackets">)</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$src_w</span>, <span class="php-var">$src_h</span><span class="php-brackets">)</span>;
        <span class="php-keyword">break</span>;
        <span class="php-keyword">case</span> <span class="php-string">'center'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-number">5</span><span class="php-operator">:</span>
            <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$dst_image</span>, <span class="php-var">$src_image</span>, <span class="php-brackets">(</span><span class="php-brackets">(</span><span class="php-var">$dst_w</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-operator">-</span><span class="php-brackets">(</span><span class="php-var">$src_w</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-brackets">)</span>, <span class="php-brackets">(</span><span class="php-brackets">(</span><span class="php-var">$dst_h</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-operator">-</span><span class="php-brackets">(</span><span class="php-var">$src_h</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-brackets">)</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$src_w</span>, <span class="php-var">$src_h</span><span class="php-brackets">)</span>;
        <span class="php-keyword">break</span>;
        <span class="php-keyword">case</span> <span class="php-string">'top'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-number">6</span><span class="php-operator">:</span>
            <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$dst_image</span>, <span class="php-var">$src_image</span>, <span class="php-brackets">(</span><span class="php-brackets">(</span><span class="php-var">$dst_w</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-operator">-</span><span class="php-brackets">(</span><span class="php-var">$src_w</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-brackets">)</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$src_w</span>, <span class="php-var">$src_h</span><span class="php-brackets">)</span>;
        <span class="php-keyword">break</span>;
        <span class="php-keyword">case</span> <span class="php-string">'bottom'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-number">7</span><span class="php-operator">:</span>
            <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$dst_image</span>, <span class="php-var">$src_image</span>, <span class="php-brackets">(</span><span class="php-brackets">(</span><span class="php-var">$dst_w</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-operator">-</span><span class="php-brackets">(</span><span class="php-var">$src_w</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-brackets">)</span>, <span class="php-brackets">(</span><span class="php-var">$dst_h</span><span class="php-operator">-</span><span class="php-var">$src_h</span><span class="php-brackets">)</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$src_w</span>, <span class="php-var">$src_h</span><span class="php-brackets">)</span>;
        <span class="php-keyword">break</span>;
        <span class="php-keyword">case</span> <span class="php-string">'left'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-number">8</span><span class="php-operator">:</span>
            <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$dst_image</span>, <span class="php-var">$src_image</span>, <span class="php-number">0</span>, <span class="php-brackets">(</span><span class="php-brackets">(</span><span class="php-var">$dst_h</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-operator">-</span><span class="php-brackets">(</span><span class="php-var">$src_h</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-brackets">)</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$src_w</span>, <span class="php-var">$src_h</span><span class="php-brackets">)</span>;
        <span class="php-keyword">break</span>;
        <span class="php-keyword">case</span> <span class="php-string">'right'</span><span class="php-operator">:</span>
        <span class="php-keyword">case</span> <span class="php-number">9</span><span class="php-operator">:</span>
            <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$dst_image</span>, <span class="php-var">$src_image</span>, <span class="php-brackets">(</span><span class="php-var">$dst_w</span><span class="php-operator">-</span><span class="php-var">$src_w</span><span class="php-brackets">)</span>, <span class="php-brackets">(</span><span class="php-brackets">(</span><span class="php-var">$dst_h</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-operator">-</span><span class="php-brackets">(</span><span class="php-var">$src_h</span><span class="php-operator">/</span><span class="php-number">2</span><span class="php-brackets">)</span><span class="php-brackets">)</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$src_w</span>, <span class="php-var">$src_h</span><span class="php-brackets">)</span>;
        <span class="php-keyword">break</span>;
    <span class="php-brackets">}</span>
<span class="php-brackets">}</span> 

<span class="php-comment">// example:
</span>

imagelogo<span class="php-brackets">(</span><span class="php-var">$image</span>, <span class="php-var">$watermark</span>, <span class="php-function">imagesx</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span>, <span class="php-function">imagesy</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span>, <span class="php-function">imagesx</span><span class="php-brackets">(</span><span class="php-var">$watermark</span><span class="php-brackets">)</span>, <span class="php-function">imagesy</span><span class="php-brackets">(</span><span class="php-var">$watermark</span><span class="php-brackets">)</span>, <span class="php-string">'random'</span><span class="php-brackets">)</span>;
<span class="php-script-tag">?&gt;<span class="html"></span></span></span></pre>
</div>
<h2>Make White Background Transparent</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
</pre>
<pre><span class="php"><span class="php-script-tag">&lt;?php</span>

<span class="php-function">function</span> transparentImage<span class="php-brackets">(</span><span class="php-var">$src</span><span class="php-brackets">)</span><span class="php-brackets">{</span>  <span class="php-comment">//making images with white bg transparent
</span>
<span class="php-var">$r1</span><span class="php-operator">=</span><span class="php-number">8</span><span class="php-number">0</span>;
<span class="php-var">$g1</span><span class="php-operator">=</span><span class="php-number">8</span><span class="php-number">0</span>;
<span class="php-var">$b1</span><span class="php-operator">=</span><span class="php-number">8</span><span class="php-number">0</span>;
<span class="php-keyword">for</span><span class="php-brackets">(</span><span class="php-var">$x</span> <span class="php-operator">=</span> <span class="php-number">0</span>; <span class="php-var">$x</span> <span class="php-operator">&lt;</span> <span class="php-function">imagesx</span><span class="php-brackets">(</span><span class="php-var">$src</span><span class="php-brackets">)</span>; <span class="php-operator">+</span><span class="php-operator">+</span><span class="php-var">$x</span><span class="php-brackets">)</span>
        <span class="php-brackets">{</span>
            <span class="php-keyword">for</span><span class="php-brackets">(</span><span class="php-var">$y</span> <span class="php-operator">=</span> <span class="php-number">0</span>; <span class="php-var">$y</span> <span class="php-operator">&lt;</span> <span class="php-function">imagesy</span><span class="php-brackets">(</span><span class="php-var">$src</span><span class="php-brackets">)</span>; <span class="php-operator">+</span><span class="php-operator">+</span><span class="php-var">$y</span><span class="php-brackets">)</span>
            <span class="php-brackets">{</span>
                <span class="php-var">$color</span><span class="php-operator">=</span><span class="php-function">imagecolorat</span><span class="php-brackets">(</span><span class="php-var">$src</span>, <span class="php-var">$x</span>, <span class="php-var">$y</span><span class="php-brackets">)</span>;
                <span class="php-var">$r</span> <span class="php-operator">=</span> <span class="php-brackets">(</span><span class="php-var">$color</span> <span class="php-operator">&gt;</span><span class="php-operator">&gt;</span> <span class="php-number">1</span><span class="php-number">6</span><span class="php-brackets">)</span> <span class="php-operator">&amp;</span> <span class="php-number">0</span>xFF;
                <span class="php-var">$g</span> <span class="php-operator">=</span> <span class="php-brackets">(</span><span class="php-var">$color</span> <span class="php-operator">&gt;</span><span class="php-operator">&gt;</span> <span class="php-number">8</span><span class="php-brackets">)</span> <span class="php-operator">&amp;</span> <span class="php-number">0</span>xFF;
                <span class="php-var">$b</span> <span class="php-operator">=</span> <span class="php-var">$color</span> <span class="php-operator">&amp;</span> <span class="php-number">0</span>xFF;
                <span class="php-keyword">for</span><span class="php-brackets">(</span><span class="php-var">$i</span><span class="php-operator">=</span><span class="php-number">0</span>;<span class="php-var">$i</span><span class="php-operator">&lt;</span><span class="php-number">2</span><span class="php-number">7</span><span class="php-number">0</span>;<span class="php-var">$i</span><span class="php-operator">+</span><span class="php-operator">+</span><span class="php-brackets">)</span><span class="php-brackets">{</span>
                    <span class="php-keyword">if</span><span class="php-brackets">(</span><span class="php-var">$r</span><span class="php-operator">.</span><span class="php-var">$g</span><span class="php-operator">.</span><span class="php-var">$b</span><span class="php-operator">=</span><span class="php-operator">=</span><span class="php-brackets">(</span><span class="php-var">$r1</span><span class="php-operator">+</span><span class="php-var">$i</span><span class="php-brackets">)</span><span class="php-operator">.</span><span class="php-brackets">(</span><span class="php-var">$g1</span><span class="php-operator">+</span><span class="php-var">$i</span><span class="php-brackets">)</span><span class="php-operator">.</span><span class="php-brackets">(</span><span class="php-var">$b1</span><span class="php-operator">+</span><span class="php-var">$i</span><span class="php-brackets">)</span><span class="php-brackets">)</span><span class="php-brackets">{</span>
                        <span class="php-var">$trans_colour</span> <span class="php-operator">=</span> <span class="php-function">imagecolorallocatealpha</span><span class="php-brackets">(</span><span class="php-var">$src</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-number">1</span><span class="php-number">2</span><span class="php-number">7</span><span class="php-brackets">)</span>;
                        <span class="php-function">imagefill</span><span class="php-brackets">(</span><span class="php-var">$src</span>, <span class="php-var">$x</span>, <span class="php-var">$y</span>, <span class="php-var">$trans_colour</span><span class="php-brackets">)</span>;
                    <span class="php-brackets">}</span>
                <span class="php-brackets">}</span>
            <span class="php-brackets">}</span>
        <span class="php-brackets">}</span>

        <span class="php-keyword">return</span> <span class="php-var">$src</span>;
<span class="php-brackets">}</span>

<span class="php-var">$image</span><span class="php-operator">=</span><span class="php-string">'abc/abc.jpg'</span>;
<span class="php-var">$src</span> <span class="php-operator">=</span> <span class="php-function">imagecreatefromjpeg</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span>;
<span class="php-var">$src</span><span class="php-operator">=</span>transparentImage<span class="php-brackets">(</span><span class="php-var">$src</span><span class="php-brackets">)</span>; <span class="php-comment">//Lets make the jpegs transparent
</span>

<span class="php-script-tag">?&gt;<span class="html"></span></span></span></pre>
</div>
<h2>Crop Blank Edges From Image</h2>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
</pre>
<pre><span class="php"><span class="php-script-tag">&lt;?php</span>
<span class="php-comment">/**
* $image image cursor (from imagecreatetruecolor)
* $backgound image curosr (from imagecolorallocate)
* $paddng int
*/</span>
<span class="php-function">function</span> imageCrop<span class="php-brackets">(</span><span class="php-var">$image</span>, <span class="php-var">$background</span> <span class="php-operator">=</span> <span class="php-keyword">false</span>, <span class="php-var">$padding</span> <span class="php-operator">=</span> <span class="php-number">0</span><span class="php-brackets">)</span> <span class="php-brackets">{</span>
    <span class="php-keyword">if</span><span class="php-brackets">(</span><span class="php-var">$background</span><span class="php-brackets">)</span>
      <span class="php-var">$background</span> <span class="php-operator">=</span> <span class="php-function">imagecolorallocate</span><span class="php-brackets">(</span><span class="php-var">$image</span>, <span class="php-number">2</span><span class="php-number">5</span><span class="php-number">5</span>, <span class="php-number">2</span><span class="php-number">5</span><span class="php-number">5</span>, <span class="php-number">2</span><span class="php-number">5</span><span class="php-number">5</span><span class="php-brackets">)</span>; 

    <span class="php-var">$top</span> <span class="php-operator">=</span> imageSY<span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span>;
    <span class="php-var">$left</span> <span class="php-operator">=</span> imageSX<span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span>;
    <span class="php-var">$bottom</span> <span class="php-operator">=</span> <span class="php-number">0</span>;
    <span class="php-var">$right</span> <span class="php-operator">=</span> <span class="php-number">0</span>; 

    <span class="php-keyword">for</span> <span class="php-brackets">(</span><span class="php-var">$x</span> <span class="php-operator">=</span> <span class="php-number">0</span> ; <span class="php-var">$x</span> <span class="php-operator">&lt;</span> <span class="php-function">imagesx</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span> ; <span class="php-var">$x</span><span class="php-operator">+</span><span class="php-operator">+</span><span class="php-brackets">)</span> <span class="php-brackets">{</span>
        <span class="php-keyword">for</span> <span class="php-brackets">(</span><span class="php-var">$y</span> <span class="php-operator">=</span> <span class="php-number">0</span> ; <span class="php-var">$y</span> <span class="php-operator">&lt;</span> <span class="php-function">imagesy</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span> ; <span class="php-var">$y</span><span class="php-operator">+</span><span class="php-operator">+</span><span class="php-brackets">)</span> <span class="php-brackets">{</span> 

          <span class="php-comment">// if there match
</span>
            <span class="php-keyword">if</span><span class="php-brackets">(</span><span class="php-function">imagecolorat</span><span class="php-brackets">(</span><span class="php-var">$image</span>, <span class="php-var">$x</span>, <span class="php-var">$y</span><span class="php-brackets">)</span> <span class="php-operator">!</span><span class="php-operator">=</span> <span class="php-var">$background</span><span class="php-brackets">)</span> <span class="php-brackets">{</span> 

              <span class="php-keyword">if</span><span class="php-brackets">(</span><span class="php-var">$x</span> <span class="php-operator">&lt;</span> <span class="php-var">$left</span><span class="php-brackets">)</span>
                <span class="php-var">$left</span> <span class="php-operator">=</span> <span class="php-var">$x</span>;
              <span class="php-keyword">if</span><span class="php-brackets">(</span><span class="php-var">$x</span> <span class="php-operator">&gt;</span> <span class="php-var">$right</span><span class="php-brackets">)</span>
                <span class="php-var">$right</span> <span class="php-operator">=</span> <span class="php-var">$x</span>;
              <span class="php-keyword">if</span><span class="php-brackets">(</span><span class="php-var">$y</span> <span class="php-operator">&gt;</span> <span class="php-var">$bottom</span><span class="php-brackets">)</span>
                <span class="php-var">$bottom</span> <span class="php-operator">=</span> <span class="php-var">$y</span>;
              <span class="php-keyword">if</span><span class="php-brackets">(</span><span class="php-var">$y</span> <span class="php-operator">&lt;</span> <span class="php-var">$top</span><span class="php-brackets">)</span>
                <span class="php-var">$top</span> <span class="php-operator">=</span> <span class="php-var">$y</span>;
        <span class="php-brackets">}</span>
        <span class="php-brackets">}</span>
    <span class="php-brackets">}</span> 

    <span class="php-var">$right</span><span class="php-operator">+</span><span class="php-operator">+</span>;
    <span class="php-var">$bottom</span><span class="php-operator">+</span><span class="php-operator">+</span>; 

    <span class="php-comment">// create new image with padding
</span>
    <span class="php-var">$img</span> <span class="php-operator">=</span> <span class="php-function">imagecreatetruecolor</span><span class="php-brackets">(</span><span class="php-var">$right</span><span class="php-operator">-</span><span class="php-var">$left</span><span class="php-operator">+</span><span class="php-var">$padding</span><span class="php-operator">*</span><span class="php-number">2</span>,<span class="php-var">$bottom</span><span class="php-operator">-</span><span class="php-var">$top</span><span class="php-operator">+</span><span class="php-var">$padding</span><span class="php-operator">*</span><span class="php-number">2</span><span class="php-brackets">)</span>;
    <span class="php-comment">// fill the background
</span>
    <span class="php-function">imagefill</span><span class="php-brackets">(</span><span class="php-var">$img</span>, <span class="php-number">0</span>, <span class="php-number">0</span>, <span class="php-var">$background</span><span class="php-brackets">)</span>;
    <span class="php-comment">// copy
</span>
    <span class="php-function">imagecopy</span><span class="php-brackets">(</span><span class="php-var">$img</span>, <span class="php-var">$image</span>, <span class="php-var">$padding</span>, <span class="php-var">$padding</span>, <span class="php-var">$left</span>, <span class="php-var">$top</span>, <span class="php-var">$right</span><span class="php-operator">-</span><span class="php-var">$left</span>, <span class="php-var">$bottom</span><span class="php-operator">-</span><span class="php-var">$top</span><span class="php-brackets">)</span>; 

    <span class="php-comment">// destroy old image cursor
</span>
    <span class="php-function">imagedestroy</span><span class="php-brackets">(</span><span class="php-var">$image</span><span class="php-brackets">)</span>;
    <span class="php-keyword">return</span> <span class="php-var">$img</span>;
<span class="php-brackets">}</span>
<span class="php-script-tag">?&gt;<span class="html"></span></span></span></pre>
</div>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://www.shareaholic.com/api/share/?title=Advanced+Image+Functions+using+PHP&amp;link=http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/&amp;notes=Here%20are%20some%20PHP%20Functions%20for%20Images%20which%20I%20came%20across%20recently%2C%20these%20come%20under%20GD%20and%20Image%20Functions%20and%20require%20GD%20library.%20I%20have%20taken%20most%20of%20these%20from%20PHP%20Manual%20and%20they%20are%20quite%20helpful.%0D%0ASharpening%20All%20Images%0D%0A%7Bcode%20type%3Dphp%7D%0D%0A%20%20%20%20function%20imagesharpen%28%20%24image%29%20%7B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%24ma&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.shareaholic.com/api/share/?title=Advanced+Image+Functions+using+PHP&amp;link=http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/&amp;notes=Here%20are%20some%20PHP%20Functions%20for%20Images%20which%20I%20came%20across%20recently%2C%20these%20come%20under%20GD%20and%20Image%20Functions%20and%20require%20GD%20library.%20I%20have%20taken%20most%20of%20these%20from%20PHP%20Manual%20and%20they%20are%20quite%20helpful.%0D%0ASharpening%20All%20Images%0D%0A%7Bcode%20type%3Dphp%7D%0D%0A%20%20%20%20function%20imagesharpen%28%20%24image%29%20%7B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%24ma&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=5&amp;tags=&amp;ctype=" rel="nofollow" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://www.shareaholic.com/api/share/?title=Advanced+Image+Functions+using+PHP&amp;link=http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/&amp;notes=Here%20are%20some%20PHP%20Functions%20for%20Images%20which%20I%20came%20across%20recently%2C%20these%20come%20under%20GD%20and%20Image%20Functions%20and%20require%20GD%20library.%20I%20have%20taken%20most%20of%20these%20from%20PHP%20Manual%20and%20they%20are%20quite%20helpful.%0D%0ASharpening%20All%20Images%0D%0A%7Bcode%20type%3Dphp%7D%0D%0A%20%20%20%20function%20imagesharpen%28%20%24image%29%20%7B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%24ma&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=3&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.shareaholic.com/api/share/?title=Advanced+Image+Functions+using+PHP&amp;link=http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/&amp;notes=Here%20are%20some%20PHP%20Functions%20for%20Images%20which%20I%20came%20across%20recently%2C%20these%20come%20under%20GD%20and%20Image%20Functions%20and%20require%20GD%20library.%20I%20have%20taken%20most%20of%20these%20from%20PHP%20Manual%20and%20they%20are%20quite%20helpful.%0D%0ASharpening%20All%20Images%0D%0A%7Bcode%20type%3Dphp%7D%0D%0A%20%20%20%20function%20imagesharpen%28%20%24image%29%20%7B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%24ma&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=257&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-delicious">
			<a href="http://www.shareaholic.com/api/share/?title=Advanced+Image+Functions+using+PHP&amp;link=http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/&amp;notes=Here%20are%20some%20PHP%20Functions%20for%20Images%20which%20I%20came%20across%20recently%2C%20these%20come%20under%20GD%20and%20Image%20Functions%20and%20require%20GD%20library.%20I%20have%20taken%20most%20of%20these%20from%20PHP%20Manual%20and%20they%20are%20quite%20helpful.%0D%0ASharpening%20All%20Images%0D%0A%7Bcode%20type%3Dphp%7D%0D%0A%20%20%20%20function%20imagesharpen%28%20%24image%29%20%7B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%24ma&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=2&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-comfeed">
			<a href="http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.shareaholic.com/api/share/?title=Advanced+Image+Functions+using+PHP&amp;link=http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/&amp;notes=Here%20are%20some%20PHP%20Functions%20for%20Images%20which%20I%20came%20across%20recently%2C%20these%20come%20under%20GD%20and%20Image%20Functions%20and%20require%20GD%20library.%20I%20have%20taken%20most%20of%20these%20from%20PHP%20Manual%20and%20they%20are%20quite%20helpful.%0D%0ASharpening%20All%20Images%0D%0A%7Bcode%20type%3Dphp%7D%0D%0A%20%20%20%20function%20imagesharpen%28%20%24image%29%20%7B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%24ma&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=38&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://www.shareaholic.com/api/share/?title=Advanced+Image+Functions+using+PHP&amp;link=http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/&amp;notes=Here%20are%20some%20PHP%20Functions%20for%20Images%20which%20I%20came%20across%20recently%2C%20these%20come%20under%20GD%20and%20Image%20Functions%20and%20require%20GD%20library.%20I%20have%20taken%20most%20of%20these%20from%20PHP%20Manual%20and%20they%20are%20quite%20helpful.%0D%0ASharpening%20All%20Images%0D%0A%7Bcode%20type%3Dphp%7D%0D%0A%20%20%20%20function%20imagesharpen%28%20%24image%29%20%7B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%24ma&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=10&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.shareaholic.com/api/share/?title=Advanced+Image+Functions+using+PHP&amp;link=http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/&amp;notes=Here%20are%20some%20PHP%20Functions%20for%20Images%20which%20I%20came%20across%20recently%2C%20these%20come%20under%20GD%20and%20Image%20Functions%20and%20require%20GD%20library.%20I%20have%20taken%20most%20of%20these%20from%20PHP%20Manual%20and%20they%20are%20quite%20helpful.%0D%0ASharpening%20All%20Images%0D%0A%7Bcode%20type%3Dphp%7D%0D%0A%20%20%20%20function%20imagesharpen%28%20%24image%29%20%7B%0D%0A%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%24ma&amp;short_link=&amp;shortener=bitly&amp;shortener_key=pritesh|R_8243b649eae0deae42b22a17e45e858c&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=43&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
</ul><div style="clear: both;"></div><div class="shr-getshr" style="visibility:hidden;font-size:10px !important"><a target="_blank" href="http://www.shareaholic.com/?src=pub">Get Shareaholic</a></div><div style="clear: both;"></div></div>


<p><a href="http://feedads.g.doubleclick.net/~a/g6aW81SxcDVQdwxLh87UPfI-7-I/0/da"><img src="http://feedads.g.doubleclick.net/~a/g6aW81SxcDVQdwxLh87UPfI-7-I/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/g6aW81SxcDVQdwxLh87UPfI-7-I/1/da"><img src="http://feedads.g.doubleclick.net/~a/g6aW81SxcDVQdwxLh87UPfI-7-I/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/priteshgupta?a=llEvYXEV19E:hG9XFmOkopY:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/priteshgupta?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/priteshgupta?a=llEvYXEV19E:hG9XFmOkopY:caC8GWrvNc4"><img src="http://feeds.feedburner.com/~ff/priteshgupta?i=llEvYXEV19E:hG9XFmOkopY:caC8GWrvNc4" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/priteshgupta/~4/llEvYXEV19E" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.priteshgupta.com/2011/09/advanced-image-functions-using-php/</feedburner:origLink></item>
	</channel>
</rss><!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic (Feed is rejected)
Page Caching using disk: enhanced

Served from: www.priteshgupta.com @ 2012-01-29 20:50:09 -->

