Likesalmon.net » CSS http://likesalmon.net Web development for designers Sat, 21 Jan 2012 20:40:34 +0000 en hourly 1 Tile images in Imagemagick to create CSS sprites http://likesalmon.net/tile-images-in-imagemagick-to-create-css-sprites/ http://likesalmon.net/tile-images-in-imagemagick-to-create-css-sprites/#comments Fri, 04 Jun 2010 05:31:35 +0000 Ammon http://likesalmon.net/?p=350 The Magick

This will stack two images to create a CSS sprite. Very handy for flicker-free image rollovers:

$ montage -background transparent -tile 1x2 -geometry +0+2 image1.gif image2.gif result.gif

You could create a taller or wider stack by adjusting the -tile option. For example -tile 2x10 would stack 2 images across and 10 images down. If you don’t have 20 images, Imagemagick will leave empty spaces.

Not sure why I had to set -geometry +0+2. That creates a 2 pixel vertical offset, which was necessary to align to two images. If you leave it at -geometry +0+0 the hover image is slightly off, which makes for a cool “pressed in” effect, but it’s not always what I need.

The CSS

The CSS you would use to make the rollover work would go something like this:


a.rollover {
background: url('Images/result.gif') no-repeat center top;
display: block; /* necessary to set the width and height of a tags */
text-indent: -99999px; /* get the link text out of the way if replaced by an image */
overflow: hidden; /* so you don't get the dotted outline when you click on the link */
width: 100px;
height: 100px;
}

a.rollover:hover {
background: url('Images/result.gif') no-repeat center bottom;
}

Bash bonus!

When I did this, I had a folder of images with the naming scheme menu_img1.gif, menu_img1_on.gif, menu_img2.gif, menu_img2_on.gif.. .etc.. I automated the sprite creation process from the command line like this:


$ array=( img1 img2 img3 )
$ for i in 0 1 2
$ do
$ montage -background transparent -tile 1x2 -geometry +0+2 menu_${array[i]}.gif menu_${array[i]}_on.gif menu_${array[i]}_sprite.gif
$ done

]]> http://likesalmon.net/tile-images-in-imagemagick-to-create-css-sprites/feed/ 1 FTOB: CSS width property does exactly what you would expect it to http://likesalmon.net/ftob-css-width-property-does-exactly-what-you-would-expect-it-to/ http://likesalmon.net/ftob-css-width-property-does-exactly-what-you-would-expect-it-to/#comments Sat, 25 Apr 2009 22:13:32 +0000 admin http://likesalmon.net/?p=59 Originally posted on 10/19/08 at http://likesalmon.wordpress.com

The other day I was laying out a wordpress driven site in css and realized that I didn’t actually understand how the “width” property works. This was extremely embarrassing to admit to myself, because it means I’ve been flubbing and cheating my way through the layout of every website I’ve developed so far. Its one the things that fell through the cracks because of limited time or lack of will. So I did a little testing and it turns out the width property works in the most obvious way possible, with one exception. Here are the results of my test:

All of the following boxes are div elements set to width: 200px; height: 200px and background-color: #ccc. I use lots of shorthand, so you’ll want to review that or this won’t make much sense. I performed this test in Firefox 3 so I trust that this behavior is the standard.

The following code was removed because it was breaking my layout — ed.

This is the basic box. No other styling has been added. If you add more text to the box than the box can hold, it will flow outside the box, but the box will remain the same size. To cut the text off at the edges of the box use “overflow: hidden”.
The border property of this box is set to border: 10x;. Notice how the inner box is still 200px by 200px. The border has been added to the outside. The total dimensions of the div are now 220px by 220px.
The margin of this box is set to margin: 40px. The space it now takes up is 280px by 280px. Margins appear to behave exactly like borders, except they are always transparent.
The padding of this box is set to padding: 10px;. Notice how this expanded the box 10px on each side, for a total height and width change of 20px. This is the one unexpected behavior I encountered: I figured it would constrain the contents of the box instead of expanding the box itself.
This box is like the last one, with padding: 10px;. The difference is that this one is nested inside a div with width: 200px; height: 200px;. Unless the overflow: hidden; property is set, this makes no difference at all. The box still expands to 220px by 220px and overflows the container div.
This box is contained within a div that is 100px smaller than it is. This only makes a difference if you use “overflow: hidden”, which will cut off the edges of the box where the container div ends. Keep in mind that the next element on the page will butt up against the parent div and will be overlapped by the over-sized box contained therein. I had to adjust the margin of the <p> element that follows this div so they don’t overlap.

In conclusion, if you’re designing a site that is 800px wide with an 8px border, you would subtract the width of the border from the width of the container element like so: #container { width: 792px; border: 8px solid #ccc; }. The #container element stays at 800px and everyone is happy.

]]> http://likesalmon.net/ftob-css-width-property-does-exactly-what-you-would-expect-it-to/feed/ 0