Creating Sharp Gif Rollovers in CSS3

2 posts / 0 new
Last post
MarlyManning
Creating Sharp Gif Rollovers in CSS3

I wanted to develop some simple transparent Facebook and Twitter badges that would change color on mouseover controlled only through CSS3. I found a really good, simple, elegant solution here: http://www.designmeme.com/tutorials/cssrollovers/ (I have no connection to the author.)

Here's the HTML code example:

<div class="rollover">
<p>
<a href="#"><img src="stuart.gif"
width="32" height="32" border="0"></a>
</p>
</div>

and here's the CSS:
<style type="text/css">
<!--
.rollover a { display:block; width:32px; background-color: #FFFFFF}
.rollover a:hover { background-color: #990000}
-->
</style>

It is very simple, elegant and compact. See: http://www.designmeme.com/tutorials/cssrollovers/ for details.

But I was really disappointed in the poor quality of the gifs produced from Photoshop CS5 - small type was very jagged and almost illegible.

Yes, I know a lot of people bad mouth gifs but they offer good transparency and wide browser support in small sizes. Remember the iPad doesn't run Flash.

Here's the solution: design your graphic two to three times the final size in PhotoShop at 150dpi and then resize it to the final size at 150dpi. Then save it as a gif with no dithering and an matte.

The results will be a great deal cleaner and clearer than designing in 72dpi in the final size.

Please let me know how this works for you!

   

MarlyManning
Re: Creating Sharp Gif Rollovers in CSS3
I should add I used the PhotoShop CSS5 Save For Web and Devices option.

Add new comment