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

<channel>
	<title>WiseCodes &#187; CSS</title>
	<atom:link href="http://www.wisecodes.com/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.wisecodes.com</link>
	<description>Bringing You The Power of Code !!</description>
	<lastBuildDate>Wed, 01 Sep 2010 19:33:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Minimizes and organizes your CSS</title>
		<link>http://www.wisecodes.com/2009/09/minimizes-and-organizes-your-css/</link>
		<comments>http://www.wisecodes.com/2009/09/minimizes-and-organizes-your-css/#comments</comments>
		<pubDate>Wed, 09 Sep 2009 20:37:16 +0000</pubDate>
		<dc:creator>Venu Thomas</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Minimizes]]></category>
		<category><![CDATA[Organizes]]></category>
		<category><![CDATA[Trips]]></category>

		<guid isPermaLink="false">http://www.wisecodes.com/?p=859</guid>
		<description><![CDATA[Barry van Oudtshoorn, has developed a compactor CSS also allows us to alphabetize our CSS attributes. It has therefore followed the specifications proposed in Google Payload Size Minimize making our CSS is smaller and, consequently, less late in coming to the end user. What do you do? Using a basic CSS file are applied to [...]]]></description>
			<content:encoded><![CDATA[<p>Barry van Oudtshoorn, has developed <strong><a href="http://www.barryvan.com.au/2009/08/css-minifier-and-alphabetiser/" target="_blank">a compactor CSS also allows us to alphabetize our CSS attributes.</a></strong><br />
It has therefore followed <strong><a href="http://code.google.com/intl/en-US/speed/page-speed/docs/payload.html" target="_blank">the specifications proposed in Google Payload Size Minimize </a></strong>making our CSS is smaller and, consequently, less late in coming to the end user.</p>
<h3>What do you do?</h3>
<p>Using a basic CSS file are applied to a series of transformations to obtain a new CSS file supplement packed.</p>
<ul>
<li>Eliminate all comments</li>
<li>Sort all the properties for each selector alphabetically</li>
<li>Sort all values of each property alphabetically</li>
<li>Eliminate all unnecessary space.</li>
</ul>
<h3>Comparison with YUI Compressor</h3>
<p style="text-align: center; "><a rel="attachment wp-att-860" href="http://www.wisecodes.com/2009/09/minimizes-and-organizes-your-css/css_compress_090909/"><img class="aligncenter size-full wp-image-860" title="CSS_Compress_090909" src="http://www.wisecodes.com/wp-content/uploads/2009/09/CSS_Compress_090909.jpg" alt="CSS_Compress_090909" width="442" height="380" /></a></p>
<p style="text-align: center;">The compaction is equal to that offered by <strong><a href="http://developer.yahoo.com/yui/compressor/" target="_blank">YUI Compressor</a></strong>, but only the above (and little) in cases with gzipped CSS.<br />
<a style="text-decoration: none;" rel="attachment wp-att-861" href="http://www.wisecodes.com/2009/09/minimizes-and-organizes-your-css/yui_comparison_090909/"><img class="aligncenter size-full wp-image-861" title="YUI_Comparison_090909" src="http://www.wisecodes.com/wp-content/uploads/2009/09/YUI_Comparison_090909.jpg" alt="YUI_Comparison_090909" width="450" height="295" /></a></p>
<h3>PHP Version</h3>
<p>Taking advantage of this holiday and I&#8217;ll be okay for a project I&#8217;m developing, I ported to PHP function to use it without using Java.</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p859code3'); return false;">View Code</a> PHP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p8593"><td class="code" id="p859code3"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000000; font-weight: bold;">class</span> cssCompressor <span style="color: #009900;">&#123;</span>
 <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000088;">$cssFileName</span><span style="color: #339933;">;</span>
 <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000088;">$selectors</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
 <span style="color: #000000; font-weight: bold;">function</span> cssConstruct<span style="color: #009900;">&#40;</span><span style="color: #000088;">$cssContent</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #000088;">$deleteComments</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">cssFileName</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$cssContent</span><span style="color: #339933;">;</span>
&nbsp;
 <span style="color: #666666; font-style: italic;">// Delete comments</span>
 <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$deleteComments</span><span style="color: #009900;">&#41;</span>
 <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">cssFileName</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/preg_replace"><span style="color: #990000;">preg_replace</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'!/\*[^*]*\*+([^/][^*]*\*+)*/!'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">cssFileName</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
 <span style="color: #000088;">$selectors</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #666666; font-style: italic;">// We get all the selectors</span>
 <span style="color: #000088;">$parties</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/explode"><span style="color: #990000;">explode</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;}&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">cssFileName</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
 <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$parties</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$part</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><a href="http://www.php.net/empty"><span style="color: #990000;">empty</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$part</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
 <a href="http://www.php.net/array_push"><span style="color: #990000;">array_push</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">selectors</span><span style="color: #339933;">,</span> <span style="color: #000000; font-weight: bold;">new</span> SelectorCSS<span style="color: #009900;">&#40;</span><span style="color: #000088;">$part</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;}&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
 <span style="color: #009900;">&#125;</span>
&nbsp;
 <span style="color: #000000; font-weight: bold;">function</span> get<span style="color: #009900;">&#40;</span><span style="color: #000088;">$cleanSpaces</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <span style="color: #000088;">$output</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
 <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">selectors</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$selector</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #000088;">$output</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$selector</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">get</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$cleanSpaces</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
 <span style="color: #666666; font-style: italic;">// Delete line breaks, spaces, ...</span>
 <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$cleanSpaces</span><span style="color: #009900;">&#41;</span>
 <span style="color: #000088;">$output</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/str_replace"><span style="color: #990000;">str_replace</span></a><span style="color: #009900;">&#40;</span><a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\t</span>&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\r</span>&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #000088;">$output</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
 <span style="color: #b1b100;">return</span> <span style="color: #000088;">$output</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">/*
 SelectorCSS
*/</span>
<span style="color: #000000; font-weight: bold;">class</span> SelectorCSS<span style="color: #009900;">&#123;</span>
 <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000088;">$properties</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000088;">$selector</span><span style="color: #339933;">;</span>
&nbsp;
 <span style="color: #000000; font-weight: bold;">function</span> cssConstruct<span style="color: #009900;">&#40;</span><span style="color: #000088;">$selector</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <span style="color: #000088;">$parts</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/explode"><span style="color: #990000;">explode</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;{&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$selector</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><a href="http://www.php.net/count"><span style="color: #990000;">count</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$parts</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&lt;</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <a href="http://www.php.net/die"><span style="color: #990000;">die</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Selector &quot;</span> <span style="color: #339933;">+</span> selector <span style="color: #339933;">+</span><span style="color: #0000ff;">&quot; incomplete&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
 <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">selector</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/trim"><span style="color: #990000;">trim</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$parts</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #000088;">$contents</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/trim"><span style="color: #990000;">trim</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$parts</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><a href="http://www.php.net/strlen"><span style="color: #990000;">strlen</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$contents</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <a href="http://www.php.net/die"><span style="color: #990000;">die</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Selector &quot;</span> <span style="color: #339933;">+</span> selector <span style="color: #339933;">+</span> <span style="color: #0000ff;">&quot;empty&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
&nbsp;
 <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><a href="http://www.php.net/substr"><span style="color: #990000;">substr</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$contents</span><span style="color: #339933;">,</span><a href="http://www.php.net/strlen"><span style="color: #990000;">strlen</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$contents</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span> <span style="color: #339933;">,</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">!=</span> <span style="color: #0000ff;">'}'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <a href="http://www.php.net/die"><span style="color: #990000;">die</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Selector &quot;</span><span style="color: #339933;">+</span>selector<span style="color: #339933;">+</span><span style="color: #0000ff;">&quot; is wrong&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
&nbsp;
 <span style="color: #000088;">$contents</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/substr"><span style="color: #990000;">substr</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$contents</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #000088;">$contents</span> <span style="color: #339933;">-</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
 <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">properties</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/explode"><span style="color: #990000;">explode</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">';'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$contents</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
&nbsp;
 <span style="color: #000000; font-weight: bold;">function</span> get<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 <span style="color: #000088;">$str</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">selector</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'{'</span><span style="color: #339933;">;</span>
 <a href="http://www.php.net/natcasesort"><span style="color: #990000;">natcasesort</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">properties</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">properties</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$property</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
 <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><a href="http://www.php.net/empty"><span style="color: #990000;">empty</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$property</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
 <span style="color: #000088;">$str</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$property</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;;&quot;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
 <span style="color: #000088;">$str</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'}'</span><span style="color: #339933;">;</span>
 <span style="color: #b1b100;">return</span> <span style="color: #000088;">$str</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>To use is simple, we simply must indicate the file&#8217;s contents. Css we want to compact and manage their properties. Upon receiving the contents of the file we can send one or more file concatenating the contents thereof.</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p859code4'); return false;">View Code</a> PHP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p8594"><td class="code" id="p859code4"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// StyleSheet.css file content</span>
 <span style="color: #000088;">$fileName</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/file_get_contents"><span style="color: #990000;">file_get_contents</span></a><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'StyleSheet.css'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
 <span style="color: #666666; font-style: italic;">// We create an object that we pass the contents of parameter</span>
 <span style="color: #000088;">$styleSheet</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> cssCompressor<span style="color: #009900;">&#40;</span><span style="color: #000088;">$fileName</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #666666; font-style: italic;">/* Parameters:
     1: (String) content of the file
     2: (Bool) Clear comments (default: true)
 */</span>
 <span style="color: #666666; font-style: italic;">// We get the CSS content</span>
 <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$styleSheet</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">get</span><span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #666666; font-style: italic;">/*    Parameters:
      1: (Bool) Delete lines (default: true)
 */</span></pre></td></tr></table></div>

<p>The object has a method get() that returns the contents compacted and orderly, this content can cache in a static file or display it directly.</p>
<p class="facebook"><a href="http://www.facebook.com/share.php?u=http://www.wisecodes.com/2009/09/minimizes-and-organizes-your-css/" target="_blank"><img src="http://www.wisecodes.com/wp-content/plugins/add-to-facebook-plugin/facebook_share_icon.gif" alt="Share on Facebook" title="Share on Facebook" /></a><a href="http://www.facebook.com/share.php?u=http://www.wisecodes.com/2009/09/minimizes-and-organizes-your-css/" target="_blank" title="Share on Facebook">Share on Facebook</a></p>]]></content:encoded>
			<wfw:commentRss>http://www.wisecodes.com/2009/09/minimizes-and-organizes-your-css/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Optical illusion: Horse that is driven by CSS</title>
		<link>http://www.wisecodes.com/2009/08/optical-illusion-horse-that-is-driven-by-css/</link>
		<comments>http://www.wisecodes.com/2009/08/optical-illusion-horse-that-is-driven-by-css/#comments</comments>
		<pubDate>Sat, 08 Aug 2009 13:21:06 +0000</pubDate>
		<dc:creator>Venu Thomas</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Illusion]]></category>

		<guid isPermaLink="false">http://www.wisecodes.com/?p=733</guid>
		<description><![CDATA[Have you heard of the magic book Magic Moving Images ?? (Video: see below) With CSS, and Parallax can create an optical illusion similar to that which appears the silhouette of a horse moves horizontally to resize the window in our browser. Although the sample is not perfectly equal to the original book, it seems a [...]]]></description>
			<content:encoded><![CDATA[<p><a rel="attachment wp-att-734" href="http://www.wisecodes.com/2009/08/optical-illusion-horse-that-is-driven-by-css/opticaillusionparallaxcss_080809/"><img class="alignnone size-full wp-image-734" title="OpticaIllusionParallaxCss_080809" src="http://www.wisecodes.com/wp-content/uploads/2009/08/OpticaIllusionParallaxCss_080809.jpg" alt="OpticaIllusionParallaxCss_080809" width="227" height="227" /></a></p>
<p>Have you heard of the magic book Magic Moving Images ?? (Video: see below) With CSS, and <strong><a href="http://en.wikipedia.org/wiki/Parallax" target="_blank">Parallax</a></strong> can create an optical illusion similar to that which appears the silhouette of a horse moves horizontally to resize the window in our browser. Although the sample is not perfectly equal to the original book, it seems a lot.<br />
You can <strong><a href="http://www.marcofolio.net/downloads/photoshop/css_parallax_illusion_3d_image/details.html" target="_blank">download the source code hack </a></strong>directly or by example (resize the window horizontally to move the horse):</p>
<h3><a href="http://demo.marcofolio.net/a_parallax_illusion_with_css/">View Demo</a></h3>
<p>If you want to learn how to create your own optical illusion similar to the horse, <strong><a href="http://www.marcofolio.net/photoshop/your_own_css_parallax_illusion_3d_image.html" target="_blank">follow these steps.</a></strong></p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/S5W5JJXtqhw&amp;hl=en&amp;fs=1&amp;" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="480" height="385" src="http://www.youtube.com/v/S5W5JJXtqhw&amp;hl=en&amp;fs=1&amp;" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p class="facebook"><a href="http://www.facebook.com/share.php?u=http://www.wisecodes.com/2009/08/optical-illusion-horse-that-is-driven-by-css/" target="_blank"><img src="http://www.wisecodes.com/wp-content/plugins/add-to-facebook-plugin/facebook_share_icon.gif" alt="Share on Facebook" title="Share on Facebook" /></a><a href="http://www.facebook.com/share.php?u=http://www.wisecodes.com/2009/08/optical-illusion-horse-that-is-driven-by-css/" target="_blank" title="Share on Facebook">Share on Facebook</a></p>]]></content:encoded>
			<wfw:commentRss>http://www.wisecodes.com/2009/08/optical-illusion-horse-that-is-driven-by-css/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Rotating text with CSS</title>
		<link>http://www.wisecodes.com/2009/08/rotating-text-with-css/</link>
		<comments>http://www.wisecodes.com/2009/08/rotating-text-with-css/#comments</comments>
		<pubDate>Tue, 04 Aug 2009 15:27:58 +0000</pubDate>
		<dc:creator>Venu Thomas</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Rotate]]></category>

		<guid isPermaLink="false">http://www.wisecodes.com/?p=647</guid>
		<description><![CDATA[Jonathan Snook, published an interesting article that shows how to rotate text using CSS. The code is clear that it is not standard and only works in Safari / WebKit, Firefox and Internet Explorer. //CSS .year { width:10px; /* WebKit, Safari */ -webkit-transform: rotate(-90deg); /* Firefox 3.5+*/ -moz-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); [...]]]></description>
			<content:encoded><![CDATA[<p>Jonathan Snook, published <strong><a href="http://snook.ca/archives/html_and_css/css-text-rotation" target="_blank">an interesting article that shows how to rotate text using CSS.</a></strong></p>
<p><a rel="attachment wp-att-648" href="http://www.wisecodes.com/2009/08/rotating-text-with-css/rotatingtext_040809/"><img class="alignnone size-full wp-image-648" title="RotatingText_040809" src="http://www.wisecodes.com/wp-content/uploads/2009/08/RotatingText_040809.jpg" alt="RotatingText_040809" width="265" height="100" /></a></p>
<p>The code is clear that it is not standard and only works in Safari / WebKit, Firefox and Internet Explorer.</p>
<p><a rel="attachment wp-att-700" href="http://www.wisecodes.com/2009/08/rotating-text-with-css/rotatingtext02_040809/"><img class="alignnone size-full wp-image-700" title="RotatingText02_040809" src="http://www.wisecodes.com/wp-content/uploads/2009/08/RotatingText02_040809.JPG" alt="RotatingText02_040809" width="296" height="113" /></a></p>
<pre class="brush: css;"> //CSS
.year {
width:10px;

/* WebKit, Safari */
-webkit-transform: rotate(-90deg);

/* Firefox 3.5+*/
-moz-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</pre>
<p>An alternative standard, although <strong><a href="http://css-tricks.com/date-display-with-sprites/" target="_blank">more laborious, we propose the boys CSS-Tricks.</a></strong></p>
<p class="facebook"><a href="http://www.facebook.com/share.php?u=http://www.wisecodes.com/2009/08/rotating-text-with-css/" target="_blank"><img src="http://www.wisecodes.com/wp-content/plugins/add-to-facebook-plugin/facebook_share_icon.gif" alt="Share on Facebook" title="Share on Facebook" /></a><a href="http://www.facebook.com/share.php?u=http://www.wisecodes.com/2009/08/rotating-text-with-css/" target="_blank" title="Share on Facebook">Share on Facebook</a></p>]]></content:encoded>
			<wfw:commentRss>http://www.wisecodes.com/2009/08/rotating-text-with-css/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Tutorial To Create A CSS Template</title>
		<link>http://www.wisecodes.com/2009/03/tutorial-to-create-a-css-template/</link>
		<comments>http://www.wisecodes.com/2009/03/tutorial-to-create-a-css-template/#comments</comments>
		<pubDate>Sun, 29 Mar 2009 20:27:27 +0000</pubDate>
		<dc:creator>Venu Thomas</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.code.venuthomas.net/?p=263</guid>
		<description><![CDATA[I recommend this site, they explain step by step how to create a CSS template for our web sites. http://www.subcide.com/tutorials/csslayout Share on Facebook]]></description>
			<content:encoded><![CDATA[<p>I recommend this site, they explain step by step how to create a CSS template for our web sites.</p>
<p><a href="http://www.subcide.com/tutorials/csslayout" target="_blank">http://www.subcide.com/tutorials/csslayout</a></p>
<p class="facebook"><a href="http://www.facebook.com/share.php?u=http://www.wisecodes.com/2009/03/tutorial-to-create-a-css-template/" target="_blank"><img src="http://www.wisecodes.com/wp-content/plugins/add-to-facebook-plugin/facebook_share_icon.gif" alt="Share on Facebook" title="Share on Facebook" /></a><a href="http://www.facebook.com/share.php?u=http://www.wisecodes.com/2009/03/tutorial-to-create-a-css-template/" target="_blank" title="Share on Facebook">Share on Facebook</a></p>]]></content:encoded>
			<wfw:commentRss>http://www.wisecodes.com/2009/03/tutorial-to-create-a-css-template/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

