Responzivní je heslo dne a tutoriál CSS3 Animated Media Queries vám kromě přehledné šablony pro implementaci media queries ukáže, jak animovat přechody mezi jednotlivými styly a odkáže vás na pár příkladů.
Jediné, co tomuto nástroji ještě chybí, je možnost přidat obrázek(-y) na pozadí a/nebo je vytvořit přes více gradientů.
Via @elfineer
Přidáno: Možná se vám bude víc líbit tenhle generátor.
Via @machal
Přidáno ještě později: OK, tak zatím nejlepší generátor tlačítek. Umí :hover, :active, více gradientů na pozadí, animace a všechno, co ty předchozí.
Díky @pavelbier
Pro inspiraci, co lze jednoduše udělat, když se použije pár transition a transform animací. Jako vždy je ale potřeba uplatnit soudnost a vkus. Některé ty ukázky jsou vyloženě odstrašující. Animace jsou silný nástroj v uživatelském rozhraní a dá se s nimi lehce hodně pokazit. Všichni máme rádi flashová intra, že… ;-)
Think Vitamin uvolnil svou základní sadu CSS3 kurzů.
K tomu, aby to byl Ultimate CSS Gradient Generator pro mě, bych ještě chtěl mít možnost vkládat obrázky, alespoň jeden. Rád používám průhledná PNGčka k tomu, abych na tlačítku vytvořil texturu.
CSS Piffle bylo pro mě největší překvapení sobotního Barcampu v Praze.
Tutoriál na lehce kýčovitá tlačítka, ale důležitější než konkrétní vzhled je způsob, jakou technikou k němu autor došel.
Via @hellish
John Hicks implementoval pozoruhodný plovoucí layout (zkuste měnit šířku prohlížeče). Inspiraci a návod našel v tomhle článku na A List Apart.
Hezké řešení nápovědy do bublin (nebo máte lepší stručný popis pro „tooltip” ;-) )
Via @matcheck
Návod jak vytvořit podobnou rotující 3D navigaci jakou ukazuje Steve na tomhle videu:
Konečně jsem se dostal ke studiu možností animace, která k nám už teď prosakují z CSS3. Tento článek berte jako moje zápisky z učení.
Čtěte dál
Tumblr blog shromažďující příklady HTML5 a CSS3
