Dnevnik eklektika - Piše Dragan Babić

ALPHA transparentni .png kao background image

Ukoliko iz naslova ne kapirate o čemu se radi u ovom unosu—dozvolite da pojasnim. Kada je uveden PNG format slika na web to je učinjeno iz razloga jer je on “najbolje iz oba sveta”. Lossless je (što će reći da nema gubitka na kvalitetu), kompresuje se bolje od GIF-a i što je najbolje on podržava alpha transparenciju.

Kod GIF sličice na žalost samo jedna boja može biti transparentna, tu je i prednost alpha transparencije koja će nadam se uz pojavu IE7 (koji će je podržavati) postati malo učestalija na webu, i nadam se takođe da će malo razvezati ruke Web dizajnerima, ali ne i previše jer su alpha transparentni PNG-ovi prilično “teški” file-size-wise. Dakle alpha transparencija nam omogućava “polupropusnost” određenih delova ili cele slike. Znači slika nam može biti 50% transparentna, što sa GIF-om nije slučaj, a ukoliko još ne znate—sve verzije IE-a do šestice je ne podržavaju. Za njih je PNG alpha transparencija “dodatna opcija”, a ne urođeno ponašanje.

No, bilo kako bilo, pronašao (bukvalno pronašao) sam način da “nateram” IE da ispoštuje i alpha transparenciju. Dugo je to već poznato i postoje razne skripte koje ovo omogućavaju za “hardkodovane” slike ( img elemente), PieNG je jedan od tih skripti koje rade posao sasvim korektno, ali šta je sa pozadinskim slikama? Mi CSS-aši koristimo pozadinske slike daleko češće nego što ih hardkodujemo (ukoliko poznajemo razliku između glave i dupeta). Rešenje postoji, nije savršeno, ali je u svakom slučaju korisno.

Potrebno:

• Jedna slika koja sadrži alpha transparenciju koju ćemo postaviti kao pozadinu
• Par HTML elemenata radi prezentacije ponašanja

Za primer koristićemo jedan div koji će u sebi sadržati još jedan div kome će biti kao pozadina postavljena alpha transparentna slika. Pogledajte primer koji sam spremio za vas, jel krenula voda na usta? :)

OK, pre nego što se zaletite i krenete da krljate layoute sa ovom tehnikom morate znati da ima groznih nezgoda, poznate su sledeće:

• linkovi koji se nalaze u elementu na koji utičemo behaviorom, u IE naravno. Oni postaju neklikabilni od jednom i ponašaju se veoma čudno, što je izgleda uzrokovano dimenzijama očinskog elementa linka/linkova;
• dimenzije pozadinske slike su podložne groznim deformacijama usled dimenzija elementa za koga su date, stoga je ova tehnika neprimenljiva na elemente ne-fiksnih dimenzija;
• zaboravite na background-repeat osobinu—nemere.

Nadam se da će ova tehnika koristiti, barem dok se IE7 malo ne “odomaći”.

_Kompletna tehnika preuzeta sa daltonp.com , zahvalite čoveku, ja samo prenosim. :)_

Linkovi na temu

• No hack metod
• PNG behavior
• Easy alpha transparency—Clagnut

• « Zazubice!
• W3C Sites--pridružite se! »

Komentari na ovaj unos 6

1. Goran Rakić kaže 21/01/06 09:39 PM

   Safari 2.0.3 prikazuje samo prvu varijantu.

2. Dragan Babić kaže 22/01/06 12:08 AM

   

   I firefox prikazuje samo prvu varijantu, tako i treba da bude, jer je samo drugoj i trećoj dodeljena posebna osobina, tj. behavior koji se odnosi na IE, ali uz to i background:transparent koji vide svi browseri. Cilj je dati stadards compliant browserima jedno, a IE-u njegovo prljavo behavior djubre, a najbolji način za to su conditional comments koji osiguravaju kompatibilnost sa IE7. ;)

3. Goran Rakić kaže 22/01/06 01:56 AM

   OK, onda je sve ok. Nisam ni gledao kod vec sam samo ubacio to i originalni izvor u bookmarks, a iz prikazanog mi se ucinilo da bi donja varijanta trebala da bude podrzana i od strane IE-a i od standardnih browsera pa rekoh da javim ostalima da znaju…

4. Dragan Babić kaže 22/01/06 11:14 AM

   

   Mislim da sam i ja dodao malo na konfuziji jer nisam pomenuo conditional comments, a nisam ih ni primenio, tako da, evo sada naglašavam da behavior za IE u drugom i trećem primeru sa linkom su samo za IE, tj. osobine koje sam im dao bi trebalo “poturiti” samo Internet Exploreru 6 i manje, a ostali browseri treba da dobiju čist CSS.

5. Goran Pilipovi? kaže 28/01/06 07:29 PM

   komentar �????�???�

6. Duško Angirević kaže 25/01/07 02:46 PM

   U svakom slučaju Micro$oft fura po svom… PNG nije podržan ni u IE7, barem koliko sam ja pročitao u specifikaciji online…

Komentariši unos “ALPHA transparentni .png kao background image”

Ukoliko se odlučite na smeli korak komentarisanja, Vaše ime će biti linkovano sa Vašim uri-jem ukoliko ste ga uneli. Vaša email adresa je neophodna, ali je diskrecija zagarantovana i neće biti prosleđena trećem licu. Spammeri stop.

Tekst komentara možete formatirati uz pomoć textile-a. Sav HTML će biti odstranjen.
Obratite pažnju na pravopis i po mogućnosti koristite naša slova.

Ime:

Email:

http://

Komentar:

Zapamti info?

Zadržavam pravo da sankcionišem, uklonim, izmenim offtopic komentare, kao i one koje nemaju veze sa unosom pod kojim su objavljeni. Sa druge strane podržavam i ohrabrujem otvaranja konstruktivnih i otvorenih diskusija putem komentara. Unapred hvala što se držite teme.