The Power of CSS | Clipmarks


	The Power of CSS
WebWolf Hosting
5-4-2008 7:34 AM
234 views
tags:
css cascading style sheets
WebWolf Hosting says:
Zen Garden has fantastic examples of just how powerful CSS can be. Take a peek , freakin amazing work.
2 Comments |
Add a Comment
5-4-2008 9:12 AM
WebWolf Hosting
thanks for the info - I checked it out and some of the same sites listed there are listed at Smashing Magazine - currently one of my most frequently visited sites.
Login to Comment. Not a member yet? Sign up
Today's Top Clips

visit the Top Clips page
View the Top Clips from May 4, 2008
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/6ccbbab3-33d9-488b-afad-96d3feb89b3a/CB494A4F-1303-4C33-8F14-B27CBD4D0578/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.csszengarden.com/" href="http://www.csszengarden.com/" style="font-size: 11px;">www.csszengarden.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.csszengarden.com/"><H1><SPAN>css Zen Garden</SPAN></H1></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.csszengarden.com/"><H2><SPAN>The Beauty of <ACRONYM title="Cascading Style Sheets">CSS</ACRONYM> Design</SPAN></H2></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.csszengarden.com/"><SPAN>So What is This About?</SPAN></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.csszengarden.com/"><SPAN>There is clearly a need for <ACRONYM title="Cascading Style Sheets">CSS</ACRONYM> to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</SPAN></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.csszengarden.com/"><P class="p2"><SPAN><ACRONYM title="Cascading Style Sheets">CSS</ACRONYM> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.</SPAN></P></blockquote><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content9.clipmarks.com/images/clip-icon.gif" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.mezzoblue.com/zengarden/alldesigns/" href="http://www.mezzoblue.com/zengarden/alldesigns/" style="font-size: 11px;">www.mezzoblue.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.mezzoblue.com/img/A14DC51A-37BF-4187-AA1A-18D22059C2F5" alt="Under the Sea!" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/www.mezzoblue.com/img/41535F57-7CAB-47FB-9736-B791EF75B4AC" alt="Make ’em Proud!" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.mezzoblue.com/img/AC96455B-AE25-48C4-8355-7E370C684D02" alt="Orchid Beauty" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/www.mezzoblue.com/img/E6EF6ECA-C178-4F0B-BFC5-BC62306134AB" alt="Oceanscape" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.mezzoblue.com/img/71092052-FAD3-4125-9985-63BCE411A32B" alt="CSS Co., Ltd." /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/www.mezzoblue.com/img/2171194C-95CC-4699-AA8F-0B3B176C2249" alt="Sakura" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.mezzoblue.com/img/01AFEE75-2473-4928-96B8-7C6D502B0A86" alt="Kyoto Forest" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/www.mezzoblue.com/img/F9C79582-6B69-46BB-8AA3-AD7D19DB796F" alt="A Walk in the Garden" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.mezzoblue.com/img/17D15848-4355-4BF7-A653-7C25B96B1238" alt="spring360" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/www.mezzoblue.com/img/37C54FCD-085F-4768-9914-9079CEF230AA" alt="Retro Theater" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.mezzoblue.com/img/7425BE4E-DD2E-41B7-9D92-6BC0EE266C9A" alt="Withering Beauty" /></div></blockquote><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content9.clipmarks.com/images/clip-icon.gif" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.mezzoblue.com/zengarden/alldesigns/page2/" href="http://www.mezzoblue.com/zengarden/alldesigns/page2/" style="font-size: 11px;">www.mezzoblue.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page2/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.mezzoblue.com/img/E8FFA06E-7A85-49DE-BFE3-31934D94312A" alt="Lily Pond" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page2/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/www.mezzoblue.com/img/B9669284-3B94-4A31-8C7D-8B7E84B1283A" alt="Icicle Outback" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page2/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.mezzoblue.com/img/CE98D020-4DD7-4E82-97CC-3BEB4D2AC905" alt="Dazzling Beauty" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page2/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/www.mezzoblue.com/img/D9CDB2A6-DEB2-42A0-9E12-238CAFE6552F" alt="Leggo My Ego" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page2/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.mezzoblue.com/img/94C042CA-99E3-4283-A132-3B8D39B05AC6" alt="Elegance in Simplicity" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page2/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/www.mezzoblue.com/img/00BDF7EC-6222-45D8-A596-3E413C5A362C" alt="LuGoZee" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page2/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.mezzoblue.com/img/48BF4EA0-EDED-496C-85B8-BE4869F84FC0" alt="Dark Rose" /></div></blockquote><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content9.clipmarks.com/images/clip-icon.gif" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.mezzoblue.com/zengarden/alldesigns/page3/" href="http://www.mezzoblue.com/zengarden/alldesigns/page3/" style="font-size: 11px;">www.mezzoblue.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page3/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.mezzoblue.com/img/3015A252-9195-4FDE-B8B2-B66E87C3D1DE" alt="Manhattan Edition" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page3/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/www.mezzoblue.com/img/BB334A43-28A1-4866-9BFF-9531792E6CA5" alt="Mozart" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page3/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.mezzoblue.com/img/5431285B-99AB-4FB9-9D1A-097DD740C951" alt="Peace Of Mind" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page3/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/www.mezzoblue.com/img/18B03907-0D4D-4A11-AC56-2E45A3021F08" alt="Faded Flowers" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page3/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.mezzoblue.com/img/89080F8F-88C2-4D30-914B-7971A5C02D1B" alt="Zen City Morning" /></div></blockquote><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content7.clipmarks.com/images/clip-icon.gif" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.mezzoblue.com/zengarden/alldesigns/page5/" href="http://www.mezzoblue.com/zengarden/alldesigns/page5/" style="font-size: 11px;">www.mezzoblue.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page5/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.mezzoblue.com/img/A9A342DE-D815-4F57-A77D-88853C3FF37E" alt="Table Layout Assassination!" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page5/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/www.mezzoblue.com/img/DA2C10E3-0178-489D-B663-CD9255B67A6D" alt="November" /></div></blockquote><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content6.clipmarks.com/images/clip-icon.gif" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.mezzoblue.com/zengarden/alldesigns/page6/" href="http://www.mezzoblue.com/zengarden/alldesigns/page6/" style="font-size: 11px;">www.mezzoblue.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page6/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/www.mezzoblue.com/img/866A8B2D-FAB5-424C-9FB0-48BEEE3F5EEB" alt="Paravion" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page6/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.mezzoblue.com/img/FB7B462B-5C91-48E7-8CB3-42840A0DF5C0" alt="Invasion of the Body Switchers" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.mezzoblue.com/zengarden/alldesigns/page6/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/www.mezzoblue.com/img/BEEE1761-1B4C-498A-8268-236093F8DCA1" alt="Golden Cut" /></div></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/CB494A4F-1303-4C33-8F14-B27CBD4D0578/blog/" title="blog or email this clip"><img src="http://content6.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>
New from the makers of Clipmarks: Amplify.com - Don't just share the news...Amplify it!
Clipmarks: Home; New Clips; Top Clips; Dashboard
Popular Topics: News; Life; Science; Technology; Entertainment
Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch
Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map
About Clipmarks: About Us; Contact; Copyright; Privacy; EULA
Search Options

Today's Top Clips
