Graphic and icon design generated by CSS3 code

Web page Production WEBJX article introduction: these logos and logos made with CSS3, it's very bull!

The logos and icons in this article are made from CSS3, it may seem incredible, including IE icons, site icons, Olympic logos, and so on, all of which are very common signs, all of which are so especially because these logos and icons are only displayed on the Web page with CSS3. Rather than a picture display.

Despite being criticized for being obsessive, CSS3 addicts are still trying to implement a variety of graphic and icon designs based on pure CSS, and if you see the beautiful icons described in this article, you will never believe that they are entirely generated by CSS3 code. Especially the set of IOS icons designed by Louis Harboe, the subtle colors and textures that really are unbelievable.

Olympic Logo

Name: Doug Neiner
Purely CSS, EMS based and dynamically scallable. It also requires a browser capable of rendering border-radius . For now, includes recent versions of Chrome, Safari, Firefox and Internet Explorer 9.

jQuery Logo

Name: Doug Neiner
We all know jqery. Probably most of us, favorite JavaScript framework. Logo rendered mainly using property border-radius .

jQuery UI Logo

Name: Doug Neiner
jqery UI icon. Not as popular as framework brother, but worth being interested in. Similairly, made using property border-radius .

impressive CSS logo replications

Name: Justin Sepulveda
Nice piece of icon set. All made with pure CSS and use border-radius , gradient transform properties. It's nice to the people come up with such amazing replicas. awesome!

Opera Logo

Name: David Desandro
Nicely made Opera icon. Extensive usage border-radius of, gradient could provide this extensively awesome. Logo doesn ' t look at the same on all browsers and especially on IE. Ie.

IOS Icons

Name: Louis Harboe
Great work. Advanced CSS3 involved.

Simple CSS Icons

Name: Zander Martineau
I didn ' t know making triangles out of css2 is possible, till this article. Here's a can find some pretty and simple stuff like RSS icon, heart icon or triangle.

Pure CSS animated 3D Super Mario Icon

Name: Andreas Jacob.
Made by and CSS3 & the CSS 4D Framework by Andreas Jacob. Animation work is decent but for now works in Safari 5.

Some Nice icon made with pure CSS

Name: Andrew Kelly
Gradients, Shadows and rounded borders used. Nice final effect.

Adobe Photoshop Logos in CSS3

Name: Radu Chelariu
Great use of gradients and amazing footer. No Images used!

Ten Amazing social media icons!

Name: Nicolas Gallagher
All examples with simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.

peculiar CSS icon set

Name: Lucian Marin
Peculiar is icon package made only in CSS. It is created for sites and Web applications this depend on fewer HTTP requests as possible or don ' t need to the any imag E at all.

Twitter icon in only CSS3

Name: Giacomo Bartoli
Obviously used @font-face with little shadow and rounded borders.

Go Transit CSS Logo

Name: Collin Henderson
CSS only logo of Canadian transporter. Simply done with the use of border-radius .

Internet Explorer CSS icon

Name: Andreas Jacob.
Best viewed with Firefox 3.6+ & Safari 5. Radial, linear gradients, shadows and lots of empty elements.

Nintendo Icons

Name: Drew
Mario Mushroom, the Triforce, a pokéball, and Kirby made with pure CSS.

Back to the future CSS Logo

Name: Lucas Garron
This logo and the original one. Unbelievably alike. Best viewed in WebKit browser.

raindrop CSS Logo

Name: Sean Martell
Amazing replication of Mozilla ' s project I like.

Bahamas CSS Logo

Name: Forestmist
Impressive replica made with the use of border-radius .

Reddit CSS Alien

Name: Matthew James Taylor
Nice CSS logo made with the use of "O O _ () () o o o/–o o o o o () ()" and some font-styling.

Social Media Pure CSS icons

Name: insicdesigns
Just Another social media icons with the use of CSS3.

Bonus:iphone in CSS3

Name: Jeff Batterton
So, that's not a icon, but work involved in this one is really insane. Extensive use of CSS3.

bonus:twitter Fail Whale

Name: Jeff Batterton
So, that's not a icon, neither logo. It ' s really good illustration made only with CSS. No Images whatsoever!

bonus:lost–animated CSS3 Logo

Name: Marcos Esperon
This example animation plays nerdy title in the introduction of the series Lost (a tribute to its completion). Best viewed in webkit browser.