-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)

Build Kick-Ass Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! This video tutorial will show you how.

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

Sexy Interactions with CSS Transitions

While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification.With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.There is only one problem: many of us have never created animations in JavaScript, Flash or some other environment before, and are therefore not as well-versed in the unwritten rules of the animation world…

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

CSS Hover Controls On the iPhone

Here’s a simple technique to get hover controls working on the iPhone. Hover controls are links and buttons that appear when you hover your mouse over a a target area and so are useful for a lot of secondary actions like delete and edit links – a way to simplify your interface…

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

Beautiful CSS3 Search Form

Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers…

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