Cours CSS3 : Les effets de texte

Cours CSS3 : Les effets de texte

Dans des temps reculés, lors de l’apparition du HTML et des premiers navigateurs, l’esthétisme des pages était très limité. L’essentiel de l’information n’était pas destiné à un large public et on pouvait se contenter d’une mise en pages sommaire. Peu à peu, des balises ont été ajoutées, et certains éléments ont été détournés de leur usage initial par les webdesigners/intégrateurs pour obtenir un rendu plus complexe à l’écran.

Ainsi, les tables ont été mises à profit pour disposer du contenu en colonnes puis en grilles, on a vu naître des artifices tels que les images de séparation (nommées ) ou encore l’imbrication de multiples balises de présentation (par exemple ) aujourd’hui obsolètes.

Ce qui palliait un manque intrinsèque du HTML en capacités de contrôle graphique est devenu au fur et à mesure un cauchemar en termes de maintenance du code, de lisibilité et d’accessibilité du contenu. La sémantique n’était que peu considérée, et la « soupe de tags » au menu de nombreux sites.

C’est pourquoi les feuilles de style en cascade (Cascading Style Sheets) ont été adoptées par le W3C pour régir l’apparence des éléments HTML d’une page, concernant la disposition, les dimensions, les couleurs, afin de séparer le contenu et la forme.

Une feuille de style est applicable à une infinité de documents HTML, ce qui en facilite la maintenance et réduit les temps de chargement.

Figure 2–2

Une feuille CSS pour de multiples pages HTML

L’objet de ce chapitre n’est pas de dresser un inventaire exhaustif de toutes les techniques afférentes à CSS, mais de proposer une introduction et un petit aide-mémoire vis-à-vis de HTML 5 auquel les feuilles de style sont intimement liées.

RESSOURCES

R Goetter Raphaël, CSS 3, Pratique du design web, Eyrolles 2011

R Goetter Raphaël, CSS avancées, Eyrolles 2011

Les spécifications sont nombreuses et pour certaines encore en mouvement.

RESSOURCE   Spécifications CSS

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1)

Tableau récapitulatif des spécifications

B

Cascading Style Sheets (CSS)

B

Principe général

L’application d’une feuille de style CSS s’effectue lorsque celle-ci est liée au document par la balise , présente dans la section .

Plusieurs feuilles de style peuvent être chargées de la sorte pour un seul document. Il est aussi envisageable de déclarer directement des instructions CSS entre les balises

, situées également dans ou dans une portion du document, mais cette façon de faire ne facilite pas la maintenance ni la mise en cache.

Dans le fichier de la feuille de style, on retrouve une ou plusieurs déclarations CSS. Elles comprennent un sélecteur dont le rôle est de cibler les éléments concernés par chaque déclaration, suivi d’un bloc entre accolades regroupant les propriétés à appliquer.

p {

  text-align: center; font-weight: bold; color: orange;

} header img {   border: 3px solid gray; margin-bottom: 3em;

}

Dans cet exemple, trois propriétés sont appliquées aux éléments

(les paragraphes) et deux aux éléments situés dans

.

Sélecteurs

L’art d’écrire de bons sélecteurs est somme toute un grand jeu d’assemblage parmi les quelques briques de base existantes, pour s’adapter à la structure du document HTML qui doit être stylé. Si HTML et CSS sont issus du même auteur, alors il lui appartient de nommer les éléments en conséquence grâce à des classes, des identifiants ou des attributs pour les lier aux déclarations CSS, et ce en toute simplicité pour faciliter la lecture du code source ainsi que son analyse par le navigateur.

Tableau 2–1 Quelques sélecteurs

Les sélecteurs peuvent s’enchaîner, séparés par des espaces, pour combiner leurs effets.  nav ul>li { }

Ce sélecteur s’adresse aux éléments

• enfants directs de

, lui-même situé dans un quelconque

.

 #intro p.remarque { }

Ce sélecteur s’adresse aux éléments

de classe remarque, situés dans l’élément possédant l’identifiant intro.

Séparés par des virgules, les sélecteurs s’appliquent à une énumération de plusieurs familles d’éléments.

 nav ul>li, #intro p.remarque { }

Cette déclaration s’adresse aux éléments

• enfants directs de

, lui-même situé dans un quelconque

et indépendamment aux éléments

de classe remarque, situés dans l’élément possédant l’identifiant intro.

Propriétés

Les propriétés sont des paires de clés et valeurs. La clé est le nom de la propriété, suivie des deux-points, terminée par la valeur qui peut revêtir différentes formes : mots-clés, valeur numérique simple, valeur numérique avec unité, chaîne de texte, etc.

Les combinaisons offertes par les propriétés CSS, leurs valeurs et les techniques associées sortent du cadre de ce modeste chapitre qui pourrait à lui seul dépasser tous les autres en longueur. Pour en savoir plus, consultez les références proposées dans l’introduction.

Tableau 2–2 Quelques unités courantes

Unité	Description	Type d’unité
px	Pixels	Relative
%	Pourcentage (en général par rapport à l’élément parent)	Relative
em	Cadratin (relatif à la taille de la police)	Relative
ex	Hauteur de la lettre x	Relative
in	Pouces (= 2,54 cm)	Absolue
cm	Centimètres (= 10 mm)	Absolue
mm	Millimètre	Absolue
pt	Points (= 1/72 in)	Absolue
pc	Picas (= 12 pt)	Absolue

Les unités les plus pertinentes pour un affichage à l’écran restent px, %, et em.

Tableau 2–3 Texte

Tableau 2–3 Texte (suite)

Exemple

p {   font-weight: bold;   color: #005A9C; text-align: left; line-height: 150%; }

Tableau 2–4 Fonds

Exemple

div {

  background-image: url(); background-repeat: no-repeat;   background-size: 100% 100%; background-origin: content-box; }

RESSOURCE   Tutoriels CSS sur Alsacreations

Arrière-plans avec CSS 3 Backgrounds

B Tableau 2–5 Ombrages et transparence

Propriété	Rôle
text-shadow	Ombrage du texte
text-outline	Contour du texte
box-shadow	Ombrage d’un élément boîte
opacity	Opacité

Exemple

footer {   opacity: 0.5;

  text-shadow: 0px 0px 9px #777;

  box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px; }

RESSOURCE   Tutoriels CSS sur Alsacreations

Les ombrages en CSS 3

B

Tableau 2–6 Bordures

Exemple

.arrondi {

  border: 5px solid yellow;   border-radius: 20px;

}

:focus {

  outline: thick solid #fc0; }

Tableau 2–7 Positionnement et dimensionnement

Exemple

img.illustration {   float: right; margin-left: 2em; max-width: 50%;   rotation: 10deg; rotation-point: bottom left;

}

Tableau 2–8 Listes

Exemple

ul li {   list-style: disc; }

Tableau 2–9 Autres

Exemple

input[type=submit]   cursor: pointer; }

Tableau 2–10 Animations

Exemple

div {

  animation-name: 'diagonale';   animation-duration: 3s;   animation-iteration-count: 5;

}

@keyframes 'diagonale' {   from {     left: 0; top: 0;   }   to {     left: 150px;     top: 200px;

  }

}

Tableau 2–11 Transformations

Exemple

h1 {

  transform: rotate(8deg); }

Tableau 2–12 Transitions

Exemple

img.transition.couleur {   transition: transform .5s ease-in;

} img.transition.couleur:hover {   transform: rotate(10deg);

}

RESSOURCE   Tutoriels CSS sur Alsacreations

Transitions CSS 3

B

Une petite quantité de nouvelles propriétés CSS 3 ont été implémentées au fur et à mesure dans les moteurs de rendu, officiellement de manière expérimentale, avec des préfixes spécifiques. C’est par exemple le cas de border-radius qui existait initialement sous le nom de -moz-border-radius pour les navigateurs Gecko (Mozilla), -webkit-border-radius pour les navigateurs WebKit (Chrome, Safari). Opera a quant à lui choisi de l’intégrer directement, mais utilise le préfixe -o- pour ses propres expérimentations. Une fois tous les tests concluants, la propriété adopte son nom définitif, sans préfixe.

RESSOURCE   Tutoriels CSS sur Alsacreations

Les préfixes vendeurs en CSS

B

Pseudo-classes et pseudo-éléments

Les pseudo-classes et pseudo-éléments affinent les capacités des sélecteurs. Ils s’écrivent à la suite du sélecteur initial, concaténés par un signe deux-points « : ».

Tableau 2–13 Quelques pseudo-classes et pseudo-éléments

Pseudo-*	Rôle
:link	Lien
:visited	Lien visité
:hover	Élément survolé
:active	Élément actif
:focus	Élément ayant le focus
:first-child	Premier enfant
:last-child	Dernier enfant
:nth-child(n)	n-ième enfant
:nth-last-of-child(n)	n-ième dernier enfant
:nth-of-type(n)	n-ième type d’élément
:nth-last-of-type(n)	n-ième dernier type d’élément
:first-of-type	Premier type d’élément

Tableau 2–13 Quelques pseudo-classes et pseudo-éléments (suite)

Exemple

a:hover {

  text-decoration:underline;

} p::first-letter {   font-size: 2em;

}

Règles @

Les « règles @ » sont des instructions plus évoluées pouvant se retrouver dans les feuilles de style pour moduler leur comportement ou ajouter des informations qui ne pourraient trouver leur place dans des déclarations classiques.

Tableau 2–14 Quelques règles @

Exemple

@import "";

@import url("") print;

@page { size: 15cm 20cm; margin: 2cm; marks: cross;

}

@font-face {   font-family: maPolice;   src: url();   font-weight: bold;

} p {

  font-family: maPolice; }

@media print {   body {     font-size: 2em; background: white;

  }   nav {

    display: none;

  }

}

Media queries

Les media queries (ou requêtes de média) sont une fonctionnalité bien utile de CSS pour adapter le design et la présentation générale d’une page web selon le périphérique de consultation. Depuis la navigation sur mobiles jusqu’aux plages braille, la présentation est ajustée selon les capacités de rendu, par exemple en modifiant la taille du texte ou son agencement.

La syntaxe d’une media query est une suite de conditions à satisfaire. Au besoin, le navigateur évaluera l’expression et chargera les styles y correspondant ou les rechargera dynamiquement s’il y a lieu.

Exemple de media query

@media screen and (min-width: 200px) and (max-width: 640px) {   section {     display: block;     clear: both;     margin: 0;

  }

}

Ici, l’on s’adresse à un écran (screen) dont la résolution en largeur est comprise entre 200 et 640 pixels. Si le navigateur se retrouve dans cette condition, les éléments de type

passeront tous en mode bloc, sans aucune marge, pour une meilleure disposition verticale sur un petit écran.

Pour découvrir la magie des media queries, consultez l’article en ligne rédigé par votre auteur dévoué.

RESSOURCE   Tutoriels CSS sur Alsacreations

Les Media Queries CSS 3

B