CSS3 : Alléger ses images pour diminuer le poids de ses images.
L’objectif du CSS3 est d’éviter l’intégration d’images éditées avec Photoshop, permettant ainsi d’alléger le poids d’une page, ce qui a des conséquences directes avec le référencement on le sait.
C’est pourquoi la maîtrise du CSS3 a toute son importance et présente de nombreux avantages.
Je vois encore aujourd’hui beaucoup trop de textes intégrés sous forme d’images alors que la création d’une ombre peut être faite directement en css.
Si à l’époque il était nécessaire passer par la création d’une image, désormais, quelques lignes vous permettront de créer une ombre pour les images de votre site internet. Plus besoin donc de maîtriser Photoshop lorsqu’on est webmaster, mais en revanche, il est devenu nécessaire aux spécialistes de savoir créer en CSS3 au delà de la simple création graphique.
Boxshadow est la propriété qui permet de créer un effet d’ombre sur un objet. Pour cet exemple nous choisirons une image.
img { box-shadow: 8px 8px 0px #aaa; }
En posant ce code en propriété CSS de cette image, vous intégrer autour de l’image l’ombre voulu avec dans l’ordre:
- Le premier “8 px”, intègre la valeur horizontal de l’ombre.
- La deuxième intègre la valeur vertical
- Et la troisième détaille l’estampage pour estamper votre ombre. A 0px d’estampage comme dans l’exemple, l’ombre est net. entre 8 et 15 permet d’avoir un vrai effet d’ombre.
- Le dernier paramètre, vous l’aurez deviner permet de régler la couleur.
Cette propriété est du CSS3, ce qui implique que les anciens navigateurs ne peuvent pas le lire. Il faut au moins les dernières versions de début 2012.
