Pokud o CSS3 nemáte ani šajnu, doporučuji vaší pozornosti seriál Honzy Sládka na našem serveru.

Možná si říkáte, z jakého důvodu umisťujeme do článku o CSS3 toto krásné vektorové logo. Nenechte se ale zmýlit, jde o logo dělané pouze pomocí CSS (tzv. „pure css“).

Asi nemá smysl psát, že vytvořit něco takového chce pevné nervy a neutuchající trpělivost. Nebudeme zde polemizovat nad praktickým využitím takového výtvoru, ale představte si: jak by se tvářil kodér, který by od vás dostal takovéto zadání?

Jelikož by byl kodér chytrý (rozuměj líný) chlapec, možná by se pokusil najít nástroje, které by mu tohle, jinak vražedné, zadání zjednodušily.

Generátory

Pojďme si nyní projít seznam těch nejznámějších generátorů, které by onu práci měly kodérovi ulehčit a ukažme si jejich silné a slabé stránky.

CSS3 Generator

Prvním nástrojem, který si ukážeme je CSS3 Generator. Nástroj přehledně zobrazuje základní možnosti, které nám CSS3 nabízí.

Jeho hlavní nevýhodou – jako u většiny css3 generátorů – je, že nás omezuje na manipulaci s jedním elementem a nemůžeme si stáhnout výsledný kód.

Ultimate CSS Gradient Generator

Pokud máme zájem si ulehčit pouze generování css gradientů, je zde Ultimate CSS Gradient Generator. Tento generátor nám kromě zápisu pro webkit a firefox nabízí i alternativní filter pro IE. 

CSS3 Sandbox

CSS3 Sandbox je dalším nástrojem, který nám dává na výběr mezi všemi vizuálními efekty v CSS3, ale neumožňuje nám kombinovat vlastnosti a přizpůsobit si vzhled prvku dle sebe. 

CSS 3.0 Maker

Posledním nástrojem v řadě je CSS 3.0 Maker, který má prakticky totožné výhody/nevýhody jako nástroje předchozí.

Chtělo by to něco jiného

Jak jsme si právě ukázali, CSS3 nástroje našemu kodérovi práci ulehčí, ale jen částečně. Nakonec narazí na to, že mu ukáží jen cestu, jak se dané věci v CSS3 dělají, ale stejně si je bude muset napsat na zelené louce sám. To se kodérovi přestalo líbit, a tak se rozhodl zrealizovat vlastní řešení.

CSS Piffle

U Piffle nelze přesně vymezit jeho mantinely. Můžeme jej pojmout jako nástroj, pomocí něhož si vyzkoušíme krajní meze CSS3 a nebo jako nástroj, který nám jako vývojářům usnadní práci při vytváření složitějších „pure css“ objektů. (Už je vám jasný titulek tohoto článku? Samosebou: „Piffloviny“)

Co umí

Ukážeme si věci, které mohou našemu nešťastnému kodérovi život zjednodušit. Nepůjdeme však do žádných detailů – bude lepší když si jednotlivé věci v Pifflu vyzkoušíte živě sami.

Mezi základní věci, které si můžeme (na rozdíl od ostatních generátorů) přizpůsobit, jsou rozměry a barva elementů.

Prvky můžeme na stránce libovolně přidávat a odebírat. Celkový počet elementů je omezen na 217, proč je tomu tak, zjistíte, jen když přečtete článek až do konce…).

Barvu si můžeme vybrat pomocí color pickeru, popř. ji přímo definovat v hexadecimálním, RGBA nebo HSLA formátu. Další samostatnou částí volby barevného pozadí je možnost definice přechodu (gradientu): 

Mezi další kategorie vlastností, které lze v Pifflu upravovat, patří bordery. Do této kategorie se řadí samotný border a kulaté rohy (border-radius). Pomocí jednoduchého UI se dá během chvíle vytvořit např. základ pro naše vlastní prvky uživatelského rozhraní. 

Můžeme zde definovat border-radius pro celý element nebo pro jednotlivé rohy.

Další často zmiňovanou CSS3 vlastností je stín neboli box-shadow. Piffle nám umožňuje libovolně přidávat/modif­kovat/odebírat stíny elementu. 

Někdo může namítnout, že by si takovou věc napsal během pár minut sám, ale proč ztrácet čas psaním kódu, když si to zde může živě vyzkoušet.

Často diskutovanou skupinou vlastností CSS3 jsou transformace, které nám kromě aktuální změny tvaru elementu umožní i jeho následnou animaci. 

Poslední skupinou vlastností (v současné verzi) je reflection (odraz). 

Když jsme se svým dílem spokojeni, můžeme si stáhnout (ikona v levém spodním rohu) archiv s kompletním kódem – HTML a CSS.

TIP: Posílání bugů v CSS Piffle je jedna velká radost, zkuste si jej (pokud nějaký najdete).

Co bude umět?

Představme si nyní featury, které jsou právě ve vývoji a budou zveřejněny v beta verzi Pifflu.

• První jsou skupiny vrstev, ty nám kromě organizování rozsáhlejšího vypiffleného výtvoru umožní pracovat s perspektivou v 3D transformacích.
• Pokud budete mít rozsáhlejší projekt s více vrstvami, určitě by vás naštvalo, pokud byste si omylem zavřeli okno prohlížeče, proto bude v beta verzi implementováno ukládání do localStorage.
• Další chystanou novinkou je možnost rychlého zobrazení vygenerovaného CSS pouze pro určený element.
• Drobnější novinkou je podpora multi touch gest iPadu.
• Utajovanou novinkou je využití deviceorientation (iPad a MacBook).
• Jedna z věcí, která uživatelům Pifflu schází je možnost přidávat text a využívat CSS3 možnosti stylování textu – text shadow, text stroke, apod.
• Psaní animací v CSS3 je zbytečně zdlouhavé (nemluvě o jejich testování), proto jsme se rozhodli je do Pifflu také zařadit.

Inception

Často se nás lidé ptají, proč vlastně Piffle vznikl.

Prvotní impuls přišel ve chvíli, kdy jsme si (jako každá cool společnost) chtěli vyrobit vlastní pure css logo. Po dlouhém přemýšlení, jak udělat naše logo v CSS jednoduše, jsme došli k tomu, že by bylo stále potřeba nastylovat cca 217 divů a do toho se nám (kodérovi) příliš nechtělo. Proto jsme začali jako každý chytrý (líný) kodér hledat cestu, jak by se to dalo zjednodušit – nenašli jsme ji – a tak jsme si chtěli vytvořit jednoduchý generátor jen pro naše potřeby. 

Uživatelské rozhraní

První wireframe UI našeho nástroje vypadal takto: 

A od velmi jednoduchého nástroje pro osobní potřebu jsme se dostali k něčemu, co v současné době vypadá takto: 

Vývoj

Uživatelské rozhraní bylo vymyšleno a začal bouřlivý vývoj.

Začali jsme promyšlením základní struktury aplikace a volbou vhodného javascriptového frameworku/kni­hovny. Nejprve přišlo na řadu jQuery, které přestalo po napsání prvních 20 řádků kódu stačit a začalo se hledat jiné řešení. Toto řešení přišlo v podobě frameworku dojo, který nám umožnil implementaci skutečných tříd a snadnou manipulaci s nimi.

Frontend v Pifflu (JavaScript) si prošel dvěma fázemi vývoje. První bylo rozchození nejzákladnějších vlastností (psáno v jednom člověku) a druhou fází (lépe řečeno revolucí) bylo připojení dalšího člověka do Pifflu – v tu chvíli jsme ještě nevěděli, že se přes noc JavaScript promění na něco, co s jeho původní podobou nebude mít kromě názvů tříd téměř nic společného.

Backend, který mimo jiné generuje kód ke stažení, je napsán v PHP frameworku Nette. Díky tomu je postaráno i o všemožné zranitelnosti ve formulářích a jiných uživatelských vstupech a nebylo přitom potřeba vymýšlet nový jazyk nad PHP.

Při testování některých CSS3 vlastností jsme v CSS Piffle začali narážet na renderovací chyby prohlížečů, které možná nejsou tak známé. Pozn.: na uvedeném screenshotu jde o chybu renderování Google Chrome v7. Verze 8 již touto chybou nadále netrpí. 

Závěr

Dnes jsme si ukázali některé nástroje pro zjednodušení psaní CSS3 a představili nástroj CSS Piffle, který tyto potřeby sjednocuje. Je jen na vás, zda vám Piffle práci usnadní a zapadne do vašeho workflow, či jím opovrhnete a raději budete psát gradienty s nakloněním pod určitým úhlem ručně.

Na úplný závěr malá hádanka: jak byste vytvořili útvar vyobrazený na screenshotu?

O odpovědi se můžete podělit v komentářích.