Category: CSS
-
A new blog design
PurpleSquirrels has gone responsive. I have just flicked the switch on the new PurpleSquirrels design. The new design – which I have been working on over the last few weeks – is now responsive which will make it much easier to read content on mobile devices as it adapts to smaller screens. I had been…
-
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…
-
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…
-
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…