Logo Les musées de la civilisation

MUSÉE DE LA
CIVILISATION

Slogan
  • MUSÉOMIX


    Venez réinventer la manière de visiter une exposition !
    Du 9 au 12 novembre 2014

CSS3 entre au musée!

CSS3 de A à Z... ou presque

A comme « arrière-plan »

Arrière-plans multiples

Superposition de plusieurs images de fond sur un même élément en déclarant chaque image l'une après l'autre en les séparant par une virgule. Les images déclarées en premier apparaissent au premier plan.

Positionnement des arrière-plans

La propriété background-clip permet de définir le point d'ancrage de l'arrière-plan à partir de la bordure (border-box), du padding (padding-box) ou du contenu (content-box) sans avoir à spécifier les distances en pixels ou em.

Taille des images d'arrière-plans

La propriété background-size permet de redimensionner l'image de fond. Elle accepte des valeurs en pixels ou em, en pourcentages mais également des valeurs prédéfinies. Ci-dessous, de gauche à droite, chaque image est redimensionnée selon les propriétés suivantes : auto, em, pourcentage, contain et cover.

B comme « bordures »

Les coins arrondis

La propriété border-radius permet d'arrondir les coins des boîtes. Dans l'exemple de gauche, la valeur est la même pour tous les coins. Dans l'exemple du centre, une valeur différente est appliquée à chacun des coins. Il est également possible de faire varier le rayon horizontal et vertical des ellipses afin d'obtenir des courbes plus ou moins allongées, comme dans l'exemple de gauche.

Les images de bordures

Il est désormais possible d'affecter des images aux bordures de boîtes en utilisant la propriété border-image. Il faut d'abord déclarer le border-width, puis, dans le border-image, spécifier l'url de l'image, les positions des lignes de découpe (vis-à-vis du bord haut, droit, bas puis gauche), et enfin, l'ajustement horizontal et vertical. Trois valeurs sont disponibles pour l'ajustement : stretch (l'image est étirée, comme dans l'exemple ci-dessous à gauche), repeat (l'image est répétée) et round (l'image est répétée, mais si un nombre entier de morceaux ne rentre pas dans la zone, le morceau est redimensionné, comme dans l'exemple de droite).

C comme « colonne »

Créer des colonnes

Avec CSS3, il est possible de créer plusieurs colonnes pour organiser le texte. Par exemple, la propriété column-count spécifie le nombre de colonnes, column-gap l'écart entre les colonnes et column-rule la largeur, le style et la couleur de la règle entre les colonnes.

Colonne 1 Colonne 1 Colonne 1 Colonne 1 Colonne 1 Colonne 1 Colonne 2 Colonne 2 Colonne 2 Colonne 2 Colonne 2 Colonne 2

C comme « couleur »

Couleurs en RGB décimal et HSL

L'avantage de déclarer les couleurs en RGB décimal (Red, Green, Blue) et en code HSL (Hue, Saturation, Lightness) est que l'on peut faire varier l'opacité en utilisant les propriétés rgba et hsla. L'opacité se code avec un décimal allant de 0 (entièrement transparent) à 1.0 (entièrement opaque).

ROUGE

D comme « dégradé »

Dégradé linéaire avec linear-gradient

Pour créer un dégradé linéaire il faut d'abord déclarer au moins deux couleurs d'arrêt. La propriété linear-gradient créera une transition entre les deux. Le dégradé horizontal du haut vers le bas s'applique par défaut, mais il est possible de l'appliquer verticalement, en diagonale ou avec un angle particulier.

Dégradé radial avec radial-gradient

Pour créer un dégradé radial il faut également déclarer au moins deux couleurs d'arrêt. La propriété gradial-gradient permet de spécifier le centre, la forme (cercle ou ellipse) et la taille du dégradé. Par défaut, le dégradé est centré, la forme est elliptique et la taille est définie en fonction du coin le plus éloigné.

F comme « @font-face »

Utilisation des « Google Fonts »

On peut importer des nouvelles polices de caractères via @font-face, ce qui permet d'utiliser les "Google Fonts". Les instructions pour utiliser Google Fonts sont disponibles en ligne.

Ce texte est écrit avec la police Tangerine. La police est importée en temps réel depuis le site Google Font.

Ce texte est également écrit avec la police Tangerine. Mais celle-ci a été téléchargée et est utilisée localement.

Ce texte est écrit avec la police CaviarDreams. Celle-ci a été également téléchargée et est utilisée localement.

K comme « keyframes »

Animation sans Javascript

La propriété CSS3 keyframe permet de préciser la valeur de certaines propriétés d'éléments au fur et à mesure de l'animation, comme ci-dessous par exemple où l'image se balade de gauche à droite. Le mouvement ne dure que 2 secondes, mais l'animation boucle de manière infinie en alternant le sens de l'animation ce qui permet un aller-retour sans fin.

M comme « media queries »

Adapter l'application Web à un support spécifique

W3C propose l'utilisation de Media Queries pour modifier le style selon le format du support. Il s'agit de déclarer des conditions afin d'appliquer une portion de styles à un type de média (écran, tv, impression, etc.), à la taille d'écran, mais également à l'orientation, au ratio et bien d'autres. Si par exemple cette page Web est affichée sur une tablette dont l'orientation est portrait, le carré rouge ci-dessous devient blanc.

O comme « ombre »

Ombres portées sur les boîtes

La propriété box-shadow prend jusqu'à 6 paramètres. Les deux premiers indiquent le décalage horizontal et vertical, le troisième correspond à l'intensité du flou, le quatrième permet d'agrandir ou de diminuer la taille de l'ombre, le cinquième définit la couleur et enfin, le sixième paramètre permet de définir le position interne de l'ombre (inset).

box-shadow
box-shadow inset

Ombres portées sur le texte

La propriété text-shadow est limité aux ombres externes, mais on peut les superposer. Comme pour les boîtes, on peut définir un décalage horizontal et vertical, l'agrandissement de la zone et de la couleur.

text-shadow

P comme « perspective »

Effet 3D

La propriété perspective permet de changer le point de vue sur un élément 3D. Lors de la définition de la propriété en perspective d'un élément, ce sont les éléments enfants qui obtiennent la vue en perspective, pas l'élément lui-même.

R comme « reflet »

Effet miroir

La propriété box-reflect permet de déclarer dans quelle diretion apparaît le reflet et à quelle distance. On peut également ajouter l'url d'une image ou un gradient qui permet de faire un masque, pour produire un effet de flou par exemple.

css3 logo css3 logo

T comme « transformation »

Déformer les éléments

Effets de base : translate permet de déplacer un élément; rotate permet de faire une rotation sur un élément; scale permet d'agrandir ou de rétrécir un élément; skew permet de pencher ou obliquer un élément.

translate
rotate
scale
skew

T comme « transition »

Modifier un élément avec une transition

La propriété transition permet de définir sur quelles propriétés on doit détecter un changement, le temps de la transition ainsi que la répartition dans le temps de cette transition (par défaut linéaire). Dans l'exemple ci-dessous, le survol de la souris sur la boîte active la transition de l'élément.

Placez votre pointeur ici pour activer la transition.
Retirez votre pointeur pour retourner au début.

W comme « word »

Propriété text-overflow: ellipsis

Voici un lien très long http://www.jesuisvraimentunelongueadresse.com mais la propriété text-overflow: ellipsis; coupe le lien trop long dans la boîte et ajoute trois petits points pour inviter l'utilisateur à cliquer et avoir ainsi accès à le suite du texte.