Style
Well, this is CSS we’re talking about. You’re not going to get Crysis-level graphics. As the name of this framework suggests, what you get is a lot of cubes. Think Minecraft in the browser. (And someone will build a Minecraft clone with this in three... two...) Still, you can do some impressive things with blocky graphics. Think of it as taking 8-bit art to a whole new level.Easy 3D rendering
The basic implementation of voxel.css only requires the inclusion of the library, and 15 lines of code. This creates a savable virtual scene where you can edit your models, point-and-click style. You can then display these scenes to any web page, and animate them as desired.Use any image type for textures
Use a PNG for transparency, a GIF for animation, or an SVG file for unlimited scalability. Use a JPG for reasons unknown, or the WebP format because you like things that aren’t implemented in all browsers yet. There’s even a demo that uses live footage from your webcam as textures for the blocks.GPU acceleration
Again, it’s CSS3. You can use the superior rendering power of a device’s graphics card (or chip, as the case may be) to display your work. You won’t have to worry about choppy graphics on anything but the slowest of mobile devices. (You should be using a fall-back for those in any case.)Conclusion
voxel.css is a simple, no-nonsense way to get some three-dimensional goodness into your web app, page, site, or game. Try it out, look at the demos, and see if it’s right for your project.Ezequiel Bruni
Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.
Read Next
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…
How to Write World-Beating Web Content
Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…
By Louise North
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
How Web Designers Can Stay Relevant in the Age of AI
The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…
By Louise North
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff