Webben ses ofta som ett bestämt tvådimensionellt medium. Och för att vara rättvis är det. Det var det det var designat för.
Dessutom har tillägget av tredimensionell grafik, gjord live, traditionellt krävt plugins. Macromedia gav oss Shockwave, Unity gav oss Unity Web Player, och hela tiden har vi använt 3D-grafik för spel, mestadels.
HTML5, CSS3 och några uppfinningsrika JavaScript har dock gjort mycket för att ändra detta. Åh, det används fortfarande mest för spel, men du kan ta det vidare och integrera grafiken på en vanlig sida enklare än någonsin.
Visst, vi har fortfarande användbarhetsproblem. En webbplats som beror på 3D-grafik för navigering eller väsentligt innehåll är fortfarande en hemsk idé. Men när det används med progressiv förbättring, är 3D ett livskraftigt och till och med prestandavänligt sätt att ta saker och ting upp.
För det ändamålet presenterar jag voxel.css .
voxel.css är ett ramverk som använder CSS3 för att göra den tunga lyftningen av att göra 3D-objekt. JavaScript används för att lägga till interaktivitet, utlösa animationerna och ganska mycket allt annat.
Tja, det här är CSS vi pratar om. Du kommer inte att få Crysis-nivå grafik. Som namnet på denna ram antyder, vad du får är en hel del kuber. Tänk Minecraft i webbläsaren. (Och någon kommer att bygga en Minecraft klon med detta i tre ... två ...)
Ändå kan du göra några imponerande saker med blockig grafik. Tänk på det som att ta 8-bitars konst till en helt ny nivå.
Den grundläggande implementeringen av voxel.css kräver bara att biblioteket ingår och 15 kodlinjer. Detta skapar en savbar virtuell scen där du kan redigera dina modeller, punkt-och-klicka-stil.
Du kan sedan visa dessa scener på en webbsida och animera dem efter önskemål.
Använd en PNG för insyn, en GIF för animering eller en SVG-fil för obegränsad skalbarhet. Använd en JPG av okända orsaker eller WebP-format eftersom du gillar saker som inte implementeras i alla webbläsare än.
Det finns till och med en demo som använder live footage från din webbkamera som texturer för blocken.
Återigen är det CSS3. Du kan använda den överlägsna återgivningskraften för en enhetens grafikkort (eller chip, beroende på vad som är) för att visa ditt arbete. Du behöver inte oroa dig för hakig grafik på något annat än den långsammaste mobila enheten. (Du borde använda en nedgång för dem under alla omständigheter.)
voxel.css är ett enkelt, no-nonsense sätt att få lite tredimensionell godhet i din webbapp, sida, webbplats eller spel. Prova det, titta på demon och se om det är rätt för ditt projekt.