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 TRANSITIONS EN CSS

Présentation des transitions

Les transitions vont nous permettre de modifier la valeur d'une propriété CSS de façon fluide, dans le temps, créant ainsi une transition entre les différentes valeurs de notre propriété. On va par exemple pouvoir changer progressivement la couleur de nos textes.

Avant de commencer, sachez que le CSS ne gère les transitions que depuis relativement peu de temps.

Ainsi, nous utiliserons les préfixes vendeurs afin de « forcer » la compatibilité de nos propriétés pour les anciennes versions des navigateurs. Notez également que Internet Explorer dans ses versions inférieures à 10 ne gère tout simplement pas du tout les transitions, que ce soit sans ou avec son préfixe vendeur.

La propriété CSS transition

Nous allons utiliser la propriété CSS transition pour créer des transitions en CSS.

La propriété CSS transition est une écriture short hand regroupant en fait quatre propriétés :

  • Transition-delay : indique quand doit commencer la transition ;
  • Transition-duration : indique la durée de la transition ;
  • Transition-property : définit la propriété à laquelle la transition doit s’appliquer ;
  • Transition-timing-function : définit la courbe de vitesse de notre transition.

Parmi ces quatre propriétés, seules les valeurs de transition-duration et transition-property vont être obligatoires à préciser pour utiliser la propriété transition.

Ces deux valeurs vont donc correspondre à la durée de la transition en secondes (« s ») ainis qu'au nom de la propriété CSS à laquelle on souhaite appliquer la transition.

Afin qu’une transition démarre, il va également falloir que la propriété ciblée connaisse un changement de valeur. Nous allons souvent changer la valeur d’une propriété lors d’un changement d’état de l’élément auquel elle est associée.

Ainsi, nous utiliserons souvent les transitions avec les pseudo classes et particulièrement avec :hover.

Création d’une transition simple en CSS

Nous allons effectuer un effet de transition sur la taille et la couleur de fond d’un div, lorsqu’un utilisateur va passer sa souris dessus.

Premier exemple des transitions CSS

On utilise la propriété transition

Notre div change progressivement de forme et de taille

Fin de notre transition

Essayer ce code

Comme vous pouvez le voir, on peut très bien spécifier plusieurs noms de propriétés et transitions dans notre propriété transition, en les séparant par une virgule.

Pensez bien une nouvelle fois à déclarer les préfixes vendeurs avant la version standardisée de la propriété en soi ainsi que les valeurs dans l'ordre que je vous propose (nom de la propriété avant la durée de la transition).

Ici, dès qu’un utilisateur passe sa souris sur notre div, celui-ci change progressivement de forme et de couleur en deux secondes.

Création d’une transition CSS en utilisant toutes les valeurs

Nous allons cette fois-ci également préciser les valeurs de transition-delay et de transition-timing-function.

La propriété transition-delay va spécifier le temps d’attente avant que la transition démarre. Cette propriété va donc prendre en valeur un nombre de secondes.

La propriété transition-timing-function va définir la courbe de vitesse de notre transition. On va pouvoir choisir parmi cinq valeurs simples :

  • Ease : La transition commence lentement puis accélère au milieu pour finir lentement
  • Ease-in : la transition commence lentement ;
  • Ease-out : la transition se termine lentement ;
  • Ease-in-out : la transition commence et se finit lentement ;
  • Linear : transition linéaire.

On crée une transition en CSS

Etat de notre div HTML avant que notre transition CSS ne commence

Etat de notre div HTML après la fin de la transition

Essayer ce code

Chapitre précédent

Chapitre suivant