Images (6 articles)
Create a CSS image sprite based feature box
Inspired by some of the excellent feature boxes I've seen on countless sites, I thought it about time I made my own but only using CSS and the excellent image sprite technique. Not familiar with image sprites? Here's a quick primer. Note that this feature box would still work perfectly fine if you were to have each image separate, but less images means less HTTP requests and a less 'laggy' resp...
Read full article | 9 comments , most recent by Josiah
The Forgotten Timesaver: Photoshop Droplets
Many moons ago Adobe saw fit to include a feature that would make batch processing images faster and easier. Droplets are a very handy thing to have, especially when a client sends over a disc full of images that need processing. In this tutorial I'll demonstrate at it's simplest form how to create your own droplet. These instructions are for Photoshop CS3 but if I remember the previous versio...
Read full article | 7 comments , most recent by That Web Guy
CSS 101 - Using images in headings
Today I stumbled on a blog with a gorgeous design and what appeared to be some nice code. I won't mention the site name in the interest of not upsetting anyone, but looking closer I noticed something I've often seen used for headings. Considering the job done on that site was excellent otherwise, this was very surprising. Using images for headings often provides the nice extra bling that standa...
Read full article | 3 comments , most recent by That Web Guy
CSS rollover buttons, sans JavaScript
While scoping for a new designer I recently read through over 50 resumes and consequently looked at over 50 online portfolios. What struck me as frankly surprising (shocking) was the high number of designers who still use oodles of JavaScript to create a simple image hover effect, usually in the navigation. I have a simple rule: If it can be accomplished with CSS, then do it with CSS. Unless it...
Read full article | 5 comments , most recent by Edwardo
Quick and dirty rounded corners on an image
I got to a certain stage during the development of this blog when I realised I was going to want rounded corners on the article images. I was first reminded of a complex div/gif arrangement, and then my mind shifted to just simply Photoshopping them when needed. Neither are desirable so I came up with this quick and dirty solution. Before you get too excited bear in mind this method is only goo...
Read full article | 15 comments , most recent by Carlo
To GIF, or not to GIF?
I'm frankly surprised to see that in this day age, many designers still don't know when to use the right image format for the right job. Before I get stuck into this, here's a quick primer for beginners. The most common image formats for the web are: GIF: Limited colour range, single colour transparency JPG: Large colour range, no transparency PNG: Large colour range, full transparency ...
Read full article | 3 comments , most recent by Diso