Interactive HTML 5 Everest Summit Explorer Website

Everest Climb Interactive HTML 5

This great interactive site, made by Discovery to commemorate the 2014 avalanche tragedy, allows you to climb and explore Mount Everest from the comfort of your own screen. The site plays a full-screen, HTML 5 video of a visualisation of the ascent, split into three different parts from base camp to the summit. Once at […]

See The Evolution of the Web in this Animated Timeline Infographic

Evolution of the Web Infographic

This animated timeline infographic uses SVG to render colourful lines depicting the web’s long history. It tells you the birthdate of web technologies such as HTML5, CSS3 and WebGL. The colour bands in the visualisation represent the interaction between web technologies and browsers, which brings to life the many powerful web apps that we use daily. […]

CSS ‘px’ doesn’t stand for ‘pixels’ – is an Angular Measurement

CSS PX doesn't stand for Pixels

The “px” unit in CSS doesn’t really have anything to do with pixels on your monitor, despite how the name would imply. “Px” are actually an non-linear angular measurement. Below are the formulæ to convert between radians and px: radians = arctan(px/5376) * 2 px = 5376 * tan(radians/2) Using this formula, you can work […]

Auto Write Element Classes and IDs in Sublime Text – Handy Shortcut

Helpful Sublime Text Shortcut

Here is a handy time-saving hint for people working in Sublime Text. If you are hand-writing a new div tag or any other element that requires an ID or a Class to be added. Simply write the following shorthand syntax: div.class then immediately press the Tab key and the text becomes… <div class=”class”></div> …with the […]

Amazing 3D CSS Rendered Clouds

Amazing CSS3 animated cloud renders

Click to Release have created a 3D cloud generator, rendered with CSS using the 3D Transforms property. The generator supports Google Chrome and Safari and Firefox, with a slight speed boost if using the Nightly build version of Firefox. You can generate regular white and dark grey storm clouds. The tool even lets you generate “Michael Bay” style […]

How to Change the Text Selection/Highlight Colour using CSS

How to change the highlight / selection colour in CSS

A neat trick to set your website apart from the pack is to change the text highlight colour. Most modern browsers can support the ::selection property. Paste the following code into your .css file an change the hex colours: ::selection { background: #ff0000; /* Webkit */ } ::-moz-selection { background: #ff0000; /* Firefox */ }

Impossibly Difficult CSS3 Mouse Maze Game

Try out this difficult CSS3 Mouse Maze game! The game loads 4 levels and your job is to get the mouse cursor from the left hand side of the screen to the right without touching the animated barriers. If if you touch the sides, you fail and will have to start again. The game was created […]

Optimising Images by Converting them to Base 64 CSS Code

Further to our article on lossless image compression last week, another method to further decrease the download time is to store the image as code within the CSS file. This way the browser does not have to make an HTTP request for the image and can often result in a quicker download speed, provided the […]