V předchozím článku jsem se věnoval vlastnostem nových kaskádových stylů. Dnes Vám nabídnu několik zajímavostí vytvořených pouze pomocí stylů. Pro plnou funkčnost prohlížejte v Google Chrome nebo v Safari.
Všechny objekty jsou vytvořené pouze pomocí CSS a to včetně animací. Není zapotřebí žádný obrázek. Zejména v druhé desítce si najeďte myší nad jednotlivé objekty a potěšte se nápaditou animací. Využívá se box-shadow a font-face.
Zdroj: http://www.viget.com/uploads/file/boxshadows/
Jednoduchá a efektní animace nejen cenových nabídek. Využit border-radius, box-shadow, text-shadow, gradients.
Zdroj: http://stuffandnonsense.co.uk/content/demo/cannybill/21-10-2009/pricing.html
Animovaný model sluneční soustavy s vyskakovací legendou a zvýrazněním zvolených oběžných drah. Využívá animace, transformace a border-radius.
Zdroj: http://neography.com/experiment/circles/solarsystem/
Jednoduchá montáž textů a pozadí za použití nestandardního písma (font-face), transformací a gradientů se stíny.
Zdroj: http://neography.com/experiment/type1/
Pomocí CSS 3 jsou naformátována mezikruží a písma. O vlastní zobrazení aktuálního času se stará jQuery.
Zdroj:http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html
Zdroj: http://lensco.be/files/clocks/
Formátování fotogafií s popisy jako klasické polaroidové fotky s :hover efektem po najetí myši.
Zdroj: http://www.zurb.com/playground/css3-polaroids
Písma pomocí font-face, světelný efekt gradientem a sledování kurzoru pomocí JS.
Zdroj: http://svay.com/experiences/css3-spotlight/
Klasická animační technika. Pohyb loutky je realizován CSS 3 animací jednotlivých částí – obrázků.
Zdroj: http://anthonycalzadilla.com/css3-ATAT/index.html
Zdroj: http://demosthenes.info/blog/425/Card-Fan-CSS3-Gallery-Reveal-In-Four-Lines-of-Code
Zdroj: http://demo.marcofolio.net/css3_bar_chart/
Volitelné pohybující se barevné přechody na běžném (vybíratelném) textu.
Zdroj: http://trentwalton.com/bgclip/
Další povedená animace.
Zdroj: http://www.subcide.com/experiments/fail-whale/
Nečekaně jednoduché řešení otáčení objektu a texturou.
Zdroj: http://www.romancortes.com/blog/pure-css-coke-can/
Zdroj: http://development.tobypitman.com/slideshow/index3.html#1
S těmito novými postupy a zvyšující se četností zapracování rodiny CSS 3 do prohlížečů, se posouvají hranice rozumně implementovatelné tvořivosti. A tak pro fantazii kreativců a klientů není téměř žádné omezení. Těšíme se na častější implementace těchto trendů i v našich projektech.
