CSS Evangelist

Remarkable. Very well thought out

This is going to help me. Thanks!

wow ! what a thought. u have done a wonder. Most useful to the people doing html and css. thanks a lot.

I've been searching for something like this!

Avoid CSS hacks! Use cssua.js to apply special CSS classes to your pages allowing you to use valid CSS to work around browser-specific quirks

I have created a monkey patch for jQuery (tested through 1.4.3) which enables you to independently set and/or animate both the scale and rotation of any HTML content with jQuery. This code uses the scale() and rotate() CSS transformations that are only supported by Webkit, Safari, Chrome, Firefox 3.5+, IE9 (Platform Preview 7+), and some versions of Opera at this time.

helps you find unused CSS selectors on any site.

You guys might want to join and benefit from it. ATB!

download and/or convert fonts Upload a font and this will spit out everything you need to embed it into a website including HTML, CSS and multiple font file formats. You'll definitely want to bookmark this one! Each @font-face font kit come with: Original TrueType or OpenType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+EOT fonts for Internet Explorer 4+Demo.html and stylesheet.css so you can get going fastNOTE: All fonts are subset to the Mac Roman char set.

There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

The CSS3 Playground is a web application for experimenting with some new css3 capabilities. Primarily those than conform to the progressive enhancement philosophy, which means that the styles can be used on all sites without severely changing/limiting the experience on browsers that does not support them (=Internet Explorer 8.0 and older). But there are also styles that may need better replacements on Internet Explorer such as rotation, and I hope I will have the time to add more in the future.

from article: Understanding border-image http://css-tricks.com/understanding-border-image/

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that's your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today's browsers.

A 5 minute microslot on how to make sure the browser you want gets the CSS that you want it to have! Exclude IE6 and earlier from seeing your CSS3, and specify styles for mobiles and IE versions.

The following demo was made using a variety of CSS techniques. Rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms are just some of them. A lot of these were generated by helpful tools, such as westciv's tools and Border Radius. By combining these techniques, you can create rich graphics with just a few lines of code. Here are a few examples. In the contacts icon, I used 5 different shapes for the silhouette icon. The head is a rectangle with rounded corners, followed by another rectangle for the neck and a distorted semi-circle for the body. In order to get the curve of the shoulders to the neck, I placed two circles on top of the shapes. The weather icon has several rays of light shooting from behind the sun. Each one of these rays is actually a long rectangle with a gradient that fades to transparent on either end. I used -webkit-transform:rotate to rotate each rectangle to a different angle. The same effect was used for the iTunes icon. To get the cloud icon on the iDisk icon, I used two circles layered on top of each other, above a rounded rectangle. The larger circle has a gradient that cuts off just before the rectangle.

Developers continue to do crazy things to show us what can be done with CSS3. The latest is a fully animated Twitter fail whale by Steve Dennis: The idea for this came to me this morning after being greeted first thing this morning by another Twitter outage. I'd been looking for something to stretch my CSS muscles on, and the Fail Whale seemed perfect. Also I think the animation only adds to his (or her?) charm. How was this made? The short answer is very painfully, by hand, using trial and error. Curves are done using various uneven border-radius properties, stranger angles (such as the strings) are masked using containers with overflow: hidden; set on them. I hope someone else gets a bit of enjoyment out of my wasted Sunday. It was a fun experiment that I don't plan on repeating any time soon. Take a look at the source to see the mass of code such as: PLAIN TEXTCSS:@-webkit-keyframes flutter1 {  0%   { -webkit-transform:rotate(0deg) }  50%  { -webkit-transform:rotate(-25deg) }  100% { -webkit-transform:rotate(0deg) }}.right .wing {  background: transparent !important;  z-index: 22 !important;  width: 15px;  height: 18px;  bottom: 4px;  left: 8px;  -webkit-animation: 'flutter1' 0.1s linear;  -webkit-animation-iteration-count: infinite;}