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;} 

Magnifying glass experiment using CSS3. Only works in Google Chrome at the moment and has very limited usage capability. But the initial idea is there and hope to extend with more features later on.

This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers.

Collecting examples of creative, innovative, and unexpected use of emerging web technologies such as HTML5 and CSS3

clic the button to get the code

A quick presentation on CSS Reset including a basic explanation, an outline of some of the advantages and disadvantages, as well as a simpler reset option.

That is what Šime Vidas thought, so he whipped together a little iframe love:

siteInspire is showcase and CSS gallery featuring the best web design today

ABOUT THIS PAGE: This is a little experiment to try some new stuff with the new browsers and the @font-face rules. You'll need the latest versions of Safari, Firefox or Opera to view it. We didn't design it to degrade gracefully.

The results: CSS3 support across the major email clients The following chart displays the results of our CSS3 tests for the 7 most popular email clients. For the 24 most popular email clients, download our full guide.

px 2 em font size chart

Primer undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet. Paste your HTML in to get started.

PNG HTML5 DOM CSS3 CSS2 SVG Canvas http://caniuse.com/#agents=All&eras=All&cats=PNG,HTML5,DOM,CSS3,Other,CSS2,SVG,Summary&statuses=rec,pr,cr,wd,ietf

With CSSGallerySubmission.com, you can submit your website to almost all of available CSS Galleries in the net, simply by using one single form

cool =D

Take a walk through the woods and learn about all things HTML5. Starting with the JS APIS (selector API, storage, appcache, web workers, web sockets, notifications, drag and drop, and geolocation). Then delve into the new HTML semantic tags, link relations, micro data, ARIA, forms, audio and video, Canvas, and WebGL. Finally, the holy trinity finishes with CSS and selectors, fonts, text, columns, stroking, opacity, HSL, rounded corners, gradients, shadows, backgrounds, transitions, transforms, and animations.