Pure CSS Text Resizer

Posted on 22 September 2007 (03:15 AM)

Inspired by comments on Roger Johansson's article about text resizing widgets, I created a text-resizing widget that does not rely on scripting. CSS only!

Check out example 1 and example 2.

These experiments are just for fun and do not work across all browsers. In fact, it only works in a tiny selection of browsers, due to its use of the :target pseudo-selector. Since it's not a very serious bit of code, I only tested in Firefox.

It was nice to see it can be done though, even if the markup is far from ideal.

Back to top

Filed under HTML and CSS

Comments:

  1. 22 September 2007 (10:43 AM) by Arjan Eising

    I think just using the browsers text-resize-functions is the best. The text-resize you built does not work any more when you click on a link to another page. Moreover: your back button is not usable anymore.

    Nice thinking, though.

  2. 22 September 2007 (11:14 AM) by Harmen Janssen

    Of course you're right :)

    This is only a little proof-of-concept, nothing too serious.

Sorry, due to spam, comments are temporarily out of order.

Back to top

Preferences

These settings will be saved for your convenience.