Nástroje pro snadnou tvorbu CSS3

CSS3 se pomalu stávají součástí každého moderního webu. A to i přes to, že není možné očekávat podporu pro všechny možnosti od všech prohlížečů. Proč je tedy používat? Můžete tak nabídnout uživatelům, jejichž prohlížeč CSS3 podporuje, specifický zážitek při prohlížení vašeho webu a ostatním nabídnou klasický obsah (neméně zajímavý, avšak bez hezkých efektů). Jak ale CSS3 efekty používat, když není příliš mnoho editorů, které by je v sobě měly implementovány?

Odpověď se sama nabízí. Buď se je naučit používat a psát tak složitější kód, což může být značně pracné, nebo je zde možnost využít nástrojů, které jsou zdarma dostupné na Internetu.

Protože díky CSS3 vlastnostem je možné docílit hezkých efektů, které by bylo nutné vytvářet např. pomocí obrázku, flashe nebo pomocí JavaScriptu, odpadne zde nutnost použít dodatečně soubory a zrychlit tak i načítání své webové stránky.

Jaké nástroje je možné použít?

Nástrojů pro snadnější tvorbu CSS3 je spousta, na Internetu je spousta tutoriálů nabízející ukázkové příklady. Snažil jsem se proto vybrat ty nejzajímavější, které v ucelené formě nabízí nástroje pro všechny možnosti CSS3 efektů, kde je také možné snadno použít vygenerovaný kód.

Vybral jsem celkem několik zajímavých nástrojů – webovou aplikaci CSS 3.0 Maker, CSS3 Generator, desktopovou aplikaci Sencha Animator, kterou je možné nainstalovat na váš počítač (ať už na Windows, Mac nebo Linux) a pro zájemce kompletní přehled všech možností CSS3 v PDF souburu od Smashing Magazine CSS 3 Cheat Sheet.

CSS 3.0 Maker

Tento povedený nástroj nabízí opravdu hodně možností pro snadnou tvorbu CSS3 v povedeném prostředí a můžete pomocí něj snadno vytvořit následující možnosti:

• Border Radius
• Gradient
• CSS Transform
• CSS Animation
• CSS Transition
• RGBAText
• ShadowBox
• ShadowText
• Rotation
• @Font Face

Jak ukazuje přiložený obrázek, je zde samozřejmě možnosti pro přizpůsobení efektů, demonstrace navolených vlastností, seznam prohlížečů podporující danou vlastnost (jsou zde jak desktopové prohlížeče, tak i mobilní) a v poslední řadě to nejdůležitější – výsledný CSS kód, který je pak následně možné použít ve vaší stránce.

Pokud si tedy dáte práci s nastavením některé vlastnosti, můžete si její kód stáhnout do počítače. Aplikace vám vytvoří ZIP archiv, ve kterém bude přiložen HTML soubor, který slouží jako ukázkový pro váš vytvořený efekt i s potřebným CSS zápisem pro vlastní implementaci.

CSS3 Generator

Tato webová aplikace je v mnoha směrech podobná aplikaci CSS 3.0 Maker, avšak nabízí jednodušší rozhraní pro vlastní nastavení CSS3 prvků. Díky této aplikaci si můžete nastavit následující možnosti:

• Border Radius
• Box Shadow
• Text Shadow
• RGBA
• @Font Face
• Multiple Columns
• Box Resize
• Box Sizing
• Outline
• Transitions
• Transform
• Selectors
• Gradients

Jak můžete vidět na obrázku, jsou zde možnosti vlastního nastavení dané CSS3 vlastnosti, je zde ukázka vlastního nastavení, seznam kompatibilních prohlížečů a opět je zde vygenerovaný kód, který můžete použít pro vlastní použití.

Vygenerovaný kód si v této aplikaci stačí zkopírovat a následně jej ihned použít pro váš požadovaný HTML element.

Sencha Animator

Nedávno byl společností Sencha Inc. Která stojí mimo jiné například za JavaScriptovými frameworky Sencha Touch a ExtJS nástroj pro snadné vytváření jednoduchých i složitějších HTML5 a CSS3 animací s názvem Sencha Animator. Zatím je tato aplikace v ukázkové podobě, ale je již možné jí získat a používat jí. Pokud jste si mysleli, že vytváření složitějších CSS3 animací je zdlouhavé a pracné, že je rychlejší použít flash – tak to dnes, nejen díky tomuto nástroji – neplatí.

Právě díky omezeným možnostem některých prohlížečů jsou zatím podporovány prohlížeče běžící na jádru WebKit, tedy např. Google Chrome, Apple Safari a prohlížeče mobilních zařízení typu iPhone nebo BlackBerry.

Díky tomuto nástroji můžete použít následující možnosti:

• Transitions and animations
• 2D & 3D Transforms
• Backgrounds & Borders
• Font-Family & Variants
• Layouts
• Gradients & RGBA Colors
• Text Shadows
• Box Reflection

Díky kvalitnímu rozhraní je možné vytvořit jednoduchou i složitější animaci, tak jak jsou zvyklý vývojáři ve flashe.

Sencha Animator je zatím ve vývojové fázi, ale jak jsem se zmínil na začátku představení této aplikace, je možné tento nástroj již používat. Jsou proto také připraveny ukázky animací, které je možné vytvořit, např. Water nebo Cogs.

Slovo závěrem

Protože tvorba CSS3 efektů může být v mnoha případech poněkud náročnější, jistě se podobné nástroje hodí každému, kdo rád na webu experimentuje s nejnovější technologií. Určitě je dobré tyto nástroje blíže prozkoumat a využít jejich výhod.

Zatím jsou CSS3 efekty často dostupné pouze u omezeného počtu webových prohlížečů (především u prohlížečů běžících na jádře WebKit), ale i další prohlížeče některé z těchto efektů podporují. Nemusíte se tak bát, že by vaše práce vyšla na prázdno, tyto efekty jistě každý návštěvník vaší aplikace ocení.

Pokud máte zájem o kompletní přehled CSS3 vlastností, server Smashing Magazin vydal dokument, který tyto vlastnosti obsahuje a je možné si ho stáhnout.

Poznámka: Internet Explorer 9 ve své vývojové řadě už také podporuje CSS transformace, takže je možné očekávat podporu pro další CSS3 vlastnosti.