CSS

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:

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 […]

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 […]