A CSS brain teaser

This week, I encountered a nice brain teaser in front end development. After 2 hours of brainstorming, I finally found a solution that pleased me. I posted the problem on Twitter, then on my blog. To my surprise, I had a lot of answers, and some of them were actually pretty ingenious. So I decided to translate it in english so you english folks can enjoy it too.

So here it is :

A CSS brain teaser

It’s a pretty common visual effect, especially in print magazines. However, I found out that it was not that intuitive to reproduce this effect simply in CSS.

Here are the rules :

  1. The text must not be divided by any tags (so no span for each lines, no br)
  2. You can use as many tags as you want around the text
  3. No JavaScript, only HTML and CSS
  4. The white background must follow around the text
  5. There is a margin inside the white background around the text of 20px on the left and right, and about 10px on top and bottom
  6. The text is dynamic, so we must be able to easily change it and still have the visual effect
  7. The solution must work on modern browsers (IE9, Firefox 13, Chrome 19, …)

To help you get started, I created a sample code on jsFiddle. You’re free to edit the HTML and CSS, as long as you respect the rules above.

I invite you to share your realisations on the comments below. I’ll publish the solution I came up with later this week. Have fun, and good luck to all !

  1. Max, le

    Here’s my solution, utilising box-shadow and white-space properties: http://jsfiddle.net/omgmog/g3MQf/

    in the example I’ve wrapped the h1 in a header tag, just so i can constrain the width — but it will work fine without it

  2. Paul Randall, le

    Here is my solution: http://jsfiddle.net/VKM3T/

  3. Aden Fraser, le

    Solved it by adding a span inside the h1:
    Some dynamic HTML text on several lines with a background that suits well and some margins around it.

    Then the following for CSS:
    h1 { padding-left: 0; text-indent: 0; border-left: 10px solid #fff; display: block; overflow: hidden; text-indent: -10px; }
    h1 span {
    color:#000; background: #fff;font:bold 36px sans-serif; padding: 5px 10px 5px 0; line-height: 50px; border-left: 10px solid #fff; border-top: 5px solid #fff; white-space: pre-wrap;
    }

    Preview: http://jsfiddle.net/VKM3T/142/

  4. ege, le

    This was quite fun. Here it is:

    http://jsfiddle.net/VKM3T/162/

    cross-browser, no box-shadows, exactly 10px above and below and 20px to the left and right of each line, probably the easiest and way to do this with minimal amount of code.

  5. quark, le

    http://jsfiddle.net/chnyM/4/

  6. Aden Fraser, le

    ege – In Firefox I see this: http://a.f-j.co/266201217854.png

    quark – In Firefox I see this: http://a.f-j.co/266201217926.png

  7. Andrew, le

    http://jsfiddle.net/VKM3T/539/

  8. Jacopo, le

    http://jsfiddle.net/KXKEF/