CSS Image Sprites — Part 1

Posted by on Apr 14, 2011 in Techniques | No Comments

On the latest website that I am working on, I decided to use the “image sprite” technique that I recently learned in a CreativeLive class, Website Makeover.

Often in websites, there is a need to create a series of several image links that are placed closed together (ie. navigation bars). When creating links you want to make the “active” and “hover” states visibly distinct. Traditionally, to create this effect, I would use at least two different images to create a “rollover effect”. While this works, the website has to upload both images. If you have several of these types of links, the load time required grows.

Using the image sprite technique, only one image is used and the site loads faster. Below is a sample of using one image sprite to create a series of social media links.

Follow:

(more…)

Adding custom webfonts to websites

Posted by on Mar 12, 2011 in Techniques | No Comments

Myfonts.comCurrently I am working on another website with Jay Carskadden. Jay has designed this site for a local career counselor and I will be building the site using WordPress. In her designs for this website, Jay is using Highbrow Cafetorium JNL as one of the website’s main fonts. However, this font is not considered one of the standard ‘browser safe’ fonts.

Traditionally there are only a few fonts suggested for use on websites. These “standard browser safe fonts” are the fonts that are most commonly found on all computers. Needless to say, the font choices are somewhat limited. However, if these standard fonts are used with CSS styling, a website’s text should look similar across all browsers. If it was absolutely necessary to use a non-standard font on websites, website developers usually created jpeg images of the text.

(more…)

Javaco: Redlines

Posted by on Dec 5, 2009 in Techniques | No Comments

thumbnail image of a redline example

Redlines for Javaco Tea home page
This redline example was from a class exercise demonstrating the redlines. Photoshop was used to create the visual design of the pages for this hypothetical tea site.

Clients: Javaco Tea