Tes outils CSS
Compose une couleur, vérifie que ton texte reste lisible, joue avec le modèle de boîte, puis pèse tes sélecteurs. Garde cette page ouverte à côté de ton éditeur !
Mélangeur de couleurs
Trois lumières, rouge, verte et bleue. Dose-les, et le mélangeur écrit ta couleur en hexadécimal et en rgb(). Ajoute tes trouvailles à ta palette : elle garde jusqu'à douze couleurs.
- hexadécimal
- #226347
- rgb()
- rgb(34, 99, 71)
Clique une pastille ou bouge un curseur : les deux écritures changent ensemble.
#226347 = rgb(34, 99, 71)Testeur de contraste
Est-ce que ton texte se lit bien sur son fond ? Le minimum : 4,5:1 pour un texte normal, 3:1 pour un grand texte.
Grand texte : un titre
Texte normal : lis-moi sans plisser les yeux.
- Réussi · Texte normal minimum 4,5:1
- Réussi · Grand texte minimum 3:1
Fonce ou éclaircis le texte : sa teinte ne bouge pas.
Contraste 14,6:1. Texte normal : réussi, Grand texte : réussi.Modèle de boîte
Chaque élément est une boîte : le contenu, puis le padding, la bordure et la marge. Bouge les curseurs et regarde la largeur occupée changer.
Ta boîte tient dans son parent.
Ta boîte tient dans son parent.- Largeur occupée à l'écran
- 20 + 4 + 16 + 160 + 16 + 4 + 20 = 240 px
border et height restent en px : une bordure en % n'existe pas en CSS, et un height en % ne marche que si le parent a une hauteur fixée.
.boite {
width: 160px;
height: 80px;
padding: 16px;
border: 4px solid;
margin: 20px;
}Poids des sélecteurs
Deux règles visent le même élément ? Tape leurs sélecteurs : le calculateur range chaque morceau dans sa colonne, id, classe, balise, et barre la règle qui perd, comme l'inspecteur.
| Sélecteur | id | classe | balise | Poids |
|---|---|---|---|---|
| 0 | 1 | 1 | 11 | |
| 0 | 1 | 0 | 10 |