CSS3-oorgange Skep mooi vervaag-effekte
Web ontwerpers wou lank meer beheer oor die bladsye wat hulle gemaak het toe CSS3 die toneel getref het. Die nuwe style wat in CSS3 bekendgestel is, het webprofessionales die vermoë gehad om Photoshop-agtige effekte op hul bladsye te voeg. Dit sluit in eienskappe soos druppelskadu en glans , afgeronde hoeke en meer. CSS3 het ook animasie-agtige effekte bekendgestel wat gebruik kan word om goeie interaktiwiteit op webwerwe te skep.
Een baie mooi visuele effek wat jy kan byvoeg aan elemente in jou webwerf met behulp van CSS3, is om hulle in en uit te laat vervaag deur 'n kombinasie van die eienskappe vir deursigtigheid en oorgang te gebruik. Dit is 'n maklike en goed ondersteunde manier om jou bladsye meer interaktief te maak deur vervaagde areas te skep wat in die klem val wanneer 'n werfbesoeker iets doen, soos om oor daardie element te beweeg.
Kom ons kyk hoe maklik dit is om hierdie interaktiewe visuele effek by verskeie elemente op jou webblaaie te voeg.
Laat verander deursigtigheid op beweeg
Ons sal begin om te kyk hoe om die deursigtigheid van 'n beeld te verander wanneer 'n kliënt oor die element beweeg. Vir hierdie voorbeeld (die HTML word hieronder getoon) gebruik ek 'n prent met die klas eienskap van greydout.
Om dit uit te grys, voeg ons die volgende stylreëls by ons CSS-styleblad:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
deursigtigheid: 0.25;
}
Hierdie dekkingsinstellings vertaal na 25%. Dit beteken dat die beeld as 1/4 van sy normale deursigtigheid getoon sal word. Heeltemal ondeursigtig sonder deursigtigheid sal 100% wees, terwyl 0% heeltemal deursigtig sal wees.
Om die prentjie dan duidelik te maak (of meer akkuraat, om heeltemal ondeursigtig te word) wanneer die muis daaroor beweeg word, voeg jy die volgende by: plover pseudoklas:
.greydout: hover {
-webkit-deursigtigheid: 1;
-moz-deursigtigheid: 1;
deursigtigheid: 1;
}
U sal opmerk dat ek die verskaffers van voorgeskrewe weergawes van die reël gebruik om agterna verenigbaarheid vir ouer weergawes van die blaaiers te verseker. Alhoewel dit 'n goeie praktyk is, is die realiteit dat die deursigtigheidsreël nou goed deur blaaiers ondersteun word en dit is redelik veilig om die verskaffers se voorgeskrewe lyne te laat val. Tog is daar ook geen rede om hierdie voorvoegsels nie in te sluit as u ondersteuning vir ouer blaaier weergawes wil verseker nie. Maak seker dat u die beste praktyk aanvaar om die verklaring te beëindig met die normale, onbepaalde weergawe van die styl.
As jy dit op 'n webwerf ontplooi het, sal jy sien dat hierdie dekking aanpassing 'n baie abrupte verandering is. Eerstens is dit grys en dan is dit nie, met geen tussentydse toestande tussen die twee nie. Dit is soos 'n ligskakelaar - aan of af. Dit kan wees wat jy wil, maar jy sal ook wil eksperimenteer met 'n verandering wat geleidelik is.
Om 'n baie goeie effek by te voeg en hierdie vervaag geleidelik te maak, wil jy die oorgangspersoon by die .greydout-klas voeg:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
deursigtigheid: 0.25;
-webkit-oorgang: al 3s gemak;
-moz-oorgang: al 3s gemak;
-ms-oorgang: al 3s gemak;
-O-oorgang: al 3s gemak;
oorgang: alle 3s gemak;
}
Met hierdie kode sal die verandering geleidelik eerder oorgaan as om net skielik te skakel.
Weereens, ons gebruik hier 'n aantal voorverkoopte reëls hier. Oorgang word nie so goed as ondeursigtigheid ondersteun nie, so hierdie voorvoegsels maak sin.
Een ding om te onthou as jy hierdie interaksies beplan, is dat die skermtoestelle nie 'n "hover" -staat het nie, so hierdie effekte word dikwels op enigiemand verlore met behulp van 'n skermtoestel soos 'n selfoon. Die oorgang sal dikwels gebeur, maar dit gebeur so vinnig dat hulle regtig nie gesien kan word nie. Dit is goed as jy dit as 'n goeie bonus effek byvoeg, maar vermy enige veranderinge wat nodig is om gesien te word vir inhoud om verstaan te word.
Fading Out is moontlik ook
Jy hoef nie te begin met 'n vervaagde beeld nie, jy kan oorgange en deursigtigheid gebruik om uit 'n ten volle ondeursigtige beeld te verdwyn. Gebruik dieselfde beeld, slegs met 'n klas van metfadeout:
class = "withfadeout">
Net soos voorheen verander jy die deursigtigheid deur gebruik te maak van die: hover selector:
.withfadeout {
-webkit-oorgang: alle 2's gemak-in-out;
-moz-oorgang: almal 2s gemak-in-out;
-ms-oorgang: al 2s gemak-in-out;
-O-oorgang: al 2s gemak-in-out;
oorgang: alle 2s gemak-in-out;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
deursigtigheid: 0.25;
}
In hierdie voorbeeld sal die beeld oorgaan van volledig ondeursigtig tot ietwat deursigtig - die omgekeerde van ons eerste voorbeeld.
Gaan Beyond Beelde
Dit is uitstekend dat jy hierdie visuele oorgange kan toepas en vervaag na beelde, maar jy is nie beperk tot die gebruik van beelde met hierdie CSS-effekte nie. Jy kan maklik CSS-styl knoppies maak wat vervaag wanneer dit gekliek en gehou word. Jy sal net die dekking instel deur die: aktiewe pseudoklas te gebruik en plaas die oorgang op die klas wat die knoppie definieer. Klik en hou hierdie knoppie om te sien wat gebeur.
Dit is moontlik om in wese enige visuele element te vervaag wanneer dit oorbeweeg of gekliek word. In hierdie voorbeeld verander ek die deursigtigheid van die div en die kleur van die teks wanneer die muis daaroor is. Hier is die CSS:
# myDiv {
breedte: 280px;
agtergrondkleur: # 557A47;
kleur: #dfdfdf;
vulling: 10px;
-webkit-oorgang: al 4s gemak-out 0s;
-moz-oorgang: al 4s gemak-out 0s;
-ms-oorgang: al 4s gemak-out 0s;
-oor-oorgang: al 4s gemak-out 0s;
oorgang: alle 4s gemak-out 0s;
}
# myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
deursigtigheid: 0.25;
kleur: # 000;
}
Navigasiemenusse kan voordeel trek uit die vervaag van agtergrondkleure
In hierdie eenvoudige navigasie-kieslys verdwyn die agtergrondkleur stadig in en uit as ek die muis oor die spyskaartitems beweeg. Hier is die HTML:
- huis
- CSS3 Tutoriale
- CSS3 Properties
En hier is die CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
vertoon: inline;
dryf: links;
vulling: 5px 15px;
marge: 0 5px;
-webkit-oorgang: al 2s lineêr;
-moz-oorgang: al 2s lineêr;
-ms-oorgang: alle 2s lineêr;
-oor-oorgang: alle 2s lineêr;
oorgang: alle 2s lineêr;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
agtergrondkleur: # DAF197;
}
Browser Ondersteuning
Soos ek al 'n paar keer aangeraak het, het hierdie style baie goeie blaaierondersteuning, dus moet jy dit sonder enige spanning gebruik. Die enigste uitsondering hierop is baie ouer weergawes van Internet Explorer, maar met Microsoft se onlangse besluit om ondersteuning vir alle weergawes van IE onder 11 te beëindig, word hierdie ouer blaaiers minder en minder 'n probleem - en realisties, as 'n ouer blaaier nie sien hierdie vervaag-oorgang, dit behoort nie 'n groot probleem te wees nie. Solank jy hierdie soort effekte beperk tot aangename interaksies en nie staatmaak op hulle om funksionaliteit te bestuur of sleutelinhoud te openbaar nie, sal ouer blaaiers wat nie die effekte ondersteun nie, 'n minder aangename ervaring kry, maar gebruikers op die blaaiers sal nie eens Ken die verskil, veral as hulle die werf as normaal kan gebruik en die inligting kry wat hulle benodig.
Ekstra Pret; Ruil Twee Beelde
Hier is 'n voorbeeld van hoe om een beeld in 'n ander te vervaag. Gebruik die HTML:
En die CSS wat die een deursigtig maak terwyl die ander volledig ondeursigtig is en dan die oorgang ruil die twee:
.swapMe img {-webkit-oorgang: alles 1s gemak-in-out; -moz-oorgang: almal 1s gemak-in-out; -ms-oorgang: alle 1s gemak-in-out; -O-oorgang: alle 1s gemak-in-out; oorgang: alle 1s gemak-in-out; } .wap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-deursigtigheid: 1; deursigtigheid: 1; }. swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; deursigtigheid: 0; }