Des gradients CSS assez cools :)
Une grosse liste de librairies pour gérer les animations CSS.
Le composant natif pour sélectionner une couleur est un vrai bordel à gérer. Très différent d'un navigateur à l'autre.
Comment customiser la scrollbar du navigateur. C'est encore un peu fouillis d'un navigateur à l'autre.
Le titre est trompeur puisqu'il faut en fait connaître Bootstrap 3. Mais l'article regroupe quelques unes des nouveautés de Bootstrap 4.
Les résultats d'un grand sondage sur le CSS et son utilisation par les développeurs.
Plein de choses à savoir sur les boutons ! (et non, on ne parle pas ici de la puberté).
Un tuto animé pour apprendre/comprendre Flexbox.
Un date picker accessible créé étape par étape.
tl;dr
Tentative de parcourir quelques sites bien connus sans CSS.
Des effets CSS très sympas et super simples à importer. Il y a des boutons, des input, des loaders et des liens.
Un moyen d'accomplir un layout à la Masonry avec uniquement du CSS (principalement Flexbox et :nth-child()). C'est très bien pensé malgré les quelques contraintes.
Le plus gros souci pour moi c'est que si un élément est beaucoup plus haut que les autres, les blocs ne s'adapteront pas pour autant et l'ordre de lecture s'en trouvera impacté. Mais pour une grande part des cas, c'est suffisant.
Quelles sont les nouvelles propriétés CSS à venir ?
Bon à savoir, vous ne pouvez pas utiliser clip-path et box-shadow sur le même élément. Si vous le faite, l'ombre n'apparaîtra pas.
Solution : utiliser un élément parent pour l'ombre ou alors un pseudo-élément (::before par exemple) correctement positionné.
Un peu déçu de moi-même :/
Il ne faut pas grand chose pour rendre un site de base un peu joli.
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #222;
max-width: 40rem;
padding: 2rem;
margin: auto;
background: #fafafa;
}
img {
max-width: 100%;
}
a {
color: #2ECC40;
}
h1, h2, strong {
color: #111;
}