Zprávičky s nálepkou CSS3

Taby (někdy nazývané panely) najdeme na webu poměrně často. Ring Wingův tutoriál ukazuje, jak může pomocí CSS3 animací jejich přepínání snadno animovat. Pokud si chcete hned vyzkoušet výsledek, přejděte rovnou na demo1, demo2, demo3 či demo4… Více

Experimentujete s novinkami HTML5 a CSS3? Zapojte se do soutěže Mozilla Derby. Soutěží se o ceny každý měsíc. Vývojáři vytvoří a zašlou své aplikace na zadané téma, resp. ani tak ne aplikace jako dema využití nových technologií. Soutěží se mj… Více

Pěkný demonstrativní úvod do základních technologií z rodiny CSS3 pod názvem Vzhůru do CSS3 vytvořil Martin Michálek. Najdete v něm ukázky základního použití a odkazy pro další informace. Materiály jsou dostupné pod licencí Creative Commons By 3.0… Více

Pokud budeme vytvářet kaskádové styly pro nový web, máme v podstatě dvě možnosti, jak zapsat velikosti fontů. Jedna z nich je definovat vše „napevno“, například pomocí rozměru v pixelech. Druhou možností je určit velikost relativně vůči nadřazenému… Více

Microsoft zvedl hozenou rukavici a s Internet Explorerem opravdu „pohnul“. Verze 9 přinesla výrazný posun, a ve verzi 10 má být počet implementovaných standardů ještě vyšší. Na stránkách IE10 Guide for Developers naleznete seznam funkcí a novinek,… Více

Sbírek podle vzoru „N užitečných triků v CSS“ je už nepočítaně. Přidejme k nim další: http://www.web­designdev.com/web-development/12-really-useful-css3-tips-and-techniques Více

Před víkendem drobná kuriozita – tyto hodiny od Andrewa Hoyera jsou tvořeny jen pomocí DIVů a vhodně použitých 3D CSS transformací (nutno použít prohlížeče, které tyto operace podporují; pokud takový nemáte, můžete vidět výsledek alespoň ve videu). Více

Microsoft vydal update pro VS2010, který přináší podporu pro HTML5, CSS3 a některá JS API. Podpora je jak pro Intellisense, tak pro kontrolu syntaxe. Za zmínku stojí i to, že budete-li psát CSS s vendor prefixy, rozpozná VS2010 i vendor prefixy… Více

Framework Gridless je, na rozdíl od podobných „boilerplates“, zaměřen především na mobilní weby a na responsive design, tedy takový návrh, který počítá s různými výstupními zařízeními. Nepoužívá proto designovou mřížku (grid), namísto CSS resetu… Více

Jak vidno, pokusy o vytvoření věrného 3D efektu u písma jen pomocí CSS neutuchají. Jeden pokus o 3D písmo jsme vám představili v lednu. I dnešní tip využívá stínování: How to create 3D text using CSS3. Více

Grafici dobře znají nastavování vlastností vrstev v Photoshopu – jednoduše lze nastavovat vržené stíny, barevné překryvy a další efekty. Podobné rozhraní nabízí CSS generátor Layer Styles. Více

Joe Lambert vytvořil Flux Slider, knihovnu pro vytváření obrázkových slideshow s přechodovými efekty. Flux Slider definuje přechody pomocí CSS3, takže jsou animovány pomocí HW akcelerace (tam, kde je podporována). Více

Pomocí CSS3 – kombinací barevných přechodů – lze vytvořit různé grafické vzory (pruhy, kříže, vlny apod.) Inspirovat se můžete v galerii vzorů. Více

Vendor prefixy přináší možnost používat CSS novinky, ovšem také nutnost každou vlastnost zapisovat několikrát. Práci mohou ulehčit preprocesory – nebo například online generátor CSS pravidel. Více

Udělat elementu stín není s CSS3 problém. Na webu Widget naleznete 39 velmi kuriozních příkladů stínování (Webkit-only), které kombinují možnosti CSS3, k stínům přidává animaci či přechody, a výsledky jsou více či méně použitelné, každopádně ale zajímavé. Více

Možná jste během posledních měsíců zaznamenali rostoucí popularitu javascriptové knihovny yepnope.js. Ta umožňuje podmíněné načítání skriptů a CSS souborů, ale nejen to. Co všechno knihovna dokáže a kdy se může hodit představuje článek na serveru… Více

Článek na serveru CSS3.info shrnuje další posun prohlížeče Opera v podpoře nových vlastností CSS3. Nová betaverze, představená před několika dny na konferenci SXSW, přináší mimo jiné podporu pro multi-column layout a barevné přechody (gradients),… Více

Na webu MediaQueri.es vznikla galerie nových webových stránek, používajících čím dál populárnější techniku media queries. Tato technika již na Zdrojáku byla popsána několikrát, např. v článku Martina Hassmana nebo článku Jana Sládka. Jedná se… Více

Stavem implementace CSS3 v prohlížečích a rozporem mezi přáním vývojářů a realitou se zabývá článek na serveru Impressive Webs. Více

Moderní webové technologie, počítané do rodiny HTML5, jsou poslední dobou velmi oblíbenou platformou pro ukázky nejrůznějších postupů, známých z Flashe, ovšem bez Flashe. Jednou z nich je i CSS3-man. Fungování animace je vysvětlené v článku. Více

Rychlý rozvoj webových technologií spolu s velkým procentem uživatelů se zastaralými prohlížeči přinesl nutnost testovat možnosti prohlížečů a nabízet podle nich alternativy. Velmi slušnou práci odvede například knihovna Modernizr. Přesto existují… Více

Pomocí kombinací více shadow lze v CSS nasimulovat „3D“ vzhled písma. Jak na to ukazuje tato demonstrace – 3D Text  Více

Pokud se vám líbí grafické zpracování štítků, jaké používá např. služba Delicious, můžete se podívat, jak je vytvořit pomocí CSS3. Tutoriál přináší článek na serveru CSSGlobe. Více

CSS3 implementované v prohlížeči Safari v zařízeních typu iPad umí správně zpracovat parametr „orientation“, což umožňuje tvůrcům přizpůsobit layout pro oba případy, tj. na výšku i na šířku. Jak na to ukazuje článek z blogu Cloud Four. Více

Pak že vývojáři nemají vánoční témata:Na serveru SixRevisions vyšel článek, v němž je popsáno, jak vytvořit vánoční ozdoby v CSS3. Můžete se tedy inspirovat, pokud byste chtěli nějakou ozdobu vytvořit. Více

Jistě znáte efekt zvaný Lightbox, při němž se zobrazí obrázek v překryvné vrstvě, zatímco zbývající obsah „ztmavne“. Tento efekt se nejčastěji řeší pomocí JS pluginů, ale lze jej vytvořit i v čistém CSS3. Seznam deseti zajímavých řešení přinesl web Net Kit. Více

Sencha labs nabízí nástroj Animator, který umožňuje vytvářet animace v CSS3 pomocí „timelines“, podobně jako ve Flashi či v jiných animačních nástrojích. Více

Velmi zajímavá a působivá ukázka 3D transformací je na webu is-real a nese název Wonder Webkit. Demonstruje interaktivní 3D transformace, které prohlížeče s tímto jádrem již dnes zvládnou. Více

Na webu HTML5Rocks vyšel úvod do Flexible Box modelu, tedy do modelu, který je „specializován na vytváření uživatelských rozhraní“. Zjednodušuje věci, jaké se ve starších verzích CSS řešily pomocí divokého flow a pozicování a hacků, například změnu… Více

Pěkná ukázka možností transformací CSS3, které nabízí (zatím hlavně) WebKit, je na webu PHPGuru – IFRAME rotující podle všech tří os. Více