The jauni stili, kas ieviesti CSS3 deva tīmekļa profesionāļiem iespēju savām lapām pievienot Photoshop līdzīgus efektus. Viens vizuālais efekts, kuru varat pievienot, izmantojot CSS3 ir padarīt tīmekļa lapas interaktīvas, izveidojot izbalējušas vietas, kas ir uzmanības centrā, kad vietnes apmeklētājs kaut ko dara, piemēram, virzot kursoru virs šī elementa. Šis efekts izmanto kombināciju necaurredzamība un pāreja.
Mainīt necaurredzamību uz kursora
Viens interaktīvs elements ir mainīt attēla necaurredzamību, kad klients novieto kursoru virs šī elementa. Šajā piemērā (HTML ir parādīts zemāk) mēs izmantojam attēlu ar klases atribūtu pelēkā krāsā.
Lai to padarītu pelēku, CSS stila lapā pievienojiet šādus stila noteikumus:
.greydout {
-webkit-necaurredzamība: 0,25;
-moz-necaurredzamība: 0,25;
necaurredzamība: 0,25;
}
Šie necaurredzamības iestatījumi nozīmē 25 procentus. Tas nozīmē, ka attēls tiks parādīts kā 1/4 no tā parastās caurspīdības. Pilnīgi necaurspīdīgs bez caurspīdīguma būtu 100 procenti, savukārt 0 procenti būtu pilnīgi caurspīdīgi.
Pēc tam, lai attēls būtu skaidrs (vai precīzāk, lai kļūtu pilnīgi necaurspīdīgs), kad peles kursors atrodas virs tā, jūs pievienojat:
.greydout: virziet kursoru {
-webkit-necaurredzamība: 1;
-moz-necaurredzamība: 1;
necaurredzamība: 1;
}
Vairāk necaurredzamības pielāgojumu
Jūs ievērosiet, ka šajos piemēros mēs izmantojam kārtulas piegādātāja prefiksu versijas, lai nodrošinātu iepriekšējo šo pārlūkprogrammu vecāku versiju savietojamību. Lai gan šī ir laba prakse, pārlūkprogrammas labi atbalsta necaurredzamības likumu, un ir droši nomest šīs piegādātāja prefiksu rindas.
Tomēr, ja vēlaties nodrošināt vecāku pārlūka versiju atbalstu, nav iemesla neiekļaut šos prefiksus. Vienkārši ievērojiet pieņemto paraugpraksi, kā deklarāciju izbeigt ar parasto stilu ar prefiksu.
Izvietojot vietnē, šī necaurredzamības korekcija ir pēkšņas izmaiņas. Pirmkārt, tas ir pelēks, un tad tas tā nav, starp šiem diviem nav pagaidu stāvokļu. Tas ir kā gaismas slēdzis - ieslēgts vai izslēgts. Tas var būt tas, ko vēlaties, bet jūs varat arī eksperimentēt ar izmaiņām, kas ir pakāpeniskākas.
Lai pievienotu jauku efektu un padarītu šo izbalēšanu pakāpenisku, pievienojiet pāreja īpašums:
.greydout
klase: .greydout {
-webkit-necaurredzamība: 0,25;
-moz-necaurredzamība: 0,25;
necaurredzamība: 0,25;
-webkit-pāreja: visi 3 viegli;
-moz-pāreja: visi 3 viegli;
-ms-pāreja: visi 3 viegli;
-o-pāreja: visi 3 viegli;
pāreja: visi 3 viegli;
}