Css Snippets » logo

Image replacement The Phark method

Mark — Thu, 18 Dec 2008 16:28:59 +0000

Op deze methode kwam Mike Rundle door een ongeloofelijke abnormale groote text-indent waarde mee te geven zodat het zelfs op de grootste monitoren ter wereld onmogelijk is om de tekst weer tegeven.

HTML

Tekst vervangen door een afbeelding met Css

CSS

h2 {
height: 26px;
text-indent: -5000px;
background: url(afbeelding.gif) no-repeat;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Image replacement LIR

Mark — Thu, 04 Dec 2008 17:46:48 +0000

Methode samen ontwikkeld door Seamus Leahy & Stuart Langridge, die zich vooral richt op het placeren van de afbeelding, dus er is geen extra tag meer nodig zoals bij FIR

Geen extra nodig

HTML

Tekst vervangen door een afbeelding met CSS

CSS

h2 {
padding: 90px 0 0 0;
overflow: hidden;
background: url(afbeelding.gif) no-repeat;
height: 0px !important; /*hack voor de meeste browsers*/
height /**/:90px; /*Hack voor IE5*/
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Image replacement FIR

Mark — Tue, 02 Dec 2008 10:42:18 +0000

Genoemd naar Todd Fahner die deze techniek uitgevonden heeft om tekst te vervangen met een afbeelding door gebruik te maken van de background (of background-image) mogelijkheid in CSS.

De CSS voor deze methode heeft de extra tag nodig:

HTML

Tekst vervangen door
een afbeelding met Css

CSS

h2 {
width: 287px;
height: 29px;
background: url(afbeelding.gif) no-repeat;
}
h2 span {
display: none;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon