La bonne façon de styliser les boutons.
Une petite librairie Javascript + CSS pour afficher une barre de chargement tout en haut de la page un peu à la manière de ce que font Github ou Youtube.
Le support n'est pas encore très bon mais les pseudo-sélecteurs :focus-within et :focus-visible ont l'air intéressants.
Des loaders CSS qui dépotent.
Une courte introduction aux variables CSS.
L'effet parallaxe en 6 lignes de JS avec des variables CSS.
Un générateur de gradient CSS. Très très bien fait !
Via https://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-37
Un bookmarklet CSS qui met en exergue tous les soucis d'accessibilité de votre site.
Quelques snippets CSS.
Le CSS n'est peut-être pas aussi inoffensif que vous le pensiez.
Des effets hover très stylés grâce aux variables CSS et un peu de Javascript (pour récupérer la position de la souris).
Un fork de Font Awesome par des gens qui ne sont pas totalement en accord avec la direction prise par ce dernier dans sa version 5.
Attention quand vous faites une modale centrée horizontalement et verticalement avec Flexbox. Si le contenu de la modale est plus grand que le container, le centrage va tronquer le contenu.
L'astuce est d'appliquer ce CSS sur les flex items :
.your-flex-items {
margin-top: auto;
margin-bottom: auto;
}En principe, un simple margin: auto devrait fonctionner mais ça a causé des bugs avec IE chez moi. D'ailleurs pour que ça fonctionne correctement avec IE (voir les commentaires en dessous du post), il faut appliquer align-items: flex-start au lieu de center sur le container.
Quelques outils:
Les Media Queries ne sont plus la seule solution pour rendre un site responsive. Flexbox et Grid intègrent déjà pas mal d'options dans ce sens.
Jelly with HTML/JS/CSS.
Très impressionnant !
Bootstrap 4 est sorti ! Flexbox y est maintenant utilisé intensément et c'est une excellente chose.
Bon ça n'en reste pas moins une dépendance assez "massive" donc pensez toujours à évaluer si vous en avez réellement besoin. Si vous cherchez juste une lib de Grid CSS, utilisez Gridlex.