Random Color CSS3 Animation

Ever since I wrote my first lines of code, I have had a strange interest in the functions that generate random numbers. and yes, I know actual random doesn’t exist Every time I just want to fool around with some code, you will find me popping in a random function in somewhere. So when I started playing around with CSS3 Animations the urge to use more random was always lurking around many a corner. I ended up writing a 50 frame CSS3 Animation that just looped through a bunch of random colors…

VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)

SuperStretch! – A Vertically Fluid Layout Using CSS

Here’s a technique I created a while back that I have revisited and tidied up a bit. It results in a layout that stretches both horizontally and vertically to the browser viewport. It includes a vertical navigation bar where button heights also stretch. It works in FF, Safari, Chrome, Opera, and IE 6-8…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Raindrop Logo in CSS

Playing around with -moz-radial-gradient this past while, and seeing the amazing job done on the CSS Opera logo by David Desandro, I thought I’d have a go at recreating one of the logos I illustrated within the past year using pure CSS.

The Raindrop logo I created was the prime candidate, as my first thoughts were “hey, three of the corners are basically -moz-border-radius set to 100%!” Done. Next was to figure out how to construct it…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

-webkit-font-smoothing

I’m not a big fan of the default text rendering in WebKit, in my opinion, it’s too heavy. There used to be a workaround where setting text-shadow would make the text thinner, but updating to Snow Leopard rendered that useless. Then someone found another hack using -webkit-text-stroke that seemed to work nicely, but it wasn’t usable on text-heavy pages, causing performance issues when scrolling. So you can imagine how happy I was when I saw Faruk Ateş tweeting something about -webkit-font-smoothing. Being the CSS geek I am, I whipped up a demo page you need the latest WebKit Nightly to properly see that page to see what exactly it did…

VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)

Create Beautiful CSS3 Typography

It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. I’ve even read an article that suggests that the web is actually comprised of 95% typography. I’m not convinced that there is any empirical evidence for this figure, but I think that the point is a good one. And, that makes typography a pretty important element that you will want to look at very carefully…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Better Page Corner Ads with CSS3 Transforms

The other day I came across a useful site called ScriptSrc.net that allows you to get up-to-date script tag links that point to your favourite JavaScript libraries.

The site has a clickable corner ad promo to get people to “spread the word”. I thought using CSS3 there would be a better way to position such a corner advertisement (or promo, or whatever), because the clickable area for the ad on ScriptSrc.net is actually too big. In some cases, you might prefer the clickable area to be bigger, but I think it’s always best to keep the clickable area limited to the actual ad…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)