Il était une fois uniquement Photoshop pour créer des effets d’image sophistiqués. De nos jours, nous nous tournons de plus en plus vers du CSS pur pour ajouter du piquant à nos images. L'application de traitements d'image personnalisés à l'aide de code constitue un flux de travail extrêmement flexible et facile à modifier à tout moment.
Aujourd'hui, je vais vous expliquer comment créer des astuces d'image CSS extrêmement simples et amusantes. Des polaroïds aux vignettes, vous ne croirez pas ce que nous pouvons retirer.
Polaroïd
Démo: Cliquez ici pour voir la démo sur Tinkerbin.
Notre premier tour est une simple technique polaroid. En utilisant différentes tailles de bordures, nous pouvons facilement créer le cadre blanc qui entoure le style de photo instantanée populaire d’il ya quelques décennies.
Certes, cet effet est très ringard, mais je suis sûr que vous pouvez proposer une application décente.
HTML
Notre code HTML pour cet effet est une div avec la classe? Polaroid? appliqué. Ensuite, nous utiliserons un paragraphe et une image pour notre balisage principal. Je vais utiliser une image 200px par 200px (ce qui compte).
Le résultat devrait ressembler à deux bordures de 5 pixels, une noire et une blanche.
CSS
Maintenant que vous connaissez l'essentiel du fonctionnement des ombres, il est temps de mettre en œuvre notre CSS actuel. Le vrai problème, c’est que nous devons utiliser trois versions différentes, mais nous voulons absolument nous assurer que tous les navigateurs possibles sont couverts.
Vignette
Démo: Cliquez ici pour voir la démo sur Tinkerbin.
Cette fois, nous allons utiliser un type de boîte différent pour créer un effet très différent. En utilisant un? Inset? ombre, nous pouvons créer une belle vignette de type Photoshop sur une image en utilisant uniquement CSS. C'est un truc assez astucieux qui peut vraiment faire ressortir vos images.
HTML
Cette fois-ci, nous aurons besoin d'un div vide. Vous pouvez éventuellement placer du texte à l'intérieur, mais l'image devra être insérée via CSS. En effet, l'ombre insérée apparaîtra réellement sous le contenu inséré via HTML, ce qui signifie qu'une image le cacherait complètement.
CSS
Pour le CSS, nous devrons définir une image sur l'arrière-plan, puis définir une largeur et une hauteur pour le div. Une fois que vous avez configuré votre div, il est temps d'appliquer les ombres. Notez que la valeur d'insertion est implémentée et que les décalages vertical et horizontal sont définis sur 0.
Vous trouverez peut-être étrange que j'ai implémenté trois versions de la même ombre incrustée pour chaque navigateur. La raison pour laquelle j'ai fait cela, c'est simplement parce que je voulais une vignette très sombre et intense et qu'une ombre ne la coupait pas!
Grungy Photo
Démo: Cliquez ici pour voir la démo sur Tinkerbin.
Pour préparer cela, vous devez créer une superposition d’image d’arrière-plan grungy transparente. J'ai utilisé cette texture pour créer cette image. Le truc ici est de rendre la texture exactement de la même couleur que l’arrière-plan de la page sur laquelle vous allez la placer.
Fondamentalement, nous allons exploiter plusieurs arrière-plans pour appliquer une texture grunge réutilisable. Nous pourrions masquer l'image avec la texture, mais cela ne serait pas supporté en dehors de Webkit, c'est donc un moyen beaucoup plus convivial pour le navigateur.
HTML
Même exercice que la dernière fois, créez simplement une div vide à laquelle nous pouvons appliquer des images d’arrière-plan.
CSS
Juste pour mélanger les choses, faisons en sorte que l'effet grunge n'apparaisse qu'en survol. Pour commencer, nous appliquons une image d’arrière-plan, dimensionnons la div et créons une légère vignette comme celle de la dernière fois. Il ne nous reste plus qu'à ajouter notre image de fond grunge en survol.
Les arrière-plans CSS multiples sont très faciles à utiliser. Comme avec les ombres précédentes, ajoutez-en simplement une seconde en utilisant une virgule pour séparer les deux. L'image grunge est la première depuis que nous la voulons en haut.
Conclusion
J'espère que vous avez apprécié ces quatre astuces sur les images CSS. Chacune d’entre elles ne devrait prendre qu’une minute, mais elles ajoutent toutes un style supplémentaire à des images ordinaires. Comme pour toute astuce de conception, veillez à les utiliser de manière sélective et à ne pas abuser de la mer!
Si vous avez vos propres effets d'image CSS, faites-le nous savoir dans les commentaires. De plus, toutes les démos ci-dessus sont en direct et modifiables. Veillez donc à les modifier et à laisser un lien vers votre version ci-dessous.