CSS3 pārejas Izveido labus izbalējumus
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 teritorijas, kuras tiek fokusētas, kad vietnes apmeklētājs kaut ko dara, piemēram, novirzot virs šī elementa.
Apskatīsim, cik viegli ir pievienot šo mijiedarbojošo vizuālo efektu dažādiem elementiem jūsu tīmekļa lapās ..
Ļaujiet mainīt neskaidrību, novietojot kursoru
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) Es izmantoju attēlu ar greydout klases atribūtu.
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 pogas peles kursors būtu pārāk skaidrs (vai precīzāk, lai kļūtu pilnīgi necaurspīdīgs), pievienojiet: peles kursora peles kursoru:
.greydout: uzlidot {
-webkit-opacity: 1;
-moz-necaurredzamība: 1;
necaurredzamība: 1;
}
Jūs ievērosiet, ka šajos piemēros es izmantoju noteikuma prefiksa versijas pārdevēju, 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. Vispirms tas ir pelēks, un tad tas nav, bez starpgadījumiem starp šīm divām. 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 patiesi jauku efektu un padarītu to pakāpenisku izbalēšanu, jūs vēlaties pievienot pārejas īpašumu .greydout klasē:
.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;
}
Izmantojot šo kodu, pārmaiņas pārietu pakāpeniski, nevis vienkārši pārejot uz pāri.
Vēlreiz mēs šeit izmantojam vairākus prefiksu piegādātāju noteikumus. Pāreja nav tik labi atbalstīta kā necaurredzamība, tādēļ šiem prefiksiem ir jēga.
Viena lieta, kas jāievēro, plānojot šīs mijiedarbības, ir tas, ka skārienekrāna ierīcēm nav "novirziena" statusa, tādēļ šie efekti bieži tiek zaudēti ikvienam, izmantojot skārienekrāna ierīci, piemēram, mobilo tālruni. Pāreja bieži notiks, bet tas notiek tik ātri, ka tos patiešām nevar redzēt. Tas ir labi, ja pievienojat to kā jauku bonusa efektu, bet izvairieties no jebkādām izmaiņām, kas NEPIECIEŠAMS redzamas, lai saturs būtu saprotams.
Izgaismošana ir iespējama pārāk
Jums nav jāsāk ar izbalējis attēlu, varat izmantot pārejas un necaurredzamību, lai izkristu no pilnīgi necaurspīdīga attēla. Tāda paša attēla izmantošana tikai ar klasi ar fadeout:
class = "withfadeout">
Tāpat kā iepriekš, jūs maināt opacity, izmantojot: peles kursoru atlasi:
.withfadeout {
-webkit-pāreja: visi 2-in-out-out-out;
-moz-pāreja: visi 2-in-out-out-out;
-ms-pāreja: visi 2-in-out-out-out;
-pārnese: visi 2-in-out-out-out;
pāreja: visi 2 izlaidumi;
}
.withfadeout: uzlidot {
-webkit-opacity: 0,25;
-moz-necaurredzamība: 0,25;
necaurredzamība: 0,25;
}
Šajā piemērā attēls pāriet no pilnīgi necaurspīdīga uz nedaudz caurspīdīgu - mūsu pirmā piemēra otrā daļa.
Aiziet ārpus attēliem
Tas ir lieliski, ka jūs varat pielietot šīs vizuālās pārejas un izbalināt attēlus, bet ne tikai izmantojat attēlus ar šiem CSS efektiem. Jūs varat viegli izveidot CSS stila pogas, kas izbalināt, noklikšķinot un turēt. Jūs vienkārši iestatītu necaurredzamību, izmantojot: aktīvo pseidoklasi un nododiet pāreju uz klasi, kas definē pogu. Noklikšķiniet un turiet šo pogu, lai redzētu, kas notiek.
Būtiski pēc jebkura vizuālā elementa ir iespējams izbalināt, ja tas ir peles kursoru virsū vai uz tā noklikšķinājis. Šajā piemērā es mainu teksta necaurredzamību un teksta krāsu, kad peles pogas ir beigušās. Šeit ir CSS:
# myDiv {
platums: 280 pikseļi;
fona krāsa: # 557A47;
krāsa: #dfdfdf;
polsterējums: 10 pikseļi;
-webkit-pāreja: visi 4s atvieglojums-0s;
-moz-pāreja: viss 4s atvieglojums-0s;
-ms-pāreja: viss 4s izlaidums 0s;
-o-pāreja: visi 4s izlaidums 0s;
pāreja: visi 4 izlaidumi 0s;
}
#myDiv: uzlidināt {
-webkit-opacity: 0,25;
-moz-necaurredzamība: 0,25;
necaurredzamība: 0,25;
krāsa: # 000;
}
Navigācijas izvēlnes var gūt labumu no fadējošām fona krāsām
Šajā vienkāršajā navigācijas izvēlnē fona krāsa lēnām izzūd un izkustas, jo es peli pār izvēlnes vienumiem. Šeit ir HTML:
- Mājas
- CSS3 konsultācijas
- CSS3 īpašības
Un šeit ir CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
displejs: inline;
pludiņš: pa kreisi;
polsterējums: 5px 15 pikseļi;
starpība: 0 5px;
-webkit-pāreja: visi 2 lineāri;
-moz-pāreja: visi 2s lineāri;
-ms-pāreja: visi 2s lineāri;
-O-pāreja: visi 2s lineāri;
pāreja: visi 2 lineāri;
}
ul # sampleNav li a (teksta apdare: nav; }
ul # sampleNav li: hover {
fona krāsa: # DAF197;
}
Pārlūkprogrammas atbalsts
Kā jau esmu pieskāries dažām reizēm, šajos stilos ir ļoti labs pārlūka atbalsts, tādēļ jums ir jājūtas brīvi tos izmantot bez jebkāda trapa. Vienīgais izņēmums ir daudz vecākas Internet Explorer versijas, taču, tā kā Microsoft nesen pieņēma lēmumu pārtraukt atbalstu visām IE versijām zem 11, šīm vecākajām pārlūkprogrammām aizvien mazāk kļūst problēma - un reāli, ja vecāks pārlūks nav skatīt šo izbalēšanas pāreju, tā nedrīkst būt liela problēma. Kamēr jūs ierobežojat šāda veida efektus līdz patīkamām mijiedarbībām un nepaļaujieties uz tām, lai vadītu funkcionalitāti vai atklātu galveno saturu, vecāki pārlūkprogrammas, kas neatbalsta efektus, iegūs mazāk patīkamu pieredzi, taču lietotāji šajos pārlūkos pat netiks uzzināt atšķirību, jo īpaši, ja viņi var izmantot vietni kā parasti un iegūt nepieciešamo informāciju.
Extra Fun; apmainīt divus attēlus
Šeit ir piemērs tam, kā izgaismot vienu attēlu citā. Izmantojiet HTML:
Un CSS, kas padara vienu pilnīgi pārredzamu, bet otra ir pilnīgi neskaidra un pēc tam pārejas mijmaiņas darījumus abus:
.swapMe img {-webkit-pāreja: visi 1-in-out-out-out; -moz-pāreja: viss 1s vieglums-out-out; -ms-pāreja: visi 1-in-out-out; -pārnese: visi 1-in-out-out-out; pāreja: visi 1-in-out-out-out; } .swap1, .swapMe: novietot kursoru .swap2 {-webkit-opacity: 1; -moz-necaurredzamība: 1; necaurredzamība: 1; } .swapMe: novietot .swap1, .swap2 {-webkit-opacity: 0; -moz-necaurredzamība: 0; necaurredzamība: 0; }