8 ms·
Demo: Pure CSS GUI icons, no images (experimental).
- marknutter 16y agoAnyone else getting sick of seeing "you should follow me on Twitter" everywhere?
- damncabbage 16y agoDustin Curtis may have a lot to answer for. http://dustincurtis.com/you_should_follow_me_on_twitter.html http://dustincurtis.com/you_should_follow_me_on_twitter.html
- tomjen3 16y agoCargo cult twittering?
- benjoffe 16y agoI wonder if the results were more due to the face that the sentence itself is longer, rather than the specific words used (a longer sentence being a larger target for the user's eyes to land on).
- silentbicycle 16y agoHe addresses that in the post. Phrasing it as other long sentences fared comparatively poorly.
- wakeup 16y agoThis only shows how retarded most human beings are.
- gbhn 16y agoYes, everyone uses this formula now. It's annoying.
- GHFigs 16y ago"People should stop asking me to follow them now."
- necolas 16y agoYes, I have too. It's already been changed in my local build, just holding off on pushing a raft of updates until something else has gone live.
- corin_ 16y agoI don't like being told to follow, but I'm more than happy to be given a link to their account.
- nchlswu 16y agoPretty interesting how this has been picked up by so many, and now, at least to some is getting annoying. I presume Dustin's audience is very "niche". They were responsible, if you will for the conversion results in his article, and after the article are annoyed by it.
- phlux 16y agoI KNOW -- I was just tweeting about this! Seriously - go check out my twits. /s
- nirmal 16y agoOn my blog I use "Have a comment? Contact me on Twitter or email me." with links for "Twitter" and "email me".
- dcurtis 16y agoYes. You should stop using "You should follow me on twitter".
- chrisbroadfoot 16y agoWow, a really nice experiment. I'm surprised you created so many.
- Maro 16y agoWhat are the pros/cons of using CSS instead of images?
- deleted 16y ago[deleted]
- niels 16y agoEasily change color and size...
- synnik 16y agoPerformance -- even if the CSS is the same size as the image, a single CSS file can return all the icons with a single HTTP request, vs having to make separate requests for each image. Even with CSS Sprites, there are two requests - one for the CSS, another for the sprite image file.
- andrewnez 16y agoYou can embed images directly in css with data URIs as well: http://css-tricks.com/data-uris/ http://css-tricks.com/data-uris/
- kree10 16y agoTo see something like this in action, this HTML Mail.app clone demo (that I'm pretty sure hit the HN front page several months ago) uses data URIs for all its icons: http://ukijs.org/mail/index.html http://ukijs.org/mail/index.html
- csomar 16y agoCSS Sprites should be better, though. Less computer processing power.
- necolas 16y agoYou can avoid the extra request for an image using a data URI - http://www.phpied.com/data-uris-mhtml-ie7-win7-vista-blues/ http://www.phpied.com/data-uris-mhtml-ie7-win7-vista-blues/ The main advantage of CSS is that you can change the color and appearance of components without using a graphics package, and they might scale better. But that's about it. It was a technical exercise rather than a proof of concept. The icons themselves are very simple and limited. I wouldn't recommend using CSS in this way for production work (other than perhaps for very simple arrows).
- eiji 16y agoNice! However, "Help" and "Warning" need another iteration ...
- mynameisraj 16y agoNow, I realize this is a demo, but aside from that, I really don't think things like this should be used in a final product. Why? CSS wasn't made for this. We have SVG for graphics like this. This is a demo, yes, and it's great to demonstrate the capabilities of CSS for making small graphics, but in practicality, I don't see the point. The key problem is graceful degrading- there simply is none here. Regardless, I love seeing things like this, and he's done a good job. Good work.
- necolas 16y agoI completely agree that it isn't something to be used as a replacement for sprites or SVG. I tried to make it clear that it's nothing more than a technical exercise that I hoped to learn from. Hopefully others will pay attention to that fact and avoid plaguing the web with 'css icons' when there are better (and easier to use) tools for the job.
- blasdel 16y agoYou're right, people will just continue to plague the blogosphere with posts about how they laboriously drew yet another piece of vector art in 'pure' CSS.
- phlux 16y agoNaive question: Wouldn't this make rendering of pages over slow connections much faster if compression is used?
- mike-cardwell 16y agoMaybe, depends on the size of the CSS. You could just use real images encoded into a data: uri for the same effect.
- chopsueyar 16y agoBut, what if I need to create Homer Simpson? http://www.loleg.com/blog/2008/04/17/6758/ http://www.loleg.com/blog/2008/04/17/6758/
- kellysutton 16y agoWe use a pretty nifty technique that isn't CSS for rendering icons on the blip.tv HTML5 player. Depending on the context, we use a <canvas> tag to display either the vectorized or rasterized version of the icon. For the player itself, not a single image request is required for the thing to draw. And we don't run into the nasty anti-aliasing stuff you see with small icons and <canvas>.
- bgrins 16y agoCan you explain this a little more? Do you load the rasterized image using a base64 url, or do you store specific drawing instructions in JavaScript (lineTo, moveTo, etc)? For the vectorized icon, do you load SVG inside canvas, or just display SVG directly? Also, how do you fall back for older browsers that do not support Canvas or SVG?
- huadie 16y agoYour satisfaction is our eternal pursuit. ( http://www.onseeking.com http://www.onseeking.com ) We specialized in the exportation of sport shoes and other products(clothing, bag,sunglasses,watches,belts,etc )which have great enjoyed popularty in the world market Many of our goods are on sales ,we can guarantee the crediblity by Pay-pal and delivery time .we would like to make a long termship. 1)Name : The perfect gift. 2)Grade : AAA+ 3)Package : in original boxes 4)Color : various 5)MOQ : 1 pc 6)Payment : Pay-pal/Western Union / Credit card/Moneygram 7)Ship-ping : 4-7 days with guarantee of customs clearance, drop shipp-ing is accepted to customers'demands. 8)Who-lesale: very low price, you can make a small order first to test quality and service. ( http://onseeking.com http://onseeking.com ) Online Contact . thank you.
- pak 16y agoUgh, too clever for my taste. I would hate to edit icons that are a mish-mash of CSS backgrounds, rotated boxes, and border-radius'ed edges, and to boot, based entirely on pseudo-elements. (Current web dev tools like Web Inspector in Chrome/Safari, etc. aren't well built for examining pseudo-elements.) This CSS uses ~3-4 pseudo-elements per icon. It's clever for doing that to preserve the markup and avoiding JS, but it's hard to understand. Maybe it would help to comment the CSS so designers can see that "this is the handle of the trash can, this is the left side of the heart," etc., since :after and :before are hacked far beyond having any semantic meaning.
- necolas 16y agoAs pseudo-elements, :before and :after don't have any real semantic meaning. But yes, it is a complete abuse of pseudo-elements that isn't immediately understandable. There are some more practical and simple pseudo-element hacks too - http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ http://nicolasgallagher.com/multiple-backgrounds-and-borders...
- pak 16y agoEh, some pseudo-elements have semantic meaning. My best example of this would be :link, which distinguishes between hyperlinks and bare anchors. I would typically associate :before with styling that happens visually before an element, and :after the opposite, but they have been both used here to provide for an icon before the element.
- bgrins 16y ago
- equark 16y agoFor monochrome icons, using font-face seems like a better idea than CSS. You get a ton of icons in one cacheable packet and can easily change the color, drop-shadow, opacity, etc using standard css. http://somerandomdude.com/articles/design-technology/font-embedding-icons/ http://somerandomdude.com/articles/design-technology/font-em...
- bryanh 16y agoReminds me of: http://somerandomdude.com/projects/iconic/ http://somerandomdude.com/projects/iconic/, a set of icons done in @fontface.
- tbgvi 16y agoI also like the Pictos icon set, it has a set done in @font-face (in addition to standard PNG/vector sets). http://pictos.drewwilson.com http://pictos.drewwilson.com
- lovamova 16y agoHere are mine: http://lucianmarin.com/peculiar/ http://lucianmarin.com/peculiar/
- mxavier 16y agoIt's interesting to see these icons and actually recognize what sites already use them. For example, I believe OKCupid uses several of these icons in their GUI such as the report flag, edit, views, etc.
- Sephr 16y agoThe ideal solution (neither SVG or CSS) should be to use appropriate Unicode characters, of which there are very useful ones added in Unicode 6.0. The very first icon, "search", can be done with U+1F50D LEFT-POINTING MAGNIFYING GLASS. Of course most users will not have appropriate fonts installed for comprehensive Unicode 6.0 coverage, so you should deploy a custom font using @font-face that suits your site. For example, the search box on my personal website uses LEFT-POINTING MAGNIFYING GLASS and a custom font I made that defines a simple magnifying glass much like the one in this demo.
- mike-cardwell 16y agoThat sounds like a miss-use of fonts to me. Why isn't the ideal solution a GIF?
- nym 16y agoHave you heard of the font "Symbol"?
- mike-cardwell 16y agoStill seems like a hack to me
- Sephr 16y agoDo you mean Symbola, a Unicode 6.0 font? And yes, but it has elaborate characters that only look good at 40px+. I wanted a much more simplistic style, so I made my own U+1F50D. Edit: Oh, you meant some unsemantic font.
- rimantas 16y agoHow does your GIF scale?
- mike-cardwell 16y agoGood enough.
- 16y ago
- slowpoison 16y agoGreat! This is a fun visual test for verifying browser's CSS transform functions.
- samratjp 16y agoThat's cool. If you're a Raphael js fan, this is even cooler - http://raphaeljs.com/icons/ http://raphaeljs.com/icons/
- kang 16y agoThis has no practical use. This is geeky. I love it!