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.
Le Reboot.css (.scss en l'occurence) de Bootstrap. Les explications sont ici: https://v4-alpha.getbootstrap.com/content/reboot/
J'aime bien l'idée d'essayer de se cantonner aux marges inférieures et de supprimer les marges supérieures, je pense que ça peut simplifier les choses et éviter quelques effets indésirables (et épargner un peu la touche F12).
Une autre analyse qui parle aussi des problèmes que présentaient les reset.css et autres normalize.css.
La version CSS est ici.
Un puissance 4 en pur CSS. Impressionnant :)
Styliser les champs d'un formulaire en fonction de leur état à l'aide des pseudo-classes.
Des plugins de post-processing CSS pour éviter les problèmes liés au chargement des webfonts (par exemple le texte qui est invisible tant que la font n'a pas été chargée).
L'idée est d'appliquer une classe à l’élément <html> via Javascript seulement une fois que la page est chargée. Et c'est cette classe qui déclenchera le téléchargement des webfonts. Le faire à la main nécessite pas mal d'organisation. Ces plugins rendent ça transparent.
Les Grid CSS et Flexbox très bien illustrés.