CSS3 üleminekud Loo suurepärased halvendavad efektid
Veebi disainerid püüdlesid pika aja jooksul rohkem kontrolli lehtede üle, mida nad loomisel said CSS3-s. CSS3-s kasutusele võetud uued stiilid andsid veebipõhistele spetsialistidele võimaluse oma lehtedele lisada Photoshop-sarnaseid efekte. See hõlmas ka selliseid omadusi nagu varju ja helendusi , ümardatud nurki ja palju muud. CSS3 tutvustas ka animatsioonipõhiseid efekte, mida saab kasutada saitide jaoks suurepärase interaktiivsuse loomiseks.
Üks väga tore visuaalne efekt, mida saate oma veebisaidi CSS3-ga elementidesse lisada, on see, et need muutuksid sisse ja välja, kasutades omaduste kombinatsiooni läbipaistmatuse ja ülemineku jaoks. See on lihtne ja hästi toetatud viis, kuidas muuta teie lehed interaktiivsemaks, luues piiratud alad, mis on tähelepanu keskpunktis, kui saidi külastaja midagi muudab, näiteks selle elemendi hõljumine.
Vaatame, kui lihtne on see interaktiivne visuaalne efekt lisada oma veebisaitide erinevatele elementidele ..
Hoidke käsku Muuda läbipaistvust
Alustame pildi läbipaistmatuse muutmisega, kui klient selle elemendiga hõljub. Selle näite puhul (HTML on allpool näidatud) kasutan pilti koos greydout'i klassi atribuudiga.
Selleks, et muuta see halliks, lisame CSS-stiililehele järgmised stiili reeglid:
.greydout {
-webkit-läbipaistmatus: 0,25;
-moz-läbipaistmatus: 0,25;
läbipaistmatus: 0,25;
}
Need läbipaistmatusseadistused ületavad 25%. See tähendab, et pilt kuvatakse kui 1/4 tavapärasest läbipaistvusest. Läbipaistmatus täielikult läbipaistmatu oleks 100%, samas kui 0% oleks täiesti läbipaistev.
Seejärel lisage pilt pildist välja selgeks (täpsemini, et see oleks täielikult läbipaistmatuks), kui hiirekursor on sellel hõlmanud, lisage järgmine: hõljutage kursorit pseudoklassi:
.greydout: hover {
-webkit-opacity: 1;
-moz-läbipaistmatus: 1;
läbipaistmatus: 1;
}
Märkate, et nende näidete puhul kasutan reeglite tarnija prefiksilisi versioone, et tagada nende brauserite vanemate versioonide tagasiulatuv ühilduvus. Ehkki see on hea tava, on tegelikkus see, et brauserid toetavad nüüd läbipaistmatuse reeglit ja nende müüjate eelmääratud read on üsna kindel. Igal juhul ei ole ka põhjust neid eelisjärke lisada, kui soovite tagada vanemate brauseri versioonide toetuse. Lihtsalt veenduge, et järgite aktsepteeritud parimaid tavasid deklaratsiooni lõpetamiseks tavapärase stiiliga un-prefixed versiooniga.
Kui kasutate seda saidil, näete, et see läbipaistmatuse korrigeerimine on väga järsk muutus. Esiteks on see hall ja siis ei ole, nende kahe vahel ei ole ajutisi seoseid. See on nagu valgus sisse- või väljalülitamine. See võib olla see, mida soovite, kuid võite ka katsetada muutusi, mis on järkjärgulisemad.
Tõelise efekti lisamiseks ja järk-järguliseks muutmiseks peate lisama üleminekuomandi .greydout-klassi:
.greydout {
-webkit-läbipaistmatus: 0,25;
-moz-läbipaistmatus: 0,25;
läbipaistmatus: 0,25;
-webkit-üleminek: kõik 3-sed lihtsust;
-moz-üleminek: kõik 3 lihtsust;
-ms-üleminek: kõik 3 lihtsust;
-o-üleminek: kõik 3-kordsed;
üleminek: kõik 3 lihtsust;
}
Selle koodiga muutub üleminek järk-järgult, mitte ainult järsku üleminek.
Veelkord kasutame siinkohal mitut müüja eelmääratud reeglit. Üleminek ei ole nii hästi läbipaistmatuna toetatud, seega on need eesliited mõistlikud.
Üks asi, mida te kavatsete neid koostoimeid mäleta, on see, et puutetundliku ekraaniga seadmetel pole "hõljuvat" olekut, nii et need mõjud on sageli kaotatud kõigile, kes kasutavad puutetundliku ekraaniga seadet nagu mobiiltelefon. Üleminek toimub sageli, kuid see juhtub nii kiiresti, et neid tõesti ei saa näha. See on hea, kui lisate selle kui suurepärase boonuse efekti, kuid vältige mis tahes muudatusi, mida on vaja sisu mõista.
Võimalik on ka väljalangemine
Sa ei pea alustama pleekinud kujutist, sa võid kasutada üleminekuid ja läbipaistmatust, et vältida täielikult läbipaistmatut pilti. Kasutades sama pilti ainult koos klassiga withfadeout:
class = "withfadeout">
Sarnaselt varem muudate läbipaistmatust, kasutades järgmist valikut: hõljukivalija:
.withfadeout {
-webkit-üleminek: kõik 2-sed lihtsustused;
-moz-üleminek: kõik 2-sed lihtsustused;
-ms-üleminek: kõik 2-kordsed hõlbustus-in-out;
-no-üleminek: kõik 2-kordsed kergus-in-out;
üleminek: kõik 2-st hõlbustus-in-out;
}
.withfadeout: hover {
-webkit-läbipaistmatus: 0,25;
-moz-läbipaistmatus: 0,25;
läbipaistmatus: 0,25;
}
Selles näites muutub pilt täielikult läbipaistmatuks ja mõnevõrra läbipaistvaks - meie esimese näite tagurpidi.
Edaspidi pilte
On suurepärane, et saate rakendada neid visuaalseid üleminekuid ja kaotada pilte, kuid te ei piirdu ainult piltide kasutamisega nende CSS-efektidega. Kui klõpsate ja hoiate, saate hõlpsalt teha CSS-stiilis nuppe. Sa määraksid lihtsalt läbipaistmatuse, kasutades aktiivset pseudoklassi ja paned ülemineku klassi, mis määratleb nupu. Klõpsake ja hoidke seda nuppu, et näha, mis juhtub.
Sissejuhatavas mõttes on võimalik visuaalset elementi tuhmida, kui see on hõljunud või klõpsanud. Selles näites muudan teksti düüsi läbipaistmatust ja teksti värvi, kui hiir ületab selle. Siin on CSS:
# myDiv {
laius: 280px;
taustavärv: # 557A47;
värv: #dfdfdf;
padding: 10px;
-webkit-üleminek: kõik 4-st hõlbustus-0-st;
-moz-üleminek: kõik 4-st vabadust 0-st;
-ms-üleminek: kõik 4-kordsed kergendused 0-ks;
-o-üleminek: kõik 4-kordsed kergendused 0-ks;
üleminek: kõik 4-aastased kergendused 0-ks;
}
# myDiv: hover {
-webkit-läbipaistmatus: 0,25;
-moz-läbipaistmatus: 0,25;
läbipaistmatus: 0,25;
värv: # 000;
}
Navigeerimismenüüd saab kasu tuhmumisest taustavärvidest
Selles lihtsas navigeerimismenüüs muutub taustvärv aeglaselt sisse ja välja, kui hiirega üle menüüelementide. Siin on HTML:
- Kodu
- CSS3 õpetused
- CSS3 omadused
Ja siin on CSS:
ul # sampleNav {list-style: puudub; }
ul # sampleNav li {
kuva: inline;
ujuk: vasakule;
padding: 5px 15px;
marginaal: 0 5px;
-webkit-üleminek: kõik 2-s lineaarsed;
-moz-üleminek: kõik 2-s lineaarsed;
-ms-üleminek: kõik 2 sirgelised;
-o-üleminek: kõik 2s on lineaarsed;
üleminek: kõik 2 sirgelised;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
taustavärv: # DAF197;
}
Brauseri tugi
Nagu ma mõnda korda juba puudutanud, on neil stiilidel väga hea brauseri tugi, nii et peaksite end tasuta kasutama ilma igasuguse hirmuta. Ainsaks erandiks on Internet Exploreri palju vanemad versioonid, kuid Microsofti hiljuti tehtud otsusega lõpetada kõigi allpool toodud IE-i versioonide toetamise lõpetamine, on need vanemad brauserid üha vähem probleemiks - ja reaalselt, kui vanem brauser ei vaata seda fade üleminekut, see ei tohiks olla suur probleem. Niikaua kui piirata selliseid efekte mõnusatele interaktsioonidele ja mitte neile funktsiooni juhtimiseks või põhisisu avamiseks neile tugineda, siis saavad vanemad brauserid, mis neid efekte ei toeta, vähem nauditavat kogemust, kuid nende brauserite kasutajad ei saa isegi tean vahet, eriti kui nad saavad saidi kasutada tavapäraselt ja saada vajalikku teavet.
Ekstra lõbus; vaheta kahte pilti
Siin on näide selle kohta, kuidas üks pilt teisele kaob. Kasutage HTML-i:
Ja CSS, mis muudab ühe täielikult läbipaistvaks, teine on täiesti läbipaistmatu ja üleminek vahetab need kaks:
.swapMe img {-webkit-transition: kõik 1-st lihtsus-in-out; -moz-üleminek: kõik 1-st lihtsus-in-out; -ms-üleminek: kõik 1-st lihtsus-in-out; -o-üleminek: kõik 1-st lihtsus-in-out; üleminek: kõik 1-st hõlbustus-in-out; } .swap1, .swapMe: hõljumine .swap2 {-webkit-opacity: 1; -moz-läbipaistmatus: 1; läbipaistmatus: 1; } .swapMe: hõljumine .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; läbipaistmatus: 0; }