Pure CSS PopUp Thumbnails


Here’s a neat effect that will allow you to display a thumbnail image for a link on hover (similar to the technique used at www.digitalart.org – except ours will be pure CSS).

This technique works in IE6, FireFox and Opera. I haven’t had the opportunity to test it in Safari, though I suspect it will work fine there as well. If someone would like to test it out and let me know, that would be great.

Let’s get started.

The format for our link itself will be:

[html]Sample
sample border=”0″ />
[/html]

First, we want to define a class for our popup links. We’ll call it “imgPop.” There are two important things we need to establish here: relative positioning, and a z-index– so that the link popup will load overtop of the rest of the page content instead of repositioning it. The z-index value is somewhat arbitrary and depending on the rest of your CSS, you may need to increase or lower the value below.

[css]a.imgPop {
position:relative;
z-index:20;
}[/css]
[click to continue…]

{ 3 comments }

CSS & The Baseline Grid


Many aspects of good typography are often overlooked when it comes to designing web sites. I’m not just talking about what fonts to choose, but also about typesetting to create a fluid body of text. While it may be tempting to leave type rules at their default values and let the browser sort it out (which is probably what most of us do, myself included until recently), this isn’t always the best solution. — Enter the baseline grid.

The baseline grid is a horizontal grid supporting the font characters within a document (in our case, a web page). Proper implementation of the baseline grid leads to an automatic horizontal alignment of text in different columns, creating a sense of harmony and vertical rhythm.

The baseline grid can also serve to position other elements such as photos, illustrations, tables, etc.

Need a visual example? Me too. Let’s take a look at text rendered using the browser’s default settings vs. text on a baseline grid. I think you’ll quickly be able to see the difference (and why the grid is better).

Fig 1. – Default text rendering.
CSS & The Baseline Grid - Fig. 1

Fig. 2. – Text aligned to a baseline grid.
CSS & The Baseline Grid - Fig. 2

Notice the difference? In the first example, the default font rendering is cramped, crowded, and there’s no proper flow of text between the two columns. Nothing lines up. In the second example, with the use of the baseline grid, the text is all evenly and proportionally spaced, easy to read, and lines up across both columns.
[click to continue…]

{ 8 comments }