I have been working on a CSS pre-processor lately (another post on that sometime this week), and I have been learning quite a bit about things like CSS transitions and animations. I decided to add a few to this site for a little bit of extra panache.

The new effects can be seen in all modern browsers (read: Chrome, Firefox, Safari, or Opera). I plan (at some point) go see what can be done to wrangle Internet Exploder into submission, but my site looks good in IE already, so I don’t feel the need to spend too much time on it. Anyway, the new effects are in the social media icons at the bottom of the sidebar, the main navigation at the top of the page, and the short URL link to the left of any page or post.

The effect on the icons is one I found described here. I thought it was a pretty cool effect, but couldn’t find anything big on my site to use it on. I think, however, that it adds a nice touch to the icons since they were already going from monochrome to color when hovered on. The effect on the main navigation is a basic fade that inverts the colors.

Both of these effects are achieved with pure CSS, meaning there is no extra code (other than a little markup) involved!