web notes - a blog

Link is to a page that has daily dynamically generated background tile images, with a gradient overlay.

A fun way to make a site more interesting, especially for those with limited design skills. :)

The objective of this page was to find an efficient way to create a rounded rectangle that would dynamically resize based on content.

The width is fixed, but the height is variable.

Notes

• Border for center area uses a CSS border attribute instead of an image. It just works better. It also reduces the HTTP request count by 2.
• The color code used (#77777777) is for approximately 50% opacity.
• The header is a gradient, chopped for good contrast.
• ImageMagick commands are included.

This is a bash script. To use it, create the file, use chmod +x tint, then run it with tint green (for example). You might have to adjust the fuzz factor.

#!/bin/bash
if [ $# -lt 1 ]
then
echo “Usage: tint color”
fi
d=’../box-1/’
for f in `ls $d`
do
convert $d$f -fill $1 -fuzz 4% -opaque “#eee” $f
done

d is the source directory, where the original images are stored. The directory this script is running in serves as the destination.

The link above allows you to upload an image which will be run through ImageMagick and deliver a 200px wide version of the image and the colors, as colors and as hex codes.

Helpful for matching image colors with CSS.

Link to another approach to rounded corners.