The novi stilovi uvedeni u CSS3 pružio web profesionalcima mogućnost dodavanja efekata sličnih Photoshopu na svoje stranice. Jedan vizualni efekt koji možete dodati pomoću CSS3 je učiniti web stranice interaktivnim stvaranjem izblijedjelih područja koja dolaze u fokus kada posjetitelj web mjesta učini nešto, poput lebdenja iznad tog elementa. Ovaj efekt koristi kombinaciju neprozirnost i prijelaz.
Promijenite neprozirnost pri zadržavanju pokazivača
Jedan interaktivni element je promjena neprozirnosti slike kad kupac pređe mišem iznad tog elementa. Za ovaj primjer (HTML je prikazan u nastavku) koristimo sliku s atributom class od greydout.
Da biste ga učinili sivim, dodajte sljedeća pravila stila u svoj CSS stil:
.greydout {
-webkit-prozirnost: 0,25;
-moz-neprozirnost: 0,25;
neprozirnost: 0,25;
}
Ove postavke neprozirnosti prelaze na 25 posto. To znači da će slika biti prikazana kao 1/4 njezine uobičajene prozirnosti. Potpuno neprozirno bez prozirnosti bilo bi 100 posto, dok bi 0 posto bilo potpuno prozirno.
Dalje, da bi slika postala jasna (ili točnije, postala potpuno neprozirna) kad miš pređe preko nje, dodali biste sljedeće:
.greydout: hover {
-webkit-prozirnost: 1;
-moz-neprozirnost: 1;
neprozirnost: 1;
}
Više prilagodbi neprozirnosti
Primijetit ćete da za ove primjere koristimo verzije pravila s prefiksom dobavljača kako bismo osigurali povratnu kompatibilnost za starije verzije tih preglednika. Iako je ovo dobra praksa, preglednici dobro podržavaju pravilo neprozirnosti, i sigurno je ispustiti one linije s prefiksom dobavljača.
Ipak, nema razloga da ove prefikse ne uvrstite ako želite osigurati podršku za starije verzije preglednika. Samo budite sigurni da slijedite prihvaćenu najbolju praksu završavanja deklaracije s normalnom verzijom stila bez prefiksa.
Kada se rasporedi na web mjestu, ova prilagodba neprozirnosti naglo se mijenja. Prvo je sivo, a onda nije, bez privremenih stanja između to dvoje. To je poput prekidača za svjetlo - uključeno ili isključeno. To je možda ono što želite, ali možda ćete htjeti i eksperimentirati s promjenom koja je postupnija.
Da biste dodali lijep efekt i učinili da ovo blijeđenje postupno, dodajte tranzicija svojstvo:
.siva
klasa: .greydout {
-webkit-prozirnost: 0,25;
-moz-neprozirnost: 0,25;
neprozirnost: 0,25;
-webkit-prijelaz: sve tri lakoće;
-moz-prijelaz: sve tri lakoće;
-ms-prijelaz: lakoća svih 3-ih;
-o-prijelaz: sve tri lakoće;
prijelaz: sve 3s lakoća;
}