Grâce aux applications de retouche d'images pour mobile, comme Instagram, le phénomène de fausse rotation semble être à son comble. Mais pourquoi devrions-nous laisser les iPhones s'amuser? Décomposons un effet d'inclinaison en utilisant du CSS pur.
Dans ce tutoriel, nous apprendrons tout sur les nouveaux filtres CSS de Webkit et sur la mise en œuvre d'un masque d'image en CSS. Nous utiliserons ensuite ces techniques pour notre dernier effet d'inclinaison. Nous allons nous occuper de toutes sortes de choses folles, alors poursuivez votre lecture et amusez-vous.
Aperçu
Vous voulez voir ce que nous construisons? Sautez devant et regardez la démo, puis revenez et voyez comment le faire vous-même.
Démo: Cliquez ici pour lancer.
Rencontrez les filtres Webkit
Au cours des dernières années, CSS a lentement repris les domaines que nous utilisions auparavant pour Photoshop: dégradés, angles arrondis, ombres, etc. Webkit a récemment fait un grand pas en avant dans ce domaine avec l'introduction de CSS. filtres d'image.
Et si vous pouviez modifier la saturation, le contraste ou même le flou d'une image à l'aide de CSS pur? Les possibilités seraient géniales. Préparez-vous, car vous pouvez faire exactement cela avec une courte ligne de code.
Image de démarrage
Nous aurons besoin d’une image pour montrer toutes les techniques avec lesquelles nous allons jouer. J’ai donc saisi la photo aérienne ci-dessous prise à New York par le photographe Nathan Siemers.
Luminosité
La luminosité peut accepter un pourcentage (10%) ou une décimale (0,1). Zéro est égal à la luminosité normale, de sorte que 5% augmente la luminosité et -5% assombrit réellement l'image.
Brouiller
Le filtre de flou accepte une valeur de pixel similaire au flou sur une zone d'ombre. Plus la valeur de pixel est élevée, plus le flou est intense.
Contraste
Le contraste accepte une valeur en pourcentage. 100% est normal, tout ce qui se trouve au-dessus qui ajoute du contraste, tout ce qui se trouve en dessous diminue le contraste.
Niveaux de gris
Niveaux de gris vous permet de désaturer progressivement une image avec des pourcentages. 0% est en couleur, 100% en niveaux de gris. L'exemple ci-dessous montre notre image à 50%.
Teinte tourner
La rotation de la teinte vous permet de déplacer la teinte dans la métaphore d'une roue chromatique. Vous ajustez la rotation en degrés, zéro étant la valeur normale non ajustée.
Inverser
Fait exactement ce que cela ressemble, accepte un pourcentage de zéro (valeur par défaut) à 100%;
Sépia
Noir et blanc ne le fait pas pour vous? Ajoutez un peu d'âge avec le filtre Sépia. Zéro pour cent ne contient aucun effet, 100% correspond à la puissance maximale.
Prise en charge du navigateur
Actuellement, les filtres CSS3 ne sont pas très pris en charge. Selon CanIUse, ils devraient fonctionner dans Chrome, Safari 6, iOS Safari 6 et Blackberry Browser 10. Tous ces éléments nécessitent le? -Webkit? préfixe, mais pour le prouver, vous voudrez peut-être ajouter les autres:
Étape 1: Tilt Shift HTML
Maintenant que nous savons quels filtres CSS sont disponibles, nous pouvons commencer à construire notre démo tilt shift. Pour commencer, placez le code HTML suivant dans votre éditeur de code préféré:
Voyez-le en action
C'est tout ce qu'on peut en dire! Nous avons maintenant un joli petit effet de tilt shift pur CSS. Découvrez la version en direct dans la démo ci-dessous.
Démo: Cliquez ici pour lancer.
tiltShift.js
Des développeurs talentueux, Noel Tock et Adam Yanalunas, ont créé un plugin jQuery facile à utiliser, qui vous aide à utiliser les filtres CSS pour créer un effet de décalage incliné similaire. Téléchargez tiltShift.js et tentez votre chance.
Conclusion: pourquoi s'embêter?
Des tutoriels comme celui-ci soulèvent toujours une grande question: devrions-nous utiliser les propriétés Webkit uniquement dans les flux de travail de développement professionnel? La réponse est toujours la même: non. C'est une expérience, une manière amusante d'apprendre les possibilités pour l'avenir du CSS. Un jour, les filtres CSS pourraient être une fonctionnalité standard. Pour l'instant, ce n'est qu'une idée.
Ce qui est triste, c’est que tant de développeurs déduisent complètement de telles choses jusqu’à ce qu’ils atteignent un statut plus officiel. En tant que membre de la communauté de développement Web, vous devriez essayer de nouvelles fonctionnalités potentielles pour voir comment elles sont mises en œuvre et faire entendre votre opinion. Même si vous avez l’impression d’être une voix sans importance, rappelez-vous que votre opinion compte et que vous faites partie d’un ensemble plus vaste qui peut influer sur l’avenir du Web et le fait.
Sur cette note, que pensez-vous des filtres CSS? Laissez un commentaire ci-dessous et faites le moi savoir. Personnellement, je pense qu'ils sont géniaux et pourraient mener à beaucoup de projets sympas. Est-ce que tout cela devrait vraiment être fait avec CSS? À vous de me dire.