5 skvělých efektů CSS3, které uvidíte víc

reklama

CSS3 (v kombinaci s výkonem HTML5) je rychle podporován všemi hlavními prohlížeči (číst - cokoli kromě Internet Explorer), takže jsem Myslel jsem, že by nyní byl vhodný čas podívat se na některé z skvělých efektů CSS, kterých lze dosáhnout pomocí výkonu 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 znamená CSS, vysvětlím si to 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 jistě č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 činí tak, jak je zobrazují návrháři zamýšlel a určil vše od rozvržení stránky, velikosti textu a barev, a nyní řadu úvodních efektů 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í. Jako bych vám předával 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

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

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

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í

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. Matice (/ * IE6 – IE9 * / M11 = 0,9914448613738104, M12 = -0,13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, změna velikosti = 'auto expand'); zoom: 1; }

Animace

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: uvolnění všech 0,5 s; / * 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 snadné 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. Psaní těchto řádků navíc může být bolest, ale podívejte se na generátor css3 napsat je pro 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 když animované GIF byly poprvé „objeveny“), ale v dlouhodobém horizontu se naučíme, jak pomocí nástrojů CSS3 vytvořit zajímavější web 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.