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. Un thème sombre au clic d’un bouton Commençons par créer une page HTML très basique avec les éléments suivants :

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. Nommé “SASS pour les Webs Designers” et paru aux éditions Eyrolles, ce livre est une vrai porte d’entrée vers l’univers des préprocesseurs CSS.

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. En effet, le choix a été fait pour un design plus flat avec l’utilisation de Bootstrap 3 .

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 . Connectez vous à votre serveur et placez vous dans le dossier dans lequel vous voulez intsaller Bolt. 2 - Téléchargez la dernière version de Bolt à cette adresse .

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 ? La technique la plus simple pour cette opération est de dupliquer le texte et de superposer les deux textes obtenus.

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” Commençons tout de suite par designer notre bouton en oubliant pas qu’il possède 2 formes bien distinctes : une classique et une au survol de la souris.

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. De plus, l’installation est vraiment simple comme vous allez le voir. Installation : Tout d’abord, téléchargez le script ici .

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. Foundation dispose aussi d’un petit “gadget” qui vous permet de faire apparaitre un menu “Off Canvas” comme sur une application mobile, ce qui je trouve est bien réussi.

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 : - Cadres avec coins arrondis : pour transformer des images carrées en rond ou créer des boutons sympathiques :

Dans ce petit tutoriel je vais vous apprendre une manière simple de faire pivoter des objets en css. Alors comment ça se passe ? Tout tiens dans une ligne adaptée pour tous les navigateur ! .mon-objet{ transform: rotate(2deg);-webkit-transform: rotate(2deg);-moz-transform: rotate(2deg);} L’affaire est dans le sac, le style “transform” dispose de nombreuses fonctionnalités dont la rotation. Il ne vous reste plus qu’à remplacer “2” par votre valeur de rotation en degré.