<?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>纯粹的灵魂 &#187; CSS</title>
	<atom:link href="http://www.purelife.cn/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.purelife.cn</link>
	<description>www.purelife.cn</description>
	<lastBuildDate>Wed, 05 May 2010 12:12:47 +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>2008年50个最佳CSS设计</title>
		<link>http://www.purelife.cn/2008/12/08/best-of-css-design-2008/</link>
		<comments>http://www.purelife.cn/2008/12/08/best-of-css-design-2008/#comments</comments>
		<pubDate>Mon, 08 Dec 2008 06:00:16 +0000</pubDate>
		<dc:creator>purelife</dc:creator>
				<category><![CDATA[博览]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[网站设计]]></category>

		<guid isPermaLink="false">http://www.purelife.cn/?p=144</guid>
		<description><![CDATA[这50个CSS网站是由WebDesignerWall评选出来的，很具参考价值。我们在欣赏的同时，也能从中吸取很多灵感，也能从它们的源代码中学习更高级的CSS技术。今年，越来越多的设计师开始使用超大的背景图片技术和一些JavaScript框架（如jQuery及MooTools）来提高用户体验。还有一些设计师将Flash和CSS混合使用。也许我们能从中发现2009年的新网页设计趋势？ Let It Bleed 巨大而醒目的图片使得这个网站鹤立鸡群。 Vermont Coffee Works 很好的混合使用了Flash和CSS。 Digital Mash Good 很好的视觉和内容聚焦设计。 Wilson Miner DrupalCon, DC Future of Web Apps &#8211; Miami 2009 完美的将超大字体与破旧风格效果混合在了一起。 Housing Works 在首页使用了很漂亮的超大背景图。超大背景的网页设计最近比较热门。 Future of Web Design &#8211; NYC 2008 另一个超大背景图设计的实例。 Tennessee &#8211; Fall 我不得不承认，Tennessee的网站的确是一个相当棒的系列设计——秋天、春天、夏天和冬天。 Tennessee &#8211; Spring Tennessee &#8211; Summer Tennessee &#8211; Winter Five Runs Branded07 Cappuccino 具有非常好的可用性的且很有组织性的网站。 LightCMS [...]]]></description>
			<content:encoded><![CDATA[<p>这50个CSS网站是由WebDesignerWall评选出来的，很具参考价值。我们在欣赏的同时，也能从中吸取很多灵感，也能从它们的源代码中学习更高级的CSS技术。今年，越来越多的设计师开始使用超大的背景图片技术和一些JavaScript框架（如jQuery及MooTools）来提高用户体验。还有一些设计师将Flash和CSS混合使用。也许我们能从中发现2009年的新网页设计趋势？<br />
<span id="more-144"></span></p>
<h3><a href="http://www.letitbleedbook.com/">Let It Bleed</a></h3>
<p>巨大而醒目的图片使得这个网站鹤立鸡群。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/letitbleedbook-lg.jpg" alt="2009-网页设计-趋势" width="470" height="160" /></p>
<p><span id="more-1990"></span></p>
<h3><a href="http://www.vermontcoffeeworks.com/">Vermont Coffee Works</a></h3>
<p>很好的混合使用了Flash和CSS。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/vermontcoffeeworks-lg.jpg" alt="css-欣赏" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://digitalmash.com/">Digital Mash</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/digitalmash-lg.jpg" alt="2008-css-网站" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.good.is/">Good</a></h3>
<p>很好的视觉和内容聚焦设计。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/good-lg.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.wilsonminer.com/">Wilson Miner</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/wilsonminer-lg.jpg" alt="css-设计" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://radiantplumbing.com/">DrupalCon, DC</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/drupalcon-lg.jpg" alt="外国-css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://events.carsonified.com/fowa/2009/miami">Future of Web Apps &#8211; Miami 2009</a></h3>
<p>完美的将超大字体与破旧风格效果混合在了一起。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/fowa-lg.jpg" alt="css-欣赏" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.housingworks.org/">Housing Works</a></h3>
<p>在首页使用了很漂亮的超大背景图。<a href="http://blog.bingo929.com/80-large-background-websites.html" target="_blank">超大背景的网页设计</a>最近比较热门。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/housingworks-lg.jpg" alt="2008-css-网站" width="470" height="160" /></p>
<h3><a href="http://www.sarahhyland.com/">Future of Web Design &#8211; NYC 2008</a></h3>
<p>另一个<a href="http://blog.bingo929.com/80-large-background-websites.html" target="_blank">超大背景图设计</a>的实例。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/futureofwebdesign-lg.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://fall.tnvacation.com/">Tennessee &#8211; Fall</a></h3>
<p>我不得不承认，Tennessee的网站的确是一个相当棒的系列设计——秋天、春天、夏天和冬天。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/tnvacation-fall.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://spring.tnvacation.com/">Tennessee &#8211; Spring</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/tnvacation-spring.jpg" alt="css-设计" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://summer.tnvacation.com/">Tennessee &#8211; Summer</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/summer-lg.jpg" alt="外国-css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://winter.tnvacation.com/">Tennessee &#8211; Winter</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/tnvacation-winter.jpg" alt="css-欣赏" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.fiveruns.com/">Five Runs</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/fiveruns-lg.jpg" alt="2008-css-网站" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.branded07.com/">Branded07</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/branded07-lg.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://cappuccino.org/">Cappuccino</a></h3>
<p>具有非常好的可用性的且很有组织性的网站。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/cappuccino-lg.jpg" alt="css-设计" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.speaklight.com/">LightCMS</a></h3>
<p>LightCMS公司的一些铅笔/速写效果，网站上仍然能体现他们公司的感觉。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/speaklight-lg.jpg" alt="外国-css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://thefirsttwenty.com/">The First Twenty</a></h3>
<p>非常漂亮的<a href="http://www.webdesignerwall.com/trends/single-page-portfolio-sites/" target="_blank">单页</a>设计。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/thefirsttwenty-lg.jpg" alt="css-欣赏" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://youlove.us/">YouLove.Us</a></h3>
<p>非常完美的使用<a href="http://blog.bingo929.com/category/technology/css">CSS</a>和JavaScript(jQuery)</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/youlove-lg.jpg" alt="2008-css-网站" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://lukelarsen.com/">Luke Larsen</a></h3>
<p>Luke Larsen的水族馆主题很好的证明如何使用好jQuery的<a href="http://plugins.jquery.com/project/ScrollTo">Scrollto 插件</a>.</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/lukelarsen-lg.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://designdisease.com/">Design Disease</a></h3>
<p>波浪和各种圆形让这个网站变得很生动有趣。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/designdisease-lg.jpg" alt="css-设计" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://adaptd.com/">Adaptd</a></h3>
<p>虽然设计风格让我想起了<a href="http://iso50.com/">ISO50</a> (Scott Hansen)，但它仍然值得推荐。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/adaptd-lg.jpg" alt="外国-css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://jasonsantamaria.com/">Jason Santa Maria</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/jasonsantamaria-lg.jpg" alt="css-欣赏" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.electricurrent.com/">Electricurrent</a></h3>
<p>这个网站证明了如何使用超大背景图片来展现摄影作品。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/electricurrent-lg.jpg" alt="2008-css-网站" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://training.collectiveidea.com/">Training by Collective Idea</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/collectiveidea-lg.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://macallanridge.com/">MacAllan Ridge</a></h3>
<p>很好的视觉设计，简单的导航！棒极了！</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/macallanridge-lg.jpg" alt="css-设计" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.pikaboo.be/">Pikaboo</a></h3>
<p>组合了CSS、<a href="http://blog.bingo929.com/category/technology/javascript">JavaScript</a>和Flash的非常酷的设计。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/pikaboo-lg.jpg" alt="外国-css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.mochiads.com/">Mochi Ads</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/mochiads-lg.jpg" alt="css-欣赏" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.volll.com/">Volll</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/volll-lg.jpg" alt="2008-css-网站" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.flingmedia.com/">Fling Media</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/flingmedia-lg.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.ewedding.com/">eWedding</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/ewedding-lg.jpg" alt="css-设计" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.viget.com/">Viget</a></h3>
<p>Viget很好的在他们的系列博客中保持了他们的品牌形象——Inspire, Advance, Engage, and Extend.</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/viget-lg.jpg" alt="外国-css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.viget.com/extend/">Viget &#8211; Inspire</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/viget-lg1.jpg" alt="css-欣赏" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://sprawsm.com/">Viget &#8211; Advance</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/advance-lg.jpg" alt="2008-css-网站" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.viget.com/engage">Viget &#8211; Engage</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/engage-lg.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.viget.com/extend/">Viget &#8211; Extend</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/extend-lg.jpg" alt="css-设计" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.august.com.au/">August</a></h3>
<p>使用了Flash可扩展背景图片的惊人设计（调整浏览器的尺寸可看到扩展后的背景图）</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/august-lg.jpg" alt="外国-css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://carfreaks.net/">Car Freaks</a></h3>
<p>这个博客会经常更换他们的首页背景图片来保持新鲜感。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/carfreaks-lg.jpg" alt="css-欣赏" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://ringvemedia.com/">Go To China</a></h3>
<p>这个一个使用高清晰度照片作为网站背景图的完美实例。在调整浏览器大小后网站的背景图也会随之扩展。（使用<span style="text-decoration: line-through;">JavaScript</span> CSS实现）</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/ringvemedia-lg.jpg" alt="2008-css-网站" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://jesuschrist.lds.org/SonOfGod/eng/">Jesus Christ</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/jesuschrist-lg.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://billyhughes.oph.gov.au/">Billy Hughes</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/billyhughes-lg.jpg" alt="css-设计" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.freepeople.com/">Free People</a></h3>
<p>FreePeople 是我一直很喜欢的设计（喜欢它的拼贴风格）</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/freepeople-lg.jpg" alt="外国-css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.mousetominx.co.uk/">Mouse to Minx</a></h3>
<p>复古&#8230;性感&#8230;</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/mousetominx-lg.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.darasgarden.com/">Dara’s Garden</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/darasgarden-lg.jpg" alt="css-设计" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.designspongeonline.com/">Design Sponge</a></h3>
<p>剪贴薄设计风格与网站的内容很好的结合。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/designspongeonline-lg.jpg" alt="外国-css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://ma.tt/">Ma.tt</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/matt-lg.jpg" alt="css-欣赏" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.thelippincott.net/">The Lippincott</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/thelippincott-lg.jpg" alt="2008-css-网站" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.hotmeteor.com/">Hot Meteor</a></h3>
<p>喜欢它的复古字体。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/hotmeteor-lg.jpg" alt="css-实例" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://fortysevenmedia.com/">Fortyseven Media</a></h3>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/fortysevenmedia-lg.jpg" alt="css-设计" width="470" height="160" /></p>
<p><br class="spacer_" /></p>
<h3><a href="http://www.theoldstate.com/blog/">The Old State</a></h3>
<p>很少能找到这样漂亮的黑白主题。</p>
<p><img src="http://www.webdesignerwall.com/wp-content/uploads/2008/12/theoldstate-lg.jpg" alt="外国-css-实例" width="470" height="160" /></p>
<p>英文原文:<a href="http://www.webdesignerwall.com/trends/best-of-css-design-2008/" target="_blank">Best of CSS Design 2008<br /> </a></p>

	标签：<a href="http://www.purelife.cn/tag/css/" title="CSS" rel="tag">CSS</a>, <a href="http://www.purelife.cn/tag/%e7%bd%91%e7%ab%99%e8%ae%be%e8%ae%a1/" title="网站设计" rel="tag">网站设计</a><br />

	<h4>相关日志</h4>
	<ul class="st-related-posts">
	<li>无相关日志</li>
	</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.purelife.cn/2008/12/08/best-of-css-design-2008/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>
