Results for web design

Below are the posts that should have something to do with 'web design'.

Note: Use the search form in the top right if you're looking for something specific.

  

Automatic Magazine Layout – PHP-based image resizing and positioning

Related: , Posted in random posts on Jul 12, 2006 - comment 0 comments
A List Apart - Issue 219 - Automatic Magazine Layout by Harvey Kane

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.

Check how webpages look in greyscale with GrayBit

Related: , Posted in random posts on Mar 29, 2006 - comment 0 comments

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.

CSS techniques and general useful CSS information

Related: , , Posted in random posts on Feb 07, 2006 - comment 1 comment

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.

  1. 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.

  2. Bubble Tooltips (Web-Graphics)

    Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.

  3. 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.

  4. CSS shorthand Guide (Dustin Diaz)

    Dustin Diaz’s CSS shorthand Guide is a wonderful collection of.. CSS shorthands (duh?!). Definately worth checking out.

  5. 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).

  6. 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.

  7. 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.

  8. A form with style (CSS Play)

    Stu Nicholls of CSS Play has a nice write-up about styling forms with CSS.

  9. 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”.