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 comentaires
  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 RADIAUX EN CSS

Présentation des dégradés radiaux

Les dégradés radiaux sont des dégradés qui vont se propager à partir d’un point central et dans toutes les directions, à la différence des dégradés linéaires qui se propageaient à partir d’un point vers un autre selon une direction.

La création et l’utilisation des dégradés radiaux vont être très similaires à celles des dégradés linéaires, à la différence qu’on va cette fois-ci utiliser la propriété radial-gradient.

La propriété radial-gradient

La propriété radial-gradient va donc nous servir à créer des dégradés radiaux. On va une nouvelle fois l’utiliser de concert avec background.

Cette propriété va pouvoir prendre différentes valeurs qui vont nous permettre de contrôler l’aspect général de notre dégradé, comme la forme de notre dégradé, la taille du point central et du dégradé, et les couleurs composant le dégradé.

Concernant la forme du dégradé, tout d’abord, nous pouvons choisir entre deux valeurs : ellipse pour avoir un dégradé de forme elliptique ou circle pour avoir un cercle. La valeur par défaut est ellipse.

Pour tester ce nouveau type de dégradé, nous allons plutôt cette fois-ci créer un div dédié car, si on applique un dégradé radial à notre élément body, le rendu risque d'être très mauvais. Nous allons donc également donner une taille définie à ce div.

On crée un div pour tester radial-gradient

Création de notre premier dégradé radial en CSS

On a créé un dégradé radial circulaire

Essayer ce code

Nous venons donc tout simplement de créer notre premier dégradé radial de forme circulaire. Ce dégradé utilise trois couleurs : le bleu, le violet et le rouge.

Les transitions entre couleurs

Nous pouvons indiquer à quel moment changer de couleur en ajoutant des valeurs en pourcentage après chaque couleur, qui vont correspondre aux pourcentages totaux du dégradé auxquels doivent se faire les transitions entre couleurs. Notez que nous aurions pu faire de même avec les dégradés linéaires.

Ces pourcentages vont également de fait définir la « douceur » de la transition entre les couleurs utilisées dans nos dégradés.

Voyons un nouvel exemple avec un dégradé radial (à gauche) et un dégradé linéaire (à droite) afin d’être certain de bien comprendre.

Dégradés linéaire et radial

On crée deux dégradés : un linéaire et un radial

Nous avons pu définir à quel endroit changer de couleur dans nos dégradés

Essayer ce code

Définir la position et la taille d'un dégradé radial en CSS

On va tout d’abord pouvoir définir la position et la taille de notre dégradé en ajoutant une paire de coordonnées et un mot clef en premières valeurs de radial-gradient.

Les coordonnées vont pouvoir être données soit en pixels soit en pourcentages et vont correspondre à l’emplacement du centre du dégradé par rapport au coin supérieur gauche de l’élément qui le contient.

Concernant les mots clefs nous permettant de gérer la taille du dégradé, nous pouvons choisir entre :

  • closest-side : le dégradé va toucher le côté le plus proche de son centre (dans le cas d’un cercle) ou les deux côtés les plus proches de son centre (dans le cas d’une ellipse) ;
  • farthest-side : le dégradé va toucher le côté le plus éloigné de son centre (dans le cas d’un cercle) ou les deux côtés les plus éloignés de son centre (dans le cas d’une ellipse) ;
  • closest-corner : le dégradé va toucher le coin le plus proche de son centre ;
  • farthest-corner : le dégradé va toucher le coin le plus éloigné de son centre.

Voyons immédiatement quelques exemples ensemble :

Taille et position de nos dégradés radiaux

On utilise des valeurs et closest ou farthest-side pour définir la taille de nos dégradés

Nos dégradés ont bien des formes et des tailles différentes

Essayer ce code

Ici, notre premier dégradé « deg1 » possède un centre situé à 20% du bord gauche de son élément conteneur et à 40% de bord haut. De plus, on demande au dégradé de toucher le ou les côtés les plus proches de son centre avec le mot clef closest-side.

Remarquez bien la différence de syntaxe entre la propriété préfixée et l’écriture non-préfixée. Dans ce dernier cas, il faut ajouter un « at » et définir ensemble la position et la taille du dégradé.

On fait de même pour notre dégradé « deg2 » sauf que cette fois-ci on lui demande de toucher le ou les côtés les plus éloignés de son centre.

Dans les deux cas, on crée une démarcation assez nette entre le violet et le rouge à 90% de la taille du dégradé afin de bien observer les effets de notre positionnement et de nos mots clefs.

Chapitre précédent

Chapitre suivant