Prechody CSS3 Vytvorte efekt efektov fade
Web dizajnéri si dlho želali väčšiu kontrolu nad stránkami, ktoré vytvorili, keď CSS3 narazil na scénu. Nové štýly predstavené v systéme CSS3 umožnili webovým profesionálom pridať na svoje stránky efekty podobné Photoshopu. Patria sem vlastnosti, ako sú tieňové stíny a žiary , zaoblené rohy a ďalšie. CSS3 tiež predstavil efekty podobné animáciám, ktoré môžu byť použité na vytvorenie peknej interaktívnosti na stránkach.
Jeden veľmi pekný vizuálny efekt, ktorý môžete pridať do prvkov na vašich webových stránkach pomocou CSS3, je vyblednúť a vyčistiť pomocou kombinácie vlastností pre opacitu a prechod. Jedná sa o jednoduchý a dobre podporovaný spôsob, ako urobiť stránky interaktívnejší tým, že vytvárajú vyblednuté oblasti, ktoré sa dostávajú do ohniska, keď návštevník stránky niečo robí, ako napríklad vznášať sa nad týmto prvkom.
Poďme sa pozrieť, aké ľahké je pridať tento interaktívny vizuálny efekt na rôzne prvky vašich webových stránok.
Zmeniť nepriehľadnosť pri presúvaní kurzora
Začneme tým, ako sa zmení opacita obrazu, keď sa zákazník vznáša nad týmto prvkom. V tomto príklade (HTML je zobrazené nižšie) používam obrázok s atribútom triedy greydout.
Ak chcete, aby bol šedý, pridajte do nášho štýlu šablón CSS nasledovné pravidlá štýlu:
.greydout {
-webkit-opacity: 0,25;
-mozopacity: 0,25;
opacita: 0,25;
}
Tieto nastavenia krytia sa prenášajú na 25%. Znamená to, že obrázok bude zobrazený ako 1/4 jeho bežnej priehľadnosti. Úplne nepriehľadná bez transparentnosti by bola 100%, zatiaľ čo 0% by bolo úplne transparentné.
Ďalej, ak chcete, aby bol obraz jasný (alebo presnejšie, aby sa stal úplne nepriehľadný), keď sa myšou pohybuje nad ním, pridajte: pseudotriedu:
.greydout: hover {
-webkit-opacity: 1;
-mozopacity: 1;
opacita: 1;
}
Všimnete si, že pre tieto príklady používam predplatené verzie pravidla pre dodávateľa, aby sa zabezpečila spätná kompatibilita starších verzií týchto prehliadačov. Zatiaľ čo toto je správna prax, skutočnosťou je, že pravidlo opacity je teraz dobre podporované prehliadačmi a je úplne bezpečné odstrániť tie prefixované linky predajcu. Napriek tomu nie je dôvod, aby ste tieto predpony zahrnuli, ak chcete zabezpečiť podporu pre staršie verzie prehliadačov. Uistite sa, že ste dodržiavali osvedčenú najlepšiu prax ukončenia deklarácie s normálnou, neoptimalizovanou verziou štýlu.
Ak ste na mieste nasadili, uvidíte, že táto úprava opacity je veľmi náhle. Najskôr je šedá a potom nie je, bez medzičasov medzi týmito dvoma. Je to ako zapnutie alebo vypnutie svetla. Môže to byť to, čo chcete, ale môžete tiež experimentovať s postupnou zmenou.
Ak chcete pridať naozaj pekný efekt a postupne sa rozpadnúť, chcete pridať prechodovú vlastnosť do triedy .greydout:
.greydout {
-webkit-opacity: 0,25;
-mozopacity: 0,25;
opacita: 0,25;
-webkit-transition: všetky 3s ľahké;
-moz-transition: všetko 3s ľahké;
-ms-transition: všetky 3s ľahké;
-o-transition: všetky 3s ľahké;
prechod: všetko 3s ľahké;
}
S týmto kódom by zmena postupne postupovala skôr ako len náhle.
Opäť používame tu niekoľko preddefinovaných pravidiel pre predajcov. Prechod nie je tak dobre podporovaný ako opacita, takže tieto predpony majú zmysel.
Jedna vec, ktorú si zapamätáte pri plánovaní týchto interakcií, je to, že zariadenia s dotykovým displejom nemajú "hover" stav, takže tieto efekty sú často stratené pre každého, kto používa zariadenie s dotykovou obrazovkou ako mobilný telefón. Prechod sa často stáva, ale stane sa tak rýchlo, že sa naozaj nedá vidieť. To je v poriadku, ak pridávate túto položku ako príjemný bonusový efekt, ale vyhnite sa akýmkoľvek zmenám, ktoré je potrebné vidieť, aby sa obsah pochopil.
Vyblednutie je možné príliš
Nemusíte začínať s vyblednutým obrázkom, môžete použiť prechody a nepriehľadnosť na vyblednutie z úplne nepriehľadného obrazu. Použitie rovnakého obrázka len s triedou offadeout:
class = "withfadeout">
Rovnako ako predtým zmeníte nepriehľadnosť pomocou voliča: hover:
.withfadeout {
-webkit-transition: všetko 2s easy-in-out;
-moz-transition: všetko 2s easy-in-out;
-ms-transition: všetko 2s easy-in-out;
-o-transition: všetko 2s easy-in-out;
prechod: všetko 2s easy-in-out;
}
.withfadeout: hover {
-webkit-opacity: 0,25;
-mozopacity: 0,25;
opacita: 0,25;
}
V tomto príklade by sa obraz prešiel z úplne nepriehľadného na trochu transparentný - naopak náš prvý príklad.
Prechádzať mimo obrázkov
Je skvelé, že môžete použiť tieto vizuálne prechody a mizne na obrázky, ale nie ste obmedzený iba na používanie obrázkov s týmito efektmi CSS. Môžete ľahko vytvoriť tlačidlá v štýle CSS, ktoré sa pri kliknutí a držaní vytlačí. Stačí nastaviť nepriehľadnosť pomocou: aktívnej pseudo-triedy a vložiť prechod na triedu, ktorá definuje tlačidlo. Kliknutím a podržaním tohto tlačidla zobrazíte, čo sa stane.
Je možné, aby sa v podstate zhoršil vizuálny prvok, keď sa vznášal alebo klepol. V tomto príklade zmením nepriehľadnosť div a farbu textu, keď je myš nad ním. Tu je CSS:
#myDiv {
šírka: 280px;
farba pozadia: # 557A47;
farba: #dfdfdf;
polstrovanie: 10px;
-webkit-transition: všetky 4s easy-out 0s;
-moz-transition: všetky 4s easy-out 0s;
-ms-transition: všetky 4s easy-out 0s;
-o-transition: všetky 4s easy-out 0s;
prechod: všetky 4s easy-out 0s;
}
#myDiv: vznášať {
-webkit-opacity: 0,25;
-mozopacity: 0,25;
opacita: 0,25;
farba: # 000;
}
Navigačné ponuky môžu profitovať z vyblednutých farieb pozadia
V tejto jednoduchej navigačnej ponuke sa farba pozadia pomaly rozbieha a odďaľuje, keď sa pohybujem nad položkami ponuky. Tu je HTML:
- Domov
- CSS3 Tutoriály
- Vlastnosti CSS3
A tu je CSS:
ul # sampleNav {zoznam-štýl: žiadny; }
ul # sampleNav li {
zobrazenie: inline;
plavák: vľavo;
polstrovanie: 5px 15px;
okraj: 0 5px;
-webkit-transition: všetky 2s lineárne;
-moz-transition: všetky 2s lineárne;
-ms-transition: všetky 2s lineárne;
-o-transition: všetky 2s lineárne;
prechod: všetky 2s lineárne;
}
ul # sampleNav li a {text-decoration: žiadne; }
ul # sampleNav li: hover {
farba pozadia: # DAF197;
}
Podpora prehliadača
Ako som sa niekoľkokrát dotkol, tieto štýly majú veľmi dobrú podporu prehliadača, takže by ste sa mali cítiť slobodne a bez strachu. Jedinou výnimkou sú oveľa staršie verzie programu Internet Explorer, ale vďaka nedávnemu rozhodnutiu spoločnosti Microsoft ukončiť podporu pre všetky verzie IE nižšie ako 11 sa tieto staršie prehliadače stávajú čoraz menej problémom - a reálne, ak starší prehliadač nebude Pozrite sa na tento prechod, ktorý by nemal byť veľkým problémom. Pokiaľ obmedzíte tieto druhy efektov na príjemné interakcie a nebudete ich spoliehať na to, aby priniesli funkčnosť alebo odhalili kľúčový obsah, staršie prehliadače, ktoré nepodporujú efekty, získajú menej príjemný zážitok, ale užívatelia týchto prehliadačov nebudú ani vedia rozdiel, najmä ak môžu používať stránky ako normálne a získať informácie, ktoré potrebujú.
Extra zábava, vymeniť dva obrázky
Tu je príklad, ako vyblednúť jeden obrázok do iného. Použite kód HTML:
A CSS, ktorý robí jedného úplne transparentného, zatiaľ čo druhý je úplne nepriehľadný a potom prechod zmení dva:
.swapMe img {-webkit-transition: všetko 1s easy-out-out; -moz-transition: všetky 1s easy-out-out; -ms-transition: všetky 1s easy-in-out; -o-transition: všetky 1s easy-in-out; prechod: všetky 1s easy-out-out; } .swap1, .swapMe: vznášať .swap2 {-webkit-opacity: 1; -mozopacity: 1; opacita: 1; } .swapMe: presunúť .swap1, .swap2 {-webkit-opacity: 0; -mozopacity: 0; opacita: 0; }