CSS

Effet de coin de page en CSS 3

Effet de coin de page en CSS 3

De nombreux sites ont mis en place un effet de coin de page (Peel effect en anglais) pour des publicité, donner des informations complémentaires…

Vous pouvez en voir des exemples ici :

Comme vous l’aurez remarqué, cet effet est mis en place en utilisant une animation Flash ou du JavaScript.

Nous allons voir dans cet article comment réaliser le même effet en CSS 3 sans script complémentaire.

Démo

Styliser les légendes de vos images avec CSS 3

Styliser les légendes de vos images avec CSS 3

Lorsque l’on affiche des images sur un site, il est toujours utile d’ajouter divers informations (source, lieu…) pour le visiteur.

Mais comment ajouter une légende aux photos sans surcharger l’interface ?

Le but de cet article sera de réaliser un effet similaire à celui-ci : http://thirdroute.com/projects/captify/.

Et encore une fois, CSS 3 va nous aider à mettre en place ce que nous souhaitons, sans JavaScript.

Créer une galerie photos avec CSS 3

Créer une galerie photos avec CSS 3

Toujours à la recherche de solutions permettant de réaliser des effets avec CSS 3, je me suis penché sur la création d’une galerie photos sans JavaScript.

Le but va être de réaliser un ensemble d’aperçus de photos comme sur ce site : http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/.

Bien entendu, JavaScript interdit ;)

Créer un effet de slide avec CSS 3 sans JavaScript

Créer un effet de slide avec CSS 3 sans JavaScript

Nous avons souvent vu des librairies JavaScript permettant de réaliser des effets de slide :

Avec les nouvelles spécifications CSS 3, il est maintenant possible de mettre en place cet effet facilement sans aucun code JavaScript.