Réflexion d’image en HTML et CSS

Nous allons reproduire l’effet de réflexion d’image vers le bas sans utiliser de photoshop ou de javascript, simplement du CSS. Au final, vous pourrez réaliser ce qui est illustré ci-contre et ce en une ligne.Partons de cette image de base :

Que nous allons simplement intégrer à l’HTML de notre page de manière tout à fait classique comme suit :

Puis dans notre feuille CSS, nous allons lui appliquer le style suivant qui est une combinaison d’un masque gradient sur la réflexion :

img {
	-webkit-box-reflect: below 0 -webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(.6,transparent),to(rgba(255, 255, 255, 0.3)));
}

Voilà. C’est tout. Pour modifier à votre guise l’effet, voici quelques détails sur la propriété CSS -webkit-box-reflect qui n’existe pas (encore) sur Firefox ni IE. D’où le préfixe « webkit » pour Chrome et Safari.

• -webkit-box-reflect: <direction> <offset> <mask-box-image>
• <direction> : above, below, left or right.
• <offset> : longueur ou pourcentage spécifiant la distance entre la réflexion et le bord de la box originelle (selon la direction spécifiée). Optionel. Défaut: 0;
• <mask-box-image> : c’est une mask-box-image utilisable pour recouvrir la réflexion. Si absente, la réflexion n’aura aucun masque.
• La réflexion est mise à jour dès que les données de l’image changent. Elle est utilisable sur pas mal de choses, dont le tag <video> !! Ainsi, si vous jouez une vidéo, elle sera aussi jouée en réflexion. A essayer 😉