CollyLogic: Peter’s Resizable Underlines!

Peter’s Resizable Underlines!

14th November 2005

Previously I’d noted that Jonathan Snook had cracked the CSS Challenge. Well, whilst he certainly made headway and surpassed everyone else’s approaches, has he now been outdone? Check out what Peter has come up with! The guy’s not only cracked it, but he’s offered up several working examples and a very detailed explanation. Go visit Peter’s Resizable Underlines for the full skinny.

Simon Collison published this on 14/11/05, at 12:38 AM

Comments

Undeniably a cool and creative effect, but I really think Jonathon Snook’s submission beats it hands down. Why? Well quite simply I can still interact with the text content. Copy content, select links in the text etc all works as intended however Peter’s solution removes this expected functionality. Don’t break the expected interaction!

14/11 at 02:14 from Klaus Roots

Not to take anything away from Peter’s method but one other drawback not mentioned is that when resizing text, it’s only effective using em-based widths on the paragraph.

To make Peter’s solution even better and allow links in the paragraph to be clickable, you could move the image outside of the paragraph, set a z-index of 1, then set the paragraph to position relative and a z-index greater than 1.

Good job Peter!

14/11 at 02:23 from Jonathan Snook

Keep the feedback coming. I literally noticed Peter’s methods and posted it straight away. I haven’t had time to investigate further yet.

You are both right - we still need to be able to interact with the text. Any thoughts, Peter?

14/11 at 09:34 from Simon Collison

I was thinking really that why would you want underlines in this way anyway, and I thought display text rather than everyday text was more likely.

So yes, Snook’s way is better wrt interactive text but there is sort of a way round this, because you can have several background images and position them with gaps so you can access the text, but it’s a bodge job. Point taken.

Jonathan, I will check out your suggestion later today. Cheers!

14/11 at 11:37 from Peter

Sorry, I meant foreground image in my last comment.

And there is an example of fixed width here and here that I put there as food for thought, but admittedly it is rough and needs work.

14/11 at 11:45 from Peter

LINKS PROBLEM SOLVED!

Here

14/11 at 12:30 from Peter

Fixed width excess lines problem solved!

Wow, the simple solutions are working great today! I just added a paragraph with background below the one with the lines and hey presto! it hides those excess lines. It might be fiddly to make it work at max and min font size settings but I think you will see the potential and be able to adjust it to suit your needs! Please tell if you can break it!

14/11 at 18:32 from Peter

The whole <img /> is still kind of weird…
clever, but still weird.

16/11 at 18:53 from Dustin

Note that comments are disabled 30 days after articles are published, or sooner if spammers target a particular post. Sorry...

Commenting is not available in this section entry.