Het web wordt vaak gezien als een uitgesproken tweedimensionaal medium. En om eerlijk te zijn, dat is het. Daar is het voor ontworpen.
Bovendien is de toevoeging van driedimensionale grafische afbeeldingen, die live zijn weergegeven, van oudsher vereist voor plug-ins. Macromedia gaf ons Shockwave, Unity gaf ons de Unity Web Player en al die tijd hebben we voornamelijk 3D-graphics voor games gebruikt.
HTML5, CSS3 en een aantal inventieve JavaScripts hebben hier echter veel aan gedaan om dit te veranderen. Oh, het wordt nog steeds voornamelijk gebruikt voor games, maar je kunt het nog verder helpen en de graphics gemakkelijker dan ooit integreren in een gewone site.
Natuurlijk hebben we nog steeds problemen met de bruikbaarheid. Een site die afhankelijk is van 3D-graphics voor navigatie of essentiële inhoud is nog steeds een vreselijk idee. Wanneer 3D echter wordt gebruikt met progressieve verbetering, is dit een levensvatbare en zelfs prestatievriendelijke manier om de zaken een beetje op te krikken.
Daartoe presenteer ik voxel.css .
voxel.css is een raamwerk dat CSS3 gebruikt om zware 3D-objecten te renderen. JavaScript wordt gebruikt om interactiviteit toe te voegen, de animaties te activeren en vrijwel al het andere.
Nou, dit is CSS waar we het over hebben. Je krijgt geen Crysis-graphics. Zoals de naam van dit raamwerk suggereert, krijg je veel kubussen. Denk Minecraft in de browser. (En iemand zal er een Minecraft-kloon mee bouwen in drie ... twee ...)
Toch kun je een aantal indrukwekkende dingen doen met blokkerige afbeeldingen. Zie het als 8-bits kunst naar een heel nieuw niveau brengen.
De basisimplementatie van voxel.css vereist alleen de opname van de bibliotheek en 15 regels code. Hiermee wordt een bewaarbare virtuele scène gemaakt waarin u uw modellen, point-and-click-stijl kunt bewerken.
U kunt deze scènes dan naar elke webpagina weergeven en ze naar wens animeren.
Gebruik een PNG voor transparantie, een GIF voor animatie of een SVG-bestand voor onbeperkte schaalbaarheid. Gebruik een JPG voor onbekende redenen of de WebP-indeling omdat u van dingen houdt die nog niet in alle browsers zijn geïmplementeerd.
Er is zelfs een demo die maakt gebruik van livebeelden van uw webcam als texturen voor de blokken.
Nogmaals, het is CSS3. U kunt de superieure weergavekracht van de grafische kaart van een apparaat (of chip, zoals het geval kan zijn) gebruiken om uw werk weer te geven. U hoeft zich geen zorgen te maken over schokkerige afbeeldingen op alles behalve de langzaamste mobiele apparaten. (In ieder geval zou je een terugval moeten gebruiken.)
voxel.css is een eenvoudige, no-nonsense manier om wat driedimensionale goedheid in uw web-app, pagina, site of game te krijgen. Probeer het uit, bekijk de demo's en kijk of het geschikt is voor jouw project.