Partager sur...
Styliser vos images avec CSS3
Tout d’abord, si vous avez déjà utilisé les nouvelles propriétés CSS3 « box-radius » et « box-shadow », vous vous êtes peut-être rendu compte que ces effets ne donnaient pas un résultat optimal si le style était appliqué directement sur l’image. Nous allons voir aujourd’hui comment arranger ce problème simplement et comment aller un peu plus loin grâce à la magie du CSS3.
Arrondis sur les images en CSS3 : La mauvaise méthode
Tout d’abord voyons la méthode à ne pas suivre (enfin vous pouvez la suivre mais le résultat ne sera pas super visuellement). Il s’agit de mettre le « border-radius » directement sur l’image. En effet cette méthode vous donnera le résultat suivant (Les coins de l’image ne sont pas arrondis).
img.badExemple{ border: 7px solid #9A1D0D; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } |
Arrondis sur les images en CSS3 : bonne méthode
Voyons maintenant la bonne méthode. Il s’agit de mettre un div à la place de vos images avec la même taille que celle ci et d’y appliquer le « border-radius« , tout en mettant l’image voulu en background. Ainsi on arrive à un rendu tel que celui-ci :
div.goodExemple{ width:200px; height:200px; border: 7px solid #9A1D0D; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } |
Rendre vos images circulaires en CSS3
Maintenant, voyons comment rendre vos images totalement circulaires grâce à CSS3. Pour ceci, il suffit d’utiliser la même méthode avec « border-radius » mais d’augmenter le radius jusqu’au millieu de chaque coté de l’image. Ainsi, vous pouvez utiliser la valeur « 50em« . Ceci vous donnera le resultat suivant (j’ai enlevé la bordure rouge ici).
div.cercle{ width:200px; height:200px; webkit-border-radius:50em; moz-border-radius:50em; border-radius:50em; } |
Donner une épaisseur à vos images en CSS3
Voilà un petit tips pour donner une sorte d’épaisseur à vos images, afin de rendre ça un peu « 3D ». Ici on utilise la propriété CSS3 qui permet de créer des ombres (de loin ma préférée): « box-shadow« . Nous allons donc mettre ici une ombre interne avec un très faible « Smooth » en CSS3 à notre div contenant l’image voulu. Cet effet donne à notre image un effet « Carte » : 
div.carte{ width:200px; height:200px; -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } |
Effet « Biseauté » sur vos images en CSS3: Encore plus de relief!
Ici nous allons aller un peu plus loin dans l’effet « 3D » avec un effet « biseauté ». Il suffit pour ça d’emplifier l’ombre interne du bas de l’image. Ici nous mettons une largeur de 9px et une opacité de 0.3
div.biseau{ width:200px; height:200px; -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } |
On rajoute un peu de « Smooth » à nos effets
On peut aussi rajouter un peu de légèreté à nos effets. Prenons ici l’exemple précédent du biseau avec lequel nous allons jouer sur la diffusion de l’ombre interne. Pour ceci il suffit de jouer sur la troisième valeur de notre inset du « box-shadow« . Ici nous le mettons à 2px.
div.biseauSmooth{ width:200px; height:200px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3); -moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3); box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } |
Un effet « Découpé » avec CSS3
Encore une effet intéressant à placer sur vos images grâce à CSS3: l’ombre interne sur tous les cotés. Ceci permet de donner l’illusion que l’image est incrustée dans la page
div.decoupe{ width:200px; height:200px; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } |
Animations CSS3 et effet Glow
Voyons maintenant l’animation CSS3 et encore un effet assez sympa pour vos images: l’effet Glow. L’animation en css est toute nouvelle, mais très pratique. Nous allons placer ici l’animation à l’évènement Hover, pour ceci la balise est « transition », placée ici à 1s. Pour le glow, c’est simplement encore une ombre interne… mais blanche 
(Pour la démo sur la page démo, passez votre curseur sur l’image)
div.animation-lueur{ width:200px; height:200px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .animation-lueur:hover { -webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-border-radius: 60em; -moz-border-radius: 60em; border-radius: 60em; } |
Effet Glossy en CSS3: à fond dans le design 2.0
Ce type d’effet est assez à la mode en ce moment, mais saviez vous que il n’est pas indispensable de passer par photoshop pour rendre un tel effet. Pour ceci nous allons utiliser la pseudo-class « :after » qui vas nous permettre de créer un faux élément html juste après l’élément ciblé afin d’y appliquer son propre style css. Pour ce nouvelle élément nous allons y appliquer un dégradé blanc/transparent et le mettre en position absolu (n’oubliez pas de mettre votre div contenant l’image en position relative)
div.glossy{ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position:relative; } div.glossy:after { position: absolute; content: ' '; width: 100%; height: 50%; top: 0; left: 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1))); background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%); } |
Réflection en CSS3: encore un effet 2.0
Encore un effet digne du web 2.0 (personnellement je n’aime pas trop). Ici même méthode que précédemment, sauf qu’ici le degrade est placé en dessous de l’image et est plutôt dans les tons foncé. La logique est simple à comprendre si vous avez suivit l’exemple précédent.
div.glossy{ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position:relative; } div.glossy:after { position: absolute; content: ' '; width: 100%; height: 50%; top: 0; left: 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1))); background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%); } |
Rotation + transition : Tournez les serviettes!
Maintenant voyons les rotations sur lesquelles j’ai aussi mis une animation au hover comme précement. Pour la rotation: utilisez la commande « transform:rotate(10deg);« . Mettez le dégrès de rotation entre les parenthèses.
div.rotation { -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -moz-transform:rotate(10deg); transform:rotate(10deg); -webkit-transform:rotate(10deg); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; width:200px; height:200px; margin:10px; display: inline-block; } div.rotation:hover { -moz-transform:rotate(100deg); transform:rotate(100deg); -webkit-transform:rotate(100deg); } |
Effet « stoché »
Pour finir, un petit effet que j’aime bien. En voyons le résultat on a du mal à se dire qu’il y a seulement une image et quelques lignes de CSS3? Je vous laisse découvrir le code, il met en application les propriétés CCS3 découverte précedement.
.scotch { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position:relative; } .scotch:after { position: absolute; content: ' '; width: 60px; height: 25px; top: -10px; left: 50%; margin-left: -30px; border: solid 1px rgba(137,130,48,.2); -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); transform:rotate(10deg); background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6))); background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2); } |
En conclusion
Pour conclure, le CSS3 est vraiment assez puissant en ce qui concerne la stylisation des images… Mais pas que! La seule limite c’est votre imagination (et les navigateurs compatibles ^^ ). Le CSS3 permet vraiment de vous faire économiser du temps sur photoshop, surtout à vous, pauvres devs, qui ne savez pas comment utiliser photoshop.
N’hésitez pas à commentez, pour la moindre remarque ou simplement si ceci vous a aidé
AMUSEZ VOUS!
