Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Opacitatea Si Transparenta Imaginilor: Exemplul 1 - Crearea Unei Imagini Transparente

    Încărcat de

    Dumitru Cristian
    23 vizualizări3 pagini
    css

    Titlu original

    css

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    css

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    23 vizualizări3 pagini

    Opacitatea Si Transparenta Imaginilor: Exemplul 1 - Crearea Unei Imagini Transparente

    Încărcat de

    Dumitru Cristian
    css

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 3

    Opacitatea si transparenta imaginilor

    Exemplul 1 Crearea unei imagini transparente


    Mai intai vei vedea cum sa creezi o imagine transparenta cu CSS. Imaginea obisnuita:

    Aceeasi imagine cu transparenta:

    Uita-te la urmatorul cod:

    <img src="klematis.jpg" width="150" height="113" alt="klematis" style="opacity:0.4;filter:alpha(opacity=40)" />


    Firefox foloseste proprietatea opacity:x pentru transparenta, in timp ce IE utilizeaza filter: alpha (opacity=x). Nota: sintaxa din CSS3 pentru transparenta este opacity:x. In Firefox ( opacity:x ), x poate fi o valoare intre 0.0 si 1.0. O valoare mai mica face imaginea mai transparenta. In IE ( filter:alpha(opacity=x) ), x poate lua valori de la 0 la 100. La fel ca in Firefox, cu cat valoarea este mai mica, cu atat elementul este mai transparent.

    Exemplul 2 Modificarea transparentei la mouseover


    Muta cursorul deasupra imaginilor de mai jos:

    Codul sursa arata astfel:

    <img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> <img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
    Poti observa ca prima linie de cod este asemanatoare cu cea din exemplul 1. In plus, apar atributele onmouseover si onmouseout. Atributul onmouseover defineste ce se va intampla atunci cand cursorul se misca deasupra imaginii. In acest caz vrem ca imaginea sa nu fie transparenta atunci cand cursorul se afla deasupra ei. Sintaxa pentru Firefox este this.style.opacity=1, iar pentru IE - this.filters.alpha.opacity=100. Cand mutam cursorul mouse-ului in afara imaginii, aceasta trebuie sa redevina transparenta. Acest lucru este realizat de atributul onmouseout.

    Exemplul 3 Text intr-o casuta transparenta

    Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta.

    Codul arata astfel:

    <html> <head> <style type="text/css">

    div.background { width: 450px; height: 300px; background: url(klematis.jpg) repeat; border: 1px solid black; } div.transbox { width: 350px; height: 130px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; /* pentru IE */ filter:alpha(opacity=60); /* standard CSS3 */ opacity:0.6; } div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000; } </style> </head> <body> <div class="background"> <div class="transbox"> <p>Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. </p> </div> </div> </body> </html>
    Mai intai trebuie sa creezi un element div (class="background") cu o inaltime si o latime fixata, o imagine de fundal si un chenar. De asemeni, trebuie sa creezi un div mai mic (class="transbox") in interiorul primului element div. Acest div are de asemeni o latime fixata, o imagine de fundal si un chenar. Ceea ce apare in plus este ca trebuie sa faci acest div transparent. In acest div transparent, trebuie sa adaugi text in interiorul elementului p.

    S-ar putea să vă placă și