Přechody CSS3 Vytvářejí efekty efektu fade
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 webu 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 do různých prvků vašich webových stránek.
Změnit neprůhlednost při pohybu kurzorem 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. Pro tento příklad (HTML je znázorněno níže) používám 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, aby se obraz objevil jasně (nebo přesněji, aby se stal zcela neprůhledný), když je myš nad sebou, přidáte: pseudo-class hover:
.greydout: hover {
-webkit-opacity: 1;
-mozopacity: 1;
opacita: 1;
}}
Všimnete si, že u těchto příkladů používám předikované verze pravidla pravidla, aby se zajistila zpětná kompatibilita 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. Nejdřív to je š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 postupně to postupně zničíte, přidejte přechodovou vlastnost do třídy .greydout:
.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é;
}}
S tímto kódem by změna postupně přecházela spíše než jen náhle přepínání.
Opět platí, že zde používáme několik předponovaných pravidel prodejců. Přechod není tak dobře podporován jako opacita, takže tyto předpony mají smysl.
Jedna věc, kterou je třeba pamatovat, když plánujete tyto interakce, je to, že dotyková obrazovka nemá "hover" stav, takže tyto efekty jsou často ztraceny u každého, kdo používá zařízení s dotykovou obrazovkou, jako je mobilní telefon. Přechod se často stává, ale stane se tak rychle, že se skutečně nedá vidět. To je v pořádku, když přidáváte tento příspěvek jako pěkný bonusový efekt, ale vyvarujte se jakýchkoli změn, které je nutné vidět, aby obsah byl srozumitelný.
Vyblednutí je možné příliš
Nemusíte začít s vybledlým obrázkem, můžete použít přechody a neprůhlednost, abyste zmizeli z zcela neprůhledného obrazu. Použití stejného obrázku pouze s třídou offadeout:
class = "withfadeout">
Stejně jako dříve změníte opacitu pomocí voliče: hover:
.withfadeout {
-webkit-transition: vše 2s easy-in-out;
-moz-transition: vše 2s easy-in-out;
-ms-transition: vše 2s easy-in-out;
-o-přechod: všechny 2s easy-in-out;
přechod: všechny 2s easy-in-out;
}}
.withfadeout: hover {
-webkit-opacity: 0,25;
-mozopacity: 0,25;
opacita: 0,25;
}}
V tomto příkladu by se obraz přešel od zcela neprůhledného na poněkud průhledný - na opačné straně prvního příkladu.
Chystáte se za obrazy
Je skvělé, že můžete použít tyto vizuální přechody a mizí na obrázky, ale nejste omezeni pouze na použití obrázků s těmito efekty CSS. Můžete snadno vytvářet tlačítka ve stylu CSS, které při stisknutí a přidržení vyblednou. Stačí nastavit krytí pomocí: aktivní pseudo-třídy a dát přechod na třídu, která definuje tlačítko. Klepnutím a přidržením tohoto tlačítka zobrazíte, co se stane.
Je možné, že v podstatě jakýkoliv vizuální prvek zmizí, když se přesune nebo klepne. V tomto příkladu změním opacitu divu a barvu textu, když je myš nad ním. Zde je CSS:
#myDiv {
šířka: 280px;
barva pozadí: # 557A47;
barva: #dfdfdf;
polstrování: 10px;
-webkit-transition: všechny 4s easy-out 0s;
-moz-transition: všechny 4s easy-out 0s;
-ms-transition: všechny 4s easy-out 0s;
-o-přechod: všechny 4s easy-out 0s;
přechod: všechny 4s easy-out 0s;
}}
#myDiv: umístit {
-webkit-opacity: 0,25;
-mozopacity: 0,25;
opacita: 0,25;
barva: # 000;
}}
Navigační nabídky mohou těžit z blednutí pozadí
V této jednoduché navigační nabídce barva pozadí pomalu vystupuje a vystupuje, když se přes položky menu zobrazí myši. Zde je HTML:
- Domov
- CSS3 Tutoriály
- Vlastnosti CSS3
A tady je CSS:
ul # sampleNav {seznam-styl: žádný; }}
ul # sampleNav li {
zobrazení: inline;
plavat vlevo;
polstrování: 5px 15px;
margin: 0 5px;
-webkit-transition: všechny 2s lineární;
-moz-transition: všechny 2s lineární;
-ms-transition: všechny 2s lineární;
-o-přechod: všechny 2s lineární;
přechod: všechny 2s lineární;
}}
ul # sampleNav li a {text-dekorace: žádný; }}
ul # sampleNav li: hover {
barva pozadí: # DAF197;
}}
Podpora prohlížeče
Jak jsem se několikrát dotkl, tyto styly mají velmi dobrou podporu prohlížeče, takže byste se měli cítit svobodně používat bez jakéhokoli útrapění. Jedinou výjimkou jsou mnohem starší verze aplikace Internet Explorer, ale s nedávným rozhodnutím společnosti Microsoft ukončit podporu pro všechny verze IE nižší než 11 se tyto starší prohlížeče stávají stále méně problémem - a realisticky, pokud starší prohlížeč vidíte tento přechod, který by neměl být hlavním problémem. Dokud omezujete tyto efekty na zábavné interakce a nespoléhejte se na ně, abyste je řídili funkčností nebo odhalili klíčový obsah, starší prohlížeče, které nepodporují efekty, získají méně příjemný zážitek, ale uživatelé těchto prohlížečů nebudou ani znáte rozdíl, zvláště pokud mohou používat stránky jako normální a získat informace, které potřebují.
Extra Fun; Vyměňte dva obrázky
Zde je příklad, jak vyblednout jeden obraz do jiného. Použijte HTML:
A CSS, který dělá jeden plně transparentní, zatímco druhý je zcela neprůhledný a pak přechodové swapy dva:
.swapMe img {-webkit-transition: vše 1s easy-out-out; -moz-transition: vše 1s easy-out-out; -ms-transition: všechny 1s easy-out-out; -o-přechod: všechny 1s easy-in-out; přechod: všechny 1s easy-in-out; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -mozopacity: 1; opacita: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -mozopacity: 0; opacita: 0; }}