Owen Little
0 
1310
304
CSS3 (v kombinaci s výkonem HTML5) je rychle podporován všemi hlavními prohlížeči (číst - cokoli kromě Internet Exploreru), takže jsem si myslel, že by teď byl dobrý čas vidět některé z skvělých efektů CSS, které můžeme pomocí využití moci dosáhnout vašeho prohlížeče a malého kódu CSS. Pokud používáte nejnovější prohlížeč Chrome, Safari nebo Firefox, měli byste vidět všechny efekty uvedené v tomto článku.
První - Co je to CSS?
Pokud čtete tento článek, protože vás zajímá, ale nemáte ponětí, co to CSS znamená, vysvětlím rychle. CSS je kódovací jazyk používaný k dekoraci webových stránek. Znamená Cascading Style Sheet, a v podstatě jen přidá styl a vkus na místě. Webové stránky jsou určitě čitelné bez jejich CSS, ale jsou hrozné, stejně jako všechny webové stránky byly zpět v roce 1995. Zatímco soubory HTML popisují strukturu a textový obsah stránky, CSS je umožňuje zobrazovat způsobem, který zamýšlel designér, a určit vše od rozvržení stránky, velikost textu a barvy, a nyní řadu efektů se zavedením CSS3.
Dosažení stejných efektů, jaké jsou popsány v tomto článku, by v minulosti znamenalo stažení objemného CSS nebo dokonce větší grafiky. Nyní CSS může vašemu prohlížeči jen popsat, jak by stránka vypadala, a prohlížeč bude zpracovávat zpracování. Je to jako bych vám podal plány na vybudování vlastního domu místo toho, abych vám prodal celý dům - je to výrazně levnější!
Zaoblené rohy
Internet postupně začíná být „kulatější“, ale nyní je to v CSS3 zpevněno. Podívejte se na rámeček obklopující tento odstavec. Nejedná se o obrázek - zkuste kliknout pravým tlačítkem myši a uvidíte. Čisté CSS!
Kód pro zaoblené rohy je opravdu jednoduchý:
.box_round -moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / poloměr ohraničení: 20 pixelů; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /Textový stín
Text může někdy vypadat opravdu tvrdě sám, ale jednoduchý malý stín věci opravdu pomáhá. Podívejte se na stín, který jsem použil v tomto odstavci.
Zde je kód pro některé textové stíny:
.box_textshadow text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * /Přechody
Žádné další ploché barvy ani obrázky přechodu na pozadí, nyní můžete vytvořit skvělý přechod pouze pomocí CSS. Bohužel potřebujete několik řádků kvůli současným problémům s nekompatibilitou mezi prohlížeči, ale můžete použít nástroj, který popíšu později, aby se automaticky vygeneroval.
Zde je kód pro přechody CSS:
.box_gradient background-color: # 3f9fe3; background-image: -moz-linear-gradient (top, # 3f9fe3, #white); / * FF3,6 * / pozadí: -moz-lineární gradient (horní, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradient (top, # 3f9fe3, #white); / * IE10 * / background-image: -o-lineární-gradient (horní, # 3f9fe3, #white); / * Opera 11.10+ * / obrázek na pozadí: -webkit-gradient (lineární, vlevo nahoře, vlevo dole, od (# 3f9fe3) do (#white)); / * Saf4 +, Chrome * / obrázek na pozadí: -webkit-lineární-gradient (horní, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / obrázek na pozadí: lineární gradient (horní, # 3f9fe3, # bílé); filtr: progid: DXImageTransform.Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = "# white"); / * IE6-IE9 * /Otáčení
Je obtížné si představit, jak to využít z hlediska textu, ale při použití obrázků může například přidat nějaké pěkné designové prvky. Znovu si všimněte, že i když byl tento odstavec otočen, můžete jej stále vybírat a interagovat, protože zůstává běžným textem.
Zde kód něco otočit:
.box_rotate -moz-transform: rotate (7.5deg); / * FF3,5 + * / -o-transformace: rotace (7,5deg); / * Opera 10,5 * / -webkit-transformace: rotace (7,5deg); / * Saf3.1 +, Chrome * / -ms-transformace: rotace (7,5deg); / * IE9 * / transformace: rotace (7,5deg); filtr: progid: DXImageTransform.Microsoft.Matrix (/ * IE6-IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,19952619222005157, M22 = 0,9914448613738104, sizingMethod = "auto expand;" zoom: 1; Animace
Ach ano, zachránil jsem to nejlepší 'do posledního. CSS3 zavádí různé formy animace pro libovolný počet popsaných skvělých efektů CSS. V tomto odstavci jsem definoval vlastnost přechodu, jak je uvedeno níže, a také jednoduchou barvu pozadí a rotaci, když na ni přejdete. Pokud ještě nejste, umístěte kurzor nad tento odstavec textu a uvidíte efekt v akci. Můžete animovat téměř cokoli!
Takový přechodový kód budete potřebovat u každého prvku, který chcete změnit. Budete také muset použít některé třídy pseudo CSS (například: hover pro změnu vlastností, které chcete animovat, jako je barva, velikost nebo rotace)
.box_transition -moz-transition: všechny 0,5s easy-out; / * FF4 + * / -o-přechod: všechny 0,5s uvolnění; / * Opera 10.5+ * / -webkit-transition: vše 0,5s easy-out; / * Saf3.2 +, Chrome * / -ms-transition: všechny 0,5s uvolnění; / * IE10? * / přechod: uvolnění všech 0,5 s; Neslučitelnost napříč prohlížeči
Ačkoli většina moderních prohlížečů některým způsobem podporuje všechny CSS3, některé stále vyžadují nějaký trochu odlišný kód nebo hacky, aby to fungovalo s jejich konkrétní implementací standardu. Například ve výše uvedeném kódu uvidíte mnoho instancí -moz- nebo -webkit- předcházejících některým vlastnostem CSS, které se vztahují k prohlížečům založeným na Mozilla nebo Webkit. Zápis těchto řádků navíc může být bolestí, takže se podívejte na generátor css3 a napište je za vás.
Závěr
S novými rozšířeními CSS3 a HTML5 bude web mnohem více vzrušující. Je pravda, že uvidíme další výtrysk blikajícího textu a vysoký poměr whiz-bangu ke skutečnému obsahu (stejně jako tomu bylo v případě, že animované GIF byly první “objevil”), ale v dlouhodobém horizontu se naučíme, jak používat nástroje CSS3 k vytvoření zajímavějších webových rozhraní. A hej, vždy to všechno můžeš vypnout!
Pokud jste sami vývojář nebo webový vývojář, nezapomeňte, že CSS3 by nikdy neměla být jedinou možností. Pokud váš web nebude fungovat bez CSS3, nepoužili jste jej správně. CSS by měla být použita k vylepšení prostředí, nikoli funkčnosti programu.