SpinKit: Simple CSS Spinners

Some nice css spinners from Tobias Ahlin

http://tobiasahlin.com/spinkit/

selectivizr

selectivizr is a handy javascript file that allows you to use CSS3 pseudo-classes and not have to worry about the annoying browser that is known as IE.  It works with a number of js libraries and once you add it to your head then you won't need to do any more.

selectivizr

CSS Animations

"Flashless Animation" is a great article from Rachel Nabors at 24ways on how to create animating using css without flash.  She finishes up with the cat running over a moving background to music

Rainbow Dividers in Css3

---

A very retro rainbow divider from Chris Heilmann and Lea Verou

Rainbow divider

CSS1K

Back in the day we had css zen garden which demonstrated what could be done with css and the same html.

There is now CSS1k, which is getting people to demonstrate what is possible with just 1K of CSS. Some entries are showing great uses of CSS3 and some are really quite cool, such as #bbubles and #facetime.

Css Shapes

Create a masterpiece by just using css and borders. You can create css triangles shapes by just using the border property. If you think of a block with a border 0f 20px around using different colours, the sides need to be on angles to slot together:

 

Now bring in the rectangle and you get a nice set of triangles

 

Using the rotatate and border-radius properties you can now have fun.

for a great collection of css shapes go to css-tricks.com

html 5 snippets

It is always nice when someone creates some really handy little code snippets and Roberto Brevé has done just that. With HTML5 Snippets there are some marvellous little html5 and css3 code snippets along with some simple canvas demonstrations that are a great way to get started with it.

This site also allows others to share their own code snippets so that it will hopefully become a large and very useful resource.

HTML5 Snippets

Essential JS files

When starting with a new web site there are certain files that you will need to include to have a modern and well functioning site.  Obviously your site may be more minimal and therefore you could not add them but here are the ones that I try to include.

Jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

Most sites that I build use jquery and why not let the google content delivery network take the strain and host it for me  directly from Google’s network of datacenters.  Benefits include decreased latency, increased parallelism, and better caching.



HTML5 shim
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->


Also the same as shiv, this js file is to be added if you are building in html5.  This script tells IE what the html5 elements are.  Use in conditional statements



Modernizr
<script src=" /js/modernizr-1.6.min.js"></script>

Modernizr is is an open-source JavaScript library that allows you to use CSS3 and HTML5 as it adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet.  This means that you can take full advantage of all the HTML5 and CSS3 features that will be implemented in some browsers, without sacrificing control over the user experience in other browsers.

CSS Easing

A fantastic little css easing tool by Matthew Lein.

It is unfortunate that so many browsers don't support css animation :(

CSS3 Generators

There are a growing number of css3 generators popping up on the web that can make life easier for a coder and gives a good starting point for someone starting to experiment with css3. They are handy little tools but should be used for practise and understanding as eventually you should know the code as well as you would know standard css.

• CSS3 Generator by Randy Jensen creates a box with border radius, box shadow, gradient and opacity.


• CSS3 Generator/ by Eric Hoffman and coded by Peter Funk.


• @font-face Generator for generating the css HTML, CSS and multiple font file formats.


• CSS3 Generator by widget pad again with several properties and CSS3 effects.


• Button Maker creates some lovely little css3 button from Internet wiz Chris Coyier.


• Border Image lets you upload your image and then creates the border from it.


• CSS3 Maker gives lots of options and shows the browser support for each.

IE CSS3 Transformations

IE doesn't massivly support CSS3 but you can use work arounds to achieve the desired effect. The IE CSS3 Transforms Translator is a very handy little tool that will give the matrix filter's required for IE.


It will support rotate, scale, skew and translate without the use of javascript.

css3 block

Here is a quick starter to css3 effects of blocks. All are simple starters to what you can achieve with some basic css3 to then go on and create something much more spectacular.

Listed are
CSS3 rounded corners
CSS3 box shadow
CSS3 roated block
CSS3 speech bubble

The demo can be found here