Polaroid Gallery effect: tutorials and demos

I've always loved Polaroid photos, in the web there are several tutorials and demos to repeat their format and add some nice effects. Here's a small overview about the most interesting, for me:

Web Symbols typeface & CSS3

Web Symbols typeface is a font library that collects "all frequently used iconographics and symbols" in website developing.

It's vector based and html compliant so is a faster and more flexible alternative to graphic icons.

Useful Tools

Here some useful tools and sites about: Clip art, Tutorials, html5, jQuery.

A "Read more/Hide" link with jQuery

Sometimes you have long text and few space to show it, with jQuery and CSS is very simple to hide part of the text and create a "Read more" link.

jQuery: .hover()

The function .hover() resumes the methods mouseenter and mouseleave. Let's assume that we have an hidden div in our CSS:

#effect{display:none;}

jQuery: .clone()

The .clone() function is useful to copy a portion of code somewhere in a page.

CSS3: transform:rotate

With CSS3 we can rotate images, let's see this pic:

jQuery: .load()

The load () function of jquery allows us to load a page (or a part of it) in an element.

Let's make an example with a link and an empty div:

hello!!

By clicking on the link we want to load a page in # description, simply call the load () function in this way:

$(function(){
  $('.itemlink').click(function() {
   $('#description').load('loaded.html');  
  });
});

Demo: