<?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>Chamli Tennakoon :: Art Director &#124; Graphic Designer &#124; Web Designer &#124; Branding &#124; Corporate ID &#124; Package Design &#124; in Orange County &#187; CSS</title>
	<atom:link href="http://www.chamli.com/category/web-design/css/feed" rel="self" type="application/rss+xml" />
	<link>http://www.chamli.com</link>
	<description>Web Design in Los Angeles</description>
	<lastBuildDate>Mon, 07 Dec 2009 07:07:14 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language></language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>53 CSS-Techniques You Couldn’t Live Without</title>
		<link>http://www.chamli.com/53-css-techniques-you-couldn%e2%80%99t-live-without</link>
		<comments>http://www.chamli.com/53-css-techniques-you-couldn%e2%80%99t-live-without#comments</comments>
		<pubDate>Sat, 06 Jun 2009 09:36:11 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.chamli.com/?p=129</guid>
		<description><![CDATA[CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts &#8211; and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just [...]]]></description>
			<content:encoded><![CDATA[<p>CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts &#8211; and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actually, it is.</p>
<p>Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time &#8211; of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at <strong>53 CSS-based techniques you should always have ready to hand if you develop web-sites</strong>. <em>Links checked: June/11 2008.</em></p>
<p>You might want to take a look at the article <a href="http://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/">Powerful CSS-Techniques For Effective Coding</a>.</p>
<p>1. <a href="http://www.nundroo.com/navigation/">CSS Based Navigation</a></p>
<p><a href="http://www.nundroo.com/navigation/"><img style="margin-left: 4em;" src="http://media2.smashingmagazine.com/images/css/css-techniques0000.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>2. <a href="http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/">Navigation Matrix Reloaded</a></p>
<p><a href="http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/"><img style="margin-left: 4em;" src="http://media2.smashingmagazine.com/images/css/css-techniques0001.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>3. <a href="http://exploding-boy.com/images/cssmenus/menus.html">CSS Tabs</a></p>
<p><a href="http://exploding-boy.com/images/cssmenus/menus.html"><img style="margin-left: 4em;" src="http://media1.smashingmagazine.com/images/css/css-techniques0002.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>4. <a href="http://www.khmerang.com/index.php?p=118">CSS Bar Graphs</a> (<a href="http://applestooranges.com/blog/post/css-for-bar-graphs/?id=55">CSS For Bar Graphs</a>)</p>
<p><a href="http://www.khmerang.com/index.php?p=118"><img style="margin-left: 4em;" src="http://media1.smashingmagazine.com/images/css/css-techniques0003.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>5. <a href="http://icant.co.uk/sandbox/footercollapsetables/">Collapsing Tables: An Example</a></p>
<p><a href="http://icant.co.uk/sandbox/footercollapsetables/"><img style="margin-left: 4em;" src="http://media2.smashingmagazine.com/images/css/css-techniques0004.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>6. <a href="http://www.flog.co.nz/lab/ARC/ARC.htm">Adam’s Radio &amp; Checkbox Customisation Method</a></p>
<p><a href="http://www.flog.co.nz/lab/ARC/ARC.htm"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0005.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>7. <a href="http://www.mezzoblue.com/tests/revised-image-replacement/">CSS Image Replacement</a></p>
<p><a href="http://www.mezzoblue.com/tests/revised-image-replacement/"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0006.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>8. CSS Shadows (<a href="http://web-graphics.com/mtarchive/001589.php">CSS Shadows Roundup</a>)</p>
<p><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0007.gif" alt="CSS-Technique" width="485" height="170" /></p>
<p>9. <a href="http://www.smileycat.com/miaow/archives/000044.html">CSS Rounded Corners Roundup</a> (<a href="http://www.html.it/articoli/nifty/index.html">Nifty Corners</a>)</p>
<p><a href="http://www.smileycat.com/miaow/archives/000044.html"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0008.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>10. <a href="http://www.mandarindesign.com/troops.html">Drop Cap &#8211; Capital Letters with CSS</a></p>
<p><a href="http://www.mandarindesign.com/troops.html"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0009.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>11. <a href="http://www.mandarindesign.com/troops.html#opacitybackgroundhard">Define Image Opacity with CSS</a></p>
<p><a href="http://www.mandarindesign.com/troops.html#opacitybackgroundhard"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0010.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>12. <a href="http://www.smileycat.com/miaow/archives/000230.html">How to Create a Block Hover Effect for a List of Links</a></p>
<p><a href="http://www.smileycat.com/miaow/archives/000230.html"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0011.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>13. <a href="http://www.sitepoint.com/test/pullquote.htm">Pullquotes with CSS</a> (<a href="http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/">Automatic Pullquotes with JavaScript and CSS</a></p>
<p><a href="http://www.sitepoint.com/test/pullquote.htm"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0012.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>14. <a href="http://www.surfare.net/%7Etoolman/temp/diagram.html">CSS Diagrams</a></p>
<p><a href="http://www.surfare.net/%7Etoolman/temp/diagram.html"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0013.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>15. <a href="http://couchfort.net/article/59/css-curves">CSS Curves</a></p>
<p><a href="http://couchfort.net/article/59/css-curves"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0014.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>16. <a href="http://www.themaninblue.com/experiment/footerStickAlt/">Footer Stick</a> allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.</p>
<p><a href="http://www.themaninblue.com/experiment/footerStickAlt/"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0015.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>17. <a href="http://www.frankmanno.com/ideas/css-imagemap/">CSS Image Map</a></p>
<p><a href="http://www.frankmanno.com/ideas/css-imagemap/"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0016.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>18. <a href="http://moneytreesystems.com/css/picpopup.html">CSS Image Pop-Up</a></p>
<p><a href="http://moneytreesystems.com/css/picpopup.html"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0017.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>19. CSS Image Preloader</p>
<p><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0018.gif" alt="CSS-Technique" width="485" height="170" /></p>
<p>20. <a href="http://www.ampsoft.net/webdesign-l/image-button.html">CSS Image Replacement for Buttons</a></p>
<p><a href="http://www.ampsoft.net/webdesign-l/image-button.html"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0019.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>21. <a href="http://lab.arc90.com/2006/07/link_thumbnail.php">Link Thumbnail</a></p>
<p><a href="http://lab.arc90.com/2006/07/link_thumbnail.php"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0020.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>22. <a href="http://mikecherim.com/experiments/css_map_pop.php">CSS Map Pop</a></p>
<p><a href="http://mikecherim.com/experiments/css_map_pop.php"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0021.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>23. <a href="http://mikecherim.com/gbcms_xml/news_page.php?id=12">PHP-based CSS Style Switcher</a></p>
<p><a href="http://mikecherim.com/gbcms_xml/news_page.php?id=12"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0022.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>24. <a href="http://mikecherim.com/gbcms_xml/news_page.php?id=0">CSS Unordered List Calender</a> (<a href="http://veerle.duoh.com/blog/comments/a_css_styled_calendar/">CSS Styled Calender</a>)</p>
<p><a href="http://mikecherim.com/gbcms_xml/news_page.php?id=0"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0023.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>25. <a href="http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/">CSS-Based Forms: Techniques</a></p>
<p><a href="http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0024.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>26. <a href="http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/">CSS-Based Tables: Techniques</a></p>
<p><a href="http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0025.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>27. <a href="http://css-discuss.incutio.com/?page=PrintStylesheets">Printing Web-Documents and CSS</a></p>
<p><a href="http://css-discuss.incutio.com/?page=PrintStylesheets"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0027.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>28. <a href="http://www.alistapart.com/articles/improvingprint/">Improved Links-Display for Print-Layouts with CSS</a></p>
<p><a href="http://www.alistapart.com/articles/improvingprint/"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0026.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>29. <a href="http://www.ukthoughts.co.uk/journal/css-submit-buttons">CSS-Submit Buttons</a></p>
<p><a href="http://www.ukthoughts.co.uk/journal/css-submit-buttons"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0028.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>30. <a href="http://www.456bereastreet.com/lab/teaser/">CSS Teaser Box</a></p>
<p><a href="http://www.456bereastreet.com/lab/teaser/"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0029.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>31. <a href="http://www.macworld.com/2005/12/secrets/januarycreate/index.php">CSS Tricks for Custom Bullets</a></p>
<p><a href="http://www.macworld.com/2005/12/secrets/januarycreate/index.php"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0030.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>32. <a href="http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded">Ticked Off Links Reloaded</a></p>
<p><a href="http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0031.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>33. <a href="http://www.deltatangobravo.com/images/zoom/">CSS Zooming</a></p>
<p><a href="http://www.deltatangobravo.com/images/zoom/"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0032.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>34. <a href="http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/">Creating a Star Rater using CSS</a></p>
<p><a href="http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0033.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>35. <a href="http://webdesign.maratz.com/lab/visited_links_styling/">The ways to style visited Links</a></p>
<p><a href="http://webdesign.maratz.com/lab/visited_links_styling/"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0034.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>36. <a href="http://webdesign.maratz.com/lab/pdf_links_labeling/">PDF, ZIP, DOC Links Labeling</a></p>
<p><a href="http://webdesign.maratz.com/lab/pdf_links_labeling/"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0035.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>37. Displaying Percentages with CSS</p>
<p><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0036.gif" alt="CSS-Technique" width="485" height="170" /></p>
<p>38. <a href="http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/">Image Floats without the Text Wrap</a></p>
<p><a href="http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0037.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>39. <a href="http://webdesign.maratz.com/lab/new_window_link/">Let visitors decide, whether or not will they open link in a new window</a></p>
<p><a href="http://webdesign.maratz.com/lab/new_window_link/"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0038.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>40. <a href="http://www.maxdesign.com.au/presentation/external/">Simple accessible external links</a></p>
<p><a href="http://www.maxdesign.com.au/presentation/external/"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0039.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>41. <a href="http://24ways.org/2005/splintered-striper">Zebra Table with JavaScript and CSS</a></p>
<p><a href="http://24ways.org/2005/splintered-striper"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0040.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>42. <a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html">Vertical Centering with CSS</a> (<a href="http://www.456bereastreet.com/lab/centered/both/">Horizontal and Vertical Centering with CSS</a></p>
<p><a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0041.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>43. <a href="http://lab.arc90.com/2006/05/unobtrusive_sidenotes.php">Unobtrusive Sidenotes</a></p>
<p><a href="http://lab.arc90.com/2006/05/unobtrusive_sidenotes.php"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0042.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>44. <a href="http://lab.arc90.com/2006/07/image_caption_1.php">Image Caption with CSS</a> (<a href="http://www.boagworld.com/archives/2006/07/styled_images_with_caption.html">Styled Images with Caption</a>)</p>
<p><a href="http://lab.arc90.com/2006/07/image_caption_1.php"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0043.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>45. <a href="http://petewilliamsagency.com/css/examples/pie/">Dynamic Piechart with CSS</a></p>
<p><a href="http://petewilliamsagency.com/css/examples/pie/"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0044.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>46. <a href="http://www.brandspankingnew.net/archive/2005/07/format_footnote.html">Format Footnotes with CSS</a></p>
<p><a href="http://www.brandspankingnew.net/archive/2005/07/format_footnote.html"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0045.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>47. <a href="http://www.alexandersperl.de/tutorials/css/sitemap.html">Hierarchical Sitemap with CSS</a></p>
<p><a href="http://www.alexandersperl.de/tutorials/css/sitemap.html"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0046.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>48. <a href="http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/">Snook’s Resizable Underlines</a></p>
<p><a href="http://www.colly.com/index.php?/weblog/comments/snooks_resizable_underlines/"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0047.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>49. <a href="http://www.alistapart.com/articles/switchymclayout">Switchy McLayout: An Adaptive Layout Technique</a></p>
<p><a href="http://www.alistapart.com/articles/switchymclayout"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0048.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>50. <a href="http://www.scottjehl.com/v7/index.php/process/stylemap_visual_sitemap/">StyleMap: CSS+HTML Visual Sitemap</a></p>
<p><a href="http://www.scottjehl.com/v7/index.php/process/stylemap_visual_sitemap/"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0049.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>51. <a href="http://www.devlounge.net/articles/custom-reading-width-beta">Custom Reading Width</a></p>
<p><a href="http://www.devlounge.net/articles/custom-reading-width-beta"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0050.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>52. <a href="http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/">CSS Alert Message</a></p>
<p><a href="http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/"><img style="margin-left: 4em; display: inline;" src="http://media1.smashingmagazine.com/images/css/css-techniques0051.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
<p>53. <a href="http://24ways.org/2006/css-production-notes">CSS Production Notes</a></p>
<p><a href="http://24ways.org/2006/css-production-notes"><img style="margin-left: 4em; display: inline;" src="http://media2.smashingmagazine.com/images/css/css-techniques0052.gif" alt="CSS-Technique" width="485" height="170" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.chamli.com/53-css-techniques-you-couldn%e2%80%99t-live-without/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
