There are literally thousands of icon sets out there. Some are free for personal use, some free for commercial use and many are paid sets. We often come across sites that feature great icon sets that they claim as “free,” with no explanation as to whether they are personal or commercial licenses (they are often only free for personal use).

To clear things up and provide icons that you can actually use for your projects, we have compiled our own list of only the best icon sets that we could find that are all completely free for COMMERCIAL use. Enjoy!

E-Commerce Set:

License (from the downloads page of their web site):
“Available e-commerce icons may be used in any projects, whether commercial or private nature. Please refer the ZIP archive with shop symbols not directly, but I would appreciate a link to this post. Thank you.”

Download it now! http://playground.ebiene.de/2316/free-ecommerce-icons/

Circular Icon Set:

License:
“Circular is free to use for whatever you like without attribution – the only thing we ask is that you don’t distribute them yourself!”

Download it now! http://prothemedesign.com/circular-icons/

Stationary Icon Set:

License:
“100% Free”

Download it now! http://www.dezinerfolio.com/freebie/stationery-free-vector-icon-set

Bright Icon Set:

License:
“You can use Bright! for personal and commercial projects at free of charge. What I only need in return is your comments and backlinks, if possible. Do not redistribute or sell any icons of this set. Do not provide the direct download link nor upload Bright! onto other servers for your own share (Please link to this article instead – I deserve some traffic!).If you want to spread the words, just link to this article.”

Download it now! http://min.frexy.com/article/bright_a_free_icon_set/

Project Icon Set:

License:
“completely FREE… (even commercial use)”

Download it now! http://www.dezinerfolio.com/freebie/project-icon-set

Shiny Icon Set:

License:
“This free set includes 20 icons that you can use for both personal and commercial projects. Resell and distribution is not allowed.”

Download it now! http://www.doublejdesign.co.uk/2009/11/a-free-icon-set-shiny/

The Ultimate Free Icon Set:

License:
“You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.”

Download it now! http://www.smashingmagazine.com/2009/06/18/freebie-release-quartz-icon-set/

As with any other freebie, we highly suggest reviewing the license on these sites directly as it may have changed since this article was written. If you catch one that is no longer accurate, do let us know!

We’d love to hear about your favorite free (commercial) icon sets, leave us yours in the comments!

Like all good web developers over the last nine or so years, we have dedicated countless hours to ensuring compatibility with the archaic, standards-naive Internet Explorer 6. Well, here’s where we make our stand. While we are not, at this point willing to jeopardize the visitor experience for our clients by building company web sites that are not IE 6 compliant, we are officially cutting the cord on our own DynamiX Labs web site.

Why Kill IE 6?
Quite simply, because it simply can’t handle most of the great advances that have come along over the past nine or so years. This includes PNG transparency (yes, it SORT OF works with hacks, but not well, and almost never properly for backgrounds), not to mention any hints of HTML 5. Even such simple areas as fixed positioning are a challenge for IE 6. The point is, IE 6 is forcing web designers to lower their standards, and to not push the envelope in advancing newer technologies. If a designer has a feature in mind that will be a really great addition to a new web site, but will take a great deal of effort to complete, they are likely to bypass it completely if IE 6 can’t handle it through hacks. That’s a shame. So let’s stop the stagnation and keep pushing the envelope, and leave IE 6 behind where it belongs.

The Back Story.
Recently, this site was recreated from the ground up with a brand new design. We spent a lot of time making it look good in standards compliant browsers, only to find that IE 6 (naturally) was a mess. So, after several hours of attempting to make the design appear as it should in IE 6, we had had enough.

What We Did.
We created a small piece of PHP that checks to see what browser, and what version a visitor is using to visit our web site. If using anything other than IE 6, the site will render as normal. But, if a visitor does navigate the web site from IE 6, they will see a completely different header, footer and design (stylesheet driven), in fact the original design that we have had in place for the past several years. In other words, IE 6 is doomed to forever live in the past, while better browsers will continue to move forward as we do.

The End Result.
Here’s how the site appears in Internet Explorer 6:

For anyone still browsing our site in IE 6, here’s what you are missing out on:

More Reading.
For emphasis, we added the code from http://www.ie6nomore.com/ onto our IE 6 version, letting visitors know that they could be getting so much more than what they are. I encourage all designers to implement this code on their non-client web sites. The time will certainly come when this should be implemented universally, but let’s get this process moving on our own web sites for the time being.

If you have a client who is of the same mind about IE 6 and is willing to add this to their web site, all the better, but we don’t suggest forcing this on your clients.

Big Red Disclaimer:
Yes, we know that there are some companies who have had IE 6 forced upon them. For these people, we’re sorry, but it’s time to start pressuring your IT guys to at LEAST allow you use of Firefox, Safari or Chrome in addition to IE 6. There should be no excuse to only allow Internet Explorer 6, particularly since programs that allow multiple versions of IE have been around for years now (see http://tredosoft.com/Multiple_IE for a great XP-based one). There’s even a hack for Vista users. So, the question to ask your IT guys is, WHY only IE 6?

Looking forward to the comments and criticisms!

Rounded corners are still as popular as they ever have been, but many designers don’t know how to easily create these using Photoshop. Today we are going to create a template that you can adapt as desired, and show you exactly how we made it in four easy to follow steps.

Here’s how our final document will look:

Step 1: Open/size your image.
For our example, we chose 550 pixels by 290 pixels. For ease of working, we recommend making the document a little bit larger than your intended end result. Here’s how ours looks:

Step 2: Add a rounded box.
Use the “Rounded Rectangle Tool” to create a box around the portion of your image that you would like to capture. Be sure to adjust the radius to suit your rounding desires. We set ours to 25 pixels for this example. Your document should look similar to this:

Step 3: Positioning and layer order
Position the rounded box where you would like it, then drag the layer underneath your image within the “Layers” tab. Your document should look similar to this:

Step 4: Create a clipping mask
Here’s where the fun begins, and where your work ends (unless you just want to add some finishing touches). Simply right click on the image layer, and select “Create Clipping Mask.”

Your document should now look like this:

Now, you can easily add more life to this image before you save it, but the basics are covered. Want to get more creative? You can add more layers, text and even style the rounded area itself through the “Layer Style” window.

In our example .PSD file, we have added in a semi-opaque left hand content area, and added some example text. We also added a stroke and drop shadow to the rounded shape, and used Images – Trim to remove the whitespace around our image. Want to know exactly how we achieved any portion of this .PSD? Leave us a comment below!

This one’s very easy, but it’s a great way to quickly increase the visibility of your bolded items.

Let’s say you have a gray color for your site’s font, but you want to make every bold item stand out in solid black. You could add unnecessary code such as <strong style="color:#000">BOLD</strong>

But that’s neither clean nor necessary. Instead, you can apply this directly to all instances of bold with css.

Just add this to your stylesheet:
strong{color:#000;}

Now, you will see that the bolded items stand out much more when compared to the rest of your text.

Of course, you aren’t just limited to changing the font’s color. For example, we have defined the strong tag as a block element when used within certain divs. This provides us with a way to make each strong tag fall on it’s own line, without having to add a<br /> tag. To do that, simply use this code:
#YOURDIVNAME strong{color:#000;display:block;}

You can see an example of this in action by viewing the source code of DynamiX Web Design under the “what makes us different” area.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
Thank you for taking the time to read one of our articles. If you still find yourself stuck, we’d be happy to lend a hand. Simply leave us a comment below, and we’ll do our best to help you out. Found something that we’ve missed? We’d love to hear it.

NOTE: Depending on your application, you may find our more recent article, Create Rounded Images in Seconds! more useful.

We’ve all seen them, images with cleanly rounded edges. But, if you haven’t spent some time in photoshop, you may not know exactly how to go about creating these effects yourself in a way that’s straightforward, and doesn’t require the use of a plug in or action.

We’ll start with an image. Now, we have scaled this one down a little so that it will fit on our page, but yours can be any size.

Here is ours:

Next, we will (using photoshop) select the Rounded Rectangle Tool. You can select anything you want for the radius (this controls how rounded your edges are), we chose 30px. Drag and create your rectangle over the area you would like to make rounded. If you are trying to create a perfect square, you can hold down shift as you drag to keep the proportions intact.

Here’s where we are now:

Next, making sure that the vector layer is selected (click on your shape in the toolbar until you see the small white border around it, as in our image above) click on “Fill” and change this value to 0. You should now see nothing but a thin white outline where the box once was visible. Move the box around a little if desired to get it perfectly around the area you wish to copy.

Here’s how it should look:

Next, select the “Paths” tab, you’ll find it just to the right of “Layers” and “Channels” on your toolbar. You’ll see a small icon on the right hand side with three horizontal lines. Click on that icon and select “Make Selection.”

Press OK at the next screen prompt.

Next, click “Edit” in the header menu and select “Copy Merged.” Open a new document and press paste, or paste directly into the current document. Your end result should be a nice, clean and clear rounded image.

Here’s what we have to show for our work:

Compatibility:
This method requires Adobe Photoshop or similar.

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an a

Our sister article, entitled creating proper mouse-over borders explains how to add a clean border around an image link on hover, without the all-too-common and undesirable “jump” effect. In this article, we will explain in detail how to apply a border INSIDE an image itself, for those situations where an image may be displayed up against another element, or where a hidden margin would not be appropriate. Before we get started we should warn you that this technique is not (at this time) IE 5.5 friendly, but does work in Internet Explorer 6, 7, Firefox and Safari just fine. On to the code!

First, we will create the div to encase our image link. In contrast to our original mouse-over borders article, this one will not include the image within the div (we’ll explain this in just a moment). We will continue using the image of our furry friend for this article, and here’s the code we’ll start with: <div class="catwidth"><a href="#"></a></div>

Now, instead of adding the image directly into our div, we will need to define this image in the background of the div that we are using. If you are only planning on using this code in one place, you can simply use this css to do it:.catwidth a{width:130px;height:130px;border:0; background-image:url(images/cat.jpg);display:block;}
.catwidth a:hover {border:3px solid #5f9215;
width:124px;height:124px;background-position:center;}What we have done here is told the browser that we have a 130 pixel image link, but on mouseover we would like it to remove three pixels on each side (to 124 pixels), replacing it with a three pixel border. Now, the way we get around the image jumping and becoming displaced is by adding background-position:center, which orders the browser to maintain the same position for the image, even if it has been clipped on all edges by three pixels. Make sense?

Here is our end result:

This is great for one image, but let’s say that you have three different places on a page that you would like to apply the same effect to. You could create three distinct classes, but a much easier method (if all three images are the same size) would be to simply change your div code to look like this:<div class="catwidth" style="background-image:url(images/second-image.gif);" ><a href="#"></a></div>

This will override the image defined within your stylesheet, and render second-image.gif in its place. As we mentioned, this will only work if the images are all the same size. This is because, while we can define width and height just fine within the style variable of our div, we can’t define what will happen on mouseover. So, we could add an image at twice that size and declare as such in our div, but as soon as the image is moused over it would go back to what is defined within the stylesheet.

Compatibility:
This method has been tested in and is compatible with Internet Explorer 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac). Note that at the present time, IE 5.5 is not supported.

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

Recently, we have noticed a number of prominent web sites that suffer from an all-too-common problem: jumping or displaced mouse-over effects. For an example of what we’re talking about, run your mouse over this image:

What’s happening here is that a border (in this case a solid, 3 pixel border) has been applied to this image on mouseover, but has not been applied (and also not accounted for) before the mouseover.

Simply put, the problem is that when a visitor runs their mouse over the image, it not only adds the border, it also shifts the content around it in a jerking motion.

Note: The code above has been modified to be Internet Explorer 6 compliant. IE 6 has trouble properly assigning a border around a linked image tag without a sort of “call to action,” something that compels the browser to change the border option. Luckily for us, the first option we’ve outlined below not only fixes the image “jumping” issue, it also forces Internet Explorer 6 to do what it should. Our second option (below) accomplishes this with the addition of one short line of code.

Fix #1: Create an “invisible” image border

There are a couple of easy ways to fix this, depending on how your site is designed. If you have a site with a solid content background color (like ours), you can simply add a border with the same color code as your content background to the standard image link, like this:

The code we used to fix the problem is here:.catfixed a img{border:3px solid #fffaef /*this is the background color of our site*/;}
.catfixed a:hover img{border:3px solid #5f9215 /*our desired mouseover color*/;}Obviously, you can remove our notations before using it on your web site.

Fix #2: Creative use of margins

The first fix works fine if your site has a consistent background color, but what happens if your site has a background fade, or you want to apply the same style to items in different locations (with different colored backgrounds)? Instead of making multiple classes to accommodate each area, or resigning yourself to having a “jump” each time a visitor mouses over the affected item, we can simply replace our standard border with a margin instead, like this:.catmargin a img{margin:3px;border:0;}
.catmargin a:hover img{border:3px solid #5f9215; margin:0;}
.catmargin a:hover{margin:0; /*fixes IE 6*/}Don’t forget to zero out your margin on the image hover, or you will end up with the same jump that’s shown at the top of this article. Take a look at how this turns out, this time applied within a box that holds a background gradient.

Notice how the area around the image is still transparent, but there is no jump when the visitor mouses over the image.

Compare this to the first method under the same circumstances and you will see what we’re talking about here. To make the effect more obvious, we changed the initial, “invisible” border to a dark red:

Taking it further.

Now, there are ways to get a little more creative here, such as what CSS Design Yorkshire has done with the image links on their home page. In this case, the image jumps 1 pixel to the right and bottom, while keeping the content to the left and right intact. That last part is key, because it keeps what should be in focus emphasized, not the content that falls outside of the hover area. The text immediately below the image link jumps by 1 pixel as well, which serves as a light accent and an effective way to draw attention. The white-to-orange color choice also works well in this situation. Note that on this particular web site, the effect is not apparent in IE 6.

The point is, were this site to simply assign a border to the image on hover, the content all around the image would jump, making the site look unprofessional. But they took the time to do it right, and having a controlled, slight “bounce” as in this example adds emphasis to the item.

If you are interested in creating a mouseover image that has an inline border (one that does not increase the overall width or height of the image area), take a look at our sister article entitled creating an inline css image border.

Compatibility:
Both methods have been tested in and are compatible with Internet Explorer 5.5 and 6 (see above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

Our sister article, using simple css to create a great looking site shadow tells how to use three simple png images to create an attractive site shadow. For those who aren’t quite sure how to accomplish this, we will go step-by-step in creating a shadow. Want to skip some of these steps and start with our shadow template?

In that case, you can safely skip to Step 6. For those who would like to know how we got our end result, here’s how we did it:

Step 1: Creating the images.

First, let’s create a 900 x 500 pixel image. This will be your background area, and will be a backdrop for your shadow.

Next, create a second image at 760 x 300 pixels. This is where we will apply the shadow.

Step 2: Setting the stage.
Now that we have our two images, we need to set up our primary image. First, let’s do a “Select All” on your 760 x 300 pixel image. Next, select “Copy” (Control + C), choose the original, 900 x 500 pixel document, then Paste (Control + V). To differentiate the two layers, I added a light blue background color to the primary layer. If you add a background color, your image should look similar to this:

Step 3: Creating the shadow.
Next, right click on your top layer and select “Blending Options.” Select the “Drop Shadow” option and configure. Our only recommendation here is that if you would like the shadow applied in a uniform fashion, modify the “Distance” variable to be zero. Otherwise, the look of this is all personal preference.

Step 4: Trimming the background.
Once you have the shadow just the way you’d like it, it’s time to trim the remainder of the background image away. This is simple to accomplish using the “Trim” feature. Simply navigate to the “Image” drop down and select “Trim,” then press enter on the screen that follows.

Step 5: Preparing the final image.
Next, we want to prepare the image for slicing. We prefer to reduce the fill level to zero on the shadow layer so that only the shadow is visible (this prevents the possibility that visitors will see undesired white space if the shadow becomes misaligned in their browser), but you can skip this if you would like. To set the fill level at zero, simply select your shadow layer, click on the “Fill” slider and reduce to zero.

Finally, we want to convert this layer to a smart object. To do this, simply right click on the shadow layer and select the “Convert to Smart Object” option.

Step 6: Saving the files.
Within the final download file we have created, we added in two image slices to make your job easier. Without those it’s not much harder, just be sure to select the entirety of the shadow just above where the layer begins, like this:

Paste this image into a new document (use the default sizes it creates), and turn off the background on this new image. Save this as a PNG-24 file and name it whatever you’d like, we chose the name top-shadow.png. To make your life easier and ensure that the header and footer shadow are exactly the same, I would recommend next flipping this image vertically (see below), and then resaving as bottom-shadow.png (your post-footer shadow).

Last but not least, select a 1 pixel tall region roughly in the middle of your shadow image (make sure to select the entire width of the image), then copy and paste this into a new document, remembering to turn off the background image. Save this as shadow.png.

You’re done!
Now, to learn how to apply these images to your web site using some very simple CSS, check out our sister article, entitled using simple css to create a great looking site shadow. You can also see the end result of that tutorial right here.

Compatibility:
As this is not technically a web tutorial, there are no compatibility issues between any browsers. It should be noted, however, that this tutorial was created for and using Adobe Photoshop CS3 for Mac. PC users and those with an older version of Photoshop may notice subtle differences between what is shown here and what appears on their application. If you get stuck, just leave us a comment and we will be more than happy to clarify for you.

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!

This is a highly requested feature, and one that people often have a lot of trouble with. Before we go any further, Internet Explorer 5.5 and 6 are not compatible with this method, BUT we do have a simple and clean way of degrading for these browsers so that no one is the wiser.

Step 1: Creating the fades.

Depending on the width of your web site, the colors you have chosen and how profound you want your shadow to be, you may need to create your own shadows in Photoshop (for instructions on how to do this, visit our sister article entitled creating a clean png site shadow in photoshop). In this case, I have created a standard, 760 pixel shadow that should work out of the box on any similarly formatted web site or page.

Step 2: Creating the CSS

First, let’s cover what you’ll need to add into your stylesheet:
#shadow {width:784px; background: url(images/middle-shadow.png) repeat-y;margin:0 auto;}
#shadowtop{margin:0 auto;height:12px;width:784px;background: url(images/top-shadow.png) no-repeat;}
#shadowbottom{margin:0 auto;height:12px;width:784px;background: url(images/bottom-shadow.png) no-repeat;}And here’s where the Internet Explorer 6 fix comes in to play. You will need to create a new stylesheet named ie.css (or whatever you want, just be sure to modify the code below if you change the name), and add this code into it:
#shadow{background-image:none;}
#shadowtop{background-image:none;}
#shadowbottom{background-image:none;}Next, add this into the HEAD area of your web site (making sure that it’s placed below your standard stylesheet):
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->This will tell Internet Explorer 6 (and below) to ignore the shadow effect. To learn more about what this code snippet is actually doing, check out our article entitled how to create IE specific stylesheets. If you have a solid background color, you can substitute the png files with gifs (with the proper background color embedded) in your original stylesheet, and bypass this step altogether. You can also try one of the many javascript solutions out there, designed to force compatibility between IE 6 and png transparency.

Step 3: Applying the code:

Now to pull it all together. In most circumstances, it’s as easy as adding this to the header:
<div id="shadowtop"></div>Next, add the main shadow DIV to the site, so that it encases the entirety of the design. You can do this just by adding: <div id="shadow">just before your “content” or “wrap” DIV (whichever DIV defines the width and location of your site), and closing this at the end of the page, just after your site footer.

Finally, add this code to the very bottom of your site, below the ending DIV you created for your main site shadow:
<div id="shadowbottom"></div>

Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5 and 6 (bypasses fade technique), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!