.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
While Webkits default subpixel-antialiased type looks good in many cases, if you’re using a font service like Typekit many of those fonts tend to render thick in Webkit. In my opinion WebKit’s text rendering is too thick and bloated by default. This is usually a problem that can be fixed by applying the following webkit vendor-prefixed property as mentioned in a blog post by Max Voltar:
-webkit-font-smoothing: antialiased;
We recently ran into a situation where we were using @font-face to include a custom font in a mobile website we were developing. The type was still rendering thick even after we tried common fixes like applying a text-shadow to text and the -webkit-font-smoothing fix mentioned above. The solution was to apply a 3D transformation of 0px to the elements that we’re too thick.
-webkit-transform: translate3d(0px, 0px, 0px);
The image above shows the before and after results when this rule is applied. By applying this rule to our CSS it also eliminates the “pop” you get when animating the element. The end result gave us consistent font rendering across all webkit browsers.
.wf-loading { visibility: hidden; }
Originally from the Typekit blog.
An awesome CSS easing tool by @matthewlein that uses the classic @robpenner easing equations. (via cameronmoll)
I meant to post this while back but now is a good time as any. This nettuts article goes over the 30 CSS Selectors that your must know as a web developer.
A very clever bookmarklet by Steve Souders that examines the background images on a page and automatically generates CSS sprites (and recomputes all background positions!) based on how the images are used in the page, and grouping by size. The interface displays a running tally of the number of HTTP requests saved as well as the reduction in filesize. My only (very minor) complaint is the manual work required to fold the changes back into the source CSS files, but this is genius. (via Tim Dawson)
