Weboví designéři již dlouho požadovali větší kontrolu nad stránkami, které vytvářejí, když CSS3 narazil na scénu. Nové styly představené v CSS3 umožnily webovým profesionálům přidávat na své stránky efekty podobné Photoshopu. Patří sem vlastnosti, jako jsou stíny a záře, zaoblené rohy a další. CSS3 také představil animační efekty, které mohou být použity k vytvoření hezké interaktivity na webech.
Jeden velmi hezký vizuální efekt, který můžete přidat k prvkům na vašem webu pomocí CSS3, je zkombinovat a vystupovat pomocí kombinace vlastností pro opacitu a přechod. Jedná se o jednoduchý a dobře podporovaný způsob, jak zvýšit interaktivitu vašich stránek tím, že vytvoříte vybledlé oblasti, které se dostanou do ohniska, když návštěvník stránek něco dělá, jako například vznášet nad daným prvkem.
Podívejme se na to, jak snadné je přidat tento interakční vizuální efekt mezi různé prvky vašich webových stránek.
Změna opacity na ukazateli myši
Začneme tím, že se podíváme, jak změnit neprůhlednost obrázku, když se zákazník pohybuje nad tímto prvkem. V tomto příkladu (níže uvedený kód HTML) používáme obrázek s atributem třídy
greydout.
Aby to bylo šedé, přidáme do našeho stylu stylů CSS následující pravidla stylu: .greydout {-webkit-opacity: 0,25;-mozopacity: 0,25;opacita: 0,25;}
Tato nastavení opacity se překládají na 25%. To znamená, že obraz bude zobrazen jako 1/4 jeho normální průhlednosti. Plně opačná bez průhlednosti by byla 100%, zatímco 0% by bylo naprosto transparentní. Dále, chcete-li, aby obraz byl jasný (nebo přesněji, aby se stal zcela neprůhledný), když se myší přesahuje, přidávejte :vznášet sepseudo-class: .greydout: hover {-webkit-opacity: 1;-mozopacity: 1;opacita: 1;}
Všimnete si, že pro tyto příklady používáme předdefinované verze pravidla pravidla, abychom zajistili zpětnou kompatibilitu starších verzí těchto prohlížečů. Zatímco toto je dobrá praxe, skutečnost spočívá v tom, že pravidlo opacity je nyní dobře podporováno prohlížečem a je zcela jisté, že tyto předpřipravené linky dodavatele upustí. Přesto neexistuje žádný důvod, proč byste neměli zahrnout tato předpona, chcete-li zajistit podporu starších verzí prohlížeče. Ujistěte se, že dodržujete osvědčenou doporučenou praxi ukončení deklarace s normální, nefixovanou verzí stylu. Pokud jste tuto funkci nasadili na webu, uvidíte, že tato úprava opacity je velmi náhlá změna. Za prvé, je to šedá a pak to není, bez mezitím mezi těmito dvěma státy. Je to jako zapnutí nebo vypnutí světla. Může to být to, co chcete, ale možná budete chtít experimentovat se změnou, která je postupnější. Chcete-li přidat opravdu pěkný efekt a učinit tento postupný pokles, chcete přidat přechod
vlastnictví k .greydouttřída: .greydout {-webkit-opacity: 0,25;-mozopacity: 0,25;opacita: 0,25;-webkit-transition: všechny 3s snadné;-moz-transition: všechny 3s snadné;-ms-transition: všechny 3s snadné;-o-přechod: všechny 3s snadné;přechod: všechny 3s snadné;}
