Pure CSS3 Icons, Logos and Graphics

25 Pure CSS3 Icons, Logos and Graphics

Written by Kenny on February 12, 2012 CSS3
This post listed 25 pure CSS3 icons, logos and graphics. No images and no JavaScript are used to draw these but with CSS and HTML markup.

25 Pure CSS3 Icons, Logos and Graphics

Pure CSS3 Icons, Logos and Graphics

CSS3 is the latest version of Cascading Style Sheets, as known as CSS. We all know that CSS is used to style our web pages to make our sites look nice and attractive. But did you know that CSS can be used to draw image, logo and icon? With the introduction of new CSS3 features, it gives the CSS lovers and designers more flexible ways to draw an image using CSS3.

With this post I have listed 25 amazing pure CSS3 icons, logos and graphics. No images and JavaScript are used but with only CSS and HTML markup. Hard to believe, but true! Trust your eyes and enjoy!

Before start viewing these amazing pure CSS3 icons, logos and graphics, you are strongly recommended to view these showcase using the latest version of Firefox (some icons not working in Firefox), Safari and Chrome. 

 

CSS3 Cherry Blossom

CSS3 Cherry Blossom

CSS3 Cherry Blossom

The results from combination of CSS3 properties based on border-radius, gradients, transitions and media queries. And the most amazing part is it can GROW when you resize your browser.

 

Meowww!

Meowww!

Meowww!

A meowing cat built with CSS only! No graphics and no JavaScript used. But it looks like a yawning cat for me. LOL.

 

iPhone CSS3

iPhone CSS3

iPhone CSS3

That’s right. An iPhone in CSS3 with no images required. The clocks can even running.

 

Apple Keyboard

Apple Keyboard

Apple Keyboard

Amazing! It’s an Apple wireless keyboard built with CSS3. Try press the keyboard buttons.

 

Doraemon CSS3

Doraemon CSS3

Doraemon CSS3

Yes, you’re right! This is Doraemon which drawing with CSS3. It’s looks cute.

 

Android Robot

Android Robot

Android Robot

The Android Robot which built in pure CSS with less HTML markup.

 

iOS CSS3 Icons

iOS CSS3 Icons

iOS CSS3 Icons

Amazing right? These icons are purely created by using CSS with new CSS3 attributes such as rounded corner, shadows, rgba, transforms and etc. No images used!

 

Raindrop CSS3

Raindrop CSS3

Raindrop CSS3

This is an amazing CSS3 raindrop with very nice gradient effects. Unfortunately it only be able to see in Firefox browser (since the creator only use -moz- attribute).

 

Social Media Icons

Social Media Icons

Social Media Icons

Did you know that you could actually create the social media icons without using any images? Here shown the proof.

 

Social Media Icons 2

Social Media Icons

Social Media Icons

Another set of social media icons that created using only CSS and HTML markup.

 

Pure CSS Icons

Pure CSS Icons

Pure CSS Icons

With the power of CSS3 border-radius and rotation attributes, you could easily build an icon like these. Just depend on your creativity.

 

Reddit Alien in CSS

Reddit Alien

Reddit Alien

The Reddit Aliens in CSS. No images, no canvas, just some CSS used. Best results in a modern browser. And the funny thing is the Reddit Alien looks sad in IE. XD…

 

Twitter Logo

Twitter Logo

Twitter Logo

A white bird flies in blue sky. Yes, it is Twitter logo! The creator has put a lot of effort to draw this wonderful logo.

 

Adobe & Photoshop Logo

Adobe Photoshop Logo

Adobe Photoshop Logo

A tribute to Photoshop using just CSS3 without using Photoshop.

 

Colorful Apple Logo

Colorful Apple Logo

Colorful Apple Logo

A colorful Apple logo created using pure HTML and CSS3. No images and no JavaScript included.

 

Atari & Animated Pong

Atari & Animated Pong Logo

Atari & Animated Pong Logo

The Atari logo recreated using CSS3.

 

Bahamas Logo

Bahamas Logo

Bahamas Logo

Bahamas logo drawn in CSS3. This logo use mainly CSS3 rounded corner effect.

 

CSS3 Patterns

CSS3 Patterns

CSS3 Patterns

Getting bored with current background patterns and textures? Maybe you should try this awesome CSS3 Patterns.

 

CSS3 Patterns 2

CSS3 Patterns

CSS3 Patterns

Another set of CSS3 patterns.

 

Internet Explorer Logo

Internet Explorer Logo

Internet Explorer Logo

Do you believe that this is created by CSS and no images included?

 

Opera Logo

Opera Logo

Opera Logo

Now here comes the Opera Logo by CSS3. Is it looks same as the real Opera Icon?

 

Chrome Logo

Chrome Logo

Chrome Logo

This is a new Chrome Logo, but it’s built using CSS3. Cool!

 

HTML5 Logo

HTML5 Logo

HTML5 Logo

HTML5 can’t shine without CSS3!

 

Volkswagen Logo

Volkswagen Logo

Volkswagen Logo

This is the amazing of CSS3!

 

Batman Logo

Batman Logo

Batman Logo

Another awesome CSS3 drawing: Batman Logo.

 

More

Feel amazingly with these CSS3 creations? Plan to create one for yourself? Below is the coding that can be used to create basic shapes using CSS3. Perhaps it can be a fundamental for you to get started with CSS3 drawing! Be creative and learn!

 

.
#square{
	width: 150px;
	height: 150px;
	background: orange; 
}

 

.
#rounded{
	width: 150px;
	height: 150px;
	background: red; 
	-moz-border-radius: 25px; 
	-webkit-border-radius: 25px; 
	border-radius: 25px;
}

 

.
#circle{
	width: 150px;
	height: 150px;
	background: blue; 
	-moz-border-radius: 75px; 
	-webkit-border-radius: 75px; 
	border-radius: 75px;
}

 

.
#triangle-up{
	width: 0;
	height: 0;
	border-bottom: 140px solid orchid;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
}

 

.
#triangle-down{
	width: 0;
	height: 0;
	border-top: 140px solid green;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
}

 

.
#diamond{
	width: 120px;
	height: 120px;
	background: magenta;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

 

.
#parallelogram{
	width: 120px;
	height: 100px;
	background: sienna;
	-webkit-transform: skew(20deg); 
	-moz-transform: skew(20deg); 
	-o-transform: skew(20deg);
	transform: skew(20deg);
}

 

.
#star{
	width: 0;
	height: 0;
	background: yellow;
	border-bottom: 140px solid yellow;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
}
#star:after{
	content: "";
	width: 0;
	height: 0;
	border-top: 140px solid yellow;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	margin: 40px 0 0 -80px;
	position: absolute;
}

 

Final Thoughts

These are the icons, logos and graphics built by CSS3. No doubt, these require a lot of CSS coding just to draw a tiny shape which can be easily drawn by graphics editing tools like Photoshop. But there is nothing wrong with CSS3 icons, logos and graphics, the only concern is CSS3 is not yet fully supported by all browsers such as Internet Explorer.

What do you think? Will you use the icons made by CSS3 purely? Do let us know in the comment form below. And don’t forget to share with us if you’re just baked a brand new CSS3 icon, logo or graphic.

 


» This Might Interest You «

User Feedbacks (4) Share Your!

  • Greate tuto css3 thanks

    2 years ago! Reply
  • Loved the post keep us posted

    3 years ago! Reply
    • Beben Koben

      Yeah, i’m aggree with you \m/

      2 years ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>