invisible visible text? heh.... — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

invisible visible text? heh....

This page's ID: 11181

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	In the interest of sharing, I'm gonna put up a little bit here about my favorite image replacement technique. I do not claim this as my own. As far as I can tell, the link I posted above points to the guru genious who came up with the idea. The idea is like this. You wanna show some highly stylized text in place of your strictly marked-up text. CSS can't do what you want. You can't depend on user on the other end having that 'perfect' font you want...using <img> for text is VERY unusable...what's a guy to do? You apply a background image to your properly marked-up XHTML! Make your image, let's say a title. Note its size. Let's pretend 100px tall. Add that to your stylesheet. [code] <style type='text/css'> h1{ background:transparent url(fancyH1.png) center center no-repeat; } ...... <body> <h1>Regular Title</h1> [/code] Hey! Now we have the image AND the text. Make that text go away. OK. Add some padding to the h1 in the stylesheet. Make your padding equivalent to the size of the image. While you're at it, change the height of the image to 0. [code] <style type='text/css'> h1{ padding-top:100px; height:0; background:transparent url(fancyH1.png) center center no-repeat; overflow:hidden; } ...... <body> <h1>Regular Title</h1> [/code] This technique works wonderfully on modern browsers that implement the box model properly. Unfortunately, the browser with the marketshare doesn't fit that description. Time for the ol' Tantek box model hack... [code] <style type='text/css'> h1{ padding-top:100px; height:100px; background:transparent url(fancyH1.png) center center no-repeat; overflow:hidden; voice-family: "\"}\""; voice-family:inherit; height:0; } ...... <body> <h1>Regular Title</h1> [/code] Great! Uh...now it's broken in Opera...1 more change. [code] <style type='text/css'> h1{ padding-top:100px; height:100px; background:transparent url(fancyH1.png) center center no-repeat; overflow:hidden; voice-family: "\"}\""; voice-family:inherit; height:0; } html>body h1{ height:0; } ...... <body> <h1>Regular Title</h1> [/code] There you have it. One perfectly pretty title. One uberly-usable document. Resources: [url=http://www.kryogenix.org/code/browser/lir/]image replacement[/url] [url=http://www.tantek.com/CSS/Examples/boxmodelhack.html]box model hack[/url] [This message has been edited by mobrul (edited 04-01-2004).] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu