Category: HTML
-
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 Simple HTML markup: [cc lang=”html”] Click Me [/cc] And…
-
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…
-
JS Transform Handles
The other day I was playing around with Mozilla’s Popcorn Maker and I had the idea of using HTML/JS/CSS to create transformable divs using transform handles and a bounding box. I did a quick search for any existing examples of HTML transform handles but i couldn’t find anything so I decided to give it a…
-
New Showreel!
—
by
I have just uploaded my new showreel to Vimeo. A couple weeks ago I was listening to TripleJ in the car and I heard this amazingly bizarre, vintage, sci-fi, horror metal song come on. Unfortunately I missed what it was called or who the artist was so I spent ages trying to figure it out.
-
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…
-
Javascript and Canvas wet paint mixing
Here is an experiment I did to learn how the HTML5 Canvas tag works. I wanted to know how to manipulate pixels so I attempted to port my AS3 paint mixing to Javascript. I was surprised by the performance although it doesn’t seem to be as fast as the Flash version, and it is definitely…
-
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…
-
The Megahorns Website Refresh
I have just launched a new website design refresh for The Megahorns, a local band from Melbourne. Quite a large band actually with heaps of saxes, trumpets, trombones and drums! The re-design involved building a new WordPress theme from the ground up to incorporate into their existing CMS. The design incorporates graphic elements from their…
-
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…