Safari gets WebGL in WebKit Nightlies

Well, those folks on webkit dev team sure are mov­ing fast. WebGL (OpenGL for web, i.e. fancy 3d graph­ics in your browser) spec hasn’t even been fin­ished yet, as far as I know, and they already have the stuff work­ing in the lat­est webkit builds. The good news about this is of course that as WebGL becomes more widely adopted, we’re going to see some inter­est­ing uses of 3D graph­ics for inter­faces on the web. Of course the flip­side of that is there’s a good chance that sud­denly dozens of sites will spring up with cheesy cubes or spheres rotat­ing with blink­ing colours or something.

Hopefully most uses of WebGL will be more sophisticated than that

Hopefully most uses of WebGL will be more sophis­ti­cated than that

WebGL itself is actu­ally pretty hard­core in com­par­i­son to stuff like HTML and JavaScript. It’s a true, honest-to-god pro­gram­ming lan­guage. Which means that even sim­ple things take a sub­stan­tial amount of code. Heck, even ini­tial­iz­ing the damn thing takes a whole func­tion. On the other hand, it’s also a very well estab­lished API (more specif­i­cally the OpenGL ES 2.0 API on which WebGL is based on) with plenty of resources, tuto­ri­als and web­sites that cover it from A to Z. So if you’re will­ing to roll up your sleeves and dig into it you’ll be mak­ing spin­ning cubes with blink­ing colours in no time.

For all the details and some exam­ple check out the WebKit blog.

Leave a comment

Reflections and Accordion using CSS only, in Safari and Firefox

Using com­bi­na­tion of CSS trans­forms, tran­si­tions, gra­di­ents and :tar­get it’s pos­si­ble to cre­ate things that usu­ally require JavaScript — such as accor­dion and reflec­tions (in Firefox). Unfortunately, this only works 100% in Safari and Chrome (and I guess any other webkit using browser). In Firefox these ele­ments behave prop­erly, they just don’t have ani­ma­tions or gra­di­ents. As for IE, I didn’t bother with it at all.

Here is the page I’m going to go over. Feel free to dig into the code and if you’ve got any ideas on how to make it even sleeker let me know. Keep Reading

Leave a comment