Article 19

Pure CSS Icons, Pure Madness?

By Keir Whitaker @keirwhitaker

10 August 2010 | Category: Uncategorized

Think Vitamin contributor Faruk Ateş recently dropped me a note to let me know about a recent trend he has noticed, that of creating web site icons in pure CSS. Have a look at the following for examples:

In a recent post on his own site called “Pure CSS Icons: Make The Madness Stop” Faruk passionately argues that these “technology demos” are taking CSS in the wrong direction. Sites built using them will be hard to maintain and their use will encourage bad practices that the web community has fought hard against.

What do you think? Have you used them in your work? Would you pay for a CSS icon? Let us know your thoughts.

Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

Sorry - No Related Posts Found

Comments

http://dougneiner.com Doug Neiner

As a person who has participated in the madness, I think the article sounds a little like Chicken Little and “the sky is falling”. Anyone in their right mind realizes that these are a fun expression of the “drawing” capabilities of CSS3, and are not production ready unless IE6, 7 and 8 fall off the face of the earth. For those he referenced that are not, I imagine their “paying” customers will figure it out soon enough when their logo only looks right in a few browsers.

Two things immediately come to mind:

1) Building these CSS only logos is an awesome way to flex your CSS3 muscles and learn about the amazing things coming down the line, most of which will be supported accross the board with the release of IE9. I know for me personally, after building the CSS logos I worked on, I have a better understanding of what is availible with CSS3 transforms specifically. In fact, I coded a design over the weekend that progressively uses CSS transforms to turn an element into a design element instead of introducing another image and possibly HTTP request.

2) To his point about the reusability of the logos, he is completely off base. With em based logo designs, they can not only be reused, but they can be reused at different sizes in different venues. They are fully vector and as such can be used very large, medium, or small without the need for multiple images.

During the process I came across a number of issues facing the use of CSS logos that almost completely negate their use in a production environment (depending on the logo of course). However, that didn’t change the enjoyment I got out of creating the logos nor the CSS3 bootcamp training it provided.
http://antoinerjwright.com Antoine RJ Wright

Maybe not for commercial projects, but these can and should be explored within personal sites and portfolios. Depending on the designer, using these and other demonstrations can help some understand what the person knows and doesn’t know about CSS.

Of course, the best fruit is in the waynthey don’t just take these experiments and redo them, but how they improve and extend them. Most of what we know online is from then layering and experiences of others, and this should be nom different.
http://supercake.co.uk Owen Curtis-Quick

I vote madness. The markup is busier than a swarm of bees.

Markup should only be put in to describe the document and not be put for styling reasons (ideally!). That said, it seems like they’re just playing around though so no need to get too purist. Experimentation is after all is a good thing.
http://www.webdesignrules.nl Ruben Bos

Faruk is absolutely right, but aren’t they meant for showcase purposes or a joke/gimmick?
http://www.digital-results.com/ Russell Bishop

‘XYZ made in PURE CSS3′ is the most frustrating title I see each day.

I understand why people do it; the end product is pretty novel (knowing that each part of it is defined with CSS { } rules) and it’s exciting to know that you’ve manipulated a toolset to perform a task it isn’t traditionally used to do.

But the time it takes to achieve something that is really so trivial makes the whole thing worthless.
http://fellabinaryreviews.com TheFella

To echo some points above, as long as it’s part of a showcase or experimentation, then I think it’s fine. In fact, I encourage this type of thing, as we can then take ideas and slivers of this and employ them in our day-to-day web design.

The problems only arise when people are encouraged to build entire, working websites using these skills, thus giving rise to non-sematic, aggrandised code that only works in a restricted number of browsers.

Addressing the actual use of ‘css icons’ in everyday use, I think this is pretty pointless. Icons are relatively easy to draw, and if you’re rubbish, there are thousands out there that are perfectly acceptable and free. Image icons are the standard and work well in 99% of situations.

People can build their sites however they see fit, and as long as it works for me, I don’t really care how long it takes them to maintain the code; that onus is on them.
http://farukat.es/ Faruk Ateş

Doug, the problem is that already too many people appear not to be “in their right mind” — mostly because our industry is now so large that hardly all of the designers and developers in it are familiar with the struggles we’ve had the past 12+ years. Struggles I’ve personally dealt with; issues I’ve long advocated about together with others (like WaSP).

These CSS3 icons and logos are indeed a great way to learn the technology better; I wouldn’t want anyone to stop doing them. It’s the complete lack of warning that has already caused harm, leading many people to think that these logos and icons are snippets you can use. You say that’s their own loss, but the ripple effects go well beyond just those people. Bad practices in the wild inadvertently teach those bad practices to budding new developers; that’s what I want to avoid.

Lastly, if you want scalable vector graphics for logos—something that I agree is a good thing—you shouldn’t abuse CSS and HTML for that goal: the right tool for that is SVG.
http://farukat.es/ Faruk Ateş

For those wondering or uncertain about the point I’m making: making graphical things with CSS(3) is a perfectly great exercise, for any developer. I highly encourage it—hell, I do stuff like that myself all the time.

The thing that _isn’t_ fine is the lack of clarity that such exercises are what they are: exercises. Technology demos. Not, as the worst offenders even claim to be, production-ready sets of icons you could use in your site.

As soon as someone started trying to sell these exercises as a product, that’s when I knew too many people misunderstood what’s going on here. And that’s why I wrote my piece.
http://robustnessiskey.com Justin Sepulveda

When I tried my hand at CSS logos, I made it a point to find simple company logos that could be easily created and maintained in CSS. The HTML markup was extremely minimal and the CSS wasn’t much of a nightmare. I made sure they were em based as well so if someone did want to implement this idea, they’d know it can grow or shrink with a simple font-size change. I basically tried to find a real world use case for these complicated CSS experiments I was seeing on the web.

I learned a lot from doing these experiments and I don’t think they harmed anyone. In fact, they (for a short while) inspired other designer/developers to play around with the new CSS techniques (just like I was inspired by the ones mentioned on this page). It was fun and it got a few people excited about pushing the shape creating possibilities.

While these logos may never see the light of day in the real world, I think they only help to spark ideas and inspire creativity.
http://robustnessiskey.com Justin Sepulveda

I wrote my reply before your comment was submitted and your position was clarified. I totally agree with you, so I’m sorry if my post sounds like I’m arguing with you after you’ve made your point more clear.
http://desandro.com David DeSandro

CSS icons, even as a trend-gone-awry, provide a tremendous value to the web design community at large. I find contention with several of the points Mr. Ateş makes.

[H]ow usable are these snippets of CSS and markup, really?

Simpler CSS shapes are certainly ready for production. At nclud, we have developed CSS shapes to be reused as tiny pointer arrows. They work in IE6. Looking at specific platforms, say iPhone or Android web development, CSS icons are completely production ready, all set to go out into the real world. Speaking of production ready, Google has heavily leveraged CSS shapes in Gmail and other web apps for years.

The maintenance angle is even more exemplifying of how terrible this practice is.

That’s a matter of opinion. My opinion is that using CSS icons make maintenance especially easy. Take for instance the RSS icon I use in the header of my site. If I want to change the color of that icon, all I need to do is edit a text file through FTP or version control. Now if that icon used a sprite-image, I would need to find the PSD with the original image, open up PhotoShop, revise the image, save the image for web, and upload the new image. That’s more akin to what I would call a “nightmare.” Developing CSS icons are more time-intensive up front, but, in my experience, the initial time investment provides for streamlined maintenance down the road.

You want that icon a little bigger? Tough luck…

As Mr. Doug Neiner correctly points out, resizability can be resolved by using em units.

The practice of implementing CSS icons and ‘Pure CSS [x]‘ as a production-capable practice is still in its infancy. There is merit to warning about the dangers of pushing demos into your production work, but it’s a bit premature to make a blanket statement to avoid CSS icons at all costs for the time being.

Granted, Mr. Ateş isn’t making such an argument. He is (now) advocating that the developers of these icons should display a disclaimer along with CSS icons. Fair enough. But if a developer requires a disclaimer to dissuade her from using CSS icons in production, she probably isn’t considering a myriad of other factors surrounding whether or not CSS icons are an appropriate solution in the first place.

Madness, reign o’er me.
http://www.parisvega.com/blog paris vega

Inspired by this conversation and others, I’ve decided its time to start a new website dedicated to CSS logos. So, earlier today, I ran to GoDaddy.com and picked up the aptly named… CSSLogos.com. Coming soon to an interweb portal near you.
http://mcsanders.com Matt Sanders

It is all about the markup to me. If the markup is sound and contains meaning within the page or app. I’m cool with it. If the markup is bulky and unnecessary in the specific area you’re styling. Please use something else.
http://rathersplendid.net/home/pure-css-icons Zander Martineau

I, like Doug, David & Justin have learnt a huge amount from creating these icons. Creating them was very enjoyable &, like David, I find that maintaining these icons actually isn’t much hassle, but to be honest, the only one that I find myself using again & again is the triangle/arrow shape as it’s so useful & works across most browsers.

I think experimentation is a wonderful thing & it should always be encouraged.

BTW, have you seen the html5 exploding canvas video demos at all? Who would ever use them in a production environment? But people seem to keep making them…
http://farukat.es/ Faruk Ateş

On the idea of changing an icon’s color: sure, this makes sense for relatively simple icons like the common orange RSS one. It does not, however, make sense for complicated icons like the iOS icons. Tweaking those in CSS would be a painful experience again compared to the designer simply delivering a new file or set of files.

As for resizing: in my experience doing such precise designs in CSS, they never quite resize or scale up as precisely as a good designer wants. From my own experience of designing an icon for a product recently, it was very clear that automatic scaling is simply not always desired. And my example is probably an even stronger case for it: the difference between 32 and 36 pixels is very small, but crucially subtle when it comes to individual pixels. And ems are not an ideal tool for those tiny differences under all circumstances.
http://green9media.com Glenn Friesen

Absolutely. The lack of market adoption and the lack of market readiness (enterprise imprisonment in IE) doesn’t mean that designers shouldn’t evolve their skills in CSS-pure design. By the time the demand comes around, there will be a larger supply of talented, practiced, CSS-pure designers. It’s all good, plus is a great test of code/web design skills!
Anonymous

That’s sick!
http://designcloud.net Vector logos

If you intend on using your logo for more than just business cards you print
out on your computer you want to ensure you know your logo is being created
in vector format so you can avoid the quandary Mindi found herself in. So remember, even if your logo looks good on the computer screen it may not look as good when printed, this is especially true when printing a logo in what they call
“large format” printing (banners, etc.).
http://craftshowlistingssite.com Craft show listings

There are numerous ways to go when designing your logo. If you do not feel comfortable creating and designing the logo yourself, there are graphic designers and other freelancers that you can find locally or on the internet who for a fee will design your logo for you and ensure that it makes all the requirements for reproduction in print and look good on the website.

Topics

Learn with Treehouse

Pure CSS Icons, Pure Madness?

By Keir Whitaker @keirwhitaker

10 August 2010 | Category: Uncategorized

Other Posts You Might Find Interesting

Comments

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Advisory Board

Aarron Walter

Ethan Marcotte

Molly Holzschlag

Paul Boag

Jeff Veen

Ryan Carson

Topics

Learn with Treehouse

Pure CSS Icons, Pure Madness?

By Keir Whitaker @keirwhitaker

10 August 2010 | Category: Uncategorized

Other Posts You Might Find Interesting

Comments

Think Vitamin RadioEpisode #34: Amazon Fire and Responsive Roundtable

Advisory Board

Aarron Walter

Ethan Marcotte

Molly Holzschlag

Paul Boag

Jeff Veen

Ryan Carson

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable