De mai bine de 10 ani, elementele transparente si imaginile de tip PNG au devenit din ce in mai folosite in realizarea site-urilor web. Daca realizarea efectului de transparenta, a unui div spre exemplu , se poate realiza usor pentru a fi redat corect in toate browserele importante , nu acelasi lucru il putem spune si despre PNG-uri https://jogoscasinoonline.eu/.
Transparenta elementelor
Desi transparenta este tratata diferite in browserele cele mai populare, putem realiza cu ajutorul css-ului o clasa care sa acopere toate browserele importante. De exemplu, pentru a crea un div cu o culoare de fundal ce are o opacitate de 70%, codul va arata in felul urmator:
.element_transparent {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}- opacity: 0.5; Acest atribut este cel mai important (fiind si standardul actual in CSS), si functioneaza pentru majoritatea versiunilor de Firefox, Chrome, Safari si Opera.
- filter:alpha(opacity=50); Se foloseste pentru Internet Explorer.
- -moz-opacity:0.5; Acesta este folosit pentru browserele mai vechi cum ar fi Netscape Navigator.
- -khtml-opacity: 0.5; Acesta se foloseste pentru browserele ce folosesc engine-ul de randare KTHML, cum ar fi browserul de Linux Konqueror dar si versiuni 1.x ale lui Safari ( versiunile noi de Safari folosesc engine-ul de randare Webkit)
Atentie! Toate elemntele din interiorul unui div vor mosteni opacitatea acestuia. De exemplu, folosind clasa de mai sus pentru un div in interiorul caruia vom plasa un h1, acesta din urma va mosteni si el opacitatea de 70% a div-ului in interiorul caruia este.
<div class="element_transparent">
<h2>Titlu descriptiv al paginii.</h2>
</div>Pentru a evita acest lucru, “continutul” va trebui pus intr-un alt div si plasat “deasupra” div-ului caruia i s-a aplicat transparenta, cu ajutorul pozitionarii CSS. Codul html va arata astfel:
<h2 class="deasupra">Titlu descriptiv al paginii.</h2> <div class="element_transparent"></div>Clasa CSS atribuita headingului “h2″ fiind:
.deasupra {
position: relative;
top: 4.7em;
}
Transparenta imaginilor de tip .PNG
Majoritatea browserelor pot reda corect transparenta imaginilor de tip .PNG, nota discordanta o fac insa versiunile de Internet Explorer mai vechi de 7 (IE 6 este inca folosit de peste 20% de utilizatorii de internet din Romania). Pentru a corecta aceasta problema exista mai multe metode, toate , insa, bazandu-se pe folosirea unui filtru introdus de Microsoft (Microsoft AlphaImageLoader) pentru a “forta” transparenta. Metodele difera doar prin “locul” si “momentul” in care acest filtru este apelat.
Folosirea filtrului AlphaImageLoader pentru anumite clase CSS
Internet Explorer suporta anumite atribute ce se pot atribui claselor numite “behaviors”. Aceste “behaviors” sunt specifice Internet Explorer, nefiind suportate in niciun alt browser si in plus, codul necesar pentru a le invoca nu este valid W3C. Acest behavior se poate aplica atat clasei CSS “.png” cat si clasei generale “img”. De mentionat este faptul ca, desi acest filtru se poate aplica imaginilor folosite ca “background-image” , aceastea nu pot fi pozitionate sau repetate, adica atributele “background-position” si “background-repeat” nu au niciun efect.
O clasa CSS careia i s-a aplicat acest filtru ar putea arata astfel:
#logo{
position:relative; filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (src='imagename.png', sizingMethod='crop'); }
Mai multe despte aceasta metoda:
Komodo Media: Replacing images with background-images
Folosirea atributului “behavior” ca referinta la un fisier HTC
Aceasta metoda foloseste atributul behavior drept “pointer” catre fisierul HTC in care este aplicat filtrul de transparenta. Dezavantajele folosirii acestei metode sunt aceleasi ca si la metoda anterioara. Avantajul principal este ca pentru aplicarea ei este necesara o singura linie de cod in fisierul .css:
img, div { behavior: url(iepngfix.htc) }
Mai multe despte aceasta metoda:
Twin Helix: IE PNG Fix
Folosirea Javascript pentru a reda transparenta
Javascript : img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
Cum Javascript are abilitatea de a monitoriza si modifica proprietatile tuturor elementelor de pe o pagina, aceasta devine solutia ideala pentru gasirea imaginilor de tip .PNG si aplicarea filtrului de transparenta. Motivele care fac ca aceasta metoda sa fie cea mai buna sunt urmatoarele:
- Se poate condtitiona folosirea scriptului doar atunci cand browserul folosit este o versiune de IE 6 sau mai veche.
- La fel ca si metoda HTC este o metoda ce nu necesita modificari ulterioare.
- Codul va fi validat W3C.
- Filtrul va fi aplicat si elemtelor noi introduse pe pagina prin intermediul AJAX lucru ce nu era posibil cu metodele anterioare.
Mai multe despte aceasta metoda: