For my test page I wanted: paragraphs with transparent coloured backgrounds layered over images; each image to be different; the boxes to have rounded corners; the position of the paragraphs to alternate; the last paragraph to have no background image; the text of the heading at the top of the page to have a glow effect.

But I also wanted the html to be as clean and raw as possible, leaving the styling completely up to the css. I wanted to do without divs, classes and id tags, to see if I could get it to work without adding hooks into the markup. The html is simply an unordered list with a paragraph tag in each list item (I tried reproducing it here, but even using the ‘code’ feature WordPress tries to render it: so I gave up).

My test page worked perfectly in Safari, gracefully in Firefox and Opera, and at the bare minimum in Internet Explorer 7.

Transparent backgrounds

For this I used the alpha transparency of RGBa; not opacity because, as I discovered before, that would apply to the text as well as the background. RGBa is supported in the latest versions of Safari and Firefox (and in Opera 10, which is currently in beta). I had to include a hack to tell IE7 to add a background colour, otherwise the text was unreadable.

Different images

I wanted to keep these out of the html and include them as background images in the css. Of course I could have added a class to each list item, but that would have cluttered the html. I chose to use the ‘+‘ selector to define the image for each subsequent list item. This works in each of Safari, Opera and Firefox. It doesn’t work in IE7, so the same image appears in each list item.

Rounded corners

I used the proprietary -moz-border-radius and -webkit-border-radius styles (for Firefox and Safari respectively), because it’s a nice enhancement but doesn’t matter if they’re not there.

Alternate positions

I wanted the paragraphs of text to alternate between appearing on the left of the image and on the right. For this I used nth-child to style every other paragraph. This works in Safari and Opera.

Styling the last paragraph

I simply used last-child to style the last list item differently. This worked in Safari, Opera and Firefox; not in IE7.

Text shadow

I used text-shadow for this, setting the x and y positions to zero (ie directly behind the text) so that it appears to glow around the edges. Text shadow is supprted in Safari and Opera.

Note

I built this page as an em-based layout, so it’s scalable. However I was lazy with the images, so these are large and pulled directly from my Flickr account. Therefore they don’t scale; and they’re not optimised to load quickly, so they don’t.

• Possibly related posts

  1. Website re-design: again
  2. Using CSS to add opaque text to transparent backgrounds
  3. Opera Web Standards Curriculum for the UK voluntary sector?

I’ve set body {font-size;) in absolute units and then used ems for all other measurements, which works well.

The difficulty is in getting text to align to a baseline. If I want to set an element to a different font size and then set its line-height, the line-height is calculated on the newly computed font size, and not on the size set in the body tag (I may be missing something important here though!).

For example, suppose we had these styles:

• body {
• font-size: 10pt;
• }
• li {
• line-height: 3em;
• }
• p {
• font-size: 2em;
• line-height: 3em;
• }

The browser would render the li as 30 points high (3 x 10pt). But it would render the p as 60 points high because it is using the newly calculated font-size of 20pt (ie 2 x 10pt), and therefore line-height = 60pt (ie 3 x 20pt).

This makes life interesting if we want to set text to a baseline. What I’ve done so far is to presume a point size per em (10pt, in the  example above) and calculate the measurements from there.

For example, for p to be 30pt high:

• p {
• font-size: 2em;
• line-height: 1.5em;
• }

ie 30pt / (10pt x 2) = 1.5.

In other words, if:

• x = em measurement for desired line-height
• a = desired line-height (30pt in this example)
• b = default font-size (10pt in this example)
• c = current font-size in ems (2 in this example)

then:

x = a/(b*c).

But, like I said, maybe I’m missing something.

• Possibly related posts

  No related posts.

I seem to have cracked baseline alignment and everything seems to be re-sizing pretty well. I can’t imagine it’ll work in IE (without a separate stylesheet) but it works fine in both the latest Mac versions of FireFox and Webkit (Safari nightlies).

It’s a simple design, but it might get more sophisticated if I can be bothered. It’s all done in CSS so very easy to add prettiness. It’ll probably change somewhat before it goes live anyway (for instance the image is just there for experimentation purposes and may well disappear).

All I have to do now is shoe-horn it into WordPress!

If you’re really keen you can see the draft front page here (use Firefox or Safari to guarantee seeing it properly). And If you’re lucky I might even put up my initial sketches at some point: bet you can’t wait.

• Possibly related posts

  No related posts.

Having been a little wary of CSS Eleven back then, I have since been to a seminar day led by Andy Clarke. Although he confirmed my concern that CSS Eleven will be a closed group, he convinced me of the need for such a group to exist: with so many apparent holes in some of the CSS3 modules, it’s no bad thing for a group of respected practicioners to be lobbying the W3C’s CSS Working Group.

• Possibly related posts

  1. CSS Eleven: good idea, but there are a lot more than eleven of us using CSS
  2. Support for CSS3 modules?
  3. Web Designer’s Checklist

I’m not sure I like the sound of this. Their existing web page (which seems to keep going down) doesn’t give much away, but I would like to know if they see themselves as a CSS supergroup or if they intend to open their work to collaboration. Point one.

Point two. There’s some good work already being done out there: will CSS Eleven be duplicating that or building on it? I’m thinking in particular of css3.info, which is a really good resource (it could be even better if it was able to build up the collection of compatibility tables on its module status page).

I’m curious to see how the work of CSS Eleven develops.

• Possibly related posts

  1. CSS Eleven: I’m happier now
  2. Website re-design: again
  3. Playing with CSS (IE7 fails, of course)

There, I feel a bit better. I guess it’s not really IE’s fault that it’s the only browser in which my three-column css-styled layout doesn’t work.

Actually, yes it is. It ought to work in quirks mode and doesn’t—that’s likely my fault—but I shouldn’t have to rely on quirks mode in the first place.

If you’re reading this post and not understanding a word of it, I envy you.

• Possibly related posts

  No related posts.

However, I’ve still not managed to master it. Either I have problems with floated elements or IE doesn’t style the tabs properly (IE6, at any rate).

I finally got it to work across browsers the other day, and promptly deleted the files (by accident). I shall try to recreate it and post the results here. In the meantime, here’s what I (think) I did.

Float issues

Block elements that should have come below the tabs were sitting to the right of them instead.

I think this was solved by setting an element to display:block – and I think that element was a – but I’ll post more when I’ve tried again.

IE style issues

IE6 was losing the top border off the tabs, and apparently adding a bottom margin.

It seems that relative positioning was the answer here. While the list’s containing div was absolutely positioned, IE stubbornly refused to play ball; as soon as I positioned it relatively, IE stopped sulking.

1. Created div#header with its height in pixels (in which I would put such things as blog title and the navigation tabs) and set this to position:relative;
2. Set the list’s containing div to position:relative, and set top to force it into its preferred position;
3. Everything else in div#header was positioned absolutely, so as not to interfere with the flow of the document.

• Possibly related posts

  1. Using CSS to add opaque text to transparent backgrounds
  2. Bookmarks for 3 January 2009 from 21:08 to 23:52
  3. Web Design Dashboard

ccc3.info has started this, but so far they only have a compatibility table for selectors. (They also have a neat online tool for testing which selectors your browser supports.)

• Possibly related posts

  No related posts.

I’ve just redesigned this blog (come on, it could be worse), and I wanted the title to sit in a box on top of the image, and for the image to show through the background of the box; thus:

I did this using css positioning:

1. I put the image in a div, and absolutely positioned the div at the top of the page;
2. I then created two identical versions of the title box, and absolutely positioned one over the top of the other:
3. the top one (title) has the text, with no opacity set;
4. the bottom one (titleBox) has a background colour with the opacity set to a degree of transparency; the text is also in this div, to ensure the box size matches that of the upper div. The text is hidden behind that of the upper div.

However, what if I also wanted to add another div below these? At the moment it would have to be positioned absolutely, meaning that any resizing of the text could upset the flow of the document. My solution was:

1. Put both divs into one new div (topRight);
2. Div titleBox comes first (though I guess it doesn’t matter if you add a z-index), with the default relative positioning;
3. Div title come next, positioned absolutely at the top (ie of div topRight).

Now any new content will flow as expected, relative to the div titleBox.

Here’s the css (trimmed down for the sake of clarity):

• #topRight {
• position:absolute;
• top:30px;
• right:0;
• }

• #title, #titleBox {
• margin:0;
• padding:10px;
• }

• #titleBox {
• opacity:0.2;
• color:#fff;
• }

• #title {
• background:none;
• z-index:1;
• position:absolute;
• top:0;
• }

Opacity appears to be supported by most browsers now (with the usual notable exception of Internet Explorer), though I haven’t tested extensively. I have also since added rounded corners, but these are only visible in Firefox and Safari (using proprietary tags, while the rest of the browsers catch up).

Update (March 2009)

There is now growing support for RGBa, which enables the addition of alpha transparency to a colour. Whereas opacity applies to all contents of an element, RGBa can apply just to the background and not the text.

So far browsers support the following, which would give a paragraph a red background:

• p {
• background-color: rgb(255, 0, 0);
• }

With opacity the paragraph’s background would be transparent but so would the text it contains:

• p {
• background-color: rgb(255, 0, 0);
• opacity: 0.5;
• }

(Note: Internet Explorer would require filter: alpha(opacity=50).)

With rgba we can give the paragraph a 50% transparent background, leaving the text unaltered and allowing anything behind to show through:

• p {
• background-color: rgba(255, 0, 0, 0.5);
• }

You can also see where I’ve begun playing with rgba.

• Possibly related posts

  1. Playing with CSS (IE7 fails, of course)
  2. CSS ‘sliding doors’: positioning the tabs
  3. Redesign: typography