<?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>Codrops &#187; icons</title>
	<atom:link href="http://tympanus.net/codrops/tag/icons/feed/" rel="self" type="application/rss+xml" />
	<link>http://tympanus.net/codrops</link>
	<description>Useful resources and inspiration for creative minds</description>
	<lastBuildDate>Wed, 23 May 2012 09:46:58 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Collective #11</title>
		<link>http://tympanus.net/codrops/collective/collective-11/</link>
		<comments>http://tympanus.net/codrops/collective/collective-11/#comments</comments>
		<pubDate>Sun, 13 May 2012 15:43:26 +0000</pubDate>
		<dc:creator>Mary Lou</dc:creator>
				<category><![CDATA[CSS3]]></category>
		<category><![CDATA[fonts]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[template]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[vector]]></category>

		<guid isPermaLink="false">http://tympanus.net/codrops/?post_type=collective&#038;p=9008</guid>
		<description><![CDATA[CSS Selectors demystified * Vendor Tokens? * Free Fonts * Social Media Icons * Flyer Template * jQuery Vector Maps]]></description>
			<content:encoded><![CDATA[<div class="ct-coll-item">
<article>
<h2>Interactive CSS Selectors</h2>
<p>	   <a class="ct-coll-thumb" href="http://twostepmedia.co.uk/cssselectors/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_14.jpg" alt="Collective11_14" title="" width="280" height="149" class="alignnone size-full wp-image-9022" /></a></p>
<p>Ben Howdle from Two Step Media will help you understand CSS Selectors in an interactive way. Choose a selector on the left and you&#8217;ll instantly see the affected elements on the right.</p>
<p>	   <a class="ct-coll-link" href="http://twostepmedia.co.uk/cssselectors/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>‘Vendor Tokens’ Offer Another Way Out of the CSS Prefix Mess</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.webmonkey.com/2012/05/vendor-tokens-offer-another-way-out-of-the-css-prefix-mess/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_06.jpg" alt="Collective11_06" title="" width="300" height="68" class="alignnone size-full wp-image-9014" /></a></p>
<p>There is a big discussion going on about whether vendor prefixes are harmful of helpful. Despire their original purpose they are being used all over and many issues are arising from that. Scott Gilbertson from Webmonkey explains Eric Meyer&#8217;s new proposal for ending the mess.</p>
<p>	   <a class="ct-coll-link" href="http://www.webmonkey.com/2012/05/vendor-tokens-offer-another-way-out-of-the-css-prefix-mess/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Inspirational Website of the Week</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.purepleasuredesign.com"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_12.jpg" alt="Collective11_12" title="" width="330" height="179" class="alignnone size-full wp-image-9020" /></a></p>
<p>Ines Maria Gamler&#8217;s website purepleasuredesign.com has a beautiful mixture of interesting typographic elements, shapes, color and textures.</p>
<p>	   <a class="ct-coll-link" href="http://www.purepleasuredesign.com">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Znikomit Free Font</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.glukfonts.pl/font.php?font=Znikomit"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_18.jpg" alt="Collective11_18" title="" width="300" height="150" class="alignnone size-full wp-image-9026" /></a></p>
<p>A really beautiful and elegant free font with many Open­Type features by Grzegorz Luk.</p>
<p>	   <a class="ct-coll-link" href="http://www.glukfonts.pl/font.php?font=Znikomit">Get it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>JQV Map: jQuery Vector Maps</h2>
<p>	   <a class="ct-coll-thumb" href="http://jqvmap.com/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_15.jpg" alt="Collective11_15" title="" width="300" height="199" class="alignnone size-full wp-image-9023" /></a></p>
<p>JQVMap is a really cool jQuery plugin that renders Vector Maps using Scalable Vector Graphics (SVG) for modern browsers. Via VML it provides legacy support for older browsers.</p>
<p>	   <a class="ct-coll-link" href="http://jqvmap.com/">Get it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Fixed Table of Contents Drop-Down Menu </h2>
<p>	   <a class="ct-coll-thumb" href="http://www.impressivewebs.com/fixed-table-of-contents-drop-down-menu-jquery-plugin/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_09.jpg" alt="Collective11_09" title="" width="230" height="163" class="alignnone size-full wp-image-9017" /></a></p>
<p>Louis Lazaris from Impressive Webs is sharing this useful fixed drop-down menu with a table of contents. It is a jQuery plugin and it comes in really handy for making it easy to navigate a page that has a lot of content.</p>
<p>	   <a class="ct-coll-link" href="http://www.impressivewebs.com/fixed-table-of-contents-drop-down-menu-jquery-plugin/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Fixie.js</h2>
<p>	   <a class="ct-coll-thumb" href="http://fixiejs.com/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_10.jpg" alt="Collective11_10" title="" width="300" height="96" class="alignnone size-full wp-image-9018" /></a></p>
<p>If you design and develop websites, you know how laborsome it can be to add placeholder text. Fixie.js will help you. It is an open source tool that automatically adds filler content to HTML documents.</p>
<p>	   <a class="ct-coll-link" href="http://fixiejs.com/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>HTML5 Audio — The State of Play</h2>
<p>In this follow-up article about HTML5 audio, Mark Boas explains how the &lt;audio&gt; element and the associated API developed further and what can be done with it.</p>
<p>	   <a class="ct-coll-link" href="http://html5doctor.com/html5-audio-the-state-of-play/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Curtain.js</h2>
<p>	   <a class="ct-coll-thumb" href="http://curtain.victorcoulon.fr"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_03.jpg" alt="Collective11_03" title="" width="200" height="104" class="alignnone size-full wp-image-9011" /></a></p>
<p>This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises. </p>
<p>	   <a class="ct-coll-link" href="http://curtain.victorcoulon.fr">Try it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Freebies Gallery</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.freebiesgallery.com/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_19.jpg" alt="Collective11_19" title="" width="260" height="221" class="alignnone size-full wp-image-9027" /></a></p>
<p>Freebies Gallery is a really useful site where you can download free design resources like PSDs, vector graphics, icons, templates and many more. </p>
<p>	   <a class="ct-coll-link" href="http://www.freebiesgallery.com/">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Say No to Faux Bold</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.alistapart.com/articles/say-no-to-faux-bold/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_04.jpg" alt="Collective11_04" title="" width="200" height="48" class="alignnone size-full wp-image-9012" /></a></p>
<p>Alan Stearns explains in this &#8220;A List Apart&#8221; article what &#8220;fake&#8221; bold is and how to avoid using it in your website.</p>
<p>	   <a class="ct-coll-link" href="http://www.alistapart.com/articles/say-no-to-faux-bold/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Expert subsets for CSS in 123</h2>
<p>	   <a class="ct-coll-thumb" href="http://elliotjaystocks.com/blog/expert-subsets-for-css-in-123/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_05.jpg" alt="Collective11_05" title="" width="280" height="105" class="alignnone size-full wp-image-9013" /></a></p>
<p>The future of typography on the web is an exciting one and Elliot Jay Stocks will show you what beautiful things you can do. After his first article about <a href="http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/">ligatures</a> he digs deeper into the new  <em>font-variant</em> property.</p>
<p>	   <a class="ct-coll-link" href="http://elliotjaystocks.com/blog/expert-subsets-for-css-in-123/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Faye: Simple pub/sub messaging for the web</h2>
<p>	   <a class="ct-coll-thumb" href="http://faye.jcoglan.com/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_07.jpg" alt="Collective11_07" title="" width="260" height="108" class="alignnone size-full wp-image-9015" /></a></p>
<p>If you are searching for a publish-subscribe messaging system for Node.js or Ruby, this just might be a great solution for you.</p>
<p>	   <a class="ct-coll-link" href="http://faye.jcoglan.com/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>How To Build A Real-Time Commenting System</h2>
<p>	   <a class="ct-coll-thumb" href="http://coding.smashingmagazine.com/2012/05/09/building-real-time-commenting-system/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_08.jpg" alt="Collective11_08" title="" width="140" height="141" class="alignnone size-full wp-image-9016" /></a></p>
<p>Phil Leggetter will show you how to &#8220;convert a basic blog commenting system into a real-time engaging experience where you’ll see a comment made in one browser window &#8220;magically&#8221; appear in a second window&#8221;.</p>
<p>	   <a class="ct-coll-link" href="http://coding.smashingmagazine.com/2012/05/09/building-real-time-commenting-system/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Which responsive images solution should you use?</h2>
<p>	   <a class="ct-coll-thumb" href="http://css-tricks.com/which-responsive-images-solution-should-you-use/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_11.jpg" alt="Collective11_11" title="" width="140" height="45" class="alignnone size-full wp-image-9019" /></a></p>
<p>There are many techniques out there to help you with the &#8220;responsive image issue&#8221;. Chris Coyier put together this great guide that will help you choose the right technique for your needs.</p>
<p>	   <a class="ct-coll-link" href="http://css-tricks.com/which-responsive-images-solution-should-you-use/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Statik: A Free Bold Style Font Kit</h2>
<p>	   <a class="ct-coll-thumb" href="http://wegraphics.net/downloads/statik-a-free-bold-style-font-kit/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_13.jpg" alt="Collective11_13" title="" width="300" height="173" class="alignnone size-full wp-image-9021" /></a></p>
<p>WeGraphics offers a great free font: Statik is a bold font face with a hint of static via radio transmission.</p>
<p>	   <a class="ct-coll-link" href="http://wegraphics.net/downloads/statik-a-free-bold-style-font-kit/">Get it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>JavaScript Canvas Image Conversion</h2>
<p>	   <a class="ct-coll-thumb" href="http://davidwalsh.name/convert-canvas-image"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_16.jpg" alt="Collective11_16" title="" width="170" height="170" class="alignnone size-full wp-image-9024" /></a></p>
<p>David Walsh explains how to convert an image to canvas and vice versa using a couple of lines of JavaScript. </p>
<p>	   <a class="ct-coll-link" href="http://davidwalsh.name/convert-canvas-image">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Free Event Flyer Template (PSD)</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.behance.net/gallery/Free-Event-Flyer-Template-(PSD)/3809615"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_17.jpg" alt="Collective11_17" title="" width="290" height="161" class="alignnone size-full wp-image-9025" /></a></p>
<p>Sam Ridgway gives us a free event flyer template that is print ready, with bleeds and which comes with easy to edit layers.</p>
<p>	   <a class="ct-coll-link" href="http://www.behance.net/gallery/Free-Event-Flyer-Template-(PSD)/3809615">Get it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>41 Social Media Icons (PNG)</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.premiumpixels.com/freebies/41-social-media-icons-png/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_01.jpg" alt="Collective11_01" title="" width="300" height="135" class="alignnone size-full wp-image-9009" /></a></p>
<p>Premiumpixels offers us an amazing set of 41 social networking icons in both 16px and 32px by Prekesh Chavda.</p>
<p>	   <a class="ct-coll-link" href="http://www.premiumpixels.com/freebies/41-social-media-icons-png/">Get it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Multilevel CSS3 Menu</h2>
<p>	   <a class="ct-coll-thumb" href="http://css.dzone.com/articles/ms-office-style-css3"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/05/Collective11_02.jpg" alt="Collective11_02" title="" width="180" height="87" class="alignnone size-full wp-image-9010" /></a></p>
<p>In this tutorial by Andrey Prikaznov you will learn how to code a MS Office-style CSS3 multilevel menu.</p>
<p>	   <a class="ct-coll-link" href="http://css.dzone.com/articles/ms-office-style-css3">Read it</a><br />
   </article>
</div>
]]></content:encoded>
			<wfw:commentRss>http://tympanus.net/codrops/collective/collective-11/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Collective #4</title>
		<link>http://tympanus.net/codrops/collective/collective-4/</link>
		<comments>http://tympanus.net/codrops/collective/collective-4/#comments</comments>
		<pubDate>Sun, 25 Mar 2012 12:25:40 +0000</pubDate>
		<dc:creator>Mary Lou</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[responsive]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://tympanus.net/codrops/?post_type=collective&#038;p=8091</guid>
		<description><![CDATA[Free Icons * Responsive Web Design * jQuery Scroll Path * Date Picker * Clever tricks with CSS * Typography]]></description>
			<content:encoded><![CDATA[<div class="ct-coll-item">
<article>
<h2>jQuery Scroll Path</h2>
<p>	   <a class="ct-coll-thumb" href="http://joelb.me/scrollpath/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_04.jpg" alt="Collective4_04" title="" width="200" height="108" class="alignnone size-full wp-image-8096" /></a></p>
<p>Joel Besada created an amazing plugin which you can use to define custom scroll paths to achieve stunning scroll effects.</p>
<p>	   <a class="ct-coll-link" href="http://joelb.me/scrollpath/">Get it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Responsive Navigation Menu</h2>
<p>	   <a class="ct-coll-thumb" href="http://designshack.net/articles/css/code-a-responsive-navigation-menu/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_01.jpg" alt="Collective4_01" title="" width="210" height="146" class="alignnone size-full wp-image-8093" /></a></p>
<p>Learn how to create a stylish and responsive navigation menu in this tutorial.</p>
<p>	   <a class="ct-coll-link" href="http://designshack.net/articles/css/code-a-responsive-navigation-menu/">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Camera jQuery Slideshow</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.pixedelic.com/plugins/camera/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_13.jpg" alt="Collective4_13" title="" width="253" height="172" class="alignnone size-full wp-image-8105" /></a></p>
<p>This responsive slideshow uses a light version of jQuery mobile, making it possible to navigate the slides by swiping. It comes with some beautiful transitions and skins and it can be used in fullscreen, too.</p>
<p>	   <a class="ct-coll-link" href="http://www.pixedelic.com/plugins/camera/">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Responsive Web Design: Missing the Point</h2>
<p>	   <a class="ct-coll-thumb" href="http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_02.jpg" alt="Collective4_02" title="" width="200" height="144" class="alignnone size-full wp-image-8094" /></a></p>
<p>Another great article by Brad Frost where he&#8217;s setting the misconception about responsive web design straight: responsiveness is not some hip new feature &#8211; it&#8217;s a necessity for creating cross-device functioning web sites and optimal user experiences.</p>
<p>	   <a class="ct-coll-link" href="http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item ct-coll-item-multi ct-coll-item-dribbble">
<nav>
		<a href="#" class="ct-coll-nav-prev">Prev</a><br />
		<a href="#" class="ct-coll-nav-next">Next</a><br />
	</nav>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/446086-Glyph-UI-Icon-Set"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_01.jpg" alt="FreeIconsDribbble_01" title="" width="330" height="248" class="alignnone size-full wp-image-8107" /></a></p>
<p>Glyph UI Icon Set by <a href="http://dribbble.com/Icondeposit">Matt Gentile</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/455868-50-Free-Delicious-Berries-Icons"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_02.jpg" alt="FreeIconsDribbble_02" title="" width="330" height="248" class="alignnone size-full wp-image-8108" /></a></p>
<p>50 Free Delicious Berries Icons by <a href="http://dribbble.com/oliviustoian">Oliviu Stoian</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/462398-Minicons-"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_03.jpg" alt="FreeIconsDribbble_03" title="" width="330" height="248" class="alignnone size-full wp-image-8109" /></a></p>
<p>Minicons by <a href="http://dribbble.com/nox">Noe Araujo</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/420174-350-Free-vector-web-icons-Freebie-"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_04.jpg" alt="FreeIconsDribbble_04" title="" width="330" height="248" class="alignnone size-full wp-image-8110" /></a></p>
<p>350 Free vector web icons (Freebie) by <a href="http://dribbble.com/Brankic1979">Brankic1979</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/426723-Max-Mini-Icon"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_05.jpg" alt="FreeIconsDribbble_05" title="" width="330" height="248" class="alignnone size-full wp-image-8111" /></a></p>
<p>Max Mini Icon by <a href="http://dribbble.com/ashung">Ashung Hung</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/437627-Pursuit"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_06.jpg" alt="FreeIconsDribbble_06" title="" width="330" height="248" class="alignnone size-full wp-image-8112" /></a></p>
<p>Pursuit by <a href="http://dribbble.com/shots/437627-Pursuit">Visual Idiot</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/451442-Lock-icons-free-psd-png"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_07.jpg" alt="FreeIconsDribbble_07" title="" width="330" height="248" class="alignnone size-full wp-image-8113" /></a></p>
<p>Lock icons by <a href="http://dribbble.com/nelutu">Ioan Decean</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/127388-Free-Calendar-Icons"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_08.jpg" alt="FreeIconsDribbble_08" title="" width="330" height="248" class="alignnone size-full wp-image-8114" /></a></p>
<p>Free Calendar Icons by <a href="http://dribbble.com/gerardodiaz">Gerardo Diaz</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/435491-FREE-Vector-Icon-Set"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_09.jpg" alt="FreeIconsDribbble_09" title="" width="330" height="248" class="alignnone size-full wp-image-8115" /></a></p>
<p>FREE Vector Icon Set by <a href="http://dribbble.com/clemensposch">Clemens Posch</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/483953-Free-Button-Icon-Exploration"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_10.jpg" alt="FreeIconsDribbble_10" title="" width="330" height="248" class="alignnone size-full wp-image-8116" /></a></p>
<p>Free Button &#038; Icon Exploration by <a href="http://dribbble.com/rrmleroux">Ryan Le Roux</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/445613-Twitter-Controls-psd-"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_11.jpg" alt="FreeIconsDribbble_11" title="" width="330" height="248" class="alignnone size-full wp-image-8117" /></a></p>
<p>Twitter Controls (.psd) by <a href="http://dribbble.com/leviwintering">Levi Wintering</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/449309-FREEBIE-Vector-Icon-3-Pack"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_12.jpg" alt="FreeIconsDribbble_12" title="" width="330" height="248" class="alignnone size-full wp-image-8118" /></a></p>
<p>FREEBIE &#8211; Vector Icon 3 Pack by <a href="http://dribbble.com/CalebAmesbury">Caleb Amesbury</a></p>
</article>
<article>
<h2>Free Icons from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://dribbble.com/shots/467444-Free-Icons"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/FreeIconsDribbble_13.jpg" alt="FreeIconsDribbble_13" title="" width="330" height="248" class="alignnone size-full wp-image-8119" /></a></p>
<p>Free Icons by <a href="http://dribbble.com/DiegoMargini">Diego Margini</a></p>
</article>
</div>
<div class="ct-coll-item">
<article>
<h2>Wookmark jQuery Plugin</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.wookmark.com/jquery-plugin"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_03.jpg" alt="Collective4_03" title="" width="291" height="172" class="alignnone size-full wp-image-8095" /></a></p>
<p>If you&#8217;ve visited <a href="http://www.wookmark.com/">wookmark.com</a> already, you probably know their dynamic grid layout. Now the folks of Wookmark have released a free jQuery plugin that does exactly that.</p>
<p>	   <a class="ct-coll-link" href="http://www.wookmark.com/jquery-plugin">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Kalendae: JavaScript Date Picker</h2>
<p>	   <a class="ct-coll-thumb" href="https://github.com/ChiperSoft/Kalendae"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_05.jpg" alt="Collective4_05" title="" width="200" height="100" class="alignnone size-full wp-image-8097" /></a></p>
<p>This framework independent date picker comes with many great features. It uses moment.js to parse the dates and it&#8217;s easily customizable. </p>
<p>	   <a class="ct-coll-link" href="https://github.com/ChiperSoft/Kalendae">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Moment.js</h2>
<p>	   <a class="ct-coll-thumb" href="http://momentjs.com/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_07.jpg" alt="Collective4_07" title="" width="209" height="109" class="alignnone size-full wp-image-8099" /></a></p>
<p>Moment.js is a lightweight JavaScript date library for parsing, manipulating, and formatting dates. It makes it super-easy to calculate with and display dates even in multiple languages.</p>
<p>	   <a class="ct-coll-link" href="http://momentjs.com/">Get it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Retro Triangular Pattern Design</h2>
<p>	   <a class="ct-coll-thumb" href="http://blog.spoongraphics.co.uk/tutorials/create-a-retro-triangular-pattern-design-in-illustrator"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_14.jpg" alt="Collective4_14" title="" width="100" height="60" class="alignnone size-full wp-image-8106" /></a></p>
<p>Another great tutorial by Chris Spooner. Learn how to create a cool retro pattern in Illustrator.</p>
<p>	   <a class="ct-coll-link" href="http://blog.spoongraphics.co.uk/tutorials/create-a-retro-triangular-pattern-design-in-illustrator">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>tQuery: three.js + jQuery</h2>
<p>tQuery is an extension to the JavaScript 3D library three.js, making it easy to share and build stuff using three.js.</p>
<p>	   <a class="ct-coll-link" href="http://jeromeetienne.github.com/tquery/">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Pure CSS Clickable Events</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.ryancollins.me/?p=1041"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_08.jpg" alt="Collective4_08" title="" width="268" height="166" class="alignnone size-full wp-image-8100" /></a></p>
<p>Ryan Collins shows us how to simulate a click event on an element using only CSS. With a combination of :active an :hover a clicked element will expand and stay expanded until we move out with the mouse. That&#8217;s just super-clever!</p>
<p>	   <a class="ct-coll-link" href="http://www.ryancollins.me/?p=1041">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Respect Thy Typography</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.smashingmagazine.com/2012/03/14/respect-thy-typography/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_09.jpg" alt="Collective4_09" title="" width="100" height="81" class="alignnone size-full wp-image-8101" /></a></p>
<p>In this Smashing Magazine article, Espen Brunborg takes us on a journey and tells us how good typography is not just making letters look fancy but understanding and paying some respect to the long evolution behind the typefaces we&#8217;re using today.</p>
<p>	   <a class="ct-coll-link" href="http://www.smashingmagazine.com/2012/03/14/respect-thy-typography/">Read it</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Using &#8220;Infinite&#8221; Transition Delays</h2>
<p>	   <a class="ct-coll-thumb" href="http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_10.jpg" alt="Collective4_10" title="" width="110" height="66" class="alignnone size-full wp-image-8102" /></a></p>
<p>Joel Besada explains how one can maintain CSS style states using super long transition delays. You wouldn&#8217;t believe what you can do with that amazing trick! </p>
<p>	   <a class="ct-coll-link" href="http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Create a Responsive Web Design with Media Queries</h2>
<p>	   <a class="ct-coll-thumb" href="http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_11.jpg" alt="Collective4_11" title="" width="264" height="150" class="alignnone size-full wp-image-8103" /></a></p>
<p>Learn from Chris Spooner how to use media queries to create a responsive web design.</p>
<p>	   <a class="ct-coll-link" href="http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries">Check it out</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>Inception Explained</h2>
<p>	   <a class="ct-coll-thumb" href="http://www.inception-explained.com/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/03/Collective4_12.jpg" alt="Collective4_12" title="" width="200" height="138" class="alignnone size-full wp-image-8104" /></a></p>
<p>Scroll this uncredibly creative website to understand the underlying logic of the movie &#8220;Inception&#8221;. A wonderful creation by Matt Dempsey that will blow your socks off!</p>
<p>	   <a class="ct-coll-link" href="http://www.inception-explained.com/">Dive in</a><br />
   </article>
</div>
<div class="ct-coll-item">
<article>
<h2>For a Future-Friendly Web</h2>
<p>Brad Frost encourages us in his article to realize how important it is to move forward and become more future friendly when creating content for the rapidly changing web.</p>
<p>	   <a class="ct-coll-link" href="http://www.alistapart.com/articles/for-a-future-friendly-web/">Read it</a><br />
   </article>
</div>
]]></content:encoded>
			<wfw:commentRss>http://tympanus.net/codrops/collective/collective-4/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Collective #1</title>
		<link>http://tympanus.net/codrops/collective/collective1/</link>
		<comments>http://tympanus.net/codrops/collective/collective1/#comments</comments>
		<pubDate>Fri, 20 Jan 2012 15:49:57 +0000</pubDate>
		<dc:creator>Mary Lou</dc:creator>
				<category><![CDATA[CSS3]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[inspiration]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://tympanus.net/codrops/?post_type=collective&#038;p=7341</guid>
		<description><![CDATA[Neo Deco Free Font  * Typography Inspiration * Free Icon Sets * HTML5 &#038; CSS3 Highlights]]></description>
			<content:encoded><![CDATA[<div class="ct-coll-item">
<article>
<h2>Free font: Neo Deco</h2>
<p>		<a class="ct-coll-thumb" href="http://www.behance.net/gallery/Free-Typeface-NeoDecoa/2919157"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/neodeco.jpg" alt="neodeco" title="" width="160" height="111" class="alignnone size-full wp-image-7386" /></a></p>
<p>NEO DECO is an absolutely amazing typeface designed by Jonatan Xavier. It&#8217;s free for commercial use.</p>
<p>		<a class="ct-coll-link" href="http://www.behance.net/gallery/Free-Typeface-NeoDecoa/2919157">Get it</a><br />
	</article>
</div>
<div class="ct-coll-item">
<article>
<h2>Mac OS X Lion with CSS3</h2>
<p>		<a class="ct-coll-thumb" href="http://www.alessioatzeni.com/blog/mac-os-x-lion-with-css3/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/Maccss3.jpg" alt="Maccss3" title="" width="180" height="157" class="alignnone size-full wp-image-7385" /></a></p>
<p>Alessio Atzeni will blow your mind with his latest experiment: Mac OS X Lion remake. He makes intensive use of CSS3 Animations and :target pseudo-class.</p>
<p>		<a class="ct-coll-link" href="http://www.alessioatzeni.com/blog/mac-os-x-lion-with-css3/">Read more</a><br />
	</article>
</div>
<div class="ct-coll-item">
<article>
<h2>CSS3: The Multi Column Layout</h2>
<p>Johnny Simpson shares his excitement about the CSS3 Multi Column Module and explains how it will make designing websites easier. He introduces the single properties of this crucial module and provides some excellent examples and a demo.</p>
<p>		<a class="ct-coll-link" href="http://www.inserthtml.com/2012/01/css3-multi-column-layout-implementation-change-website-design/">Read it</a><br />
	</article>
</div>
<div class="ct-coll-item ">
<article>
<h2>CSS3 Click Chart</h2>
<p>		<a class="ct-coll-thumb" href="http://css3clickchart.com"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/cssclickchart.jpg" alt="cssclickchart" title="" width="140" height="71" class="alignnone size-full wp-image-7383" /></a></p>
<p>Louis Lazaris from <a href="http://www.impressivewebs.com">impressivewebs.com</a> has redesigned and improved his really helpful CSS3 Click Chart. Click on the CSS property and get useful information about it such as the link to the specification, example code and a live demonstration, and more.</p>
<p>		<a class="ct-coll-link" href="http://css3clickchart.com">Check it out</a><br />
	</article>
</div>
<div class="ct-coll-item">
<article>
<h2>Making Love To WebKit</h2>
<p>		<a class="ct-coll-thumb" href="http://acko.net/blog/making-love-to-webkit/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/Acko.jpg" alt="Acko" title="" width="200" height="151" class="alignnone size-full wp-image-7382" /></a></p>
<p>Acko.net by Steven Wittens had a major redesign, but not just any! He pushes CSS 3D to the limit. Scroll and enjoy!</p>
<p>		<a class="ct-coll-link" href="http://acko.net/blog/making-love-to-webkit/">Read it</a><br />
	</article>
</div>
<div class="ct-coll-item">
<article>
<h2>Multi-coloured Progress Bars PSD</h2>
<p>		<a class="ct-coll-thumb" href="http://www.premiumpixels.com/freebies/multi-coloured-progress-bars-psd/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/progress.jpg" alt="progressBars" title="" width="170" height="119" class="alignnone size-full wp-image-7380" /></a></p>
<p>Don&#8217;t miss Orman Clark&#8217;s latest PSD creation: some beautiful multi-coloured progress bars. </p>
<p>		<a class="ct-coll-link" href="http://www.premiumpixels.com/freebies/multi-coloured-progress-bars-psd/">Get it</a><br />
	</article>
</div>
<div class="ct-coll-item ct-coll-item-multi ct-coll-item-dribbble">
<nav>
		<a href="#" class="ct-coll-nav-prev">Prev</a><br />
		<a href="#" class="ct-coll-nav-next">Next</a><br />
	</nav>
<article>
<h2>Inspiring Typography Shots from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cQcq"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/2.jpg" alt="2" title="" width="330" height="248" class="alignnone size-full wp-image-7389" /></a></p>
<p>Old Fashioned Type Sketch by <a href="http://dribbble.com/jamesblevins">James Blevins</a></p>
</article>
<article>
<h2>Inspiring Typography Shots from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cQdi"/><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/1.jpg" alt="1" title="" width="330" height="248" class="alignnone size-full wp-image-7388" /></a></p>
<p>Save the Date Type by <a href="http://dribbble.com/brennangilbert">Brennan Gilbert</a></p>
</article>
<article>
<h2>Inspiring Typography Shots from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cPZL"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/3.jpg" alt="3" title="" width="330" height="248" class="alignnone size-full wp-image-7390" /></a></p>
<p>Shelley Font by <a href="http://dribbble.com/djsherman">Dillon James Sherman</a></p>
</article>
<article>
<h2>Inspiring Typography Shots from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cPYG"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/4.jpg" alt="4" title="" width="330" height="248" class="alignnone size-full wp-image-7391" /></a></p>
<p>Møuntain by <a href="http://dribbble.com/debbiemartin">Debbie Martin</a></p>
</article>
<article>
<h2>Inspiring Typography Shots from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cPUm"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/5.jpg" alt="5" title="" width="330" height="248" class="alignnone size-full wp-image-7392" /></a></p>
<p>Joe Fletcher Logo Outtake by <a href="http://dribbble.com/EdyLevin">Edith Levin</a></p>
</article>
<article>
<h2>Inspiring Typography Shots from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cPAU"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/6.jpg" alt="6" title="" width="330" height="248" class="alignnone size-full wp-image-7393" /></a></p>
<p>Notredame by <a href="http://dribbble.com/newhousedesign">Michael Newhouse</a></p>
</article>
<article>
<h2>Inspiring Typography Shots from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cPsp"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/7.jpg" alt="7" title="" width="330" height="248" class="alignnone size-full wp-image-7394" /></a></p>
<p>Design Times by <a href="http://dribbble.com/StudioMuti">Studio Muti</a></p>
</article>
<article>
<h2>Inspiring Typography Shots from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cPei"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/8.jpg" alt="8" title="" width="330" height="248" class="alignnone size-full wp-image-7395" /></a></p>
<p>Mini Portfolio Header by <a href="http://dribbble.com/kami">Dave Yoon</a></p>
</article>
<article>
<h2>Inspiring Typography Shots from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cONc"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/9.jpg" alt="9" title="" width="330" height="248" class="alignnone size-full wp-image-7396" /></a></p>
<p>RLO by <a href="http://dribbble.com/nateluetkehans">Nate Luetkehans</a></p>
</article>
<article>
<h2>Inspiring Typography Shots from Dribbble</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cOKU"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/10.jpg" alt="10" title="" width="330" height="248" class="alignnone size-full wp-image-7397" /></a></p>
<p>Hello by <a href="http://dribbble.com/gregchristman">Greg Christman</a></p>
</article>
</div>
<div class="ct-coll-item">
<article>
<h2>Strabo II: A free icon set</h2>
<p>		<a class="ct-coll-thumb" href="http://drbl.in/cPFE"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/strabo.jpg" alt="strabo" title="" width="200" height="150" class="alignnone size-full wp-image-7381" /></a></p>
<p>Visual Idiot let&#8217;s you download his latests free icon set which comes in handy for any web developer or web designer.</p>
<p>		<a class="ct-coll-link" href="http://drbl.in/cPFE">Get it</a><br />
	</article>
</div>
<div class="ct-coll-item">
<article>
<h2>Socialico: Social Media Icons Font</h2>
<p>		<a class="ct-coll-thumb" href="http://fontfabric.com/social-media-icons-pack/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/iconfont.jpg" alt="iconfont" title="" width="226" height="152" class="alignnone size-full wp-image-7384" /></a></p>
<p>Using a font for your icons might not be best practice, but who can resist this delicious icon font? Socialico is a pack of 74 social media icons as a font. It&#8217;s designed by <a href="http://www.behance.net/arsek">Jelio Dimitrov</a>.</p>
<p>		<a class="ct-coll-link" href="http://fontfabric.com/social-media-icons-pack/">Get it</a><br />
	</article>
</div>
<div class="ct-coll-item">
<article>
<h2>YouTube Popup Buttons</h2>
<p>		<a class="ct-coll-thumb" href="http://css-tricks.com/youtube-popup-buttons/"><a href="http://css-tricks.com/youtube-popup-buttons/"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/youtubebuttons.jpg" alt="youtubebuttons" title="" width="220" height="113" class="alignnone size-full wp-image-7378" /></a></a></p>
<p>Chris Coyier shares his slick remake of the new You Tube buttons. </p>
<p>		<a class="ct-coll-link" href="http://css-tricks.com/youtube-popup-buttons/">Read it</a><br />
	</article>
</div>
<div class="ct-coll-item">
<article>
<h2>Dino Pairs Game with CSS3 Animation</h2>
<p>		<a class="ct-coll-thumb" href="http://www.my-html-codes.com/game-using-css3-animation"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/dinopairs.jpg" alt="dinopairs" title="" width="200" height="129" class="alignnone size-full wp-image-7398" /></a></p>
<p>Check out this cute game by Matt Walker using CSS3 Animations. He provides a great tutorial and a fun demo. </p>
<p>		<a class="ct-coll-link" href="http://www.my-html-codes.com/game-using-css3-animation">Play it</a><br />
	</article>
</div>
<div class="ct-coll-item">
<article>
<h2>The Edge of HTML5</h2>
<p>		<a class="ct-coll-thumb" href="http://html5-demos.appspot.com/static/html5-therealbleedingedge/template/index.html"><img src="http://tympanus.net/codrops/wp-content/uploads/2012/01/html5edge.jpg" alt="html5edge" title="" width="120" height="89" class="alignnone size-full wp-image-7387" /></a></p>
<p>Google Chrome engineer Eric Bidelman gives us some insight to hot new stuff in HTML5. The presnetation covers CSS Regions, calc(), filters, New Flexbox and more.</p>
<p>		<a class="ct-coll-link" href="http://html5-demos.appspot.com/static/html5-therealbleedingedge/template/index.html">Check it out</a><br />
	</article>
</div>
]]></content:encoded>
			<wfw:commentRss>http://tympanus.net/codrops/collective/collective1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Share the Love: Social Bookmark Designs in Blogs</title>
		<link>http://tympanus.net/codrops/2010/04/06/share-the-love-social-bookmark-designs-in-blogs/</link>
		<comments>http://tympanus.net/codrops/2010/04/06/share-the-love-social-bookmark-designs-in-blogs/#comments</comments>
		<pubDate>Tue, 06 Apr 2010 18:03:13 +0000</pubDate>
		<dc:creator>Mary Lou</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[social bookmarks]]></category>

		<guid isPermaLink="false">http://tympanus.net/codrops/?p=1710</guid>
		<description><![CDATA[The other day it came to my attention that there are so many beautiful social bookmark icon sets around but no blog seems to use them. Now, that has to do a lot with the fact that many publishing platforms require a certain amount of programming knowledge in order to personalize the sharing buttons. We [...]]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-1763" title="socialb" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/socialb1.png" alt="" width="580" height="362" /></p>
<p>The other day it came to my attention that there are so many beautiful social bookmark icon sets around but no blog seems to use them. Now, that has to do a lot with the fact that many publishing platforms require a certain amount of programming knowledge in order to personalize the sharing buttons.</p>
<p>We use the <a href="http://www.sexybookmarks.net/">Sexy Bookmarks WordPress Plugin</a>, simply because it is really nice and it works well. For the Retweet Button we use the <a href="http://wordpress.org/extend/plugins/digg-digg/">Digg Digg Plugin</a> which is easy to integrate but not really stylable.</p>
<p>It would be really great to have some kind of plugin, that let&#8217;s you just add your own buttons, I bet that would increase the creativity of the social bookmarking designs found in blogs.</p>
<p>During my search for some examples of designs, I found this set that I thought, shows some nice ways of engaging the reader to share the post or bookmark it. Although the opinions about in which way the user should be engaged to share a post at all might differ (some blogs don&#8217;t offer any social bookmarking options), I think that it is ultimately a very important tool for any blog.</p>
<p>Before I start with the collection, I would like to share one more thing with all of you that use the Digg Digg Plugin for the integration of the TweetMeme Button. It took my some time to find out, why the retweet would contain @tweetmeme instead of our Twitter name &#8220;codrops&#8221;. Ultimately I found the solution:  in the settings we chose the &#8220;Integration Type&#8221; to be &#8220;none&#8221; because we called the PHP function manually. Even if you put your TweetMeme source RT name, this will cause the retweet to contain the @tweetmeme instead of your name. (I actually don&#8217;t know if that issue is fixed by now, I just noticed that a lot of blogs seem to have that problem.)</p>
<p>And here comes the collection! Enjoy!</p>
<h3><a href="http://www.blog.spoongraphics.co.uk/">http://www.blog.spoongraphics.co.uk</a></h3>
<p><a href="http://www.blog.spoongraphics.co.uk/"><img class="aligncenter size-full wp-image-1716" title="0" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/0.gif" alt="" width="543" height="170" /></a><br />
This is a really nice way to show those quite &#8220;ugly&#8221; sharing buttons: wrap them in a box so that they look similar and homogeneous.</p>
<div id="bsap_1266918" class="bsarocks bsap_af25dfd2f1908889af7a1aa5f4dcbd9e"></div><div style="clear:both;"></div>
<h3><a href="http://www.hongkiat.com">http://www.hongkiat.com</a></h3>
<p><a href="http://www.hongkiat.com"><img class="aligncenter size-full wp-image-1717" title="1" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/1.gif" alt="" width="418" height="257" /></a><br />
I really like the big type, fits nicely to the blog.</p>
<h3><a href="http://cellphones.org">http://cellphones.org</a></h3>
<p><a href="http://cellphones.org"><img class="aligncenter size-full wp-image-1718" title="2" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/2.gif" alt="" width="580" height="133" /></a><br />
This one is definitely my favorite, it is very unique and it is completely adapted to the style of the blog.</p>
<h3><a href="http://designinformer.com/">http://designinformer.com</a></h3>
<p><a href="http://designinformer.com/"><img class="aligncenter size-full wp-image-1719" title="3" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/3.gif" alt="" width="580" height="160" /></a></p>
<h3><a href="http://buildinternet.com">http://buildinternet.com</a></h3>
<p><a href="http://buildinternet.com"><img class="aligncenter size-full wp-image-1720" title="4" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/4.gif" alt="" width="580" height="127" /></a></p>
<h3><a href="http://10steps.sg">http://10steps.sg</a></h3>
<p><a href="http://10steps.sg"><img class="aligncenter size-full wp-image-1723" title="7" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/7.gif" alt="" width="315" height="255" /></a><br />
Although we are stuck to the designs and &#8220;identities&#8221; of the sharing buttons, we can make the them interesting by surrounding the buttons with some nice design. This is a good example of how to do it.</p>
<h3><a href="http://www.9lessons.info">http://www.9lessons.info</a></h3>
<p><a href="http://www.9lessons.info"><img class="aligncenter size-full wp-image-1724" title="8" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/8.gif" alt="" width="532" height="127" /></a></p>
<h3><a href="http://www.minervity.com">http://www.minervity.com</a></h3>
<p><a href="http://www.minervity.com"><img class="aligncenter size-full wp-image-1725" title="9" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/9.gif" alt="" width="582" height="63" /></a></p>
<h3><a href="http://creativeoverflow.net">http://creativeoverflow.net</a></h3>
<p><a href="http://creativeoverflow.net"><img class="aligncenter size-full wp-image-1726" title="10" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/10.gif" alt="" width="580" height="257" /></a></p>
<h3><a href="http://desizntech.info">http://desizntech.info</a></h3>
<p><a href="http://desizntech.info"><img class="aligncenter size-full wp-image-1727" title="11" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/11.gif" alt="" width="580" height="131" /></a></p>
<h3><a href="http://designora.com">http://designora.com</a></h3>
<p><a href="http://designora.com"><img class="aligncenter size-full wp-image-1728" title="12" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/12.gif" alt="" width="580" height="112" /></a></p>
<h3><a href="http://www.sitesketch101.com">http://www.sitesketch101.com</a></h3>
<p><a href="http://www.sitesketch101.com"><img class="aligncenter size-full wp-image-1729" title="14" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/14.gif" alt="" width="580" height="92" /></a></p>
<h3><a href="http://www.hairstylesdesign.com/blog">http://www.hairstylesdesign.com/blog</a></h3>
<p><a href="http://www.hairstylesdesign.com/blog"><img class="aligncenter size-full wp-image-1730" title="15" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/15.gif" alt="" width="573" height="257" /></a></p>
<h3><a href="http://www.tutorialboard.net">http://www.tutorialboard.net</a></h3>
<p><a href="http://www.tutorialboard.net"><img class="aligncenter size-full wp-image-1731" title="16" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/16.gif" alt="" width="487" height="257" /></a></p>
<h3><a href="http://www.outlawdesignblog.com">http://www.outlawdesignblog.com</a></h3>
<p><a href="http://www.outlawdesignblog.com"><img class="aligncenter size-full wp-image-1732" title="17" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/17.jpg" alt="" width="580" height="120" /></a></p>
<h3><a href="http://www.fuelyourcreativity.com">http://www.fuelyourcreativity.com</a></h3>
<p><a href="http://www.fuelyourcreativity.com"><img class="aligncenter size-full wp-image-1733" title="18" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/18.gif" alt="" width="580" height="90" /></a><br />
Now, this one is really nice. You have to try it out by hovering, it makes a really nice effect.</p>
<h3><a href="http://www.clickonf5.org">http://www.clickonf5.org</a></h3>
<p><a href="http://www.clickonf5.org"><img class="aligncenter size-full wp-image-1734" title="19" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/19.jpg" alt="" width="516" height="257" /></a></p>
<h3><a href="http://www.onextrapixel.com">http://www.onextrapixel.com</a></h3>
<p><a href="http://www.onextrapixel.com"><img class="aligncenter size-full wp-image-1735" title="20" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/20.jpg" alt="" width="580" height="236" /></a></p>
<h3><a href="http://www.threestyles.com">http://www.threestyles.com</a></h3>
<p><a href="http://www.threestyles.com"><img class="aligncenter size-full wp-image-1736" title="21" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/21.jpg" alt="" width="578" height="184" /></a></p>
<h3><a href="http://blogof.francescomugnai.com">http://blogof.francescomugnai.com</a></h3>
<p><a href="http://blogof.francescomugnai.com"><img class="aligncenter size-full wp-image-1737" title="22" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/22.jpg" alt="" width="190" height="162" /></a></p>
<h3><a href="http://www.inspiredm.com">http://www.inspiredm.com</a></h3>
<p><a href="http://www.inspiredm.com"><img class="aligncenter size-full wp-image-1738" title="23" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/23.jpg" alt="" width="92" height="423" /></a><br />
Here we have an alternative way of showing the social bookmarking options. It saves space in the blog and it is always accessible.</p>
<h3><a href="http://d-lists.co.uk">http://d-lists.co.uk</a></h3>
<p><a href="http://d-lists.co.uk"><img class="aligncenter size-full wp-image-1739" title="24" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/24.jpg" alt="" width="580" height="149" /></a></p>
<h3><a href="http://www.littleboxofideas.com">http://www.littleboxofideas.com</a></h3>
<p><a href="http://www.littleboxofideas.com"><img class="aligncenter size-full wp-image-1740" title="25" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/25.jpg" alt="" width="500" height="149" /></a><br />
This one is charming, but it also shows the problems many of us face: using different plugins and manual insertions do not let us adapt the style like we would like to.</p>
<h3><a href="http://www.designussion.com">http://www.designussion.com</a></h3>
<p><a href="http://www.designussion.com"><img class="aligncenter size-full wp-image-1741" title="26" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/26.jpg" alt="" width="580" height="90" /></a></p>
<h3><a href="http://www.psdeluxe.com">http://www.psdeluxe.com</a></h3>
<p><a href="http://www.psdeluxe.com"><img class="aligncenter size-full wp-image-1755" title="Screenshot03" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/Screenshot03.jpg" alt="" width="332" height="302" /></a></p>
<h3><a href="http://designmess.com">http://designmess.com</a></h3>
<p><img class="aligncenter size-full wp-image-1743" title="28" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/28.jpg" alt="" width="369" height="149" /><br />
I like the approach of integrating the social bookmarking options as part of the post, like the comment section. It looks clean and it gives the sharing buttons a functional appearance.</p>
<h3><a href="http://www.dezinerfolio.com">http://www.dezinerfolio.com</a></h3>
<p><a href="http://www.dezinerfolio.com"><img class="aligncenter size-full wp-image-1744" title="29" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/29.jpg" alt="" width="319" height="125" /></a><br />
Here we have a really nice and clean sharing &#8220;button&#8221;. When clicked, a sharing box pops out. This is a good example on how to integrate the social bookmarking option elegantly and discretely.</p>
<h3><a href="http://www.tutorial9.net">http://www.tutorial9.net</a></h3>
<p><a href="http://www.tutorial9.net"><img class="aligncenter size-full wp-image-1745" title="30" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/30.jpg" alt="" width="422" height="149" /></a></p>
<h3><a href="http://games.venturebeat.com">http://games.venturebeat.com</a></h3>
<p><a href="http://games.venturebeat.com"><img class="aligncenter size-full wp-image-1746" title="31" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/31.jpg" alt="" width="580" height="104" /></a></p>
<h3><a href="http://www.geeksucks.com">http://www.geeksucks.com</a></h3>
<p><a href="http://www.geeksucks.com"><img class="aligncenter size-full wp-image-1752" title="32" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/32.jpg" alt="" width="565" height="102" /></a></p>
<h3><a href="http://www.webresourcesdepot.com">http://www.webresourcesdepot.com</a></h3>
<p><a href="http://www.webresourcesdepot.com"><img class="aligncenter size-full wp-image-1753" title="33" src="http://tympanus.net/codrops/wp-content/uploads/2010/04/33.jpg" alt="" width="499" height="38" /></a><br />
This one is beautifully integrated under the title of the blog post.</p>
<h3>And that&#8217;s it!</h3>
<p>These were the designs that I found nicely fitting to their blog styles. Although I am not terribly excited about the level of creativity used, I understand why it is so hard to adapt this very crucial part of a post to our design needs.</p>
<p>What do you think? Is it important to bring some attention on the social bookmarking option in a blog? Would you as well like to have some more freedom in adapting the style of sharing buttons? Or do you think it should not be obtrusive in any way? Have you seen some interesting sharing button styles that you would like to add to this list?</p>
<p>I hope you liked it and got inspired!</p>
<p>You might be interested in some sets of social bookmarking icons:<br />
<a href="http://www.wpzoom.com/design/21-sets-of-free-social-bookmarking-icons-for-your-blog/">21 Sets of Free Social Bookmarking Icons for Your Blog</a><br />
<a href="http://www.geeksucks.com/icons/72-sets-of-free-social-bookmarking-icons.htm">72 Sets of Free Social Bookmarking Icons</a><br />
<a href="http://www.bloggodown.com/2009/07/75-beautiful-free-social-bookmarking.html">75 Beautiful Free Social Bookmarking Icon Sets</a><br />
<a href="http://www.webresourcesdepot.com/social-bookmarking-icons-collection/">Social Bookmarking Icons Collection</a><br />
<a href="http://www.rizwanashraf.com/2010/03/27/70-free-social-media-icon-sets/">70 Free Social Media Icon Sets </a><br />
<a href="http://speckyboy.com/2009/01/26/30-amazingly-creative-social-bookmarks-icon-sets/">30 Amazingly Creative Social Bookmarks Icon Sets</a><br />
<a href="http://webtreats.mysitemyway.com/108-free-black-magic-marker-social-bookmarking-icons/">108 Free Black Magic Marker Social Bookmarking Icons</a><br />
<a href="http://www.youthedesigner.com/2010/02/25/40-new-and-trendy-free-social-media-bookmark-icon-sets/">40 New and Trendy Free Social Media Bookmark Icon Sets</a></p>
]]></content:encoded>
			<wfw:commentRss>http://tympanus.net/codrops/2010/04/06/share-the-love-social-bookmark-designs-in-blogs/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Free Glossy Icons: The jFeedback Icon Set with Source</title>
		<link>http://tympanus.net/codrops/2009/11/25/free-glossy-icons-the-jfeedback-icon-set-with-source/</link>
		<comments>http://tympanus.net/codrops/2009/11/25/free-glossy-icons-the-jfeedback-icon-set-with-source/#comments</comments>
		<pubDate>Wed, 25 Nov 2009 21:44:59 +0000</pubDate>
		<dc:creator>Mary Lou</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[free]]></category>
		<category><![CDATA[glossy]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[photoshop]]></category>

		<guid isPermaLink="false">http://tympanus.net/codrops/?p=893</guid>
		<description><![CDATA[For our last post Cody asked me to create these two glossy icons for the jFeedback jQuery plugin. We thought, we could post the icons as well with the Photoshop file because you might want to change the color or the symbol. So, here they are, two incredibly awesome glossy icons :-) &#8220;open source&#8221;, of [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="size-full wp-image-894 aligncenter" title="iconset" src="http://tympanus.net/codrops/wp-content/uploads/2009/11/iconset.jpg" alt="iconset" width="480" height="310" /></p>
<p>For our last post Cody asked me to create these two glossy icons for the <a href="http://tympanus.net/codrops/2009/11/24/jfeedback/" target="_blank">jFeedback jQuery plugin</a>. We thought, we could post the icons as well with the Photoshop file because you might want to change the color or the symbol.</p>
<p>So, here they are, two incredibly awesome glossy icons :-) &#8220;open source&#8221;, of course.</p>
<p><span id="more-893"></span></p>
<p>Here you can download the ZIP file with the psd Photoshop file and the set of four png icons (256 x 256):</p>
<p><a href="http://tympanus.net/jFeedback/jFeedbackIcons.zip">Download the jFeedback Icon Set</a></p>
<p>Enjoy!</p>
<div id="bsap_1266918" class="bsarocks bsap_af25dfd2f1908889af7a1aa5f4dcbd9e"></div><div style="clear:both;"></div>
]]></content:encoded>
			<wfw:commentRss>http://tympanus.net/codrops/2009/11/25/free-glossy-icons-the-jfeedback-icon-set-with-source/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>32 free arrow icons for your web page</title>
		<link>http://tympanus.net/codrops/2009/09/02/32-free-arrow-icons-for-your-web-page/</link>
		<comments>http://tympanus.net/codrops/2009/09/02/32-free-arrow-icons-for-your-web-page/#comments</comments>
		<pubDate>Wed, 02 Sep 2009 20:40:14 +0000</pubDate>
		<dc:creator>Mary Lou</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[arrow]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[free]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[png]]></category>

		<guid isPermaLink="false">http://tympanus.net/codrops/?p=201</guid>
		<description><![CDATA[Here is a very neat set of arrow icons in 8 colors and png format (18 x 18 px): Click here to download the set as ZIP file: 32 arrow icons ZIP Enjoy!]]></description>
			<content:encoded><![CDATA[<p>Here is a very neat set of arrow icons in 8 colors and png format (18 x 18 px):</p>
<p><a href="http://tympanus.net/codrops/wp-content/uploads/2009/09/arrow_icons.png"><img class="alignnone size-full wp-image-202" title="arrow_icons" src="http://tympanus.net/codrops/wp-content/uploads/2009/09/arrow_icons.png" alt="arrow_icons" width="249" height="182" /></a></p>
<p><span id="more-201"></span>Click here to download the set as ZIP file: <a href="http://tympanus.net/codrops/wp-content/uploads/2009/09/arrow_icons.zip">32 arrow icons ZIP</a></p>
<p>Enjoy!</p>
<div id="bsap_1266918" class="bsarocks bsap_af25dfd2f1908889af7a1aa5f4dcbd9e"></div><div style="clear:both;"></div>
]]></content:encoded>
			<wfw:commentRss>http://tympanus.net/codrops/2009/09/02/32-free-arrow-icons-for-your-web-page/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
<!-- This Quick Cache file was built for (  tympanus.net/codrops/tag/icons/feed/ ) in 0.25365 seconds, on May 23rd, 2012 at 2:28 pm UTC. -->
<!-- This Quick Cache file will automatically expire ( and be re-built automatically ) on May 23rd, 2012 at 3:28 pm UTC -->
