The CSS3 Test is a web-based test suite for finding out which CSS3 properties are supported by the browser being used.
It checks many features like backgrounds/borders, transitions, media queries, fonts, animations and much more.
Multiple testcases are ran on each element and this can be displayed by simply clicking to items.
The application is a must-bookmark to quickly check the issues on each property for shaping our styles accordingly.
Zocial is a semantic set of CSS buttons (no images used) that are beautified with @font-face icons.
There are buttons for 40+ services including Facebook, Twitter, Google+, PayPal, LinkedIn and much more.
Each button can be displayed with or without text (only icons) and the HTML element wrapping them can be anything (which is nice for flexibility).
HTML5 Please is an interactive compatibility chart of HTML5/CSS3 features to find out "in which browsers they are supported (or not)".
Using a smart search bar, it is possible to filter the results with browser or device support, type (HTML5 or CSS3 elements/properties) and more.
Every item is described shortly and an opinion on whether they should be used with fallbacks or polyfills (with links to them) are shared.
The site is simply a must-bookmark for anyone designing with the new web technologies and need a guide for quickly checking the support for each property/element.
Few months ago, a WRD article: "9 Free JavaScript Libraries & Templates For Beautiful Web-Based Presentations" has shared great presentation engines built by web technologies.
A new presentation framework is released recently -named Impress.js- which enables us to build very beautiful outputs.
Slides can be by positioned, rotated and scaled on an infinite canvas with zoom in/out and 3D effects by making use of CSS3 transforms and transitions to create the awesomeness (which makes it only compatible with WebKit and the latest Firefox + IE browsers).
And, for older browsers, Impress.js fallbacks to a standard presentation without the effects but by keeping the functionality.
Spine Mobile is a JavaScript framework, built on top of SpineJS, for building mobile web apps that look and feel native.
The framework comes with specialized controllers, panel layout, hardware accelerated transitions and touch events.
Apps are developed with HTML5-CSS3 and the easiest way of building Spine Mobile apps is with Hem, Spine.app, GFX and jQuery. Also, you'll need Node.js.
It is well documented and there are open sourced examples to easily get started.
The Goldilocks Approach is a boilerplate/starting point for creating responsive websites.
It offers a slightly different practice from the most other responsive design frameworks which is: "targeting every resolution/device rather than only the popular ones".
The boilerplate uses a combination of ems, max-width, media queries and pattern translations to consider just three states:
which allow the designs to be resolution independent.
It includes a HTML file, 2 well-commented CSS files (with nice typographic defaults -including print contexts-) and Modernizr.
CSS transitions and transforms provide a wide range possibilities for animating and morphing HTML elements.
If you would like to use them inside jQuery, jQuery Transit reaches to the rescue.
It is a plugin for implementing CSS transitions and transforms, has the same syntax as .animate, supports most of the methods and has the jQuery juice like callbacks, chaining, auto-browser-prefixes and more.
The plugin uses jQuery’s effect queue by default, so, transitions will never run in parallel.
It doesn't offer compatibility with older browser versions as real CSS3 rules are applied (rather than .animate) but degrades nicely and/or you easily force it to siwtch to the frame-based animation.
Lungo.js a framework, powered with HTML5, CSS3 and JavaScript, for creating mobile web apps.
The applications created with it works in all of the popular platforms (iOS, Android, Blackberry and WebOs).
It has support for touch events like tap, double-tap or swipe and doesn't use images (including the icons) as everything is vectorized.
HTML5 features like WebSQL, geolocation, history or device orientation can all be used.
A well-documented JavaScript API has methods for handling all the major stuff and Lungo.js is modular + completely customizable.
MQFramework is a responsive CSS framework that uses the @media property (media-queries) and works perfectly on major screen sizes down to mobile.
The framework is based on a 12 column-grid and includes a typography stylesheet to handle the basics and a CSS reset.
It is simply a core for building responsive websites which you usually wouldn't need to change any part of but add your own styles on top of it.
MQFramework is a very easy to implement and there are 2 versions provided to choose from: fluid + fixed.
Transitions in CSS3 brings many possibilities on animating and morphing HTML elements.
Lea Verou is sharing a beautiful experiment and resource -Animatable- that showcases different CSS transitions (and how simple they are).
Each transition is applied to a box where you can activate by hovering them (or run the transitions for all items).
You can also click the items to easily see the "from" and "to" values of CSS properties changed.
