48 brutálních ukázek HTML5 / CSS3

Tento příspěvek beru jako odpověď na otázku, kterou jste nedávno položili v komentářích k článku:

Kdy je vhodný čas začít plně navrhovat pomocí HTML5?

Upřímně řečeno, záleží na cíli, na který cílíte. Pokud neplánujete, aby vaši návštěvníci používali Internet Explorer (např. Stránka softwaru Mac), začněte hned s HTML5, ale pokud potřebujete, aby váš web viděli lidé s IE, raději počkejte ...

O vchodu, dobře po skoku, 48 ukázek HTML5, které jsou úžasné a zaslouží si být vidět. Skvělé je málo.

Zdroj | HongKiat

audioburst animace

Pohodlná a fantastická animace vytvořená pomocí plátna a zvukové značky HTML5.

Míčový bazén

Tato ukázka, která je představena na poslední události Google I / O, vám ukazuje, jak dynamický může být HTML5.

Blob salát

Tvor vytvořený ve formátu HTML5, který by vás potěšil.

bomomo

S Bomomo můžete sledovat různé atomové pohyby simulované pomocí HTML5.

Prohlížeč Ball

Nechte se ohromit tímto míčem HTML5 mezi prohlížeči.

Bubbles

Bavte se vytvářením nekonečných plovoucích bublin s jinou barvou.

Animace na plátně

Jednoduchá a zábavná karikatura HTML5, která vám pomůže pochopit, co dokáže element plátna HTML5.

coolclock

Pěkné, přizpůsobitelné analogové hodiny vytvořené pomocí HTML5 a JavaScriptu.

Prezentace Flickr PS3

Prohlížejte si fotografie z Flickru pomocí prezentace ve stylu PS3 ve webovém prohlížeči.

Interaktivní Polaroid

Interaktivní ukázka, která funguje docela podobně jako vícedotykové rozhraní.

Ohňostroj JS

Užijte si okamžik ohňostroje s vaší preferovanou gravitací a rychlostí, poháněnou HTML5 a Javascriptem.

Kaleidoskop

Velmi krásný a futuristický kaleidoskop HTML5.

Tekuté částice

Citlivá částicová animace, která reaguje na základě vašeho pohybu myší.

hypnotizující

Další citlivé a vynikající ukázky HTML5, které ukazují, jak blízké prvky reagují na váš pohyb myší.

Mlhovina v oblacích

Ztraťte se s touto úžasnou mlhovinou HTML5.

Parallax

Zobrazit všechny 2D tvary v paralelní perspektivě.

Animace částic

Elegantní animace částic HTML5, která se může proměnit ve vámi preferovanou zprávu.

Rozšířit

Ztraťte se s touto nekonečnou šířící se animací.

Starfield

Skvělá animace hvězdného pole HTML5, která mění směr a rychlost na základě vašeho pohybu myší.

Zničení videa

Jedním kliknutím spustíte přehrávání videa.

Křivka

Všimněte si, jak se plátnová vlna HTML5 pohybuje změnou její amplitudy, vlnové délky, šířky atd.

3D Efekt

Dojem animace na plátně? To je více, co dokáže element plátna HTML5, a říká se tomu 3D efekt. Vývojář se při vytváření 3D efektu může spolehnout na prvek plátna, DOM a JavaScript, který lze později rozvinout do 3D animace nebo hry.

Canvas3D a Flickr

Dopřejte si zcela nový 3D zážitek s Fostrovým fotostreamem.

Simulace látky

Realistická simulace látky založená na HTML5.

Vyvíjející se monstrum

Pozorujte monstrum, které se vyvinulo ve komplikované stvoření, jedním z jeho tvůrců je HTML5.

Dárková krabička Google

Obří vyhledávač Google je prezentován ve 3D hratelném zobrazení.

J.S. Touch

Vysoce kvalitní a realistická ukázka 3D na 2D plátně.

Prezentace dat

Zatímco prvek plátna HTML5 lze použít k vytvoření animace a 3D efektu, lze jej také implementovat k prezentaci matematických dat.

gnuplot

Gnuplot, aplikace pro vykreslování dat ve verzi HTML5.

RGRAPH.

RGraph poskytuje širokou škálu prezentací dat, jako je sloupcový graf, indikátor průběhu a tradiční radarový graf.

Webová aplikace

Nakonec lze s využitím všech možností kombinovaných s HTML5 a dalšími jazyky vytvořit interaktivní aplikaci nebo hru, která je blízká aplikaci Flash.

Canvasaint.

Svědek bratra Microsoft Paint přichází do vašeho webového prohlížeče a jeho otec je HTML5.

CanvasMol

Vědecká aplikace, která vám pomůže pochopit strukturu určitých prvků Země.

Kreslený Builder

Nakreslete zajímavý kreslený obrázek pomocí tohoto minimálního a interaktivního nástroje pro tvorbu karikatur.

Přetáhněte sem cokoli

Přetažením všeho, co můžete přetáhnout v ukázce, zobrazíte podrobnosti.

Gartic skica

Originální aplikace HTML5, která umožňuje vytvářet některé základní kresby, které lze uložit do různých formátů obrázků, například jpeg nebo png.

Fyzická skica

Nakreslete, co se vám líbí, a uvidíte, jak reagují se simulovanou gravitací.

Sketchpad

Výkonná aplikace pro kreslení HTML5, která vám umožní přesně a přesně kreslit a upravovat obrázek.

Malá řeč

Webová aplikace, která potvrzuje geografickou polohu zprávy o počasí získávané z Twitteru, čímž se z ní stává plátěná mapa „sociálního počasí“, poměrně triviální (jak uvádí autor), ale zajímavá.

Hra

3Nudí se

Nikdy byste se nenudili, kdybyste se mohli v příští sekundě vyhnout stovkám kuliček HTML5.

Vypuknout

Odrazte míč a rozbijte všechny cihly.

Plátno

Není to tak docela hra, ale ukazuje, jak lze HTML5 použít k vývoji hry v prohlížeči First Person Shooting.

Chytit to

Kolik míčků se můžete vyhnout, abyste získali svůj vítězný čtverec HTML5?

Řetězová reakce

Řetězte explozi k dosažení cíle, nebuďte závislí.

Krychle

Hrajte Tetris ve 3D, shora dolů.

etchaFyzika

Nakreslete předmět a přesuňte míč ke hvězdě, nezapomeňte na gravitaci.

Skládačka

Kliknutím, otočením a puštěním dílků vyřešíte tuto skládačku založenou na HTML5.

Slide Puzzle

Sklouzněte k vítězství, další hra HTML5, která je vytvořena tak, aby vytlačila vaši mysl šťávu.

Stejná hra

Odstraňte určitou skupinu, abyste získali další skupinu spárovanou ve stejné barvě, a nakonec byste získali vítězství.

Tetris

Jedna z nejklasičtějších her, která HTML5 oživila.

Torus

Ještě další hra Tetris v pseudo-3D verzi.