CSS: Zamjena teksta slikom

Napomena: ako ste web dizajner ovo sigurno već znate pa slobodno preskočite.

Na vrhu stranice u najvećem headingu (H1) imaš naslov sajta.

I to dobro funkcionira tako dugo dok je samo tekst u pitanju. Ali kada ti netko sklepa super seksi logo (najbolji komentar do sad je da ovaj gore lijevo podsjeća na strip club) trebaš zamijeniti tekst sa slikom.

Ovo je ok za posjetitelja stranice (a i prikazuje tekst ako isključiš CSS u pregledniku), ali ne valja zbog SEO razloga, tj. tražilice te manje vole.

• • • • •

Nabij tekst, stavi sliku

Dakle trebaš na neki Google-friendly način sakriti tekst tako da ostane samo slika u pozadini.

Rješenje koje se često koristi, a koje nije upitno za tražilice je text-indent CSS property postavljen na neku negativnu vrijednost, par metara lijevo od ekrana.

h1#logo
{
  width: 500px;
  height: 60px;
  text-indent: -9999px;
  background: url('lionsfart.jpg') no-repeat
}

Kako je taj logo obično i poveznica na root sajta treba dodati link:

h1#logo a
{
  width: 100%;
  height: 100%;
  display: block
}

Drugi slučaj

Ujedno trebaš riješiti i drugi slučaj: tekst tj. logo sajta se nalazu u headingu samo kad čitatelj nije na nekom konkretnom postu - kad otvori neki post onda je u H1 naslov tog posta.

U tom slučaju ćeš umjesto H1 upotrijebiti DIV.

CSS:

#logo
{
  width: 500px;
  height: 60px;
  text-indent: -9999px;
  background: url('/lionsfart.jpg') no-repeat
}
#logo a
{
  width: 100%;
  height: 100%;
  display: block
}

HTML - kad čitatelj nije na određenom postu (H1):

HTML - kad čitatelj jest na određenom postu (DIV):

Bube u preglednicima

U savršenom svijetu ovo super fercera, samo što mi živimo u onom u kojem browseri vole zajebavat.

Stari Firefox ima problema s ovim 100% na linku (A) pa mu trebaš staviti konkretnu širinu i visinu.

A ako uvedeš neke lude margine i paddinge klikabilni prostor se može pomaknuti u odnosu na stvarnu poziciju slike - to rješavaš postavljanjem overflowa i cursora. Obično ne treba, ali ono - za svaki slučaj.

Konačno optimizirano rješenje izgleda ovako:

div#logo
{
  width: 500px;
  height: 60px;
  text-indent: -9999px;
  background: url('/lionsfart.jpg') no-repeat;
  overflow: hidden;
  cursor: pointer
}

div#logo a
{
  width: 500px;
  height: 60px;
  display: block
}

Naravno, H1 tag prikazuješ po potrebi.

Demo se nalazi ovdje.

Enter Safari

Ajde da jednom iskritiziramo i Safari. Osim što prejako renda bold i nasere plavi border na aktivna polja zna krivo obojati pozadinu slike.

Primerice želiš logo nabiti na sredinu, a ostatak popuniti bojom koja je ista kao pozadina slike.

Safari će za boju pozadine JPG slike na sveopći užas autora postaviti neku drugu boju.

Naravno, prvo posumnjaš na sebe, učitaš sliku u neki editor a kad tamo: pozadina je #33aa66! Halo, Safari, tko te učio boje?

(To se rješava recimo tako da učitaš JPG u neki program i snimiš ga s uključenom EXIF opcijom.)

I jednostavno moraš reći susjedu koji se kurči s iPhoneom da Apple pojma nema. :)

• • • • •

Za one koji žele znati više

- Devet različitih image replacement tehnika.
- Što Google kaže na to?
- Wikipedia: Fahrner Image Replacement (btw Tko je taj Fahrner?)
- Please Stand By - nema veze s ovim, ali primjetite kako je fino riješeno CSSom.

PS. Computer Tan, za sunčanje ispred monitora. ;)

1

Komentari

Jel ovaj susjed D1a slucajno?