Few years ago I made a simple tutorial to explain how to build a dark mode theme switcher in CSS . Today I want to update it and show you how to do it in SCSS and how to use the default system theme. Update 23/12/2023: After many researches I updated this tutorial to use only pure CSS (and SCSS) to do the switch between the themes.

Les dark theme ou thèmes sombres sont un bon moyen d’améliorer l’expérience utilisateur en lui proposant une interface alternative pouvant à la fois améliorer sa lecture du site et diminuer la consommation électrique de son appareil (notamment sur les écrans OLED). Dans ce tutoriel je vais vous apprendre une méthode basique pour créer un thème sombre et l’activer en fonction de l’heure de la journée.

Récemment je me suis penché sur un moyen d’augmenter mon efficacité pour coder mes feuilles de style en CSS. Très vite, le mot SASS m’est revenu comme un OVNI capable d’optimiser le CSS. Mais débuter sur ce qu’on appelle le SASS n’est pas aussi évident, c’est pourquoi je me suis tourné vers ouvrage écrit par Dan Cederholm pour me guider.

Je vous ai parlé dans un précédent post de la sortie de la beta du nouveau Bolt à l’issue du Boltcamp. La version “Bolt Camp” est téléchargeable sur la page des distributions de Bolt. Je vais donc vous parler un peu plus du nouveau design de l’administration. Comme vous pouvez le voir ci-dessus, celle-ci a été rafraichie, beaucoup plus tendance.

Dans un précédent article, je vous expliquez mon choix du cms Bolt. Je vais donc vous proposer une série de tutoriel pour l’utiliser. Cette installation se fera de la manière la plus courante, par FTP. 1 - Tout d’abord, vous devez vous munir d’un logiciel client FTP tel que Filezilla .

Oui, vous avez bien lu ! Il est possible de faire des textes en 3D en css ! Comme vous le savez surement la 3D anaglyphe a pour but de forcer votre oeil à voir en relief en séparant 2 couleurs, généralement le rouge et le bleu. Comment ça marche ?

Je vous propose de découvrir le travail de Skyler Knight . Au programme 3 superbes rubans animés en css qui seront du plus bel effet sur votre site. Je vous laisse découvrir ce travail par vous même. Voilà j’espère que vous apréciez cette création et je vous conseille de faire un tour sur les autres créations de cet artiste.

Vous cherchez des templates responsive, customisable et libre de droit ? Et bien rendez vous sur HTML5 UP et découvrez ces merveilleux thèmes, pour tous les goûts ! Il ne vous reste plus qu’à télécharger et profiter de cette template. Vous trouverez aussi de nombreuses autres ressources sur Flypixel (par le même créateur).

J’étais parti pour vous apprendre à faire un bouton qui disparaissait au survol de la souris, puis, je me suis dit que c’était vraiment inutile. C’est pourquoi je vous propose donc de faire un bouton qui va se modifier quand on passera la souris dessus. Ce tutoriel me permet de vous apprendre la fonction “:hover”

Une galerie… Chic pour mettre ses photos en valeur ! Faire une galerie de A à Z est un peu complexe, c’est pourquoi je vous propose d’utiliser un script pour la réaliser. Ce script se nomme Least.js et est sans doute l’un des plus joli et complet pour faire une galerie responsive.

Concurrent direct de Bootstrap, Foundation by Zurb, gigantesque framework CSS, vient de relacher sa dernière version. Au programme on retrouve des améliorations graphiques avec un design plus “flat”, une amélioration des performances graphiques notamment sur mobile. Mais la grande nouveauté de cette mouture c’est la possibilité de modifier n’importe quel élément très facilement en fonction de la taille de l’appareil.

Dans ce dossier je vais vous présenter tout un tas de fonctions CSS3 super pratiques que vous pourrez utiliser dans vos créations. Vous pouvez aussi regarder mes précédents tutos pour adapter votre site aux mobiles , et pour faire pivoter des objets . Lançons nous dans le grand bain du web design avec ces 5 fonctions :