It wasn’t long ago that I’d daydream about what would be possible to achieve on the web in the future. Now a lot of those things I once wondered about have either come to be, or are close on the horizon.
For example, if I thought of doing a really tricky layout a couple years ago, it would be very hard to achieve in tables, I’d end up banging my head against the desk and wondering if I should just use flash. But times were changing, the iPhone came out, flash pretty much died, new HTML5 and CSS3 tags were introduced along with other amazing new browser technologies and now we find ourselves in an unshackled veritable playground of creative possibilities.
So now we can do amazing things with just CSS and HTML… but should we be using them? Of course, lets push the web forward! Although we need to be careful with client work, as not every modern browser supports these new fangled technologies. As with any medium, you tend to want to play around, understand it and start pushing boundaries of what can be achieved. That’s what the front end designer and developer community has been doing these last couple of years, myself included.
Experimental examples
Below are a few examples of things I’ve played around with and created for fun, make sure you use Chrome as it has the best support at the moment.
Tridiv makes it simple to create complex CSS shapes within a 3d environment via CSS transforms. Here’s the Mogul logo, click and drag around to rotate the scene.
This next one is my most recent pen, all made out of HTML and CSS, I challenged myself to create a scene using no images, The trees sway, the camera loses focus, the UFO thrusters revolve and glow, the stars are even aligned to my place on the globe and the time I created it.
See the Pen Forest Encounter by Louis Coyle (@dropside) on CodePen
Gamepad support
Alongside the new HTML and CSS attributes are a host of other cool features. For example as I was writing this I didn’t even realize that gamepad support was a new browser technology, but it makes sense with all the video game consoles sporting web browsers these days.
Vibration support
Vibration has also found its way into the browser. Imagine hitting a link with your mouse and being provided with subtle tactile feedback. Android seems to be using a similar thing with its keyboard inputs, adding to the sense of feedback. If you had a gamepad with built in rumble then you could use those two technologies together and effectively have a perfect input device for a browser based game.
WebGL
WebGL is one of my favorites and most exciting in my books; it allows for hardware accelerated 3D graphics. Have a look at some experiments in webGL, one of my personal favourites is HelloRun, a game in which you dodge walls while listening to some smooth beats. It’s awesome to see these high fidelity 3D graphics being brought to the browser and makes me wonder how the technology might be used in the future.
The future of the browser looks bright. For a glimpse into the past and the evolution of the web, check out this neat interactive timeline and see how far we’ve come.
