<?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>infinita Design &#187; Design</title>
	<atom:link href="http://infinitadesign.com/blog/category/design/feed/" rel="self" type="application/rss+xml" />
	<link>http://infinitadesign.com/blog</link>
	<description>coding style.</description>
	<lastBuildDate>Sat, 20 Mar 2010 01:10:30 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS Font Stacks!</title>
		<link>http://infinitadesign.com/blog/2009/10/16/css-font-stacks/</link>
		<comments>http://infinitadesign.com/blog/2009/10/16/css-font-stacks/#comments</comments>
		<pubDate>Fri, 16 Oct 2009 03:11:28 +0000</pubDate>
		<dc:creator>andre</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://infinitadesign.com/blog/?p=79</guid>
		<description><![CDATA[Este é um problema muito comum ao se criar websites é manter a tipografia pelo menos com a mesma &#8220;cara&#8221; independente do sistema operacional.
Dependendo do sistema operacional os tipos de fontes instaladas &#8211; e estas serão usadas na renderização do texto do seu website, por isso é necessário criar as chamadas &#8220;Font Stacks&#8221; que são [...]]]></description>
			<content:encoded><![CDATA[<p>Este é um problema muito comum ao se criar websites é manter a tipografia pelo menos com a mesma &#8220;cara&#8221; independente do sistema operacional.</p>
<p>Dependendo do sistema operacional os tipos de fontes instaladas &#8211; e estas serão usadas na renderização do texto do seu website, por isso é necessário criar as chamadas &#8220;Font Stacks&#8221; que são &#8220;cadeias&#8221; de fontes que serão utilizadas para renderizar o seu texto. O princípio é simples, é preciso definir a propriedade &#8220;font-family&#8221; no CSS de modo que siga uma ordem de uso. Por exemplo:</p>
<pre style="padding-left: 30px;" lang="css">body{
font-family:Verdana,Geneva,sans-serif;
}</pre>
<p>Neste caso, a primeira tentativa de uso seria  a &#8220;Verdana&#8221; que está presente na maioria dos sistemas, se por um acaso não houver suporte para esta fonte, é utilizada a segunda fonte Geneva, num caso raro onde não encontrada esta segunda será utilizada a ultima fonte que é o tipo de fonte genérico &#8220;Sans-serif&#8221;.</p>
<p>A partir dessa ideologia e após uma busca pela internet encontrei vários casos onde são mostrados <em>font stacks </em>interessantes, esta foi a que achei melhor:</p>
<p>The &#8216;wide&#8217; sans serif stack</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">body<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #3333ff;">:Verdana</span><span style="color: #00AA00;">,</span>Geneva<span style="color: #00AA00;">,</span><span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>The &#8216;narrow&#8217; sans serif stack</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">body<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #3333ff;">:Tahoma</span><span style="color: #00AA00;">,</span>Arial<span style="color: #00AA00;">,</span>Helvetica<span style="color: #00AA00;">,</span><span style="color: #993333;">sans-serif</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>The &#8216;wide&#8217; serif stack</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">body<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #3333ff;">:Georgia</span><span style="color: #00AA00;">,</span>Utopia<span style="color: #00AA00;">,</span>Palatino<span style="color: #00AA00;">,</span><span style="color: #ff0000;">'Palatino Linotype'</span><span style="color: #00AA00;">,</span><span style="color: #993333;">serif</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>The &#8216;narrow&#8217; serif stack</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">body<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span><span style="color: #ff0000;">'Times New Roman'</span><span style="color: #00AA00;">,</span>Times<span style="color: #00AA00;">,</span><span style="color: #993333;">serif</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>The monospace stack</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">body<span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span><span style="color: #ff0000;">'Courier New'</span><span style="color: #00AA00;">,</span><span style="color: #ff0000;">'Courier'</span><span style="color: #00AA00;">,</span><span style="color: #993333;">monospace</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></div></div>

<p><strong>Fontes:</strong></p>
<p><a href="http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml#common-font-stacks" target="_blank">http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml#common-font-stacks</a><br />
<a href="http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml#common-font-stacks" target="_blank">http://www.sitepoint.com/article/eight-definitive-font-stacks/3/</a><br />
<a href="http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/" target="_blank">http://www.inspirationbit.com/striking-web-sites-with-font-stacks-that-inspire/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://infinitadesign.com/blog/2009/10/16/css-font-stacks/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS3 module: Multi-column layout</title>
		<link>http://infinitadesign.com/blog/2009/03/06/css3-module-multi-column-layout/</link>
		<comments>http://infinitadesign.com/blog/2009/03/06/css3-module-multi-column-layout/#comments</comments>
		<pubDate>Fri, 06 Mar 2009 17:36:35 +0000</pubDate>
		<dc:creator>andre</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://infinitadesign.com/?p=43</guid>
		<description><![CDATA[Resumindo, o Modulo &#8220;Multi-column&#8221; do CSS3 serve para separar o conteúdo de um elemento em multiplas colunas.

O Módulo Multi-Column é parte das específicões  do CSS3 propostas pela W3C.
This extension to the CSS Box Model opens a new range of possibilities in terms of web design. Multi-column layouts that are so pervasive in the print media [...]]]></description>
			<content:encoded><![CDATA[<p>Resumindo, o Modulo &#8220;Multi-column&#8221; do CSS3 serve para separar o conteúdo de um elemento em multiplas colunas.</p>
<p><a class="image" title="Image:Diagram-css3multicolumn.gif" href="http://www.csscripting.com/wiki/index.php?title=Image:Diagram-css3multicolumn.gif"><img longdesc="/wiki/index.php?title=Image:Diagram-css3multicolumn.gif" src="http://www.csscripting.com/wiki/images/4/4b/Diagram-css3multicolumn.gif" alt="Image:Diagram-css3multicolumn.gif" width="319" height="246" /></a></p>
<p>O <a class="external text" title="http://www.w3.org/TR/2001/WD-css3-multicol-20010118/" rel="nofollow" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118/">Módulo Multi-Column</a> é parte das específicões  do CSS3 propostas pela <a class="external text" title="http://www.w3.org" rel="nofollow" href="http://www.w3.org/">W3C</a>.</p>
<blockquote><p>This extension to the CSS Box Model opens a new range of possibilities in terms of web design. Multi-column layouts that are so pervasive in the print media (think newspapers, magazines) can now become a reality on the web</p></blockquote>
<p><a title="http://www.csscripting.com" href="http://www.csscripting.com/css-multi-column/example1.php" target="_blank">http://www.csscripting.com/css-multi-column/example1.php</a></p>
]]></content:encoded>
			<wfw:commentRss>http://infinitadesign.com/blog/2009/03/06/css3-module-multi-column-layout/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>47+ Excellent Ajax CSS Forms</title>
		<link>http://infinitadesign.com/blog/2009/02/20/47-excellent-ajax-css-forms/</link>
		<comments>http://infinitadesign.com/blog/2009/02/20/47-excellent-ajax-css-forms/#comments</comments>
		<pubDate>Fri, 20 Feb 2009 12:20:46 +0000</pubDate>
		<dc:creator>andre</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>

		<guid isPermaLink="false">http://infinitadesign.com/2009/02/20/47-excellent-ajax-css-forms/</guid>
		<description><![CDATA[Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>Forms needs a solid visual structure, a profound hierarchy of form elements <strong>(Fields and Labels)</strong>, powerful techniques and Functionality <strong>(AJAX)</strong> to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data.</p></blockquote>
<blockquote><p>Let’s take a look, hopefully you’ll find new ideas you can develop further on your own.</p></blockquote>
<p><a href="http://www.noupe.com/css/47-excellent-ajax-css-forms.html" target="_blank">http://www.noupe.com/css/47-excellent-ajax-css-forms.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://infinitadesign.com/blog/2009/02/20/47-excellent-ajax-css-forms/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Minha &#8220;Duct Tape Wallet&#8221;</title>
		<link>http://infinitadesign.com/blog/2008/08/29/minha-duct-tape-wallet/</link>
		<comments>http://infinitadesign.com/blog/2008/08/29/minha-duct-tape-wallet/#comments</comments>
		<pubDate>Fri, 29 Aug 2008 21:30:44 +0000</pubDate>
		<dc:creator>andre</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Geral]]></category>

		<guid isPermaLink="false">http://infinitadesign.com/2008/08/29/minha-duct-tape-wallet/</guid>
		<description><![CDATA[Para quem não conhece, Duct tape wallet são aquelas carteiras feitas com o famoso Silver Tape.
Existe um empresa hoje especializada em fazer produtos com este tipo de fita, é a Ducti. Eu ainda não tive a chance de adquirir uma carteira dessas para conferir a qualidade do produto, mas fica claro o visual moderno que [...]]]></description>
			<content:encoded><![CDATA[<p>Para quem não conhece, Duct tape wallet são aquelas carteiras feitas com o famoso Silver Tape.<br />
Existe um empresa hoje especializada em fazer produtos com este tipo de fita, é a <a href="http://www.ducti.com/" title="http://www.ducti.com/">Ducti</a>. Eu ainda não tive a chance de adquirir uma carteira dessas para conferir a qualidade do produto, mas fica claro o visual moderno que uma carteira dessa tem.</p>
<p><img src="http://infinitadesign.com/blog/wp-content/uploads/2008/08/10101sl.jpg" alt="Ducti Tape Wallet" /></p>
<p>Partindo do fato de que esta carteira teve ínicio no &#8220;fundo de casa&#8221; de alguem por ae, é lógico que HJ ainda é comum ver pessoas que ainda fazem suas carteiras dessa maneira. Um dos pontos legais de se fazer uma carteira dessa manualmente é facilidade de se poder &#8220;customizar&#8221; sua carteira, já que o processo é bem simples (Cortar, colar etc..)</p>
<p>Pensando nisso resolvi criar minha propria carteira:<br />
<a href="http://infinitadesign.com/blog/wp-content/uploads/2008/08/dsc00017.jpg" title="Bagunça Duct Tape Wallet" rel="lightbox[25]"><img src="http://infinitadesign.com/blog/wp-content/uploads/2008/08/dsc00017.jpg" alt="Bagunça Duct Tape Wallet" width="409" height="308" /></a></p>
<p>Olha a bagunça! lol =D</p>
<p><a href="http://infinitadesign.com/blog/wp-content/uploads/2008/08/dsc00020.jpg" title="Duct Tape Wallet DONE!" rel="lightbox[25]"><img src="http://infinitadesign.com/blog/wp-content/uploads/2008/08/dsc00020.thumbnail.jpg" alt="Duct Tape Wallet DONE!" width="197" height="148" /></a></p>
<p>Mas olha que legal que ficou!!</p>
<p>Eu recomendo comprar fitas de qualidade, a fita que utilizei dependendo do nivel de calor (sol) ela começa a desprender cola, e vira uma bagunça se vc estiver sentado com ela em seu bolso.</p>
]]></content:encoded>
			<wfw:commentRss>http://infinitadesign.com/blog/2008/08/29/minha-duct-tape-wallet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

