Posterous theme by Cory Watilo

nilshendriks's stuff

Filed under: proof of concept

Tinkering with type

As a form of experimentation and inspiration I have recreated two examples from Ellen Lupton's thinking with type:
  1. Dance Ink – page 82 Where extreme leading allows for two strands of text to interweave.
  2. Beyond Nostalgia – page 87 Where behind (or below if you will) the main text, the same text is rotated on its Y axis and dimmed slightly.
Media_httpnilshendrik_iifvd
Media_httpnilshendrik_beqbx

It's nothing fancy, just an exercise. Follow the links to see the actual examples.

Media_httpnilshendrik_pdxob

And if you don't already have it, get the book here, or check it out here.

Proof of concept: Issues & Fun with CSS3 border-radius

A while back I wanted to have thumbnail images look a bit like the 'event-boxes' in iPhoto: square with rounded corners. Even though in the end I ended up having the rounded corners in the images themselves, I did do a test with the CSS3 border-radius property and here are some of the results.

Below you'll see the results as images, screenshots of the actual page. The test page itself is here.

Oh, the bearded guy in the used images is not Santa Claus, it's James Clerk Maxwell.

Supported browsers: Safari 3+, Firefox 3.1+

Examples

example 1

An empty div with rounded corners.

Media_httpwwwnilshend_sqdhr

Result: looks reasonable in Safari and Firefox.

example 2

Rounded corners directly on an <img> element.

Media_httpwwwnilshend_ciibd

Media_httpwwwnilshend_tbbap

example 3

Rounded corners on a div element surrounding the img element.

Media_httpwwwnilshend_jyswx

example 4

Rounded corners on a div surrounding the img element and a seperate rounded border on the image itself with a slighty different radius.

Media_httpwwwnilshend_hhbfa

Result: Safari does this in an acceptable way. Firefox does not, it is the same as the ones before.

The spec

The fact that the borders go behind the image is actually according to the W3C working draft for CSS3.

“Borders are drawn in front of the element's background, but behind the element's content (in case it overlaps).”

Source: http://www.w3.org/TR/css3-background/#borders

So far only Safari delivers something useful. The only work-around I have found so far that could work cross-browser is to set the image as a background image on the element. But that is hardly a usable way when your site has lots of inline images whether they are CMS generated or not.

Related reads

Here's another article that describes the same issue. The author also took the trouble to file this as a bug issue. I do think though that the version where the rounded corners are set on the surrounding div, is right, that is, according to the spec and should probably not be fixed. Only in the case that the rounded corners are set on the image itself should the border either go over the image or clip its sharp corners.

Taking it further: breaking out

Here's an example of what you can do with the fact that the borders are being drawn behind the element's content. In this case you can have the arm of the athlete break out of its box through the borders. (if it's a transparent PNG)

Note that the blurryness is only in the screenshot. Who knows why?

Media_httpwwwnilshend_fgeup