Neither Graphics Nor Fonts! Icons In Pure CSS3 with One-Div.com

Icons are becoming more and more common these days. Mobile clients are responsible for this trend as icons are most useful in environments where screen real estate is scarce. Icons help you find your ways around without needing too much text (if any). With the rise of higher density screens and rising resolutions it is preferrable to shift away from static icon imagery to vectorized icons that are able to scale to any desired size without pixelation or blurry looks. This requirement has initiated the rise of icon fonts. But wait, there is another possibility with its own advantages. Icons can be designed using pure CSS3 also... Icon Gallery on One-div.com The site One-div.com basically is a gallery of icons realised in pure CSS3. Most of the symbols are typical for frequently needed UI elements, such as connections to social networks or the visualization of different media. As they are pure CSS they only contain one color and are all in all fairly simply designed.

Icons with Source Code and Compatibility Information

Each icon is equipped with three buttons. Clicking these provides you with the HTML code, the CSS source and has it copied to the clipboard automatically. The third button lets you download a package consisting of all the needed sources ready to implement. Hovering over the icons you can check which browsers will show the icon flawlessly, which ones will have issues and which ones will not be able to display it at all. This information is available for Chrome, Firefox, Safari, Opera and Internet Exploder. The creators of the service work hard to ensure compatibilty with Chrome, Safari and Firefox at least. At the time of this writing we can make use of around 80 icons in the gallery. As anyone - after registration - can contribute to the service, we might probably see a lot more icons in the near future.

Animate Your Icons!

The big advantage compared to icon fonts or SVG is the possibility to animate the icons using hover effects through transition properties or putting together a full-fledged keyframe animation via the animation property. The gallery already contains a few animated icons. If you know your ways around CSS you can inject motion into any of the provided icons fairly easily. Just toy around with pseudo elements such as before and after in conjunction with css3 transitions and you should be good to go. Conclusion: One-div.com sure has some useful icons in store, but the best part to the service is the inspiration it offers for your own efforts in creating icons using pure CSS3. Go for it! (dpe)