Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

Les CSS 3

Réaliser des coins arrondis

Arrondir les coins est sûrement l'un des effets graphiques les plus recherchés par les webdesigners. Pour cela, on a longtemps utilisé des images avec plus ou moins de bonheur et de facilité pour obtenir l'effet recherché.

Tous les navigateurs récents permettent à présent d'arrondir les coins de cadres, d'images, de tableaux etc. avec une facilité déconcertante.

Créer des ombres sur les boites et du texte

Ombrer des boites ou du texte sans images c'est possible ! Plus besoin d'avoir recours à des logiciels photoshoppeurs pour faire et refaire, un peu de code CSS suffit.

Voici les explications, illustrées de quelques exemples, de réalisations d'ombres en CSS.

Images multiples dans un même background

La propriété background-image n'acceptait, en CSS 2.1, qu'une seule image. Pour pouvoir en mettre plusieurs à différents endroits d'une page, il fallait déclarer plusieurs div ayant chacun sa propre image de fond. Lourd...

Les CSS3 permettent des background multiples, et maintenant que même Internet Explorer (version 9) l'implémente, pourquoi s'en priver ?

Réaliser des fonds en dégradé sans image

Avant les CSS3, pour réaliser de jolis boutons ou tout autre fond de couleur en dégradé, il convenait de réaliser une image que l'on déclarait en image de fond à l'aide de background-image.

On peut maintenant s'en passer grâce à de nouvelles valeurs de background : linear-gradient et radial-gradient.

Déclarer une police de caractère non standard avec @font-face

Longtemps, longtemps, le webmestre s'est lamenté de ne pouvoir utiliser qu'un petit nombre de fontes pour ses sites web. Arial, Helvetica, times new roman... c'était d'un triste ! Ou alors il fallait faire des images. Et mettre du texte en image ce n'est tout de même pas très logique, sans compter les problèmes d'accessibilité qui peuvent en découler.

Grâce à @font-face on peut à présent utiliser des polices de caractère exotiques et laisser cours à son inventivité.

Animations et transitions d'images ou d'objets

L'ère des gifs animés est morte, celle de flash est en déclin. La faute à... ? Aux CSS3 et à HTML5 qui apportent leur floppée de nouveaux outils pour animer nos sites !

animation et transition permettent d'apporter du mouvement aux pages web en quelques lignes de code.

Les Media-Queries

Avec l'avènement des smartphones ou autre tablette, la mutiplication des tailles et des résolutions d'écran, il devient de plus en plus aléatoire de ne réaliser qu'une seule disposition graphique de sa page web... Comment en effet visualiser correctement sur un smartphone une page qui aurait été pensée pour une résolution minimale de 1900px ? (ce qui est très mal, d'ailleurs...)

Les Media-Queries, permettent de cibler différents cas et ainsi d'adapter la restitution de sa page html à différentes caractéristiques des terminaux.

Haut