CSS

En vous servant du cours, de la cheat sheet CSS, et de la documentation, MDN, effectuez les opérations suivantes.

Le cadre

  1. Créez un nouveau composant Web contenant le nom, prénom et rôle d'un utilisateur.
  2. Dans ce composant Web ajoutez un fichier :
  3. Ajoutez-lui une bordure (border) de , avec le style et de couleur .
  4. Ajoutez lui des coins arrondis avec .
  5. Ajoutez pour cacher les éléments qui dépassent.
  6. Forcez un affichage en 4/3 avec .
  7. Donnez lui une marge interne (padding) de .

Événements utilisateurs

  1. Lorsque le curseur (cursor) passe dessus, il doit indiquer que l'élément est clickable (pointer) ;
  2. Empêchez la sélection des textes avec .
Vous indiquerez les règles suivantes via des règles imbriquées (nested rules), i.e. dans :
est une pseudo-classe (pseudo-class) servant à indiquer des règles CSS à appliquer lorsque l'élément est survolé par la souris.
  1. Au survol, l'élément doit devenir opaque (opacity) à .
  2. Utilisez pour animer cette transition, testez.
  3. Au survol, ajoutez un contour (outline) de jaune.
  4. Créez l'animation avec qui commence à avec et se termine à avec
  5. Au survol, ajoutez une animation bidirectionelle infinie via .
Nous allons afficher un petit tooltip personnalisé au survol de l'élément en ajoutant des règles CSS au pseudo-élément (pseudo-element) :
  1. le contenu sera .
  2. donnez lui un fond noir et une couleur blanche, ainsi qu'une border d'un pixel blanc.

Style du texte

est équivalente au sélecteur parent, i.e. est équivalent à .
  1. Via CSS, mettez le nom en majuscule (uppercase) et le prénom capitalisé (capitalize).
  2. Mettez le nom en gras (bold), et le prénom en italique (italic).
  3. Le nom et le prénom auront une taille de police (font size) de .
  4. Le nom et prénom seront sur la même ligne sans retour à la ligne ().
  5. Si le nom/prénom dépasse de la ligne (), on utilisera une ellipse ().

Positionnement

  1. Ajoutez un composant Web contenant une dizaine de .
  2. sera affichée (display) en mode .
  3. affiche les éléments en colonnes (column) et autorise les retours à la ligne (wrap).
  4. Les éléments seront séparés par un écart (gap) de .
  5. sera positionné en mode .
  6. le rôle sera positionné de manière absolue (absolute) à du haut (top) et de la droite (right).
Bonus: afficher en mode grille au lieu de flex et/ou jouer avec les .

Responsive

Redimensionnez la fenêtre du navigateur pour voir comment le site se comporte (+ outils navigateurs).
  1. Créez un nouveau conteneur (container) nommé de type dans .
  2. Si le conteneur a une largeur inférieure à (i.e. ), ne pas afficher le prénom ().

Bonus : color scheme