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.

Leave a comment

RE: Pure CSS Text Resizer

Note to spammers: rel="nofollow" will be added to links. If I consider your comment spam, your IP-address might get blocked.

HTML not allowed. URLS will be auto-linked. Maximum length is 1250 characters.

I understand this is inconvenient, but the spam I'm receiving on this website is driving me nuts. Please forgive me and cope with it until I find a better solution.

Mandatory fields are marked by an asterisk (*).

Increase textarea-size Decrease textarea-size

Back to top

Preferences

These settings will be saved for your convenience.