Here is a great technique for intermediate CSS users. I use this technique often for Social Media icons, buttons or any objects that have similar yet different declarations. While this technique works in all major browsers you may have trouble getting this to work in browsers OLDER than IE6. I’ve noticed that WordPress uses this technique as well.

So let’s get the ball rolling. Let’s say we’re going to have 3 squares like below.

Here is the code I used.

.square {
width:30px;
height:30px;
display:block;
border:1px solid #333;
float:left;
margin:10px;
}


<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

Now let’s set up three colors for our squares.

.red {background-color:#f00;}
.orange {background-color:#f39720;}
.blue {background-color:#00f;}


<div class="square red"></div>
<div class="square orange"></div>
<div class="square blue"></div>

How about we make one a circle using CSS3 because that’s how I like to party.

.circle {-moz-border-radius: 15px;-webkit-border-radius: 15px;}

<div class="square red"></div>
<div class="square orange circle"></div>
<div class="square blue"></div>

Here’s how this looks all put together. You can switch the colors or the circle class to any of the three squares.

<style type="text/css">
.post p {clear:both;}
.square {width:30px;height:30px;display:block;border:1px solid #333;float:left;margin:10px;}
.red {background-color:#f00;}
.orange {background-color:#f39720;}
.blue {background-color:#00f;}
.circle {-moz-border-radius: 15px;-webkit-border-radius: 15px;}
</style>
 
<div class="square red"></div>
<div class="square orange circle"></div>
<div class="square blue"></div>


Hope you enjoy this tutorial, it can really come in handy if you get creative. You could for instance make a class called .right and the only declaration could be that it floats the element to the right. If you have any questions let me know in the comments.

I’m pretty sure I can say that at some point you have seen or even been “the gray man” when posting a comment on a blog. I’ve been one on my own blog (sad) and I want to share with you how you can fix this very easily. If you see this “gray man” when you leave someone a comment (see beow) then you don’t have an image uploaded to Gravatar.com (Instructions below)

(more…)

What you need for this tutorial

• Image Editing Software (ie: Adobe Photoshop)
• An average understanding your editing software
• Notepad or other code editing software

I believe this is the best way to create any type of image rollover. Other ways are to use JavaScript but I find this unnecessary because the CSS way is very straight forward and easy to do. A example of this would be my “Portfolio” button I have on the front of my website. You’ll see when you roll your mouse over the button (On the main page) changes from a shade of green to a shade of blue.

Now let’s open your image editing software. I prefer to use Adobe Photoshop because it is the most common editing software available. For this tutorial I am going to be using a button I made when I designed this website.

This image is 222 pixels wide and 57 pixels in height. With the image opened in you edit software we’re going to change the “Canvas Size”. You can find “Canvas Size” in Photoshop under “Image” in the overhead menu.

Now the way I’ve learned to do a proper CSS Image Rollover is to use 1 image for both actions (normal position and hover position). This makes the loading of the images smoother and requires 1 less image. Let’s double the height of the “Canvas” and make it 114 pixels (Original height of 57 pixels X2). Note: Make sure you select the top center box for “Anchor:” so that we are adding the extra 57 pixels of canvas BELOW our existing image.

Make sure this image above looks like what your looking at. Next under “File” in the above menu you want to select “Place” and select the same image you’ve started with but place it underneath using snaps to ensure that it is exactly under neath.

From this point we need to alter the bottom image so that it differs from the image above. I’ve chosen to just make my button green using my original files. You can use some form of “Blending Options” to achieve a different look.

Save your file and put away your image editing software. Now open the page you want to add your button to in your favorite code writing software (ie: Notepad, Coda, Dreamweaver etc). Now lets go to your style sheet or inline styling section and add the few lines of code we need to make this work.

Ok, I’m calling this “.button_folio”, name it whatever you want just remember it so when you write your code you don’t confuse yourself. The height and width are what we want to be visible and since we are telling this to display as a block we wont see anything below 57px of the height. With the background we will be linking to our single image that we created earlier. Note that in background we have “0 -57″ this very important because we’re telling the browser to start this background 57 pixels below what it normally would.

.button_folio {
width:222px;
height:57px;
display:block;
background:url(images/button_folio.gif) 0 -57px no-repeat;
}

This is the final CSS that will tell the browser to move the background position to “0 0″ (which is 57 pixels higher) when you “hover” your mouse over it.

.button_folio:hover {
background-position:0 0;
}

Now to use this new “Class” on your page. Since this is a button and we’re using it to link to a page it only make sense to use this class on a link. Just add the code below to a link before “href” or after the URL.

class="button_folio"

Pow there you go! We made two new classes in a style sheet and called it out on the page. I believe this to be the best way to do this. I’m sure if you are a “text replacement nut” you can add text within the link instead of leaving nothing in between the tag and use a span to indent the text off the screen but I don’t really understand catering to people who don’t use style sheets.

I hope I did a good job of explaining this, this is my first tutorial on here so any feedback would appreciated.