48 brutálnych ukážok HTML5 / CSS3

Tento príspevok beriem ako odpoveď na otázku, ktorú ste nedávno položili v komentároch k článku:

Kedy je vhodný čas na to, aby ste mohli začať plne navrhovať formát HTML5?

Úprimne povedané, záleží to na cieľ, na ktorý mierite. Ak neplánujete svojim návštevníkom používať Internet Explorer (napr. Stránka so softvérom pre Mac), začnite hneď s HTML5, ale ak potrebujete, aby sa váš web zobrazoval ľuďom s IE, radšej počkajte ...

Na úvod, hneď po výskoku, 48 ukážok HTML5, ktoré sú úžasné a zaslúžia si byť videné. Skvelé je málo.

Zdroj | HongKiat

audioburst animácia

Pohodlná a fantastická animácia vytvorená pomocou značky plátna a zvuku značky HTML5.

Guľôčkový bazén

Táto ukážka vám bude predstavená na poslednej udalosti I / O Google a ukáže, aké dynamické môže byť HTML5.

Blob šalát

Tvor tvorený HTML5, ktorý by vás potešil.

bomomo

S Bomomo môžete sledovať rôzne atómové pohyby simulované pomocou HTML5.

Prehliadač Ball

Nechajte sa ohromiť touto guľou HTML5 pre rôzne prehliadače.

Bubbles

Bavte sa vytváraním nekonečných plávajúcich bublín inej farby.

Animácia na plátne

Jednoduchá a zábavná karikatúra vo formáte HTML5, ktorá vám pomôže pochopiť, čo dokáže prvok plátna HTML5.

Chladné hodiny

Príjemné prispôsobiteľné analógové hodiny vytvorené pomocou kódov HTML5 a JavaScript.

Prezentácia Flickr PS3

Prezerajte si fotografie z Flickru pomocou prezentácie v štýle PS3 vo webovom prehliadači.

Interaktívny Polaroid

Interaktívna ukážka, ktorá funguje veľmi podobne ako multidotykové rozhranie.

Ohňostroj JS

Užite si okamih ohňostroja s vami preferovanou gravitáciou a rýchlosťou, poháňanou formátmi HTML5 a Javascript.

Kaleidoskop

Veľmi krásny a futuristický kaleidoskop HTML5.

Kvapalné častice

Citlivá časticová animácia, ktorá reaguje na základe vášho pohybu myši.

hypnotizér

Ďalšia citlivá a vynikajúca ukážka vo formáte HTML5, ktorá ukazuje, ako blízke prvky reagujú na pohyb myši.

Hmlovina hmloviny

Stratte sa s touto úžasnou hmlovinou HTML5.

Parallax

Prezerajte si všetky 2D tvary v paralelnej perspektíve.

Animácia častíc

Elegantná animácia častíc HTML5, ktorá sa môže zmeniť na vašu preferovanú správu.

Rozšíriť

Stratte sa s touto nekonečnou šírenou animáciou.

hviezdne

Veľmi skvelá animácia hviezdneho poľa HTML5, ktorá by na základe vášho pohybu myši zmenila smer a rýchlosť.

Zničenie videa

Jedným kliknutím spustíte prehrávanie videa.

vlnovú

Všimnite si, ako sa vlna plátna HTML5 pohybuje zmenou jeho amplitúdy, vlnovej dĺžky, šírky atď.

3D efekt

Impresia na plátne? To je viac, čo dokáže prvok plátna HTML5, a hovorí sa mu 3D efekt. Vývojár sa pri vytváraní 3D efektu môže spoľahnúť na prvok plátna, DOM a JavaScript, ktorý sa dá neskôr rozvinúť do 3D animácie alebo hry.

Canvas3D a Flickr

Vychutnajte si úplne nový 3D zážitok s Fostrovým fotostreamom.

Simulácia látky

Realistická simulácia plátna na základe HTML5.

Vyvíjajúce sa monštrum

Pozorujte príšeru, ktorá sa vyvinula v komplikované stvorenie, jedným z jej tvorcov je HTML5.

darčeková krabička google

Obrovský vyhľadávací nástroj Google je uvedený v 3D, hrateľnom zobrazení.

J.S. Touch

Vysoko kvalitná a realistická ukážka 3D na 2D plátne.

Prezentácia údajov

Zatiaľ čo prvok plátna HTML5 možno použiť na vytvorenie animácie a 3D efektu, je možné ho implementovať aj na prezentáciu matematických údajov.

gnuplot

Gnuplot, aplikácia na vykreslenie údajov vo verzii HTML5.

RGraph

RGraph poskytuje širokú škálu údajov, ako je stĺpcový graf, indikátor priebehu a tradičný radarový graf.

Webová aplikácia

Nakoniec, s využitím všetkých možností kombinovaných v HTML5 a iných jazykoch, je možné vytvoriť interaktívnu aplikáciu alebo hru, ktorá je blízka aplikácii Flash.

CanvasPaint

Svedok, brata Microsoft Paint prichádza do vášho webového prehliadača a jeho otec je HTML5.

CanvasMol

Vedecká aplikácia, ktorá vám pomôže pochopiť štruktúru určitých prvkov Zeme.

Kreslený staviteľ

Nakreslite zaujímavý kreslený obrázok pomocou tohto minimálneho a interaktívneho nástroja na tvorbu karikatúr.

Presuňte sem čokoľvek

Potiahnite čokoľvek, čo môžete pretiahnuť v ukážke, aby ste zobrazili podrobnosti.

Gartický náčrt

Originálna aplikácia HTML5, ktorá umožňuje vytvárať niektoré základné výkresy, ktoré je možné uložiť do rôznych obrazových formátov, napríklad jpeg alebo png.

Fyzická skica

Nakreslite, čo sa vám páči, a uvidíte, ako reagujú so simulovanou gravitáciou.

Sketchpad

Výkonná aplikácia na kreslenie HTML5, ktorá vám umožní presne a presne kresliť a upravovať obrázok.

Malá prednáška

Webová aplikácia, ktorá potvrdzuje geografickú polohu správy o počasí získanej z Twitteru, čím sa z nej na plátne stáva „sociálna mapa počasia“, ktorá je dosť triviálna (ako uvádza autor), ale zaujímavá.

Hra

3Nudí sa

Nikdy by vás nenudilo, keby ste sa mohli v budúcej sekunde vyhýbať stovkám odrážok HTML5.

Breakout

Odrazením lopty rozbijete všetky tehly.

Plátno

Nie celkom hra, ale ukazuje, ako sa dá HTML5 použiť na vývoj hry v prehliadači First Person Shooting.

Chyť to

Koľko lôpt môžete uhnúť, aby ste získali víťazný štvorec HTML5?

Reťazová reakcia

Reťazte výbuchom, aby ste dosiahli cieľ, nezostaňte závislí.

kocka

Zahrajte si Tetris v 3D zobrazení zhora nadol.

etchaFyzika

Nakreslite predmet a posuňte loptu k hviezde. Nezabudnite na gravitáciu.

Skladačky

Kliknutím, otáčaním a pustením dielikov puzzle vyriešite túto skladačku založenú na HTML5.

Slide Puzzle

Posuňte sa k víťazstvu, ďalšia hra vo formáte HTML5, ktorá je navrhnutá tak, aby vytlačila vašu šťavu z mysle.

Rovnaká hra

Odstráňte určitú skupinu, aby ste získali ďalšiu skupinu spárovanú v rovnakej farbe, a nakoniec by ste získali víťazstvo.

Tetris

Jedna z najklasickejších hier, ktorá HTML5 vrátila späť k životu.

torus

Ešte ďalšia hra Tetris v pseudo-3D verzii.