CSS Sprites Generator

We're not talking about fairies or sodas here; for years, when video games were entirely 8 bit and played on slower devices like NESes and Game Boys, all the images of the game were a part of one greater image. Sort of like this: 

From Super Mario Bros. for Nintendo DS, taken from here.

Anyway, to have all of these as separate images would have taken a great toll on the memory. Instead, programmers found a way to reduce wait times and make the games run more smoothly by taking all these images and putting them into one giant one. Then, they'd only have to display a specific portion of the larger image. 

Today, in a world of constant optimization, efficiency, and need for speed, you can make the most consistent images on your site (backgrounds, icons, other images that display on most pages, et cetera) into a single sprite to reduce the number of HTTP requests for the client and reduce your site's load time. 

To use sprites, you'll define what portion of the image you want to be shown by using the "background-position" property in CSS. Normally, you'd have to use Photoshop or a similar program to find the coordinates for each image, but this is tedious and usually not the most effective or efficient solution. To save yourself some trouble, use a CSS sprite generator. This one, from CSSsprites.com, allows you to upload your images (individually only, unfortunately), then gives you the sprite and the CSS code for each. [CSS Sprites Generator]

Free or Open Source Embeddable Fonts

Fonts: for years, web designers been limited to Arial, Georgia, Verdana, Times New Roman, and a few others. And while they're all nice typefaces, they're starting to look a bit tired and overused. @font-face and image replacement are here, and they enable us to embed any font we want (assuming you have the right licensing) into our sites. A list of sites that offer downloadable free, embeddable fonts for both @font-face and font replacement services follows:

• Font Squirrel
• League of Movable Type
• Webfonts.info
• Kernest (for free fonts, click "Web Native")

In addition, the Google Font Directory (previously covered) also uses the @font-face tag, but you don't have to worry about hosting the files as Google does it for you. 

How to implement @font-face: http://www.zenelements.com/blog/css3-embed-font-face/

Font Replacement

Don't want to use web safe fonts or the @font-face style for the typography on your website? Many users are still without modern browsers and you have options.  The first is image replacement, and this doesn't just mean throwing in a JPEG of a word or two. Cufón and Typeface.js are font replacement tools that use JavaScript to create vectors of your font files and display it in the canvas tag in modern browsers (or VML in Internet Explorer). Simply upload the TTF (Typeface.js can only use this), OTF, or PTB font file of your choice and Cufón or Typeface.js will allow you to just enter in text in your HTML and have it displayed using your desired font, when implemented correctly.

They require no plugin as they relies only on JavaScript (and if JavaScript is disabled, they will display the text using a web safe font). Depending on how they are implemented, the text is selectable. A number of CSS text effects can be applied to the text. Be wary of licensing restrictions placed up the fonts you want to use (look for a post later on open-source and embeddable free fonts). An example of Cufón is below.

With JavaScript:

With JavaScript disabled, using fonts from your computer:

More information on Cufón can be found here: http://github.com/sorccu/cufon/wiki/about
More information on  Typeface.js can be found here: http://typeface.neocracy.org/usage.html
A comparison of the two: http://kilianvalkhof.com/2009/javascript/cufon-vs-typefacejs-which-one-is-better/

24 Ways to Impress Your Friends

"24 Ways to Impress Your Friends" is a web designer's advent calendar, or, as the site puts it:

24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.

The site's design is intriguing, as it utilizes layers, opacity (which changes with hovers and clicks), and its date navigation is based off of horizontal and vertical lines. The site has been running since 2005. Its blog posts are about web design, its evolution, with some giving examples and discussing some new tags and styles. Look for new posts in December. [24 Ways to Impress Your Friends]

CSS3 Code Generators/Examples

The third version Cascading Style Sheets bring a multitude of new styles, allowing designers to rely less on bulky images and plugins (like Flash) for cool effects and more on code. CSS3 brings rounded borders and strokes to elements; gradients without images; transforms like rotate, scale, skew, and translate; animations and transitions to these transforms (there's also coming 3D support); RGBA color (red, green, blue, and opacity); text and box shadows; text rotation; text columns (like a newspaper); embeddable fonts; all among a slew of others. To preview these styles, CSS3 example sites have been set up. Some not only give examples of these styles, but provide the code as well (if not, you can always look in the source). Note that not all browsers support all styles, as they are relatively new and the CSS3 spec is not finalized. A list of CSS3 code generators and example sites follows:

Code Generators:

• CSS3 Playground by Mike Plate
• CSS 3.0 Maker 
• Type Folly
• CSS3 Generator

Example Sites: 

• ZURB Playground
• CSS3 Playground by Chris Ruppel
• CSS3 Animations
• CSS3 Techniques

Google Font Directory & API

With the faster adoption of CSS and the @font-face style, web developers are no longer limited to the standard "web-safe" fonts like Arial, Verdana, and Georgia. @font-face allows developers to embed fonts into their websites to be displayed across different pages. However, @font-face can cause some headaches with licensing restrictions imposed by type foundries. To help alleviate this problem, Google has released a number of open-source fonts that can be embedded in your website using the Google Font API. The fonts are hosted on Google servers as well, so there's no need to download them and upload them to your servers. A site to preview the fonts is here. [Google Font Directory]

Vector Magic: Bitmaps to Vector Graphics

The problem with bitmaps is that they can only be as big as the resolution they're saved at; once you make the image larger, it starts to become pixelated and lose detail. With vector graphics, you don't have that problem. They're drawn using lines and shapes and don't lose their detail as they get bigger. Vector Magic is a service, started as a project at Stanford University, that can trace most basic bitmap images to vector graphics (it would be able to convert something like the Blogger logo to a vector, but not a photograph). It is a free online service but also has a desktop client with more features for a fee. [Vector Magic]