Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

CREER DES DEGRADES LINEAIRES EN CSS

Présentation des dégradés et préfixes vendeurs

Grâce au CSS, nous allons pouvoir créer des dégradés en fond de nos éléments HTML.

Il existe deux types de dégradés : les dégradés linéaires (de la gauche vers la droite par exemple) et les dégradés radiaux (à partir d’un point central).

Nous allons pour le moment nous concentrer sur les dégradés linéaires et étudierons les dégradés radiaux par la suite.

Pour créer un dégradé linéaire en CSS, nous allons utiliser la propriété linear-gradient.

Cependant, les dégradés sont une fonctionnalité assez récente proposée par le CSS, ce qui signifie que la compatibilité risque de ne pas être parfaite avec les navigateurs de certains de vos visiteurs.

Par exemple, la propriété linear-gradient n’est reconnue qu’à partir de la version 26 de Chrome, ou encore à partir de Safari 6.1.

Certes il est rare, au jour d’aujourd’hui, de posséder une version de navigateur vieille de 3 ans étant donné que les mises à jour sont désormais quasi-automatiques pour tous les navigateurs, mais cela peut arriver.

Afin d’être parfaitement exhaustif, je dois donc vous présenter les préfixes vendeurs.

Les préfixes vendeurs sont des mots clefs qui ont été créés afin d’optimiser artificiellement la compatibilité de certaines propriétés CSS avec certaines versions de navigateurs.

Les préfixes, comme leur nom l’indique, vont devoir être précisés avant l’emploi de la propriété « qui peut poser problème ».

Quasiment chaque navigateur possède son préfixe vendeur. Voici la liste des principaux :

  • -webkit- pour Safari et Chrome ;
  • -moz- pour Mozilla Firefox ;
  • -ms- pour Internet Explorer ;
  • -o- pour Opéra.

Nous allons donc utiliser ces préfixes avec la propriété linear-gradient afin que celle-ci fonctionne normalement avec les anciennes versions des navigateurs cités ci-dessus.

Ensuite, le navigateur de vos visiteurs « choisira » lui même quelle « version » de la propriété utiliser.

Une petite exception cependant : nous n’aurons pas à utiliser le préfixe d’Internet Explorer pour cette propriété tout simplement car Internet Explorer, dans ses versions inférieures à 10, ne la reconnaît pas du tout.

La propriété CSS linear-gradient

On va donc utiliser la propriété CSS linear-gradient avec des préfixes vendeurs pour créer des dégradés linéaires.

Cette propriété va prendre en valeurs obligatoires la direction du dégradé puis le nom des couleurs composant le dégradé.

La propriété linear-gradient est un peu spéciale car elle va devoir elle même être utilisée à l’intérieur de la propriété background (en réalité, linear-gradient n'est pas tout à fait une propriété CSS mais on va la considérer en tant que telle).

Vous pouvez ajouter autant de couleur que vous le souhaitez et devez séparer chaque valeur par une virgule. Vous pouvez également utiliser tous les types de valeurs vus jusqu’à présent pour les couleurs (hexadécimal, RGB, nom de couleur, etc.).

Concernant la direction du dégradé, cela va se compliquer un peu. En effet, vous pouvez utiliser soit des mots clefs (« bottom left » par exemple), soit des angles.

Le problème étant que selon le préfixe vendeur utilisé, un même mot clef ou angle ne signifie pas la même chose.

Par exemple, la syntaxe commune (c’est-à-dire sans préfixe vendeur, pour les versions récentes des navigateurs) pour un dégradé vers la droite est « to right ».

Cependant, avec les préfixes vendeurs –moz- et –o-, la syntaxe sera simplement « right » tandis qu’avez –webkit- il faudra préciser… le contraire, c’est-à-dire « left ».

Vous pouvez retenir que le préfixe –webkit- utilise le « point de départ » du dégradé plutôt que la direction.

Pour les angles, en revanche, aucun problème : vous pouvez préciser le même angle (en « deg », pour degré) pour tous les préfixes et pour la propriété non préfixée.

Si vous omettez de préciser la direction du dégradé, celui-ci se fera par défaut du haut vers le bas.

Cela doit peut être vous sembler un peu obscur pour le moment, nous allons donc voir différents exemples ensemble.

Dans ce premier exemple, on créer un dégradé linéaire vers la droite en utilisant les couleurs rouge, orange et bleue :

On crée un dégradé linéaire avec linear-gradient

Première utilisation de linear-gradient

On a créé un dégradé utilisant trois couleurs et allant de gauche vers la droite

Essayer ce code

Comme vous le voyez, on utilise bien notre propriété linear-gradient à l’intérieur de la propriété background, comme « valeur » de la propriété background si vous préférez. Pour le moment, ne vous compliquez pas avec cela et acceptez le tout simplement.

Remarquez qu’on a dû réécrire la propriété background avec linear-gradient pour chaque préfixe utilisé et une dernière fois sans préfixe, afin que chaque navigateur puisse utiliser la version qui lui convient. Il faudra toujours préciser la version non préfixée de linear-gradient en dernier.

Notez également une nouvelle fois l’utilisation de mots clefs différents afin que tous les navigateurs comprennent bien la même direction pour notre dégradé.

Prenons un deuxième exemple en indiquant cette fois-ci une diagonale et des valeurs hexadécimales pour nos couleurs. Vous pouvez préciser une hauteur pour notre élément body, afin d'éviter que le dégradé ne se répète dans la page.

Deuxième utilisation de linear-gradient

Linear-gradient to bottom right

Essayer ce code

Ici, notre dégradé se déplace du coin supérieur gauche vers le coin inférieur droit.

On peut encore utiliser des angles comme direction de nos dégradés. A noter que 180deg est la valeur par défaut, c’est-à-dire que cela crée un dégradé du haut vers le bas.

La valeur 90deg va créer un dégradé de la gauche vers la droite, 270deg un dégradé de droite vers la gauche et 0deg un dégradé du bas vers le haut. Vous pouvez également utiliser des valeurs négatives pour vos angles.

Utilisation des angles pour créer un dégradé linéaire

On crée un dégradé linéaire en utilisant des angles

Essayer ce code

On peut finalement créer des dégradés linéaires transparents en utilisant des notations de type RGBa :

Création d’un dégradé linéaire transparent

On peut créer des dégradés transparents avec linear-gradient

Essayer ce code

Chapitre précédent

Chapitre suivant