The nové styly zavedené v CSS3 dal webovým profesionálům možnost přidat na své stránky efekty podobné Photoshopu. Jeden vizuální efekt, který můžete přidat pomocí CSS3 je, aby byly webové stránky interaktivní vytvořením vybledlých oblastí, které se dostanou do centra pozornosti, když návštěvník webu něco udělá, jako když se vznáší nad tímto prvkem. Tento efekt používá kombinaci neprůhlednost a přechod.
Změnit krytí při najetí myší
Jedním z interaktivních prvků je změna neprůhlednosti obrázku, když se zákazník nad tímto prvkem najede. V tomto příkladu (HTML je zobrazen níže) použijeme obrázek s atributem třídy šedý.
Chcete-li, aby byla šedá, přidejte do šablony stylů CSS následující pravidla stylu:
.šedá {
-webkit-neprůhlednost: 0,25;
-moz-opacita: 0,25;
neprůhlednost: 0,25;
}
Tato nastavení krytí se překládají na 25 procent. To znamená, že obrázek bude zobrazen jako 1/4 jeho normální průhlednosti. Úplně neprůhledné bez průhlednosti by bylo 100 procent, zatímco 0 procent by bylo zcela průhledné.
Dále, aby byl obrázek jasný (nebo přesněji, aby byl zcela neprůhledný), když nad ním přejedete myší, přidali byste následující:
.greydout: vznášet se {
-webkit-neprůhlednost: 1;
-moz-neprůhlednost: 1;
neprůhlednost: 1;
}
Více úprav neprůhlednosti
Všimnete si, že pro tyto příklady používáme verze pravidla s předponou dodavatele, abychom zajistili zpětnou kompatibilitu pro starší verze těchto prohlížečů. I když je to dobrý postup, pravidlo krytí je dobře podporováno prohlížečia je bezpečné tyto řádky s předponou dodavatele zrušit.
Přesto není důvod tyto předpony nezahrnout, pokud chcete zajistit podporu pro starší verze prohlížeče. Nezapomeňte dodržovat osvědčený postup zakončení deklarace normální, nepředponovanou verzí stylu.
Při nasazení na webu je tato úprava krytí náhlou změnou. Nejprve je šedá a pak není, mezi těmito dvěma nejsou žádné přechodné stavy. Je to jako vypínač - zapnuto nebo vypnuto. To může být to, co chcete, ale můžete také experimentovat se změnou, která je postupnější.
Chcete-li přidat pěkný efekt a postupné slábnutí, přidejte znak přechod vlastnictví:
.šedá
třída: .greydout {
-webkit-neprůhlednost: 0,25;
-moz-opacita: 0,25;
neprůhlednost: 0,25;
-webkit-transition: všechny 3s snadnost;
-moz-transition: všechny 3 s ulehčují;
-ms-transition: všechny 3 s ulehčují;
-o-přechod: všechny 3s snadné;
přechod: všechny 3s snadné;
}