CSS3 : Transformations 2D

voir la source

 

La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique. Il est donc possible de modifier l’apparence d’un élément grâce à un ensemble fonctions 2D :

Syntaxe

La syntaxe est simple d’emploi.

transform: function(value);

Il est souvent nécessaire d’utiliser les préfixes vendeurs (-webkit--moz-, etc.) devant la propriété transform pour utiliser les transformations 2D sur les versions actuelles et passées de navigateurs. Reportez-vous aux tableaux de compatibilité pour savoir ce qu’il en est des moteurs, et à partir de quelles versions.

Il est également possible d’effectuer des transformations combinées en espaçant les fonctions d’un simple caractère blanc.

transform : function1(value1) function2(value2) function3(value3);

La propriété transform-origin

Pour pouvoir appliquer des transformations, nous avons besoin de savoir quel est le point d’origine (d’ancrage) de la transformation. La propriété transform-origin définit ce point d’origine.

La valeur initiale de cette propriété est le centre de l’élément, ce qui équivaut à la notation :

transform-origin: 50% 50%;

Il est possible de changer cette valeur en utilisant un mot-clef de position (topright,bottomleft) suivi d’une valeur chiffrée dont l’unité peut varier (px%, etc.)

div {
   transform-origin: top 0 left 0;
   transform: scale(1.25);
}

Il s’agit là de la syntaxe proposée par le W3C. À l’heure actuelle (2012) aucun navigateur n’implémente cette syntaxe correctement. Cependant, il suffit de supprimer les mots-clefs de position pour obtenir des résultats sur tous les navigateurs récents (toujours à condition d’utiliser les préfixes vendeurs -webkit-,-moz-,-ms-,-o- selon les versions);

Quelques exemples de positionnements :

Point d’origine en haut à gauche

transform-origin: 0 0;

Point d’origine en bas à droite

transform-origin: 100% 100%;

Point d’origine en bas et centré

transform-origin: 50% 100%:

Voici quelques exemples en démonstration de transformations avec la fonction scale (cf. le détail plus loin) dont le point d’origine varie.

Démonstration

Les fonctions de la propriété transform

Une fois l’origine choisie, nous pouvons affecter des transformations à nos éléments avec la propriété transform.

La fonction translate

Elle permet d’effectuer une translation (un déplacement) de l’élément sur les axes X et Y.

Il n’y a ici aucune notion de flux, l’élément part de son emplacement courant, quel que soit le type de positionnement que vous lui aurez attribué.

transform: translate(x,y);

y est une valeur optionnelle équivalente à 0 si elle n’est pas renseignée. Les deux valeurs peuvent être négatives.

Démonstration

Les fonctions translateX et translateY

Ces fonctions permettent de réaliser une translation sur l’axe X (translateX) ou Y (translateY).

transform: translateX(value) translateY(value);

Si vous pensiez comme moi que ces fonctions permettent une modification de l’une des deux valeurs du vecteur initial, dans le cas par exemple où la transformation vient en écraser une autre, alors vous faites erreur. Essayez le code suivant pour comprendre :

div {
   transform: translate(20px, 35px);
}
div:hover {
   /* redéfinition de la valeur X ? */
   transform: translateX(20px);
}

En définissant uniquement translateX sur l’évènement :hovertranslateY est implicitement redéfini avec la valeur 0.

Démonstration

La fonction scale

Cette fonction permet d’agir sur l’échelle (les dimensions) de l’élément. La valeur initiale est 1, tandis que les valeurs supérieures à 1 créent un effet d’agrandissement, et les valeurs inférieures créent un effet de réduction.

transform: scale(x,y);

La valeur y est optionnelle et sera égale à la valeur de x si elle est non renseignée, par exemple pour un agrandissement d’un facteur 1.25 :

transform: scale(1.25);

Les valeurs de x et y peuvent être aussi négatives. Il est possible d’effectuer ce « zoom » sur tous les éléments a priori… mais ce n’est pas parce que vous pouvez le faire qu’il faut le faire. N’oubliez pas qu’une image agrandie pourra être floue ou mal interpolée selon sa résolution initiale et celle de l’écran de destination.

Démonstration

Les fonctions scaleX et scaleY

Sur le même principe que pour les fonctions dérivées de translate, ces deux fonctions permettent de définir indépendamment les valeurs x et y.

Si scaleX est uniquement renseigné, scaleY vaudra implicitement 1 (aucun effet de scaleen y donc), et inversement.

transform: scaleY(1.25);

Cette transformation va élargir l’élément ainsi que son contenu éventuel. Il suffit de regarder la démonstration suivante pour constater la transformation (prêtez attention au texte de l’encadré vert).

Démonstration

La fonction rotate

Il s’agit d’une des plus simples fonctions à comprendre. Comme son nom l’indique, elle permet d’effectuer une rotation de l’élément ciblé.

Cette rotation s’exprime en degrés (unité deg). et peut être négative et supérieure de manière absolue à 360. Ce dernier point n’a de réel intérêt que lors d’une animation d’un état à un autre afin de présenter, par exemple, une rotation de plusieurs tours d’un élément. Autrement, sans animation de la rotation, la valeur 380° équivaut visuellement à une rotation de 20°.

transform: rotate(5deg);

Attention cependant, le point d’origine de la transformation a son importance comme le présente la démonstration qui suit.

Démonstration

La fonction skew

Cette fonction permet d’obliquer la forme d’un élément. À ma grande surprise, la documentation du W3C ne parle que des fonctions skewX et skewY, et pour cause :

Important, transform: skew() is not supported anymore (spec and gecko). (But skewX an skewY are).

Attention : les navigateurs qui prennent en charge la fonction skew() font du zèle. Cette fonction n’est pas prévue par le W3C, et ne sera plus supportée (prochainement par Gecko), dans un avenir proche. Pour faire les choses correctement, utilisez les fonctions skewX et skewY.

Les fonction skewX et skewY

Il s’agit des fonctions dérivées de skew. Voici deux exemples de transformation en utilisant les deux fonctions. Vous aurez compris la syntaxe de base :

transform: skewX(15deg);

…ou en changeant les valeurs de X et Y :

transform: skewX(15deg) skewY(15deg);

Démonstration

La fonction « absolue » matrix

Cette fonction permet de réunir en une seule déclaration toutes les fonctions précédentes que nous avons vu ensemble sous la forme d’une matrice. Très concrètement, les détails ne seront pas abordés ici car ils font beaucoup plus appel à des notions mathématiques complexes que beaucoup d’entre nous ont mis de côté.

Exemple d’une transformation avec beaucoup de fonctions :

div {
    transform-origin: 0 0;
    transform: rotate(15deg) translateX(230px)  scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px);
}

Équivaut à la matrice suivante :

div {
    transform-origin: 0 0;
    transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px);
}

Pour comprendre comment fonctionne tout ceci, lisez l’excellent article de Useragentman.com : The CSS3 matrix() Transform for the Mathematically Challenged. Sachez qu’il existe un éditeur en ligne qui vous permet de manipuler une boîte dans le but d’obtenir des coordonnées matricielles : www.useragentman.com/matrix/

Ordre des déclarations

La propriété transform accepte plusieurs fonctions les unes à la suite des autres, comme proposé précédemment. Cependant, l’ordre des fonctions a son importance.
En effet, les deux transformations suivantes n’ont pas le même résultat :

div {
    transform: scale(2) translate(20px, 20px);
}

et différent de :

div {
    transform: translate(20px, 20px) scale(2) ;
}

De la même manière :

div {
    transform: translate(40px, 40px) scale(2) ;
}

propose le même résultat que :

div {
    transform: scale(2) translate(20px, 20px);
}

En effet, les transformations se font dans l’ordre où elles sont déclarées, ainsi une translation de 20px est équivalente à 40px si un scale de 2 la précède. Vous me suivez ?
Attention donc à l’ordre de déclaration de ces fonctions.

Du transform sur tous les navigateurs

Internet Explorer possède son propre filtre pour effectuer des transformations. En plus dufiltre propriétaire « Matrix », le comportement des transformations est différent puisque IE va tenter de transformer l’élément en restant collé aux bords haut et gauche de la boîte originelle (représentée par le cadre en pointillés dans les démo de cet article).

L’outil IE TransformsTranslator permet de corriger le tir en appliquant automatiquement des marges aux éléments transformés pour IE.

Tableau des compatibilités

Navigateurs Versions Détails
Internet Explorer Internet Explorer 9+ Avant la version 9, il est possible d’utiliser les filtres propriétaires.
A partie de la 10 : sans préfixe -ms-.
Firefox Firefox 3.5+ à partir de 16.0 : sans préfixe -moz-
Chrome Chrome 4+
Chrome Mobile (Android 4)
avec préfixe -webkit- jusqu’à 23.0 (+ ?)
Opera Opera 10.5+
Opera Mobile 11+
à partir de 12.5 : sans préfixe -o- et 11.0 sans préfixe pour Opera Mobile
Safari Safari 3.1+
Safari Mobile (iOS 3.2)
avec préfixe -webkit-
Android Browser Android Browser 2.1+ avec préfixe -webkit-

 

Ressources

Publicités

CSS3 Flexbox Layout module

voir la source

 

Positionner correctement des éléments en CSS s’est toujours révélé être une mission aussi palpitante que fastidieuse en raison d’un lourd passé de navigateurs assez peu enclins à suivre des standards communs. Depuis sa création, CSS propose officiellement quatre types de rendus d’éléments :

  • Le rendu « bloc »
  • Le rendu « inline »
  • Le rendu « tabulaire »
  • Le rendu « positionné »

Chacune des valeurs de la propriété display (par exemple inline-block), de float, ou deposition, renvoie à l’un de ces quatre types de rendus.

CSS3 étend ce périmètre en introduisant un nouveau modèle de boîte « flexible » : Flexbox, ou Flexible Box Layout Module.

Flexbox est un nouveau mode de positionnement, introduit via la propriété display, permettant de créer un contexte général d’affichage sur un parent et d’en faire hériter ses enfants :

  • Distribution en bloc ou en ligne,
  • Alignements horizontaux et verticaux,
  • Gestion des espaces disponibles (fluidité à l’instar des cellules de tableau),
  • Réorganisation des éléments indépendamment de l’ordre du flux (DOM).

Compatibilité de Flexbox module

Commençons par calmer les plus optimistes d’entre vous et ceux que je vois déjà en train de se ruer sur leur éditeur HTML préféré. Posons d’entrée le décor ; j’ai deux bonnes et une mauvaise nouvelle :

  • La première bonne nouvelle est que les spécifications concernant Flexbox sont au stade de « Candidate Recommandation » et peuvent être aujourd’hui considérées comme stables.
  • La seconde bonne nouvelle est que l’implémentation de Flexbox sur les navigateurs est « relativement correcte », comme en témoigne l’excellente ressource Caniuse.
  • La mauvaise nouvelle est que les spécifications ont radicalement changé plusieurs fois et que les navigateurs compatibles sont susceptibles de reconnaître l’une ou l’autre des versions des spécifications, parfois de manière incomplète, et – bien entendu – avec moults préfixes de partout !

Malgré ces quelques petites embûches, consolez-vous en vous rappelant notamment que dans le monde du Web mobile, les navigateurs récents sont déjà parfaitement prêts à afficher vos sites web dans ce mode de positionnement avant-gardiste.

Tableau des compatibilités

Navigateurs Versions Détails
Internet Explorer Internet Explorer 10+
IE mobile 10+
Ancienne spécification. Avec préfixe -ms-
Firefox Firefox 2+ Ancienne spécification. Avec préfixe -moz-
Chrome Chrome 4+
Chrome Mobile (Android 4+)
Ancienne spécification depuis Chrome 4. Avec préfixe -webkit-
Spécification finale depuis Chrome 21. Avec préfixe -webkit-
Ancienne spécification pour Chrome sur Android. Avec préfixe -webkit-
Opera Opera 12.1+
Opera Mobile12.1+
Spécification finale. Sans préfixe
Safari Safari 3.1+
Safari Mobile (iOS 3.2+)
Ancienne spécification. Avec préfixe -webkit-
Android Browser Android Browser 2.1+ Ancienne spécification. Avec préfixe -webkit-

Des spécifications fluctantes

Comme vous l’avez judicieusement constaté à la lecture attentive du tableau de compatibilité, la spécification de Flexbox a connu différentes étapes de syntaxe et nommage. Il y a eu trois syntaxes très différentes au cours de l’évolution de ce module :

Syntaxe 2009 Syntaxe 2011 Syntaxe 2012 (finale)
display : box display : flexbox display : flex
box-flex flex flex
box-ordinal-group flex-order order
box-orient flex-direction flex-direction
box-pack + box-align flex-pack justify-content + align-items

Pour des raisons pratiques évidentes, nous nous contenterons des syntaxes standardisées et sans préfixes au sein de cet article, il vous incombera de rajouter tous les préfixes constructeurs si vous désirez appliquer les exemples de codes sur votre navigateur préféré.

Appliquer Flexbox

Le principe général de Flexbox peut paraître assez déroutant de prime abord, mais finalement très pratique : il suffit de créer un « contexte de boîte flexible » sur un parent à l’aide de la propriété display afin qu’il soit appliqué à l’ensemble de ses enfants directs.

Tout au long de cet article et pour l’ensemble des exemples pratiques, nous avons choisi le navigateur Google Chrome, actuellement le plus à même de supporter cette spécification dans sa dernière version stable. Cependant, rien ne devrait vous empêcher de tester sur d’autres navigateurs.

En clair, la règle suivante va affecter les éléments enfants de .kiwi :

.kiwi {display: flex;}

flex01

Démonstration display: flex

Modifier l’orientation

L’un des premiers avantages de ce type de positionnement est de pouvoir jongler aisément entre une disposition d’éléments sous forme de colonnes (blocs) ou de lignes (inlines).

Pour ce faire, il suffit là encore d’indiquer ce comportement sur le parent à l’aide de la propriété flex-direction :

/* les enfants s'affichent en colonne */
.kiwi {flex-direction: column;} 

/* les enfants s'affichent en ligne */
.kiwi {flex-direction: row;} 

flex02

Démonstration flex-direction: column

Le suffixe -reverse inverse l’ordre d’affichage :

/* les enfants s'affichent en colonne inversée */
.kiwi {flex-direction: column-reverse;} 

/* les enfants s'affichent en ligne inversée */
.kiwi {flex-direction: row-reverse;} 

flex02b

Démonstration flex-direction: column-reverse

Dans la lignée de flex-direction, signalons l’existence de la propriété intéressante flex-wrap.

Cette propriété autorise (ou non) les éléments à s’afficher sur plusieurs lignes lorsqu’elles dépassent de leur conteneur, les valeurs étant les suivantes :

  • flex-wrap: nowrap : les éléments demeurent toujours sur une ligne, et peuvent déborder
  • flex-wrap: wrap : les éléments passent à la ligne plutôt que de déborder
  • flex-wrap: wrap-reverse : les éléments passent à la ligne… en inversant leur direction

flex03

Démonstration flex-wrap: wrap

flex03b

Démonstration flex-wrap: wrap-reverse

Pour votre culture personnelle, sachez qu’il existe une propriété raccourcie flex-flowqui regroupe flex-direction et flex-wrap.
Ne vous étonnez donc pas de rencontrer tantôt la syntaxe .kiwi {flex-flow: column;}

/* affichage en ligne et passage à la ligne autorisé */
.kiwi {flex-flow: row wrap;} 

Gérer les alignements horizontaux et verticaux

Flexbox propose de gérer très finement les alignements et centrages, en différenciant les deux axes d’affichage de cette manière :

  • Les alignements dans l’axe principal sont traités via la propriété justify-content et ses différentes valeurs : flex-startflex-endcenterspace-between et space-around
  • Les alignements dans l’axe secondaire sont gérés avec align-items et ses valeurs :flex-startflex-endcenterbaselinestretch

Exemple de centrage horizontal et vertical :

.kiwi {
  justify-content: center;
  align-items: center;
} 

flex04

Démonstration justify-content

flex05

Démonstration align-items

Alignement : gérer les exceptions

La propriété align-self offre la possibilité de distinguer un élément particulier de ses frères en adoptant un alignement différent.

Attention toutefois, cette méthode peut dans certains cas causer des soucis d’accessibilité lorsque la feuille de style est désactivée (Cf Accessiweb 2.2 critère 10.3).

.kiwi > li:last-child {
  align-self: flex-end;
} 

flex05b

Démonstration align-self

Autre astuce, la propriété margin et sa valeur auto permettent de positionner un élément en dehors de la distribution de ses frères.

Il devient donc possible d’afficher un groupe d’élément à gauche du parent et d’en placer un à droite :

.kiwi {
  justify-content: flex-start;
} 
.kiwi > li:last-child {
  margin-left: auto;
}

flex05c

Démonstration margin: auto

Jouer avec la flexibilité des éléments

Cela ne devrait étonner personne, la notion de flexibilité constitue le fondement du module de positionnement Flexbox, et c’est là qu’intervient l’indispensable propriété flex.

La propriété flex est un raccourci de trois propriétés, flex-growflex-shrink et flex-basis, dont les fonctions sont :

  • flex-grow : propension pour un élément à s’étirer dans l’espace restant
  • flex-shrink : propension pour un élément à se contracter si besoin
  • flex-basis : taille initiale de l’élément avant que l’espace restant ne soit distribué

Les particularités des propriétés de flexibilité étant assez nombreuses (et leursspécifications assez alambiquées), je vous propose un petit résumé explicatif simplifié :

Pour rendre un élément flexible, il suffit de lui attribuer une valeur de flex-grow (ouflex en raccourci) supérieure à zéro.
Cet élément occupera alors l’espace restant au sein de son conteneur :

/* .salade occupera l'espace restant */
.salade {
  flex: 1;
}

Plusieurs éléments peuvent être rendus flexibles et se répartir l’espace restant.

Dans l’exemple ci-dessous, l’espace total est découpé en 4 (1+2+1), puis partagé entre les trois éléments selon le « poids » attribué à chacun. En l’occurrence, le troisième occupera la moitié de l’espace (2/4), les deux autres se partageant le reste par parts égales.

.salade {
  flex: 1;
}   
.tomate {
  flex: 2;
}   
.oignons {
  flex: 1;
}

En ajoutant une valeur supplémentaire, celle de flex-basis, il est possible d’indiquer une largeur minimale préférée qui sera appliquée tant qu’il n’y a pas d’espace superflu :

.salade {
  flex: 1 200px;
}   
.tomate {
  flex: 2 400px;
}   
.oignons {
  flex: 1 200px;
}

flex06

Démonstration flex n°1

flex06b

Démonstration flex n°2

Gabarit flexible

Réordonner les éléments au sein de leur parent

L’une des fonctionnalités les plus avant-gardistes du modèle d’affichage Flexbox est de pouvoir réordonner à sa guise chacun des éléments indépendamment grâce à la propriétéorder.

Les valeurs de order agissent telles des pondérations : les éléments dont la valeur est la plus forte se trouveront en bas de la pile. La valeur initiale de order est 0.

/* le premier de la liste s'affichera en bas de pile */
li:first-child {
  order: 1;
}

flex07

Démonstration order

Démonstration navigation

Pour aller plus loin

Voici quelques ressources externes pour en savoir plus sur ce positionnement très polyvalent :

Articles et tutoriels connexes

Alternatives

Il existe un outil de type polyfill en JavaScript afin d’émuler le support de Flexbox sur les anciens navigateurs tels IE6-IE9 et Opera 10. Il s’agit de Flexie.js. Vous pouvez le tester surFlexie Playground. Sachez cependant que cette alternative JavaScript ne semble plus mise à jour depuis une bonne année et se base sur la syntaxe désuette de 2009.

Signalons également l’existence d’un outil de test de Flexbox en ligne : Flexplorer (à tester sur un navigateur compatible).

Conclusion

Flexbox est une spécification vaste et complexe, nous n’en n’avons démontré que les parties les plus exploitables mais d’autres recoins restent à explorer et seront dévoilés au fur et à mesure de leur support avec les navigateurs. Quoi qu’il en soit, le positionnement Flexible Layout regroupe de nombreuses bonnes pratiques et attentes des webdesigners et intégrateurs depuis de longues années. Dans un avenir proche (ou dès maintenant selon votre cible), il constitue sans aucun doute la méthode de positionnement la plus pratique et polyvalente.

Créer un bouton de partage animé

aller sur le site

I. Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul UnderwoodHow To Create A CSS Animated Share Button.

II. Introduction

Tous les sites ont aujourd’hui des boutons de partage de contenu vers les réseaux sociaux. Si ce n’est pas votre cas, vous devriez en incorporer. Ces boutons sont le meilleur moyen de donner la possibilité à vos visiteurs de partager les contenus de votre site avec leurs amis et leurs « followers ».

L’inconvénient de ces boutons de partage c’est qu’ils se ressemblent tous, quel que soit le site Web visité. Mais c’est également un avantage, cette ressemblance permet aux visiteurs de facilement les repérer.

Dans cet article nous allons donc apprendre à créer un bouton de partage de contenu original pour les principaux réseaux sociaux.

Tout d’abord , nous allons écrire le HTML qui va afficher le texte Partager cette page . Puis quand le curseur de la souris passera sur ce texte nous allons utiliser les animations CSS pour afficher les boutons de partage .

III. Le code HTML

Le code HTML que nous allons écrire contiendra plusieurs sections que nous allons séparer en utilisant différents éléments HTML, le tout étant contenu dans une div sur laquelle on appliquera la classe CSS share_button .

Sélectionnez
<div class="share_button">
</div>

Ce bouton s’animera par le centre pour afficher les boutons de partage, nous allons donc ajouter deux sections que nous utiliserons pour séparer le texte.

Sélectionnez
<div class="share_button">
<section>
<article>
<h1>Share th</h1>
</article>
</section>
<section>
<article>
<h1>is Page</h1>
</article>
</section></div>

À l’intérieur de ces deux sections nous allons afficher ou cacher les éléments <article> pour faire apparaître les boutons de partage. Dans cet exemple il y aura deux boutons par article, soit un total de quatre boutons de partage.

IV. Le code HTML complet

Le code suivant est à utiliser sur une page PHP WordPress car nous utilisons la fonction the_permalink() . Si vous n’utilisez pas WordPress, remplacez la fonction par l’ URL de la page que vous souhaitez partager.

Sélectionnez
<div class="share_button">
<section>
<article>
<h1>Share th</h1>
</article>
<article>
<h2><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" title="Share On Facebook">F</a></h2>
<h2><a href="http://twitter.com/home?status=Share On Twitter <?php the_permalink(); ?>" title="Share On Twitter">T</a></h2>
</article>
</section>
<section>
<article>
<h1>is Page</h1>
</article>
<article>
<h2><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="Share On Google Plus">G</a></h2>
<h2><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>" title="Share On Pinterest">P</a></h2>
</article>
</section></div>

V. Le code CSS

Le CSS est divisé en deux parties. Dans la première, nous allons créer le bouton ; puis nous nous occuperons de l’animation qui changera l’apparence des sections pour afficher les boutons de partage en lieu et place du texte.

Utilisez le code CSS suivant pour l’apparence du bouton :

Sélectionnez
.share_button { width: 300px;height: 70px; margin:0 auto; }
.share_button section { width: 50%; height: inherit; float: left; }
.share_button section h1 { margin-top: 13%; overflow: hidden; width: 100%;color: #fff;}
.share_button section article { position: absolute; height: inherit; width: 150px; background: #d4d5d9;
        -webkit-transition: all 600ms;
        -moz-transition: all 600ms;
        -o-transition: all 600ms;
        -ms-transition: all 600ms;
        transition: all 600ms;
        text-align: center;
}
.share_button section article h2 { display: inline-block; width: 40%;   height: 40px; overflow: hidden; margin-top: 10%; cursor: pointer; }
.share_button section article h2:hover { text-shadow:2px 2px 2px #555; }
.share_button section article h2 a { color:#FFF; text-decoration: none; }
.share_button section:first-child article:first-child{ text-align: right; }
.share_button section:last-child article:first-child{ text-align: left; }
Sélectionnez
.share_button section:first-child article:last-child,
.share_button:hover section:first-child article:first-child {
        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
        -o-transform: rotateY(90deg);
        -ms-transform: rotateY(90deg);
        transform: rotateY(90deg);
}
.share_button section:last-child article:last-child,
.share_button:hover section:last-child article:first-child {
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
}
.share_button:hover section:first-child article:last-child,
.share_button:hover section:last-child article:last-child {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
}

VI. Conclusion

Nous avons vu dans ce tutoriel comment créer des boutons de partage de contenus vers les réseaux sociaux attractifs visuellement pour vos visiteurs. N’hésitez pas à jouer avec le code CSS pour les personnaliser !

VII. Liens

Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.

VIII. Remerciements

Je tiens à remercier Paul Underwood de m’avoir autorisé à traduire son tutoriel.
Je remercie également zoom61 pour sa relecture orthographique.

Media Queries for Standard Devices

Last updated on: OCTOBER 8, 2010

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Reference URL

Le principe des transitions CSS3

=>Source<=

Avant de commencer, il est bon de savoir quand a lieu une transition en CSS. Vous n’êtes pas sans savoir qu’il est possible de modifier le style d’un élément d’une page lorsqu’un certain événement se déclenche. L’exemple le plus basique est celui des liens qui changent de couleur lors du passage de la souris.

La transition a lieu entre l’état initial de l’élément (un lien bleu, par exemple) et son état final après l’événement (admettons que le lien devienne rouge). Grâce à la transition, notre lien ne passera pas du bleu au rouge directement, mais il changera progressivement de couleur.

Bien entendu, il est possible de faire appel aux transitions sur d’autres propriétés que la couleur comme les dimensions des éléments ou leur position. Je vous invite à consultercette page pour prendre connaissance des propriétés pouvant être animées. Notez cependant que la propriété transform n’y est pas répertoriée alors qu’elle peut pourtant bel et bien être utilisée : en effet, il est tout à fait possible d’effectuer une transition lors d’une rotation, par exemple. :)

Pour conclure avec cette première partie, retenez bien ceci : une transition, c’est tout simplement le changement d’état progressif d’une propriété CSS d’un état initial vers un état final voulu.

Notre première transition

Finalement, comment faire des transitions ? C’est bien plus simple qu’il n’y paraît puisqu’il s’agit en fait de simples propriétés CSS.

Nous avons à notre disposition cinq propriétés pour effectuer des transitions et nous commencerons par étudier les deux principales :

  • transition-property ;
  • transition-duration.
Les normes CSS3 n’étant pas encore finalisées, les navigateurs n’interprètent pas tous ces propriétés, ou alors les interprètent à leur manière !
Si ce cher Internet Explorer les ignore complètement (même dans sa version 9), il est nécessaire de mettre des préfixes pour Firefox, Google Chrome, Safari et Opera. Ainsi, pour Firefox, il est préférable d’écrire -moz-transition-property, pour Google Chrome et Safari -webkit-transition-property et pour Opera-o-transition-property.
Pour plus de clarté dans ce tutoriel, les propriétés seront utilisées sans leur préfixe.

La propriété transition-property permet d’indiquer les propriétés de notre élément qui doivent être animées. Par défaut, sa valeur est fixée à « all », ce qui signifie que toutes les propriétés seront sujettes à la transition.
Si nous souhaitons appliquer des transitions sur plusieurs propriétés, il suffit de les séparer par des virgules :

Code : CSS – Sélectionner

1
2
3
4
5
6
p
{
    /* Seules la couleur du texte et les dimensions
    de nos paragraphes auront une transition. */
    transition-property: color, width, height;
}

Il nous faut maintenant utiliser la propriété transition-duration pour indiquer le temps que durera la transition entre l’état initial de la propriété et son état final. Par défaut, cette propriété vaut 0s, il n’y a donc pas de transition.
Il est possible d’indiquer un temps en secondes ou en millisecondes. Pour cela, il suffit d’ajouter respectivement s ou ms à la suite de notre valeur. :)

Code : CSS – Sélectionner

1
2
3
4
5
6
7
8
9
p
{
    /* Seules la couleur du texte et les dimensions
    de nos paragraphes auront une transition. */
    transition-property: color, width, height;

    /* La transition durera trois secondes. */
    transition-duration: 3s;
}

Nos transitions sont définies, il ne nous reste plus qu’à indiquer quand les utiliser ! Et c’est là que c’est magique : les transitions auront lieu automatiquement dès que les propriétés concernées seront modifiées !

Modifions par exemple le style de nos paragraphes au passage de la souris. Je vous rappelle pour cela qu’il faut utiliser le pseudo-format :hover :

Code : CSS – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* Style par défaut de nos paragraphes
(= état initial). */
p
{
    /* Seules la couleur du texte et les dimensions
    de nos paragraphes auront une transition. */
    transition-property: color, width, height;

    /* La transition durera trois secondes. */
    transition-duration: 3s;

    /* On stylise un peu plus nos paragraphes. */
    width: 400px;
    height: 200px;
    color: #fff;
    background-color: #a5a5a5;
    border: 2px solid #000;
    margin: auto;
    text-align: center;
}

/* Style lors du passage de la souris
(= état final). */
p:hover
{
   width: 300px;
   height: 300px;
   color: #000;
}

Il ne nous reste plus qu’à tester tout ça avec du code HTML5, extrêmement basique. :) Notez que le code CSS3 ci-dessus est enregistré dans le fichier style.css.

Code : HTML – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
	<head>
		<title>Ma première transition</title>
                <meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="style.css" /> 
	</head>
	<body>
		<p>
                     Passez la souris sur moi !
                </p>
	</body>
</html>

L’avantage des transitions, c’est qu’elles ne sont pas bloquantes : si votre visiteur utilise un navigateur ne pouvant pas les interpréter, le changement d’état des propriétés se fera quand même, seulement, il ne sera pas progressif.

Des transitions (un peu) plus complexes

Maintenant que vous avez saisi le principe des transitions CSS, il est temps de voir deux autres propriétés pouvant être utiles :

  • transition-delay ;
  • transition-timing-function.

La première, transition-delay, permet comme son nom l’indique de définir un délai avant que la transition n’ait lieu. Comme pour transition-duration, il est possible de la définir en secondes (s) ou en millisecondes (ms), et sa valeur par défaut est 0s.

Reprenons l’exemple précédent et ajoutons-y cette propriété :) :

Code : CSS – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* Style par défaut de nos paragraphes
(= état initial). */
p
{
    /* Seules la couleur du texte et les dimensions
    de nos paragraphes auront une transition. */
    transition-property: color, width, height;

    /* La transition durera trois secondes. */
    transition-duration: 3s;

    /* On attend 1,5 seconde avant que
    la transition ne se lance. */
    transition-delay: 1500ms;

    /* On stylise un peu plus nos paragraphes. */
    width: 400px;
    height: 200px;
    color: #fff;
    background-color: #a5a5a5;
    border: 2px solid #000;
    margin: auto;
    text-align: center;
}

Bien plus intéressante, transition-timing-function permet de spécifier l’accélération de notre transition : celle-ci doit-elle être rapide au début puis lente à la fin ? Doit-elle s’exécuter à vitesse constante ?
Cette propriété peut prendre les valeurs suivantes :

  • linear : la vitesse de transition est la même du début à la fin de la transition ;
  • ease : la transition commence doucement, s’accélère, puis se termine doucement. Il s’agit de la valeur par défaut ;
  • ease-in : la transition s’accélère peu à peu ;
  • ease-out : la transition ralentit peu à peu ;
  • ease-in-out : la transition commence doucement, s’accélère, puis se termine doucement. Il s’agit en fait de la même chose que la valeur ease, sauf que l’effet est plus prononcé ;
  • cubic-bezier(x,x,x,x) : la plus compliquée ! Cette valeur emploie la courbe de Bézier pour définir l’accélération de la transition. Remplacez « simplement » les x par des valeurs comprises entre 0 et 1.

Je vous conseille fortement de consulter ce site. Ce dernier vous permet de définir et de choisir plus facilement les valeurs qui correspondent le mieux à vos attentes pour la propriété transition-timing-function. Sélectionnez la valeur souhaitée dans la liste déroulante et testez-la directement sur ce site ou bien modifiez la courbe d’accélération pour obtenir les valeurs adéquates sur la courbe de Bézier. :D

La méga propriété de transition

Comme souvent en CSS, il est possible de fusionner toutes les propriétés que nous venons de voir en une seule, générique. Celle-ci se nomme tout simplement… transition ! :p
Voici la manière dont elle se présente :

Code : CSS – Sélectionner

1
2
3
4
p
{
    transition: property duration timing-function delay;
}

Dans le cas où nous souhaitons faire des transitions pour plusieurs propriétés, il suffit de les ajouter à la suite, chacune séparée par une virgule. Pour notre exemple, voici ce que ça donne :

Code : CSS – Sélectionner

1
2
3
4
5
p
{
    /* Il est possible de spécifier des valeurs différentes pour chaque propriété. */
    transition: color 3s ease 1500ms, width 1s ease-in 0s, height 2s ease-out 0.2s;
}

Un menu sympa !

Les transitions permettent de donner un côté vraiment très sympathique à nos pages web. En guise d’exercice, je vous propose de réaliser un petit menu dynamique, et ce uniquement en CSS : aucune ligne de JavaScript ne sera nécessaire !

Voici le code HTML de notre menu :

Code : HTML – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
	<head>
		<title>Un menu dynamique en CSS</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="style.css" /> 
	</head>
	<body>
		<ul>
			<li id="item1">
				<a href="#lien1">
					<span>
						Description
					</span>
				</a>
			</li>
			<li id="item2">
				<a href="#lien2">
					<span>
						Description
					</span>
				</a>
			</li>
			<li id="item3">
				<a href="#lien3">
					<span>
						Description
					</span>
				</a>
			</li>
			<li id="item4">
				<a href="#lien4">
					<span>
						Description
					</span>
				</a>
			</li>
			<li id="item5">
				<a href="#lien5">
					<span>
						Description
					</span>
				</a>
			</li>
		</ul>
	</body>
</html>

Nous avons donc une liste contenant cinq éléments. Chacun de ces éléments possède un lien, possédant lui-même une description.
Je vous propose d’afficher cette liste de liens sous forme d’images cliquables : au passage de la souris sur une image, la description associée s’affichera dynamiquement sur l’image.

Commençons tout d’abord par définir le style de base de notre liste :

Code : CSS – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
ul
{
	/* On supprime les puces, on précise une largeur
        et on centre la liste par rapport à la page. */
        list-style: none;
	width: 60%;
	margin: auto;
}

li
{
	/* On fixe les dimensions
        des éléments de notre liste. */
        width: 150px;
	height: 150px;

        /* On met en forme le texte. */
	text-align: center;
	font-weight: bold;

        /* On modifie l'affichage pour que
        les éléments soient sur la même ligne. */
	display: inline-block;

        /* On ajoute une petite bordure
        et on définit les marges.  */
	border: 1px solid #000;
	margin: 10px;
	padding: 0px;

        /* Quitte à faire du CSS3, autant
        avoir des coins arrondis :p. */
        border-radius: 10px;

        /* On centre l'arrière-plan. */
        background-position: center;

        /* On modifie la position pour pouvoir ensuite
        placer comme on le souhaite la description des liens. */
        position: relative;

        /* On n'affiche pas ce qui dépasse de nos éléments ! */
	overflow: hidden;	
}

/* On indique les images à afficher
en arrière-plan pour chaque élément. */
#item1{background-image: url('bgd1.jpg')}
#item2{background-image: url('bgd2.jpg')}
#item3{background-image: url('bgd3.jpg')}
#item4{background-image: url('bgd4.jpg')}
#item5{background-image: url('bgd5.jpg')}

Notre menu commence à avoir de l’allure, mais nous avons encore du boulot ! Il serait par exemple mieux de pouvoir cliquer sur toute l’image plutôt que de devoir cliquer sur le texte de description. Pour cela, il suffit d’indiquer dans la feuille de style que le lien doit prendre les mêmes dimensions que son parent.

Code : CSS – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
li a
{
	/* Pour fixer les dimensions d'un lien,
        il est nécessaire de l'afficher en tant
        qu'élément de type block. */
        display: block;
	width: 100%;
	height: 100%;
        text-decoration: none;
}

Voilà qui est mieux. :)
Il ne nous reste plus qu’à styliser notre description. Je vous rappelle l’objectif : nous ne voulons pas la voir initialement, mais elle doit s’afficher au survol de la souris.
Les descriptions étant contenues dans un <span>, il sera nécessaire, comme pour les liens, de les afficher en tant que « block » pour fixer leurs dimensions.

Code : CSS – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
li span
{
	display: block;
        height: 50px;
        width: 100%;
        color: #fff;
        margin: 0px;

        /* La taille des lignes est égale à
        la hauteur de l'élément. Cela permet
        de centrer verticalement le texte. */
        line-height: 50px;

        /* Abusons du CSS3 en affichant
        un arrière-plan semi-transparent ! */
        background-color: rgba(0,0,0,0.3);

        /*Mettons les coins inférieurs arrondis
        pour que ce soit plus propre
        (merci à wibix pour la remarque)*/
        border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;

        /* Position absolue pour afficher
        la description avec précision. */
        position: absolute;

        /* L'ordonnée de l'élément est égale
        à la hauteur de son parent (150px) :
        la description sera donc située sous
        son parent. */
	left: 0px;
	top: 150px;
}

Voici donc la technique pour rendre « invisible » notre description : on l’affiche sous l’élément qui la contient. Rappelez-vous, nous avons spécifié aux balises <li> que leur propriété overflow devait avoir pour valeur « hidden » : nos descriptions ne s’afficheront pas.
Mais nous avons oublié un point important. Eh oui, nous n’avons pas indiqué la manière dont les transitions doivent réagir !

Code : CSS – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
li span
{
	display: block;
        height: 50px;
        width: 100%;
        color: #fff;
        margin: 0px;

        /* La taille des lignes est égale à
        la hauteur de l'élément. Cela permet
        de centrer verticalement le texte. */
        line-height: 50px;

        /* Abusons du CSS3 en affichant
        un arrière-plan semi-transparent. */
        background-color: rgba(0,0,0,0.3);

        /* Position absolue pour afficher
        la description avec précision. */
        position: absolute;

        /* L'ordonnée de l'élément est égale
        à la hauteur de son parent (150px) :
        la description sera donc située sous
        son parent. */
	left: 0px;
	top: 150px;

        /* N'oublions pas les transitions ! */
        transition-property: top;
        transition-duration: 1s;
}

Pour afficher notre description, il suffit de jouer avec sa propriété top : c’est donc sur elle que nous voulons appliquer nos transitions. J’ai choisi pour ma part une durée d’une seconde, ça me semble bien. Je n’ai pas voulu m’embêter avec des délais et des accélérations : les valeurs par défaut me conviennent très bien. ^^

Il ne nous reste plus qu’à indiquer quand modifier cette propriété top. Petite difficulté ici : nous voulons modifier la position de notre description uniquement lorsque la souris survole le parent de cette description.

Code : CSS – Sélectionner

1
2
3
4
5
6
/* On modifie l'ordonnée des descriptions contenues
dans un élément d'une liste survolée par la souris. */
li:hover span
{
	top: 100px;
}

Et voilà ! :D
Nous avons obtenu un menu fort sympathique assez rapidement et sans véritable difficulté puisqu’il n’y a que du code CSS !

Il est cependant possible d’utiliser JavaScript pour jouer avec les transitions CSS, c’est d’ailleurs ce que nous allons voir dès maintenant. :)

Plus de liberté avec JavaScript

L’intérêt des transitions CSS est de s’affranchir de JavaScript pour dynamiser nos pages Web. Cependant, il peut s’avérer nécessaire d’utiliser ce langage pour effectuer certaines manipulations. Par exemple, comment indiquer au navigateur qu’il doit lancer la transition de tel élément lorsque l’on clique sur tel bouton ? En CSS, ce n’est tout simplement pas possible…

JavaScript va donc nous offrir plus de possibilités avec les transitions, tout ceci avec une simplicité déconcertante !

Vingt mille lieues sous les mers

Pour vous donner un exemple des possibilités qui nous sont offertes, je vous propose de vous prendre pour le capitaine Nemo ! Nous simulerons une sorte de sous-marin pour voir l’océan à travers un hublot…

Pour cela, nous allons avoir besoin de trois images :

Image utilisateur
Le hublot, petit montage de ma conception

Image utilisateur
Les flèches pour le tableau de bord, de ma conception également

Et le fond marin (en lien parce que trop grand !).
Venant de Linternaute.com, mais vous l’aviez deviné :lol:

Voici donc ce que je vous propose de faire. Notre page contiendra deux <div>. La première aura pour fond notre océan et contiendra une image : le hublot.
La seconde <div> en contiendra huit autres : une pour chaque flèche de notre tableau de bord.
Ce dernier se comportera de cette façon : quand la souris passera sur une flèche, la vue que nous aurons de l’océan à travers le hublot se déplacera dans la direction indiquée.

Ça peut vous paraître flou pour l’instant, mais je vous assure que c’est très simple. :)

Les codes HTML et CSS

Vous ne devriez pas avoir de mal à comprendre le code HTML de ce mini projet :

Code : HTML – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
	<head>
		<title>Vingt mille lieues sous les mers</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="style.css" /> 
		<script	type="text/javascript">
			window.onload=function()
			{
				//On placera notre code JS ici.
			};
		</script>
	</head>
	<body>
		<div id="ocean">
			<img src="hublot.png" alt="Hublot"/>
		</div>
		<div id="controls">
			<div id="fleche_hg"></div>
			<div id="fleche_h"></div>
			<div id="fleche_hd"></div>
			<div id="fleche_g"></div>
			<div id="fleche_d"></div>
			<div id="fleche_bg"></div>
			<div id="fleche_b"></div>
			<div id="fleche_bd"></div>
		</div>
		<h1>Passez la souris sur les flèches !</h1>
	</body>
</html>

Tous les éléments de notre page sont mis en place, il ne nous reste qu’à styliser tout ça. :)
Nous ne nous occuperons du code JavaScript qu’à la fin, une fois que tout sera bien fixé dans notre code CSS.

Commençons donc par traiter ce qu’il y a de plus facile : je propose déjà de colorer le fond de notre page en gris, parce que le blanc est un peu agressif. Centrons également l’instruction « Passez la souris sur les flèches ! » pour faire plus propre.

Code : CSS – Sélectionner

1
2
3
4
5
6
7
8
9
body
{
	background-color: #a5a5a5;
}

h1
{
	text-align: center;
}

Bon, passons aux choses sérieuses avec l’océan à proprement parler.
Nous devons le mettre aux mêmes dimensions que l’image du hublot. Pour que ce soit plus joli, nous pouvons également le centrer et lui ajouter une petite bordure. N’oublions également pas de lui appliquer notre image de fond que nous allons d’ailleurs centrer. :)
Rappelons-nous le but de l’exercice tout de même : utiliser les transitions. Pour simuler l’exploration des fonds marins, nous modifierons la position de l’arrière-plan, tout simplement !

Code : CSS – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#ocean
{
	margin: auto;
	margin-bottom: 10px;
	width: 640px;
	height: 400px;
	border: 2px solid #000;
	background-image: url('background.jpg');
	background-position: center;
        transition-property: background-position;
        transition-duration: 10s;
}

Nous avançons bien ! :D
Attaquons-nous maintenant au tableau de bord. Il contiendra les flèches de contrôle, à raison de trois par ligne : chaque flèche étant large et haute de 45 pixels, le tableau de bord doit avoir pour dimensions 135 pixels de haut et de large. Je préfère également mettre sa position en « relative » afin de placer au pixel près les flèches qu’il contiendra.

Code : CSS – Sélectionner

1
2
3
4
5
6
7
#controls
{
	width: 135px;
	height: 135px;
	margin: auto;
	position: relative;
}

Les flèches ont toutes les mêmes dimensions et la même image de fond, ce n’est donc pas trop compliqué :) :

Code : CSS – Sélectionner

1
2
3
4
5
6
7
8
#controls div
{
	width: 45px;
	height: 45px;
	position: absolute;
	background-image: url('fleches.png');
	background-repeat: no-repeat;
}

Pour les flèches, j’ai fait le choix d’employer la technique des sprites CSS : cela ne permet d’avoir qu’une seule image à gérer pour toutes les flèches au lieu d’une vingtaine.
En contrepartie, le code CSS est bien plus pénible à écrire, mais il n’est pas plus complexe pour autant. :)

Code : CSS – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#fleche_hg{left: 0px; top: 0px; background-position: 0px top;}
#fleche_hg:hover{background-position: 0px bottom;}

#fleche_h{left: 45px; top: 0px; background-position: -45px top;}
#fleche_h:hover{background-position: -45px bottom;}

#fleche_hd{left: 90px; top: 0px; background-position: -90px top;}
#fleche_hd:hover{background-position: -90px bottom;}

#fleche_g{left: 0px; top: 45px; background-position: -135px top;}
#fleche_g:hover{background-position: -135px bottom;}

#fleche_d{left: 90px; top: 45px; background-position: -180px top;}
#fleche_d:hover{background-position: -180px bottom;}

#fleche_bg{left: 0px; top: 90px; background-position: -225px top;}
#fleche_bg:hover{background-position: -225px bottom;}

#fleche_b{left: 45px; top: 90px; background-position: -270px top;}
#fleche_b:hover{background-position: -270px bottom;}

#fleche_bd{left: 90px; top: 90px; background-position: -315px top;}
#fleche_bd:hover{background-position: -315px bottom;}

Tout est fin prêt ! Notre code CSS est en effet achevé, notre navigateur sait, grâce aux transitions, qu’il devra animer le changement de position de l’arrière-plan de l’océan… Il ne nous reste plus qu’à utiliser JavaScript pour ce faire.

La finalisation avec JavaScript

Nous pouvons désormais fermer notre fichier CSS pour revenir à notre fichier HTML et écrire le code JavaScript.
Nous avons déjà préparé notre fichier de façon à ce qu’il accueille le JavaScript correctement : je vous rappelle quand même que tout se passe dans la fonction window.onloadafin que le code ne s’exécute qu’une fois la page complètement chargée.

Bref, que voulons-nous faire exactement ?
Au passage de la souris sur une flèche, nous souhaitons modifier la propriété background-position de l’océan.
Nous devrons donc écrire la fonction onmouseover pour chaque flèche.
Pour déplacer le fond vers le coin supérieur gauche, il suffit de spécifier la propriété CSS background-position à « left top », pour le mettre en bas à droite à « right bottom », etc.

Notre code peut donc être le suivant :

Code : JavaScript – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//On stocke notre océan pour plus de clarté.
var ocean=document.getElementById('ocean');
document.getElementById('fleche_hg').onmouseover=function()
{
	ocean.style.backgroundPosition='left top';
};
document.getElementById('fleche_h').onmouseover=function()
{
	ocean.style.backgroundPosition='center top';
};
document.getElementById('fleche_hd').onmouseover=function()
{
	ocean.style.backgroundPosition='right top';
};
document.getElementById('fleche_g').onmouseover=function()
{
	ocean.style.backgroundPosition='left center';
};
document.getElementById('fleche_d').onmouseover=function()
{
	ocean.style.backgroundPosition='right center';
};
document.getElementById('fleche_bg').onmouseover=function()
{
	ocean.style.backgroundPosition='left bottom';
};
document.getElementById('fleche_b').onmouseover=function()
{
	ocean.style.backgroundPosition='center bottom';
};
document.getElementById('fleche_bd').onmouseover=function()
{
	ocean.style.backgroundPosition='right bottom';
};

Oui, ça fait long comme code, mais avouez qu’on a connu plus difficile en JavaScript. :p

Il serait également bon de recentrer l’arrière-plan lorsque nous ne sommes plus sur une flèche. Pour cela, il faut définir la méthode onmouseout de chaque flèche. Cette fois, cette méthode doit faire la même chose quelle que soit la flèche, une boucle pourra donc nous tirer d’affaire.

Code : JavaScript – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
//On récupère tous les éléments enfants du tableau de bord.
var fleches=document.getElementById('controls').childNodes;

//Pour chaque enfant de notre tableau de bord...		
for(var i in fleches)
{
	/* Malheureusement, « fleches » ne contient pas que nos flèches,
        il contient aussi des éléments « Text » : il nous faut donc vérifier que
        l'enfant parcouru possède l'attribut « style ». Si oui, il s'agit d'une
        de nos flèches, on peut donc continuer. */
        if(fleches[i].style)
	{
		//On peut donc définir notre fonction.
                fleches[i].onmouseout=function()
		{
	             //Fonction qui recentre l'arrière-plan de l'océan.
                     ocean.style.backgroundPosition='center';
		}
	}
}
Malheureusement, cet exemple ne fonctionne pas toujours avec le navigateur Opera et pour une raison bien étrange : ce dernier ne prend pas encore correctement en charge les transitions de la propriété background-position… Gageons que cette erreur soit corrigée lors de la prochaine mise à jour du navigateur ! En attendant, il est toujours possible de ruser en changeant la façon de penser le système : on peut par exemple ajouter une balise <div> contenant notre fond, la placer en position « absolue » et la déplacer en jouant avec ses propriétés top et left.

Notre JavaScript modifie donc la position de l’arrière-plan selon les flèches survolées. Grâce à notre code CSS, le changement se fera progressivement, donnant ainsi l’illusion de mouvement ! Notez bien qu’aucune transition ne se fait dans le code JavaScript, tout se déroule dans le code CSS.

N’est-ce pas merveilleux ? :D

Allons plus loin avec transitionend

Détectons la fin de notre transition

Vous n’êtes pas sans savoir que JavaScript permet de lancer des fonctions lors de l’exécution d’événements. Ainsi, dans notre expérience sous-marine, nous bougions l’arrière-plan lors de l’événement « passage de la souris sur les flèches du tableau de bord ».

Les transitions CSS ont fait naître un nouvel événement : transitionend. Comme les anglophones parmi vous l’auront deviné, cet événement se produit lorsque la transition s’est achevée.

Sur le papier, ça peut sembler pratique, notamment pour créer un système d’animations enchaînées. Malheureusement, tout comme la propriété CSS, l’événement JavaScript change de nom selon le navigateur du visiteur…

Ainsi, si Firefox utilise bien transitionend, Opera préfère OTransitionEnd tandis que Google Chrome a opté pour webkitTransitionEnd. Bien entendu, Internet Explorer s’en contre-fiche, vu qu’il ne se préoccupe déjà pas des transitions en CSS. :p

Ce dernier point est un véritable problème. Si le navigateur de votre visiteur n’interprète pas les transitions CSS, l’événement transitionend ne se déclenchera jamais ! Évitez donc d’y utiliser des fonctions indispensables à la bonne navigation de votre site.

Tout ceci ne simplifie pas nos affaires et je vous propose donc un petit exemple pour comprendre le fonctionnement.

Code : HTML – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
	<head>
		<title>Découvrons transitionend</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="style.css" /> 
		<script>
			window.onload=function()
			{
				// Nombre de fois que l'animation a été achevée
				var total=0;

				// On stocke les noms des événements selon les navigateurs
				var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd'];				

				// On parcourt chacun de ces événements
				for(var i in navigatorsProperties)
				{
					// Et on les lie à notre élément HTML
					document.getElementById('boite').addEventListener(navigatorsProperties[i],function()
					{
						total++;
						document.getElementById('infos').innerHTML='Transition terminée '+total+' fois !';
					},false);
				}
			};
		</script>
	</head>
	<body>
		<h1 id="infos">Passez la souris sur le carré !</h1>
		<div id="boite"></div>
	</body>
</html>

Bon, je ne vous montre pas le code CSS, j’y modifie juste la propriété margin-left de ma <div> au passage de la souris, et ce avec une transition-duration de 2 secondes. Vous devriez être capables de le faire tout seul, maintenant. :p

Si vous avez testé le code, vous avez vu que l’événement transitionend ne se déclenche que lorsque la transition a atteint son état initial ou son état final. Ainsi, si vous sortez la souris du carré pendant son déplacement, celui-ci revient vers son point de départ : la transition vers son état final est certes terminée mais aucun événement ne s’est déclenché ! En effet, le carré fait demi-tour vers son état initial, il considère donc que sa transition n’est pas achevée !

Quelle propriété a été animée ? Combien de temps a duré la transition ?

JavaScript nous offre la possibilité de connaître la propriété CSS qui a été animée. Pour cela, il suffit de récupérer le paramètre fourni par l’événement transitionend. Ce paramètre contient en effet deux propriétés qui peuvent nous être utiles :

  • propertyName contient le nom de la propriété CSS qui vient d’être animée ;
  • elapsedTime indique le temps écoulé depuis le début de la transition, en secondes.

Code : JavaScript – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
window.onload=function()
{
	var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd'];				

	for(var i in navigatorsProperties)
	{
		document.getElementById('boite').addEventListener(navigatorsProperties[i],function(e)
		{
			document.getElementById('infos').innerHTML='Transition de la propriété <em>'+e.propertyName+'</em> terminée en <b>'+e.elapsedTime+'s</b> !';
		},false);
	}
};
Il y a toutefois une particularité pour elapsedTime : si la transition se coupe en plein milieu, il est remis à zéro. Essayez avec l’exemple ci-dessus en sortant la souris du carré pendant son déplacement, vous verrez que le temps indiqué à la fin de l’animation est toujours inférieur à deux secondes contrairement à ce qui a été indiqué dans le CSS !

Maintenant que tout est clair sur l’événement transitionend, je vous propose un petit exemple d’utilisation. :)

La balade de Carapuce

Pour cet exercice, je vous propose de déplacer une <div> dans une autre. Rien de bien palpitant me direz-vous, mais cela peut donner des résultats intéressants, vous verrez. :)

Tout d’abord, voici la structure de notre page HTML :

Code : HTML – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<title>Une div se promène.</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="style.css" /> 
		<script	type="text/javascript">
			window.onload=function()
			{
			   // Plus tard =D
			};
		</script>
	</head>
	<body>
		<div id="conteneur">
			<div id="moveDiv"></div>
		</div>
	</body>
</html>

Et son CSS correspondant, que vous pouvez bien entendu améliorer (il est franchement très basique et très moche :p ).

Code : CSS – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
#conteneur
{
	width: 155px;
	height: 130px;
	position: relative;
	margin: auto;
	background-color: #000;
}

#moveDiv
{
	width: 23px;
	height: 19px;
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: #fff;
	transition: left 4s linear, top 5s linear;
}

Comme vous le voyez, j’ai décidé d’animer les propriétés left et top : le déplacement de notre <div> sera donc fluide. :)

Il ne nous reste plus qu’à lancer la transition en JavaScript pour qu’elle se fasse dès le chargement de la page, sans aucune action de la part du visiteur. Ensuite, viatransitionend, on demandera un autre déplacement de sorte que notre élément visite chacun des quatre coins de son parent.

Code : JavaScript – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
window.onload=function()
{
	// Les coordonnées de chaque coin du conteneur
	var topLeft=[10,10];
	var topRight=[122,10];
	var bottomLeft=[10,101];
	var bottomRight=[122,101];

	// On crée un objet littéral pour stocker nos valeurs
	var objet=
	{
		// Notre div à déplacer
		'div': document.getElementById('moveDiv'),

		// La position vers laquelle elle se dirige
		'position': topRight,

		// Et une fonction pour la faire bouger !
		'move': function()
		{
			this.div.style.left=this.position[0]+'px';
			this.div.style.top=this.position[1]+'px';
		}
	}

	var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd'];				
	for(var i in navigatorsProperties)
	{
		objet.div.addEventListener(navigatorsProperties[i],function(e)
		{
			/*Lorsque la div a fini son déplacement, on lui
			indique un autre point à atteindre*/
			switch(objet.position)
			{
				case topRight:
					objet.position=bottomRight;
				break;

				case bottomRight:
					objet.position=bottomLeft;
				break;

				case bottomLeft:
					objet.position=topLeft;
				break;

				case topLeft:
					objet.position=topRight;
				break;
			}

			// Et on lui demande de se rendre à ce point !
			objet.move();
		},false);
	}

	// On lance le déplacement de notre div !
	objet.move();
};

Notre <div> parcourt bien chacun des quatre points de son conteneur. :) Bon, ce n’est pas très joli, mais en appliquant des images en arrière-plan, il est possible d’avoir des résultats bien plus sympathiques. Tenez, prenons ces images :

Image utilisateur
Trouvée sur Spriters Ressource.
Image utilisateur
Trouvée également sur Spriters Ressource et ré-arrangée par moi-même :) .

Essayer !

N’est-ce pas mieux ? Si vous n’êtes pas encore convaincu par les transitions CSS3, je ne peux plus rien pour vous ! :D

Pour modifier l’orientation du Carapuce, il suffit de changer sa propriété background-position dans notre code JavaScript, au niveau du switch.
Merci à Nesquik69 pour m’avoir suggéré la rédaction de cette partie sur transitionend;)

Q.C.M.

Le premier QCM de ce cours vous est offert en libre accès.
Pour accéder aux suivants

Connectez-vous Inscrivez-vous

Quelle propriété CSS3 permet de lier des propriétés aux transitions ?

  •  transition-property.
  •  transition-attribut.
  •  transition-properties.
  •  transition-attributes.

Que se passe-t-il si je passe ma souris sur une balise <div> en ayant ces instructions CSS ?

Code : CSS – Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
div
{
   width: 300px;
   height: 200px;
   background-color: #fff;
   transition-property: background-color;
}

div:hover
{
   width: 400px;
   height: 100px;
   background-color: #000;
}
  •  Toutes les propriétés de la balise se modifieront via une transition, excepté la propriété background-color qui sera modifiée directement.
  •  Toutes les propriétés de la balise se modifieront via une transition.
  •  Seule la propriété background-color se modifiera via une transition, toutes les autres se modifieront directement.
  •  Toutes les propriétés de la balise se modifieront directement.

Parmi les souhaits suivants, lequel nécessite obligatoirement JavaScript pour être réalisé ?

  •  Je souhaite effacer progressivement une image pour faire apparaître celle en dessous lorsque son élément parent est survolé par la souris.
  •  Je souhaite que la couleur de fond de mon paragraphe devienne bleue petit à petit lorsque je clique sur un bouton.
  •  Je souhaite modifier la taille de mon textarea de façon fluide quand l’utilisateur souhaite écrire du texte dedans.

J’utilise un navigateur n’interprétant pas les transitions CSS. Parmi les affirmations suivantes, laquelle est fausse ?

  •  Les propriétés CSS peuvent quand même être modifiées dynamiquement, seulement cela ne se fera pas de façon fluide.
  •  Les fonctions liées à l’événement JavaScript transitionend s’exécuteront quand même, comme si les transitions avaient lieu.
  •  Si mon navigateur n’interprète pas les transitions, c’est peut-être parce que le développeur a oublié de mettre les préfixes -moz, -webkit ou -o à ses propriétés.

Statistiques de réponses au QCM

Les animations avec CSS3 sont donc une sacrée avancée dans le domaine du développement web. JavaScript n’est désormais plus relégué qu’à titre de support pour ces transitions, fini le temps des machines à gaz écrites avec ce langage ! :lol:

Mais qu’on ne se leurre pas : même si nous pouvons faire des choses vraiment sympathiques rien qu’en CSS3, JavaScript reste indispensable pour des choses un peu plus avancées.

Il est temps de se demander si charger une bibliothèque telle que jQuery est indispensable pour nos petites animations. :)

3D THUMBNAIL HOVER EFFECTS

=>Source<=

A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery.

3d Thumbnail Hover Effects

VIEW DEMO DOWNLOAD SOURCE

Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase.

In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.

The images used in the demos are by Angelo González and they are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.

We will omit vendor prefixes in this tutorial. But you’ll of course find them in the files.

THE MARKUP

The markup for the thumbnail structure will be as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="grid" class="main">
 
    <div class="view">
        <div class="view-back">
            <span data-icon="A">566</span>
            <span data-icon="B">124</span>
            <a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a>
        </div>
        <img src="images/1.jpg" />
    </div>
    <div class="view">
    <!-- ... -->
    </div>
    <!-- ... -->
    
</div>

Each thumbnail goes into a division with another division for the details (view-back). The structure that we want to create for each division with the class view using JavaScript is the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="view">
    <div class="view-back">
        <!-- ... -->
    </div>
    
    <div class="slice s1" style="background-image: url(images/1.jpg); ">
        <span class="overlay"></span>
        
        <div class="slice s2" style="background-image: url(images/1.jpg); ">
            <span class="overlay"></span>
            
            <div class="slice s3" style="background-image: url(images/1.jpg); ">
                <span class="overlay"></span>
                
                <div class="slice s4" style="background-image: url(images/1.jpg); ">
                    <span class="overlay"></span>
                    
                    <div class="slice s5" style="background-image: url(images/1.jpg); ">
                        <span class="overlay"></span>
                    </div><!-- /s5 -->
                
                </div><!-- /s4 -->
                    
            </div><!-- /s3 -->
                
        </div><!-- /s2 -->
            
    </div><!-- /s1 -->
    
</div><!-- /view -->

Each slice will have the respective image as it’s background image and since we have a nested structure, this will allow us to control the effect. Additionally, we’ll add an overlay span that we’ll use to make the effects more realistic.

Our JavaScript function looks as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$.fn.hoverfold = function( args ) {
    this.each( function() {
    
        $( this ).children( '.view' ).each( function() {
        
            var $item   = $( this ),
                img     = $item.children( 'img' ).attr( 'src' ),
                struct  = '<div>';
                    struct  +='<div>';
                        struct  +='<div>';
                            struct  +='<div>';
                                struct  +='<div>';
                                struct  +='</div>';
                            struct  +='</div>';
                        struct  +='</div>';
                    struct  +='</div>';
                struct  +='</div>';
                
            var $struct = $( struct );
            
            $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span ></span>' ) );
            
        } );
        
    });
};

Now we can have a lot of hover fun! Let’s first define some common styles and then we’ll go through the first example.

THE CSS

Let’s define the style for the view divisions. What’s important here is that we add perspective:

1
2
3
4
5
6
7
8
9
10
11
.view {
    width: 316px;
    height: 216px;
    margin: 10px;
    float: left;
    position: relative;
    border: 8px solid #fff;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
    background: #333;
    perspective: 500px;
}

The slices will need some 3D properties and a transition:

1
2
3
4
5
6
7
8
9
.view .slice{
    width: 60px;
    height: 100%;
    z-index: 100;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 150ms ease-in-out;
    
}

The part of the description that get’s revealed when we push the slices to the side will have the following style:

1
2
3
4
5
6
7
8
.view div.view-back{
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    background: #666;
    z-index: 0;
}

Let’s style the spans and the link:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.view-back span {
    display: block;
    float: right;
    padding: 5px 20px 5px;
    width: 100%;
    text-align: right;
    font-size: 16px;
    color: rgba(255,255,255,0.6);
}
.view-back span:first-child {
    padding-top: 20px;
}
.view-back a {
    display: bock;
    font-size: 18px;
    color: rgba(255,255,255,0.4);
    position: absolute;
    right: 15px;
    bottom: 15px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 22px;
    text-align: center;
    font-weight: 700;
}
.view-back a:hover {
    color: #fff;
    border-color: #fff;
}

For the icon before the spans we’ll use an icon font that we’ve created with Fontello. Since we have added a data-icon attribute to the spans, we can use the pseudo-class :before to display it:

1
2
3
4
5
6
7
8
.view-back span[data-icon]:before {
    content: attr(data-icon);
    font-family: 'icons';
    color: #aaa;
    color: rgba(255,255,255,0.2);
    text-shadow: 0 0 1px rgba(255,255,255,0.2);
    padding-right: 5px;
}

All, except the first slice, need to be moved to the right (remember, we have a nested structure):

1
2
3
4
5
6
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
    transform: translateX(60px);
}

Let’s set the respective background positions of each slice for the background image:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.view .s1 {
    background-position: 0px 0px;
}
.view .s2 {
    background-position: -60px 0px;
}
.view .s3 {
    background-position: -120px 0px;
}
.view .s4 {
    background-position: -180px 0px;
}
.view .s5 {
    background-position: -240px 0px;
}

The overlays will initially have an opacity of 0 and we’ll add a transition and change the opacity level on hover:

1
2
3
4
5
6
7
8
9
10
11
.view .overlay {
    width: 60px;
    height: 100%;
    opacity: 0;
    position: absolute;
    transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {
    opacity: 1;
}

Let’s just fix the position and z-index for the image (just so that we don’t see the back part on top and for the fallback). And we’ll also add a transition for browsers that don’t support 3D transforms:

1
2
3
4
5
.view img {
    position: absolute;
    z-index: 0;
    transition: left 0.3s ease-in-out;
}

In case we see that a browser does not support all those fancy 3D properties, we’ll simply load an additional stylesheet called fallback.css which will have the following content:

1
2
3
4
5
6
7
8
9
10
11
.view {
    overflow: hidden;
}
.view:hover img {
    left: -85px;
}
.view div.view-back {
    background: #666;
}

This will make the image slide to the left when we hover.

Now, let’s take a look at the example!

Example

For this example we will want to create a folding effect. For that we’ll adjust the perspective value of the view division and the transition for all the divisions:

1
2
3
4
5
6
7
.view {
    perspective: 1050px;
}
.view div {
    transition: all 0.3s ease-in-out;
}

The second, third, forth and fifth slice will be translated and rotated in 3D, creating the fold effect:

1
2
3
4
5
6
7
8
9
10
.view:hover .s2{
    transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3,
.view:hover .s5{
    transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
    transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}

Each of these slices will be moved to the left. It should be the value of their widths but we want to avoid showing a little gap, so we use 59px. The second slice will be rotated -45 degrees, making it turn towards the left. The forth slice rotates the other way and the third and fifth will both rotate 90 degrees. Remember, we are in a nested structure. Once we rotate a parent, the children will all be rotated.

To make things look a bit more realistic, we’ll add some gradients to the overlays:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.view .s2 > .overlay {
    background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.view .s3 > .overlay {
    background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view .s4 > .overlay {
    background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}
.view .s5 > .overlay {
    background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

The detail part of the thumbnail that get’s revealed when we hover, will also have a background gradient, since we want to simulate a shadow falling on it:

1
2
3
.view div.view-back{
    background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}

And that’s it! Check out the other examples and go nuts! There are many different possibilities for fooling around with this.
I hope you find it inspiring!

Check out Richard Bennett’s version that works on a click/touch event.

VIEW DEMO DOWNLOAD SOURCE

Powerful New CSS- and JavaScript Techniques

Since our last round-up of useful CSS techniques, we’ve seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage.

Since the release of the previous post, we’ve been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques. Today we finally present some of these techniques. Use them right away or save them for future reference.

Please note that many techniques are not only CSS-based, but also use HTML5 and JavaScript. We are going to present useful CSS tools and responsive design techniques in separate posts. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping; share your insight and experience instead, and feel free to link to techniques that really helped you recently. Thanks to all of the featured designers and developers for their fantastic work!

TABLE OF CONTENTS

  1. CSS Transitions and Animations
  2. Useful and Practical CSS Techniques
  3. CSS Typography and Text Techniques
  4. CSS Navigation Menus and Hover Effects
  5. Visual Techniques With CSS
(Smashing’s side note: Have you already pre-ordered the brand new Smashing Mobile Book? The book features everything you need to know as a designer or developer to create beautiful and rich mobile experiences. Get your book today!)

CSS Transitions And Animations

CSS transitions and animations are often used to make the user experience a bit more smooth and interesting, especially when it comes to interactive effects on hover or on click. Designers are experimenting with technology and create sometimes crazy, sometimes practical—but often innovative techniques which you could use to make your websites just a tiny bit more engaging.

Interactive CSS3 lighting effects
An interesting effect to create interactive lighting effects with 3-D transforms, CSS gradients and masks; the cast shadow was created using box shadows and transforms.

Interactive CSS3 Lighting Effects

CSS3 dodecahedron
A fancy dodecahedron experiment, created using CSS Transforms and a tiny JavaScript snippet.

CSS3 Dodecahedron

CSS 3D Lighting Engine Photon
Our editor Tom Giannattasio has created a JavaScript library that adds simple lighting effects to DOM elements in 3D space using the WebKitCSSMatrix object. It would be great to have an implementation for other rendering engines as well.

CSS 3D Lighting Engine Photon

3D Thumbnail Hover Effects With CSS
This technique produces 3D thumbnail hover effects with CSS 3D transforms. The code is quite verbose and probably could be optimized, but the effect is quite neat.

3D Thumbnail Hover Effects With CSS

Slide In Image Boxes
A technique for creating a “slide in” effect for boxes on hover to make them a bit more interactive.

Slide In Image Boxes

CSS3 bitmap graphics
The bitmap graphics is rendered with CSS: no images, no canvas, no data URIs and no extra markup. The pixels are drawn with CSS gradients, sized precisely to the pixel’s boundaries.

Pure CSS3 Bitmap Graphics

Paperfold CSS
A visual folding effect for hidden comments by Felix Niklas. The plugin takes a DOM element, slices it into parts and arranges them like a folded paper in 3-D space.

Paperfold CSS

Beercamp: An Experiment With CSS 3D
A CSS 3D popup book á la Dr. Seuss. The website was a test to see how far SVG and CSS 3D transforms could be pushed. This is the article about it.

Beercamp: An Experiment With CSS 3D

Covers: A JS / CSS Experiment
Now, that’s quite an experiment: what if we combined a music song, stylesheet and beat detector to create animated… covers? Sure, we can do it with CSS3 and JavaScript! Covers does exactly that. The result is interesting, what can you do with this approach?

Covers: A JS / CSS Experiment

Animation on Apple’s page
John B. Hall explains the CSS animation on Apple’s Web page for the iPhone 4S.

An explanation of the CSS animation on Apple’s iPhone 4S webpage — John B. Hall

Experimental animations for image transitions
A post about experimental 3-D image transitions that use CSS3 animations and jQuery. Only CSS3 transforms are used.

Experimental CSS3 Animations for Image Transitions

Maintaining CSS style states using “infinite” transition delays
This demo allows you to move the character around with the D-pad, and notice how it always keeps its position after you stop moving. This demo doesn’t use any JavaScript. The effect is made possible by using a virtually infinite transition delay, so that the CSS rules never return to their default state. The figure will be stuck in a transition and will move only when you hold down a button.

Maintaining CSS Style States using “Infinite” Transition Delays

CSS 3-D clouds
An experiment in creating 3-D-like clouds with CSS3 transforms and a bit of JavaScript.

CSS3D Clouds

Animated popover of profile box
A technique for an animated profile popover menu, built using CSS transitions.

Animated Profile Popover With CSS

CSS3 scrolling effects
A library of various scrolling effects, such as curl, wave, flip, fly, skew and helix, created with CSS3 and sometimes with JavaScript to spice up the scrolling behavior.

CSS3 Scroll Effects

Spin those icons with CSS3
A simple technique for creating a neat effect that spins social icons with the help of a transform and transition when you hover over them. By Tom Kenny.

Scrolling the Z Axis with CSS 3D Transforms
This article explains how to create the z-scroll effect step by step.

Useful and Practical CSS Techniques

CSS3 Family Tree
Display organizational data or a family tree using just CSS, without Flash or JavaScript. The markup is very simple and uses just nested lists. Pseudo-elements are used to draw the connectors. It also has hover effects: hover over a parent element and the entire lineage will be stylized. Make sure to check Nicolas Gallagher’s Introduction to CSS Pseudo Element Hacks.

CSS3 Family Tree

iOS-style popover
A simple technique for iOS-style custom checkboxes and a subtle hover effect. The technique is a bit buggy but a good starting point in case you need it. Also, check an excerpt from Lea Verou’s talk on customized checkboxes and her article on rule filtering based on specific selector(s) support.

iOS-style Popover

Timeline-Style Comments
Nicolas Gallagher developed a simple and clean technique to present comments in a timeline-alike overview.

Timeline-Style Comments

CSS Table Grid
Here is a nice technique for aligning columns in a table, building a “table grid system” of sorts. The idea is to apply classes to col elements in a table’s colgroup; you always leave one colwithout a class so that it remains fluid and can “soak up” the effects of any breakages elsewhere in the table.

CSS Table Grid

Confirmation Feedback Buttons
This article explains how to create buttons that take on different states depending on the user’s interaction. This type of interaction is especially useful on links such as “Purchase” and “Delete” for which it’s wise to confirm that the user indeed wants to take the specific action. It looks too much like an iTunes button, though.

A calendar in CSS3 and jQuery
A step by step tutorial on how to create a CSS3 calendar with some jQuery animation. Also, check out David Bushell’s responsive calendar demo.

A clean calendar in CSS3 & jQuery : Finishing Touch

Outdenting properties for debug CSS
Let’s assume you are experimenting with CSS or debugging code. You add properties to figure out how things fit together. How often do you forget to remove all of them? A simple technique for this is to mark a CSS property as a temporary or debugging property by outdenting it and putting it at column 0 in the file. A small trick that can save a lot of time.

Outdenting properties for debug CSS

Show Markup in CSS Comments
Chris Coyier discusses the idea of including the basic markup that you will be styling as a comment at the top of your CSS file.

Show Markup in CSS Comments

Selectively displaying data
This technique shows how to selectively display content in a table and add responsive breakpoints to create an responsive, complex multi-column table.

Remove Margins for First/Last Elements
If you ever wanted to remove the top or left margin from the first element in a container, or the right or bottom margin from the last element in a container, you can do this by using pseudo-selectors :first-child and :last-child.

CSS Diagnostics Stylesheet
A very useful snippet to have nearby when you are debugging your CSS or want to find mistakes in HTML.

CSS Diagnostics Stylesheet

Radio Buttons With Two-Way Exclusivity
Learn about the :empty pseudo-class selector and jQuery to ensure that when a radio button is clicked, the area is determined and all other radio buttons in that column are turned off, and then is turned back on when clicked on.

Radio Buttons with 2-Way Exclusivity

Tabbed Navigation With CSS
An elegant tabbed navigation menu with drop-down menus — no JavaScript, of course. Nothing new, but it’s a quite clean solution.

Tabbed Navigation With CSS

Menu With Notification Badges With CSS
A ready-to-use snippet for a navigation menu with notification badges.

Menu with Notification Badges With CSS

Styling based on sibling count (slides)
A fantastic overview of the possibilities for styling based on sibling count. Also, make sure to click through the rest of the slide deck — valuable and useful techniques. Make sure to watchLea Verou’s presentation as well.

Styling based on sibling count (Slides)

Stuff you can do with the “Checkbox Hack”
Wiht the “checkbox hack,” you use a connected label and checkbox input and usually some other element that you are trying to control. Learn what you can do with it.

CSS3 Facebook Buttons
Nicolas Gallagher presents a set of CSS buttons for Facebook with different colors and icons. You might want to check Nicolas’ CSS3 Social Sign-In buttons as well as Free Social CSS3 Buttons that we released earlier as well.

YouTube Popup Buttons
This article explores the default state of YouTube buttons, which have a very subtle bevel but pop up on :hover and :focus states, eager to be clicked.

YouTube Popup Buttons

Centering in the Unknown
When it comes to centering things in Web design, the more information you have about the element being centered and its parent element, the easier it is. Chris Coyier shows how to do it when you do not know anything.

Centering in the Unknown

Uncle Dave’s Ol’ Padded Box
What if you combined background-size: cover and Thierry Koblentz’ intrinsic ratios. The result is images and video than maintain their aspect ratio; but you can also use background-size: cover to change the aspect ratio and auto-cropping of images with just a little CSS. And the great news is that the property is supported in all modern browsers and matches media-query support exactly.

Micro Clearfix: Force Element To Self-Clear its Children
Chris Coyier presents various technique for forcing elements to self-clear its children, including Nicolas Gallagher’s short code snippet from 2011.

Micro Clearfix: Force Element To Self-Clear its Children

Conditional CSS
A clever technique by Jeremy Keith to load additional content conditionally. The idea is that once a media query fires, the content on the body element is generated and can be detected by a JavaScript, prompting extra content to be loaded.

* { box-sizing: border-box } FTW
Once you start mixing and matching various units in CSS — such as % for the container width,em for padding and px for border — then you run right into the box-model problem because the width of the container doesn’t include padding and border. We can easily solve this using box-sizing: border-box. And the best part: it is even supported in IE 8.

Multiple Attribute Values
How to treat multiple values in attributes rather than classes.

Multiple Attribute Values

Diagonal CSS Sprites
If you build a sprite on a diagonal, there will be no components below or to the right of the component you are showing. This allows you to make the element using the sprite as wide or as tall as it needs to be, without worrying about exposing the next component. Also, check outDavid Storey’s article on CSS sprites for the moder era.

Double Click in CSS
Is there a way to detect whether a link is tapped or double-clicked on mobile devices? In fact, we can. However, the code requires some hardcore CSS nerdery. Also, check Pure CSS Clickable Events Without :target by Ryan Collins.

Replacing the -9999px hack (new image replacement)
In the beginning was FIR (Fahrner image replacement). Scott Kellum, design director at Treesaver, has now developed this refactored code for hiding text.

Replacing the -9999px hack (new image replacement)

Fighting the Space Between Inline Block Elements
A series of inline-block elements formatted like you would normally format HTML will have spaces between them. But we often want the elements to butt up against each other, thus avoiding in the case of navigation) those awkward little unclickable gaps. How do you solve it? Chris Coyier has found a couple of solutions.

CSS pointer-events and a pure CSS3 animating tooltip
The pointer-events property allows you to specifiy how the mouse interacts with the element it is touching. See what you can do with it and what to consider when using them.

Anatomy of a mobile-first responsive Web design
An excellent article by Brad Frost about the different considerations for responsive designs. How do you start? What features would you implement and how? What about advanced optimization such as LocalStorage or AppCache? This article provide an excellent guide for getting started with future-friendly responsive designs.

SouthStreet Progressive Enhancement Workflow
A fantastic article by Scott Jehl and Filament Group in which they present a set of tools that form the core of an advanced responsive design workflow. Definitely useful to keep in mind for your next responsive design project.

Typography And Text With CSS

Advanced CSS techniques provide us with remarkable options to style text in very different ways. Not only can we make the typography look sharper and beautiful on the Web with tools such as Lettering.jsKerning.js and FitText; we can also play with glyphs, line breaks, font sizing, truncating text and styling lists. The typography can be adjusted and improved with just a couple of practical approaches.

Interactive Typography effects with HTML5
This techniques uses canvas and JavaScript to create ab interactive typography effect. Users can interact with the glyphs and as designer you can define forms or shapes of the word you’d like to present and how you’d like them to change on hover. Fancy!

Interactive Typography Effects with HTML5

Rocking letters with CSS3 and jQuery
A simple animation of letters with CSS3 and jQuery.

With Rocking Letters into the New Year

CSS 3D Typography
What about integrating stripes into glyphs and adjust the shadow on hover? This technique uses just that, creating a nice, subtle yet engaging visual effect. You can find more interesting type experiments in CSS3type Showcase.

cssandtype.com, gallery of css text effects

cssandtype.com, gallery of css text effects

CSS3 animation and masking text
Chandler Van De Water had a challenge for Trent Walton after seeing the header animation in his “CSS3 in Transition” post. Noticing that he used a PNG image file with knockout transparency, he wanted to do the same CSS animation with selectable text. Trent was happy to oblige! At the moment, this works only in Safari and Chrome.

CSS3 Animations and Masking Text

CSS mask-image and text
Trent Walton uses background-clip: text and mask-image to implement a subtle gray-flecked texture effect over white text. Hover over the box to see how it degrades in unsupported browsers. Make sure to check out Lea Verou’s “Text Masking: The Standards Way” as well.

CSS Mask-Image & Text

Fake bolding of Web fonts
Most browsers simulate bold weights for fonts that do not actually have bold weights. For example, Helvetica Neue Light does not have a bold weight. If you used font-weight: boldwith it, browsers would artificially create a bold weight. This article explains how to avoid fake bolding of Web fonts in your designs. By Divya Manian.

Fake Bolding of Web Fonts

Tomorrow’s Web type today: Say it With a Swash
The excellent series “Tomorrow’s Web type today” by Elliot Jay Stocks provides insights into what will be possible with Web typography soon, e.g. swashes. In fact, you can already use them today if you include a swash subset of a font to achieve the desired effect.

OpenType Swashes

Internationalization Language CSS
A very handy CSS nippet with language-specific quotes. Perfect for international, multilingual projects.

Internationalization Language CSS

Experiments with background-clip: text
With the CSS property background-clip: text, we can add a background image to a text element.

Experiments with background-clip: text

A Call for ::nth-everything
With CSS3, we have positional pseudo-class selectors to help us select a particular element when it has no distinguishing characteristics other than where it is in the DOM in relation to its siblings.

A Call for ::nth-everything

Smooth font using the text-shadow property
A common problem: is there a way smooth the appearance of glyphs on older machines, especially Windows XP (standard / ClearType rendering mode)? Yes, perhaps. You can give a try the text-shadow-property which adds text-shadow on the top-left and the bottom-right to smooth text.


Smooth font using CSS3 text-shadow property

Fluid Type
Trent Walton explains his approach to fluid typography in which he asks himself how we can make sure that browser width and typographic settings such as measure or font-size and how should we handle panoramic viewports? An interesting article, especially if you use a typography-out approach in your designs.

Fluid Type

Pragmatic, practical font sizing in CSS
Harry Roberts shares his thoughts on how to size fonts more efficiently, writing your CSS differently in the process.

Automatic line breaks with CSS3 hyphens and word-wrap
Roger Johansson shows how to solve a common problem: as columns of text become narrower, the risk of a single word being longer than the column’s width increases. When that happens, the text normally extends beyond the column. Luckily, CSS offers two properties to improve the situation: word-wrap and hyphens.

Molten leading (or fluid line height)
When a responsive composition meets a viewport, there are different ways to fill space. Adjusting any one element without also adjusting the others is a recipe for uncomfortable reading, which is one reason why designers have such a difficult time with fluid Web layouts. Tim Brown started a discussion about this issue and provides a couple of techniques for opimization.

Molten leading (or, fluid line-height)

Prevent Long URL’s From Breaking Out of Container
Another snippet by Chris Coyier for keeping long URLs within the container. word-wrapword-break and hyphens properties in use. Also, learn how to Prevent Superscripts and Subscripts from Affecting Line-Height.

Viewport-sized typography
This technique uses new CSS values for sizing elements relative to the viewport’s current size:vwvh and vmin. This allows you to couple the size of, say, a typographic heading to the available screen space. Browser support is quite poor for now, so if you are looking for an alternative, check out FitText.js.

Viewport Sized Typography

Minimum paragraph widths in fluid layouts
This article shows how to solve the problem of paragraphs that are too narrow, by implementing a minimum paragraph width. If the space left a the floating image is less than this width, then the whole paragraph moves below the image.

Styling ordered list numbers
Roger Johansson shows how we can style ordered list numbers with the :before pseudo element, which can take a counter as a value through the content property. Also check outChris Coyier’s post and Louis Lazaris’ CSS Counters: counter-increment and friends.

Styling ordered list numbers

Reverse ordered lists in HTML5
The reverse attribute allows you to write a descending list of numbered items. Louis Lazaris summarizes what it does and offers a solution to get around a lack of browser support for this attribute.

Reverse Ordered Lists in HTML5

Preserving white space with CSS3 tab size
By default, HTML pages ignore anything more than a single space and collapses them. But there are occasions when you’ll want to preserve this space via one of several possible techniques.

Truncating text using only CSS
This code snippet can be used to shorten a line of text using nothing but CSS.

New CSS3 properties to handle text and word wrapping
Louis Lazaris explains the possibilities and problems of text-wrap, overflow-wrap, line-break and word-break, text-overflow and hyphens. Also worth reading: Kenneth Auchenbergdiscusses the options for word wrapping and hyphenation in combination with dynamic width elements.

End Articles with Ivy Leaf
A clever technique for adding an extra touch to the end of your articles. :last-child:afterand content in use.

We are used to classical navigation patterns such as tabbed navigation or drop-downs, but we can do a lot more to spice up our navigation menus with pleasant hover effects, often without extra images. Especially if you’d like to add a bit more polish to your portfolio, gallery or e-commerce website, these techniques can be quite useful. What about “over-the top” hover effect for your links,

Circle Navigation Effect With CSS3
A bubble-like thumbnail preview for your navigation with CSS3.

Circle Navigation Effect with CSS3

Create a CSS3 Image Gallery With a 3D Lightbox Animation
Tom Kenny has extended a CSS lightbox gallery by adding a few hover effects to the gallery grid itself and a 3D rotation to the lightbox content, all with CSS.

Create a CSS3 Image Gallery with a 3D Lightbox Animation – Inspect Element

3D Gallery With CSS3 and jQuery
This article shares an experimental gallery that uses CSS 3D transforms. The idea is to create a circular gallery with an image in the center and two on the sides. Because perspective is being used, the two lateral images will appear three dimensional when rotated.

3D Gallery with CSS3 and jQuery

Creative CSS3 animation menus
Mary Lou presents a couple of creative navigation menu hover effects. The idea is to have a simple composition of elements, an icon, a main title and a secondary title that will be animated on hover using only CSS transitions and animations.

Creative CSS3 Animation Menus

How to spice up your menu with CSS3
Yes, another technique by Tympanus: this tip shows how to spice up a menu by adding a neat hover effect to it. The idea is to slide an image out to the right when the menu item is hovered over.

How to spice up your menu with CSS3

Create a zoomable user interface
David DeSandro reveals how to use CSS transforms to create a zoomable user interface similar to that of Beercamp 2011. In this tutorial, you’ll also learn how to use JavaScript to hijack scrolling to manipulate the zoom.

Create a zoomable user interface with CSS3

Flipboard Navigation
An experimental page layout inspired by Flipboard’s interface.

Flipboard Page Layout

Multi-direction hover
This element shows different hover effects when hovering from different directions.

Multi-direction hover

Experimental Hover Effects
Original and innovative hover effects discovered via Twitter on what appears to be a Japanese code sharing website.

Share JavaScript, HTML5 and CSS

Over-the-top hover effect
A CSS and JavaScript technique for creating an “over-the-top” hover effect using thetransform-origin transform-style properties as well as 3-D transforms.

Accordion With CSS3
Mary Lou experiments with the adjacent and general sibling combinator and the :checkedpseudo-class. Using hidden inputs and labels, she creates an accordion that animates the content areas on opening and closing.

Accordion with CSS3

Expanding Text Areas Made Elegant
An expanding text area is a good choice when you don’t know how much text the user will write and you want to keep the layout compact. In this article, Neil Jenkins explains how to do this simply. Also, you might want to take a look at Textarea Auto Resize, another technique by Louis Lazaris, using a hidden clone element.

Filter Functionality With CSS3
Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a box or radio button. This tutorial explores those CSS3 properties by creating a experimental portfolio filter that toggles the states of items of a specific type.

Filter Functionality with CSS3

An accessible, keyboard-friendly custom select menu
A new approach for more accessibility by Roger Johansson. He styles only the selectelement.

Visual Techniques with CSS

We used to heavily on images and visual elements to create basic visual effects on the Web. With CSS3, we can not only improved the loading speed of the content, but also make our visual elements more flexible and adaptive. Let’s take a look on a couple of examples of how we can achieve that.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
Tom Kenny shows how to create a simple “stacked” look to a group of images.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements – Inspect Element

CSS3 Unfold Map with Pins
A handy snippet for placing pins on a map. The code looks a bit verbose, so you might want to remove a couple of visual “nice-to-have” elements.

CSS3 Unfold Map with Pins

Turn Images Into Postage Stamps With CSS3 border-image
Dudley Storey shows a simple way to create a postage stamp from a simple image withborder-image.

Turn Images Into Postage Stamps With CSS3 border-image

Slopy elements with CSS3
Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. This tutorial shows some simple examples and ways how to create slopy, skewed elements with only CSS.

Slopy Elements with CSS3

CSS Flip Clock
A code snippet for displaying a flip clock-alike time display using CSS.

CSS Flip Clock

CSS3 Image Styles
When applying a CSS3 inset box-shadow or border-radius directly to an image element, the browser won’t render the CSS style perfectly. Here’s a quick tutorial on how to use jQuery to make perfect rounded corner images dynamically. And check out the second part.

CSS3 Image Styles – Part 2

Creating Reusable and Versatile Background Patterns
A simple tutorial on how to create reusable background patterns with Photoshop and CSS.

Creating Reusable & Versatile Background Patterns

Diagonal Graph Paper Gradient
A very nice CSS technique for creating diagonal graph paper gradients using repeating-linear-gradient property in CSS.

Diagonal Graph Paper Gradient

Tucked Corner Effect
A clean CSS technique for producing tucked corners using the pseudo-elements :after and:before as well as data URI-coded images. Also, check out Corner Ribbon Effect with CSS.

CSS Tucked Corner Effect

Scrolling… shadows!
An original technique by Roman Komarov to create CSS-only shadow-scrolling effect usingbackground-attachment: local. Developed by Lea Verou, inspired by Roman Komarov.

Scrolling shadows

Multi-colored CSS progress bars
A quite verbose yet CSS-only solution for displaying multi-colored progress bars. It’s linear-gradient in action! Also, check out CSS3 progress bars that display data inside localized leaderboards for the new analytics platform at G5. They are lightweight and require no JavaScript or images.

Multi-colored CSS Progress Bars

CSS3 breadcrumbs
Learn how to create your own cool CSS3 breadcrumbs. Also, check the CSS Breadcrumbs Example which uses only CSS linear gradients.

CSS3 breadcrumbs

Adobe-like Arrow Headers
A detailed article about the technique Adobe uses to create header bars for modules on its website.

Adobe-like Arrow Headers

Adding a Top Shadow to a website
If you ever wanted to add a shadow along the top edge of the website, you can easily do it by styling body:before.

Adding a Top Shadow to a website

A flexible shadow with background-size
It’s amazing what you can achieve when you combine different techniques—even when facing a challenge such as a flexible shadow. If you had to create an adaptive shadow effect, how would you create it?

Star Ratings With Very Little CSS
Chris Coyier shows how to code star ratings done with very little CSS code and lots of a bit of Unicode madness.

Convert Images to Black And White With CSS
Filters allow us to visually process an image in the browser without needing to go through PhotoShop or use cycle-intensive, script-heavy methods in JavaScript or PHP. CSS3 filters are broadly supported in the most recent versions of Firefox and Chrome, and we can gain support in older versions and alternative browsers — even IE — by using a combination of techniques.

Punching Holes With CSS
A clever and simple technique to make a block in a container appear transparent and display a background image. Also, take a look at Lea Verou’s accessible star rating widget with CSS.

Simple Styles for Horizontal Rules
With the help of a few contributors, Chris Coyier put together this page of simple styles for horizontal rules.

Simple Styles for Horizontal Rules

Optimizing Graphics With CSS Masks
In this video, Aaron Bushnell shows how CSS masks can help make the process easier on you and how to make sure you have fallbacks in place for non-Webkit browsers.

Browser-Specific CSS Hacks
A useful, comprehensive list of browser-specific CSS hacks for targeting legacy browsers. Unfortunately, most of us will need them quite often.

Last Click

CSS3 Lasers!
Shows a laser shot effect when hovering over an element.

CSS3 Lasers!

The DOM Tree
This DOM tree is generated via JavaScript every time you visit the page, so you’ll never see the same one twice. All of the forms are filled with holiday greetings in a variety of languages. CSS3 3D transforms are used to position and rotate, via translate3d() and rotate3d()respectively, the elements when the page loads. The infinitely looping rotation on the tree is controlled by an infinitely looping CSS3 animation. Just one word: crazy!

DOM Tree