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;
}Une astuce pour faire sortir un contenu de son parent sans changer son positionnement.
.full-bleed {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}Styliser les checkbox et radio buttons.
Incroyable cette histoire !
Il est impossible de changer en CSS la taille d'un lien "visité" (via la pseudo-classe :visited) parce que ça permettrait ensuite à un site mal intentionné de connaître votre historique de navigation en testant la taille de plusieurs liens (et plutôt des liens gênants, forcément :P). Et du coup on pourrait penser que le site en question peut aussi vérifier la couleur pour déterminer les sites visités grâce à window.getComputedStyle(). Eh bien non, parce que cette fonction ment dans ce cas bien précis ! Elle renvoie la couleur normale d'un lien.
Fascinant :)
Une introduction à Animate.css.
Où apprendre le HTML et le CSS en 2019.
Une cheatsheet pour les sélecteurs CSS.
Une cheat-sheet pour grid.
Quelques conseils CSS pour les textes de vos sites web.
Une très bonne technique pour gérer plusieurs sites avec un unique CSS. Et apparemment c'est plutôt scalable.
Faire des diapositives en HTML sans framework, juste avec du CSS.
Quelques explications sur le nouveau positionnement sticky en CSS.
Un petit questionnaire pour tester vos connaissances en CSS.
J'avais parlé de cette propriété il y a un peu plus d'un an. Elle permet de déterminer comment le navigateur doit charger les polices et quoi afficher pendant le chargement.