Web dizaineri ilgi vēlējās vairāk kontrolēt lapas, ko viņi radīja, kad CSS3 nokļuva skatuves. Jaunie stili, kas ieviesti CSS3, deva web speciālistiem iespēju pievienot lapām Photoshop līdzīgus efektus. Tas ietvēra tādas īpašības kā pilnas ēnas un mirdzums, noapaļoti stūri un daudz ko citu. CSS3 arī ieviesa animācijas efektus, kurus var izmantot, lai izveidotu labu interaktivitāti vietnēs.
Viens ļoti jauks vizuālais efekts, ko varat pievienot vietnei, izmantojot CSS3, ir, lai padarītu tās izplūdušas un izkustu, izmantojot opciju un pārejas rekvizītu kombināciju. Tas ir vienkāršs un labi atbalstīts veids, kā padarīt jūsu lapas vairāk interaktīvas, izveidojot izbalējušas jomas, kas tiek fokusētas, kad vietnes apmeklētājs kaut ko dara, piemēram, novirzīt virs šī elementa.
Apskatīsim, cik viegli ir pievienot šo mijiedarbojošo vizuālo efektu dažādiem elementiem jūsu tīmekļa lapās.
Mainiet opacity uz uzlidojuma
Mēs sāksim skatīties, kā mainīt attēla necaurredzamību, kad klients ir novirzījies virs šī elementa. Šajā piemērā (HTML ir parādīts zemāk) mēs izmantojam attēlu ar klases atribūtu
greydout
Lai padarītu to pelēko krāsu, mūsu CSS stilu tabulai pievienojam šādus stila noteikumus: .greydout {-webkit-opacity: 0,25;-moz-necaurredzamība: 0,25;necaurredzamība: 0,25;}
Šie necaurredzamības iestatījumi nozīmē 25%. Tas nozīmē, ka attēls tiks parādīts kā 1/4 tā normālās pārredzamības. Pilnībā necaurspīdīgs bez pārredzamības būtu 100%, bet 0% būtu pilnīgi caurspīdīgs. Tālāk, lai pietuvinātu peles kursoru, lai attēls kļūtu skaidrs (vai precīzāk, lai kļūtu pilnībā necaurspīdīgs), jūs pievienotu : novietojiet kursorupseidoklases: .greydout: hover {-webkit-opacity: 1;-moz-necaurredzamība: 1;necaurredzamība: 1;}
Jūs ievērosiet, ka šajos piemēros mēs izmantojam noteikumu pārdevēja prefiksu versijas, lai nodrošinātu šo pārlūkprogrammu vecāku versiju atkārtotu saderību. Lai arī šī ir laba prakse, patiesībā ir redzams, ka pārlūku labā atbalsta nedasamības noteikums, un diezgan droši ir jānoņem šie pārdevēju prefiksu rindiņas. Tomēr joprojām nav iemesla neiekļaut šos prefiksus, ja vēlaties nodrošināt atbalstu vecākām pārlūkprogrammu versijām. Vienkārši pārliecinieties, ka sekojat pieņemtajai labākajai praksei pabeigt deklarāciju ar parasto un prefiksu stilu versiju. Ja jūs izvietojat šo vietni, jūs redzētu, ka šī opcija korekcija ir ļoti pēkšņas pārmaiņas. Pirmkārt, tas ir pelēks, un tad tas nav, un starp šiem diviem nav pagaidu stāvokļa. Tas ir kā gaismas ieslēgšana - ieslēgšana vai izslēgšana. Tas var būt tas, ko vēlaties, bet jūs arī vēlaties eksperimentēt ar pārmaiņām, kas ir daudz pakāpeniskas. Lai pievienotu patiešām jauku efektu un padarītu šo fade pakāpenisku, jūs vēlaties pievienot pāreja
īpašums uz .greydoutklase: .greydout {-webkit-opacity: 0,25;-moz-necaurredzamība: 0,25;necaurredzamība: 0,25;-webkit-pāreja: viss 3s vieglums;-moz-pāreja: viss 3s vieglums;-ms-pāreja: visi 3s vieglums;-o-pāreja: visi 3s vieglums;pāreja: viss 3s vieglums;}
