A List Apart has a great article by Harvey Kane: Automatic Magazine Layout.
The article covers a PHP-based technique for automatically resizing and positioning images in a “magazine-style” layout.
Using PHP to resize the images on the server, the exact size that each image should be can be calculated so they will fit together in a nice square box.
Lovely idea. Some of the examples don’t look perfect (i.e. bottom right image of example 4 doesn’t come out quite right in IE6.0) but it’s a pretty sweet script anyway.
GrayBit is a great way to see how your page looks in greyscale.
From their website:
GrayBit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast.
On the right you can see some websites I fed to GrayBit. KVR comes out a bit dark, CNN looks great and I notice on the rekkerd.org page that Google AdSense doesn’t play nice.
Check out how your page looks without colors!
Note: Websites with frames don’t come out so great, or maybe not at all if stuff is dynamically linked. GrayBit is v0.5 Beta so results might improve in the future.
Cascading Style Sheets (CSS) have been around for a while now and new ways to design/code better websites with CSS appear frequently.
Below are some great examples of innovative (well, at the time at least) CSS techniques and general userful CSS information.
Lightbox JS (Lokesh Dhakar)
Lightbox JS is a simple, unobtrusive script used to to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
This looks great, it will be all over the place in no time.
Bubble Tooltips (Web-Graphics)
Turning a list into a navigation bar (456 Berea Street)
Roger Johansson explains how to turn a list into a navigation bar. This technique has become quite popular.
CSS shorthand Guide (Dustin Diaz)
Dustin Diaz’s CSS shorthand Guide is a wonderful collection of.. CSS shorthands (duh?!). Definately worth checking out.
CSS Cheat Sheet (ILoveJackDaniels.com)
Dave Child offers a nice CSS reference sheet, listing all selectors (as of CSS 2.1) and properties (.png and .pdf format available).
CSS Drop Shadows/CSS Drop Shadows II: Fuzzy Shadows (A List Apart)
Sergio Villarreal’s CSS Drop Shadows and CSS Drop Shadows II: Fuzzy Shadows articles show a way to create beautiful drop with ease.
Image Replacement. Again. (mezzoblue)
Dave Shea lists different ways to do Image Replacement, a technique to replace text with pretty images. Check Levin Alexander’s Image replacement decision grid to help you decide which technique to use.
A form with style (CSS Play)
Stu Nicholls of CSS Play has a nice write-up about styling forms with CSS.
In search of the One True Layout (Position is Everything)
Position is Everything has a great article about CSS-based layouts and the search for the “One True Layout”.