CSS

Slide transition effects with CSS

Here are some slide transition experiments I created using CSS. View Demo You can view the source of the demos to see how they were made. They have all been tested and work in all the latest browsers – Chrome, Firefox, IE 10+. There are 6 in total: Card fall Card fall forward Carousel 3D […]

Melbourne train map in CSS

About three weeks ago I was showing my team at work the london CSS tube map and I jokingly put forward the challenge for the first person to make the Melbourne map in CSS gets a dollar. But after looking at the map properly I realised that it actually wouldn’t be that hard – far […]

Hover shine effect with pure CSS

This is a simple example of a mouse-over shine effect I created using purely CSS. It uses a CSS generated element and CSS3 transitions to animate the effect. See the comments in the markup below for further explanation of how it works. Live demo Click Me The code Simple HTML markup: And the CSS:

Windows 8 start screen in HTML, CSS and Javascript

About 7 or 8 months ago I built a tile based launch page at work to launch learning modules which looked similar to the Windows 8 start screen. When I had spare time I kept building on and adding 3D animations to match it even closer to Windows 8. Then I kind of forgot about […]

Leveraging iOS hardware via the browser with Javascript

Just another quick post tonight. I have bigger one lined up for tomorrow I promise. I just wanted to show a little experiment I did a while back with JavaScript – accessing the Accelerometer and Compass data in Safari on the iPad. Below is a short video demonstrating it if you don’t have access to an […]

Creating a HTML version of this blog’s header

Update: this post was made when I was using a different blog design. Please view the original swf file here. Below is a little experiment I did which involved creating a version of this blog’s image flipping Flickr feed header (which I made in Flash) – in HTML/CSS/Javascript. Luckily jQuery includes a JSON parsing feature […]

Comparing custom font display with @font-face

This is a little experiment I conducted comparing the way different browsers render custom fonts through @font-face. What I found was that the two browsers that displayed them best were IE8 and Firefox 4 Beta. The worst browsers were Opera and Safari. Opera seemed to make the characters extra skinny, and Safari made the characters […]

Google Fonts API – It’s good and bad

Update 2017/07/17: This post was published a long time ago and a lot has changed since then. Now that font rendering has vastly improved in Browsers Google Fonts is a great choice for web fonts! Recently Google has announced a new API which allows web designers to use custom fonts in their HTML/CSS websites. This […]