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 pohybovať 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žívame 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%. To znamená, ž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 :vznášať sapseudo-trieda: .greydout: hover {-webkit-opacity: 1;-mozopacity: 1;opacita: 1;}
Všimnete si, že pre tieto príklady používame predplatené verzie pravidla dodávateľa, aby sme zabezpečili spätnú kompatibilitu 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. Po prvé, je to šedá a potom to nie je, bez medziinštitucionálnych stavov 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ť skutočne pekný efekt a postupne sa rozplyniete, chcete ho pridať prechod
majetok do .greydouttrieda: .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é;}
