Le blog Back To Mobile

Donner du style à ses pages grâce à CSS3

Publié le 19 février 2019 par Céline pour Back To Mobile, Développement

Illustration Donner du style à ses pages grâce à CSS3

Acronyme anglais de Cascading Style Sheets, qui signifie « feuilles de styles en cascade », CSS en est aujourd’hui à sa troisième version. Une simple évolution pour ce langage dit de description qui permet, comme son nom l’indique, de donner un style à un fichier HTML, qui, lui, fournit la structure de la page. Typographies, dimensions, couleurs, espacements ou encore « media queries », c'est-à-dire les ajustements à apporter en fonction des tailles de supports (ordinateur, tablette, téléphone). Tous ces paramètres dépendent de lui.

Considéré par beaucoup comme langage «simple», CSS3 s’avère être un art à lui tout seul, tant il est riche en possibilités. Si, contrairement à Back to Mobile, vous n’avez pas la chance d’avoir un designer, les images que vous introduirez dans votre site seront généralement brutes, c'est-à- dire sans aucun effet CSS3. Pour leur donner « vie », nous allons jouer avec des propriétés CSS3, leurs fonctions ainsi que des filtres. Pour voir le code et les résultats obtenus ça se passe ici https://codepen.io/Sallyndra/pen/ompmbe. Mais attention, la plupart des effets ne seront visibles qu’au survol de l’image.

Effet de zoom

Pour obtenir un effet de "zoom" sur l'image au survol de la souris, on utilise la propriété CSS3 « transform » qui comme son nom l’indique permet de transformer un élément, grâce à l’échelle « scale » en l’agrandissant ou le réduisant. Le principe est le même si on veut dézoomer.

Effet de rotation

L’effet de rotation, s’obtient toujours avec notre amie « transform » et sa propriété de rotation « rotate ». L’utilisateur peut déterminer l’angle et le sens de rotation. Ici nous avons opté pour -15 degrés, c'est-à-dire 15 degrés dans le sens antihoraire.

Effets combinés de dézoome et rotation

Maintenant le niveau au-dessus : la combinaison des effets. En effet, CSS3 permet de combiner les effets, comme dézoomer (réduire le zoom) et faire une rotation. On jouera donc à la fois sur scale et rotate.

Effet sepia

Pour donner un style ancien à vos images, n’hésitez pas à leur appliquer le filtre « sepia ». Comme les effets sur la forme, les filtres peuvent être paramétrés. Dans notre exemple le filtre sépia est à 100%. Pour les amateurs d’images noir et blanc, le filtre existe aussi.

Effet de flou

« Blur » ou flou en français, permet de cacher ou une image ou d’obliger un utilisateur à survoler une image pour la voir nette. Il peut être réglé pour être plus ou moins flou selon les besoins.

Effet opacité

CSS3 permet de rendre opaque ou d’éclaircir une image grâce à la propriété d’opacité « opacity ». Une image opaque a une opacity de 1, plus on s’approche de 0 plus elle s’éclaircira. Dans l’exemple l’opacité est à 0.5. Il est aussi possible de donner une couleur à l’opacité pour créer un filtre de style.

Efflet flash

Enfin, au survol de la souris, un flash flanc apparait sur l’image. Il s’agit en fait de jouer sur l’opacité de l’image avec « opacity » et un bon timing.

Ceci n’est qu’un bref aperçu des nombreuses possibilités de CSS3, qui, a n’en pas douter, à encore de longs et beaux jours devant lui.

Abonnez-vous


Vous avez un projet?

CONTACTEZ-NOUS


Back to the newsletter