Temat: Maska za pomocą HTML (?)
Jesli chodzi o probe robienia prawdziwego maskowania - nie pseudo rozwiazan z milionem warstw i kombinacji, ktore ciazko nazwac "maska" to troche spedzilem nad tym czasu... i ostatecznie sie poddalem.
1. Najlatwiejsza opcja jest po prostu obrazek i na nim div, ktory ma np zaaokraglone rogi czy jakis tam wzorek w kolorze tla - cos takiego juz Ci tutaj zaproponowali. Problem zaczyna sie pojawiac kiedy tlo jest losowe, polprzezroczyste i zalezne od czegos innego itd itp.
2. Mozesz poszukac czegos takiego jak edge.js. Dzieki temu mozesz stosowac maski - prawdziwe maski! takie jak sobie wyobrazasz w fotoszopie czy flashu. Problem polega na tym ze IE potrafi nalozyc taka maske tylko w postaci pligu .gif - wiec nie masz antialliasingu, krawedzie sa ostre i pixelowate.
W przypadku reszty przegladarek mozesz zastosowac .png z polprzezroczystociami i wszystkim co tam Ci trzeba - dziala pysznie.
Problem? Dosc czesto IE sie wysypuje, zawiesza na dluzej i cholera wie co jeszcze jak masz do nalozenia wiecej masek na obrazki.
Dziala ale topornie i w moim przypadku nie moglem nazwac tego "rozwiazanien".
3. Sa takze ciutke inne rozwiazania, ktore np. pozwalaja na zaaokraglanie rogow, ale tylko to. Uwazam to rozwiazanie za pomylke, bo ostatnie w DOM z jednego diva, powstaje ci milion innych, ktore maja w srodku poprzesuwane tlo, pixel po pixelku i w efekcie powstaje DOMowa Masakra :) Nic tak pieknie nie morduje IE jak dodanie w locie do 20 divow z obrazkami, nastepnych 50 ;)
W moim przypadku chodzilo oto, zeby zrobic zaokraglone rogi i troche przekadrowac obrazki, ktore zostaly wygrywane przez ludzi zajmujacych sie contentem i nie majacych pojecia o PSie. Wgrywali kwadratowe obrazki a ja musialem na to zaaplikowac hlighlighty, cienie i najgorsze - zaaokraglone rogi z cieniem i borderem.
Ostatecznie - poddalem sie, zmarnowalem dobrze ponad tydzien pracy nad tym ale nigdy nie udalo mi sie osiagnac zadowalajacych rezulatatow.
Generalnie sprawa maskowania jest przerabana, a glownie z powodu IE.
Aczkolwiek - jesli masz gdzies IE, polecam skorzystanie z opcji numer 2.
ps. kolega sie dobrze wyrazil i tekst jest zrozumialy jesli sie wie "co to jest maska na obrazku" ;)
Andrzej Winnicki edytował(a) ten post dnia 22.01.11 o godzinie 23:52