Category Archives: Web Links

CSS Web Links

Tridiv – In-browser CSS 3D Editing

I’m a sucker for clever web things, and today’s link is no exception.  Tridiv is an interface where you can create 3D shapes in CSS, and all without knowing how to make 3D shapes using CSS at all.

tridiv main

The interface is extremely cleverly put together, and literally allows the user to create 3D objects as they might be used to in some other 3D editing interfaces.  There’s a top, front and side elevation, and a handy window for you to move and rotate your newly created object.

tridiv interface

Basic primitive shapes are included in the mix (cuboid, cylinder, prism and pyramid), which you can add to the scene, after which you can rotate, enlarge, and move to your hearts content.  Colors and opacity can be manipulated too, giving you the means to make some pretty spectacular 3D shapes if you wish.  Lighting, shadows and images can also be added to your creations, giving you the ability to make some pretty impressive things.

Once done, you can save for use elsewhere, or even export to Codepen to share with others.

Some have criticised the project based on its practicality, but I personally think it’s a fun little tool that really demonstrates how far the web has come along.  And it was made by just one person!

Only downside is that it currently only works in Chrome, but Julian Garner has claimed he is working on versions for other browsers soon.

To really see what could be done with it, check out this demo on Codepen, created by the developer himself!

Web Development Web Links

Beautiful parallax effects

Parallax effects on webpages can be awesome if done well.   I’m still pretty new to js and web development in the grand scheme of things, so haven’t figured out how to do them yet (I will though), but I think they’re very cool.

parallax

Parallax.js by Matthew Wagerfield is a ‘simple, lightweight parallax engine that reacts to the orientation of a smart device’, and, based on the demo here, it’s pretty impressive.  The graphics and animation used are beautiful and if you run it on your iPad or iPhone and move it about, the effects are pretty spectacular.  Do follow the link, as the picture above doesn’t do justice.  If you don’t have a mobile device you can move your mouse about to get an idea of the kind of effects you’ll get with motion.  It kind of reminds me of the effects in Little Big Planet.

I’d love to put something together like this one day.  The project GitHub page is here.

Web Web Links

Good work, Google

If you do a Google search for the word ‘Gay’, this happens:-

gay-google

I think it’s just lovely, especially given that today, The US Supreme court has rallied against discrimination against same-sex marriage.  Apparently this has been happening on Google for some time, due to it being Pride Month.

Well done, Google.

Note:  This also seems to work for ‘lesbian’ , ‘lgbt’, ‘bisexual’ and ‘homosexual’ and some other search terms, too.

2toria Web Links

2toria favourites – w/c 17/06/2013

I know, I know…it’s been a while.  Here are some of the things we’ve been favouriting over the past week.

This is a web page.

Magic CSS3 animations

iOS7 icons with pure CSS (impressive)

An interesting study in browser busy indicators – worth a read

Rey Bango interviews Remy Sharp

More to come same time next week (I promise).