Présentation - Valentin Brosseau

En CSS

Comprendre les boîtes = comprendre la mise en page.

Un inline ne peut pas contenir un block.

(Et text-align ne fonctionne que sur les blocks)

margin & padding

.carte {
  width: 350px;   /* ou 50% */
  height: 200px;  /* rarement nécessaire */
}

margin: 10px 20px 10px 20px;

haut, droite, bas, gauche

.contenu {
  width: 600px;
  margin: auto; /* 🎉 */
}

Une largeur + des marges automatiques.

.contenu {
  width: 60%;
  min-width: 400px;
  max-width: 900px;
}

Le meilleur des deux mondes (retenez-les pour le responsive !)

Border et Shadow

.carte {
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.carte:hover {
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4);
}

.carte {
  transition: all 0.3s;
}

Le changement devient une animation douce.

Le doigt n'est détecté qu'au contact.

Le :hover = un bonus, jamais une information essentielle.

Place au TP 🚀