Chargement…
Image Couleur en Noir et Blanc

Transformer Une Image Couleur en Noir et Blanc



Dans l’article précédent, j’ai montré comment faire un effet Zoom sur une image. Aujourd’hui je vais vous montrer comment transformer une image couleur en noir et blanc avec CSS 3. A la base l’image est en couleur mais en la transformera en noir et blanc. C’est un peu comme le Film Transformers à la base c’est des Robots mais qui se transformes en voitures et vis-versa.

Avant de commencer notre tutoriel, voici une démonstration pour vous :

Démonstration

Image Couleur en Noir et Blanc

Transformer Une Image Couleur en Noir et Blanc

Avant de commencer notre tutoriel, créez un dossier « transformers » et ajoutez dedans les fichiers suivants : index.html / style.css et une image :

dossier et fichiers animation

Mettre en Place Notre Animation

Ouvrez le fichier index.html et collez ce code :

Le code qui nous intéresses est class= »transformation »

Ouvrez le fichier style.css et collez ce code dedans :

Explication de notre Code CSS :
Pour avoir les effets de transformation, en utilise les CSS Filter (Pour plus d’informations cliquez : ICI), pour résumer, c’est des propriétés utilisées pour donner des couleurs à une image et appliquer des effets comme Brightness, Contrast, Blur, Grayscale…etc et c’est ce qu’on utilise dans notre exemple.

On applique notre css d’une façon séparer, des paramètres pour l’image et autres pour notre Animation.

Blur = Brouillage et grayscale = Niveau de la couleur Grise
webkit-mask-box-image : C’est comme les Gradient de Photoshop (Les inclinaisons) sauf que c’est des paramètres en CSS.

Puis pour notre DIV, il faut ajouter le Niveau de la couleur Grise, pour être sûr que l’image sera noir et blanc :

.transformation:hover {
Ses paramètres c’est pour le passage de la Souris.

Voila, c’est plus facile en CSS qu’avec Photoshop :)

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire