sign in


Forgot your password?


Why sign up?
- One account for five websites!
- Free access to Premium Codes
- Acess to cool web tools
- Ask and answer questions
- Stay ahead of other web developers
- and MUCH MORE!

Feel The Power

Html Code: Logos In Pure CSS

This was a purely for fun experiment, heavily inspired by the Twitter logo.
Rendering icons in pure CSS has its advantages. It allows programmers who aren't proficient in imaging programs like Photoshop to create high quality assets. It maintains image quality as it resizes, so it's not lossy on high density displays or zooms. It's readily available for modifications and tweaks, mitigating the bothersome back and forth with opening Photoshop and replacing an entire directory of assets. There are potential performance gains by letting your more than capable browser render a couple lines of code, mitigating additional network roundtrips for image fetching.
Of course, it also comes with some drawbacks. There's no lasso or magic brush tools handy in CSS, so even creating small 16x16 icons will be significantly slower than traditional methods. It will likely break on non-modern browsers. And even on modern browsers, there are often browser specific bugs that cause some fancy CSS rule to malfunction.

Online Users: 7
Total Online Users: 28
Recent Members: BigBadBrian, Vicotron, Angeline, yvan,
Twitter LinkedIn Youtube

Download Link to us:


Please put this code in your page.