Voici deux plugins Jquery qui permettent de superposer deux images afin de les comparer.
Une barre verticale vient par dessus les images et il suffit de la translater à gauche ou droite pour afficher les images à comparer.

Pas de grande différence entre les deux. Le premier nécessite un clic sur la barre verticale afin de la bouger alors que le second utilise simplement le mouvement de la souris et permet d’avoir une légende sur la photo.

Autre point non négligeable, la taille des fichiers javascript.
7Ko pour le premier en version normale et 4Ko pour la version « minified ». Et seulement 2Ko pour le second.

Site : http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/
Download: http://www.catchmyfame.com/jquery/jquery.beforeafter.zip

Site : http://www.queness.com/post/6480/create-an-attractive-before-and-after-photo-effect-with-jquery
Download: http://www.queness.com/resources/archives/jquery-qbeforeafter.zip

Zoomy est un plugin Jquery qui permet de créer un zoomer sur une image facilement.
Pour fonctionner, il nécessite une miniature de votre image ainsi qu’une version de plus grande résolution pour afficher la partie zoomée.

Il existe quelques options, comme la forme du zoom (round), la taille etc.

Site : http://redeyeoperations.com/plugins/zoomy/

Mais cela peut parfois poser problème si vous avez récemment modifier le fichier. Ce qui se trouve en cache ne correspond plus au véritable contenu actuel. Et il suffit d’avoir modifier la structure HTML de la page pour rendre le site illisible.

La solution ? Ajouter un peu de php.

Exemple :

<link href="css/style.css?<?php echo time(); ?>" rel="stylesheet" type="text/css" />

time() est une fonction qui permet de retourner l’heure courante (plus d’infos ici).

Si on affiche la source de la page on obtient ceci :

<link href="css/style.css?1289905403" rel="stylesheet" type="text/css" />

Même chose pour le javascript.

De cette façon, les navigateurs ne mettront plus le fichier style.css en cache car le nom de fichier aura changer par rapport au fichier en cache.

Voici un slider qui propose une fonctionnalité assez pratique. Vous pouvez faire un lien directement sur une image contenue dans le slider en utilisant un hashtag dans l’url (voir démo).

Site : http://mgoys.com/lab/hashslider/
Démo : http://mgoys.com/lab/hashslider/#4

Voici un add-on pour firefox extrêmement pratique. Il permet d’ouvrir d’un simple clic la page en cours dans le navigateur de votre choix.
Vous pouvez l’afficher dans la barre des onglets ou d’un simple clic droit, c’est à votre convenance.

Site : http://www.darktrojan.net/software/addons/openwith/

Site : http://chocoslider.alandawi.com.ar/index_en.html

Voici un tutoriel pour ceux qui aiment le pop art.
Il date un peu mais le résultat est tellement classe que je l’ai ressorti de mes cartons.

Et n’hésitez pas à visiter le site de l’auteur.
Cette néo-zélandaise propose des tutoriels qui sont d’un bon niveau, avec un résultat plus que correct.

Tutoriel (en): http://www.melissaclifton.com/tutorial-popart.html
Tutoriel (fr): http://www.melissaclifton.com/tutorial-frenchpop.html

Site : http://www.melissaclifton.com/

Voici un outil que j’utilise déjà depuis un moment permettant d’émuler du css3 sous IE.
Via un fichier .HTC, CSS3Pie permet d’appliquer quelques unes des propriétés css3 , comme border-radius, box-shadow, border-image…

Facile d’utilisation, il suffit d’ajouter la propriété behavior avec le chemin vers le fichier htc à votre élément css et le tour est joué.

#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

Attention, les raccourcis(border-radius-topleft, border-radius-bottomright…) ne fonctionnent pas.
Il faut écrire la propriété au complet.
Par exemple border-radius-topleft : 10px deviendra border-radius:10px 0 0 0.
C’est expliquer dans la documentation.

Site : http://css3pie.com

J’avais déjà présenté un générateur de ccs3 dans un précédent article, mais celui ci est beaucoup plus agréable a utiliser.
Il nous affiche directement le rendu ainsi que le code, sans oublier la compatibilité avec les différents navigateurs.
Par contre, il nous fais télécharger un zip qui contient une simple page html. Un fichier css aurait été bien mieux…

Site : http://www.css3maker.com

Un article intéressant sur le blog css4design.

Il émet cette simple question : Pourquoi commencer le travail dans Photoshop pour refaire ensuite presque la même chose en HTML et en CSS ?

Pour ma part je travaille directement en HTML et CSS. Et vous ?

Site : http://css4design.com/conception-dans-le-navigateur-avec-html5-css3