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

LES OMBRES DES BOITES

La propriété box-shadow

Nous allons pouvoir créer des ombres autour de nos boîtes (à l’extérieur ou à l’intérieur des bordures) grâce à la propriété CSS box-shadow.

Tout comme la propriété text-shadow, box-shadow va prendre quatre valeurs différentes dans l’ordre suivant :

  1. Le déplacement horizontal (vers la droite ou la gauche) de l’ombre ;
  2. Le déplacement vertical (vers le bas ou le haut) de l’ombre ;
  3. Le rayon de propagation de l’ombre ;
  4. La couleur de l’ombre.

Notez que l’on va également pouvoir créer des ombres intérieures (à l’intérieur des bordures d’un élément) en rajoutant une cinquième valeur à box—shadow : la valeur « inset ».

Voyons immédiatement quelques exemples d’utilisation de box-shadow.

On crée une page HTML pour tester la propriété CSS box-shadow

On utilise la propriété box-shadow

Nous avons créé des ombres autour de nos boîtes grâce à la propriété CSS box-shadow

Essayer ce code

Nous commençons par créer une ombre de couleur orange autour de notre élément div. Nous appliquons une projection de 3 pixels vers la droite et 3 pixels vers le bas pour cette première ombre, ainsi qu’un rayon de propagation de 9 pixels.

Pour l’ombre autour de notre premier paragraphe, nous avons cette fois-ci indiqué des déplacements horizontal et vertical négatifs, ce qui a pour effet de projeter notre ombre en haut à gauche plutôt qu’en bas à droite.

Enfin, nous utilisons la valeur inset pour l’ombre de notre second paragraphe afin de créer une ombre intérieure plutôt qu’extérieure.

Chapitre précédent

Chapitre suivant