CSS Icons for Better Web – Part I

Recently, I have been busy working on several mobile applications – both web and native apps. Most of them was User Centric and app was allowing them to set their own themes. This made my job as a CSS Developer a little trickier as I was using several icons with CSS sprites. Trying to come up with a better solution on how can I get rid of limited opportunity given by image sprites – I made a decision that CSS Icon should play the role here.

Here is why I chose to do the same:

  • Very first, it’s very best for performance as there wont be any HTTP request and
  • CSS icons are modular – we can reuse and remake/style it based on condition.

Today, I am going to share some of very basic icons – that we can create using CSS and use it right away- the way we wanted. This is a series of posts, will be posting more on coming days – more icons with CSS.

Mean time, you can check CSS3 Document Icon, written by me for Nettus+.

Quick Preview

Preview of CSS3 Arrow Icons

Above preview, if you try to produce by using image icon – you gotta use 4 different images. But if you write by CSS, NO IMAGE is required. Even if you need to change the color and you did use image, you will need another set of images with color changed in Photoshop and reusing – causing bit more load to your page. By CSS – you can have as many colors as your want – much more efficient, efficient – that’s why I called it – CSS Icons for better web.

How to  РSteps:

  1. A simple class with border on right & top – no background.
  2. Then Rotate it to different angles (45 for right, 135 for down, 225 for left and -45 for up.)

Lets Do it.

1. Any Element with Class .arrow

<i class="arrow"> </i>

Your CSS

.arrow {
    display:inline-block;
    width:7px;
    height:7px;
    line-height:7px;
    border-top:3px solid #aaa;
    border-right:3px solid #aaa;
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

Now create three more classes with different different rotation and apply to HTML along with the main class.

.arrow-down {
    -ms-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
}
.arrow-left {
    -ms-transform:rotate(225deg);
    -moz-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    transform:rotate(225deg);
}
.arrow-up{
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

Changing the arrow color on HOVER, (See how easy – think what we used to do with images):

.arrow:hover {
    border-color:#444;
}

You can see the final preview here (See in Result Tab):

And Here is a useful demonstration, (using :after pseudo element instead of separate HTML element to keep markup clean and more semantic) (See in Result Tab):

Magnifier Lens Vector Icon

We have a quality freebie for today – coz its time for Friday Freebie. Its a high quality Magnifier lense vector icon, designed beautifully in Adobe Illustrator.

Fact

I hardly remember when I desinged it – might be 3 yrs ago. I was searching in my archieve for a old layout file, suddenly I found this – and thought to share with all of you.

Preview

magnifier-lens-vector-icon

No more talk/salk- download ZIP for AI file.

Download

Oh, yes – do not forget to subscribe our RSS feed for more quality freebies. Like our Facebook Page.

Create Document Icon with CSS3

Nowadays Im working more on mobile web apps. I have encountered many challenging works which I have accomplished with CSS3. Today I am gonna share a nice trick, how you can create a document icon with pure CSS3 only. I am using a single HTML element <a> (you can use your preferred one) to create this icon.

Original link.

Now this post is exclusively available on Nettuts.

Final CSS3 Document Icon

Rating Stars PSD + PNG

Rating Stars, comes in use time to time when conducting user reviews. You might find a lot Rating Stars, so again I say I made something that mathches your theme.

Rating Stars PSD + PNG

I have created rating stars in three color, respectively Gold, Blue and Red Rating stars. Download file contains all stars in PSD file, also exported in PNG Sprite seperatedly. Makign it easy to help you find something that matches you theme.

Happy reviewing.

Download PSD + PNG

Elegant Calculator Icon – Premium Feebie of the day

Its time for very cool freebie and yet a premium freebie. Today we have Elegant Calculator Icon, a very clean and pixel perfect icon.

Actual view (Click on the image to see full view.)

You know, what I’m going to say? ‘Yes’ you’re right. I am going to say, this cool Elegant Calculator Icon is free for you guys. Download contains this Icon’s PSD file, PNG icons of 28 x 28, 64 x 64, 128 x 128, 256 x 256px.

Download Icon

Hope you’re enjoying the ¬†freebies. Subscribe RSS feed for more upcoming Freebies.

More Freebie Icons

Black and Red Application Icon Set

“Aren’t there thousands of icons (definitely free) already for us?” You might be thinking the same. I also did the same, but when it comes to look for your theme matching icons, you need to swim the google like a hell.

Last time I had to work in black and red theme for a sport based website and I found myself suffering to find that kind of icons.

This is the reason behind todays freebies. I created some basic application icons in Black and Red theme. As always you’re free like a bird, use it wherever, whenever, however you want. Sell, package, re-distribute, re-post with back link do what ever you like.

Download Icons
If you’re crazy about modifying icons and using it, consider downloading icons with PSD included,
Download Icon with PSD
You may like to subscribe our RSS Feed for more upcoming good freebies.
Follow me @shekhardesigner, check out our Facebook fan page blog.cssjunction

Similar posts