• CSS3

    Tailwind

    Il faut reconnaître que Tailwind connait un franc succès et mérite qu’on s’y intéresse de près. De quoi s’agit-il ? C’est une librairie qui propose des classes utilitaires avec comme objectif de se passer des feuilles de style et de gérer complètement ce style directement dans le HTML. Ces classes sont très proches du CSS et on est donc très loin de librairies comme Bootstrap qui proposent des composants tout prêts à l’emploi. Ici la proposition est tout autre. C’est une philosophie différente, au lieu de créer des feuilles de style en utilisant des noms de classe plus ou moins judicieux au niveau du HTML, on utilise des classes de…

  • CSS3

    Un peu de style

    Si le développement côté serveur ressemble un peu à un long fleuve tranquille c’est loin d’être le cas côté client. On peut même affirmer que de ce côté les choses sont relativement complexe et très évolutives. Lorsque j’ai commencé à créer des sites web il y a bien longtemps les feuilles de style n’existaient pas et on devait utiliser les attributs des balises. D’autre part pour l’aspect visuel on s’arrangeait avec des tableaux, on avait une largeur fixe qu’il fallait bien choisir et évidemment pas question de responsivité ! Lorsque les feuilles de style ont débarqué on les a regardées avec suspicion et il a fallu de longues années avant…

  • CSS3

    CSS3 : colonnes multiples

    Créer de multiples colonnes, comme dans un journal, était possible avant le CSS3 mais il fallait utiliser le mode flottant et diviser le contenu en plusieurs morceaux, et ce n’était pas compatible avec du contenu dynamique. Avec les colonnes CSS3 tout devient simple et le navigateur gère lui-même le contenu sur plusieurs colonnes. Le seul souci est que la prise en charge n’est pas encore vraiment satisfaisante : Mais ça ne nous empêche pas de commencer à l’utiliser ! Le nombre de colonnes La première propriété essentielle est celle du nombre de colonnes column-count. La valeur par défaut est auto qui signifie une seule colonne (autrement dit elle ne sert…

  • CSS3

    CSS3 : animations

    Avec les transformations on peut réaliser des animations d’éléments mais les possibilités sont limitées. On peut définir le départ et l’arrivée mais on a aucun contrôle sur les étapes intermédiaires. Les animations quant à elles autorisent ces contrôles intermédiaires et permettent de réaliser des choses beaucoup plus élaborées. C’est ce qu’on va voir dans cet article. Je me suis d’ailleurs un peu amusé à créer un support d’exercice pour détendre son cou, ce qui est très utile lorsqu’on passe de nombreuses heures devant un écran ! Pour créer une animation CSS on doit : créer et nommer l’animation (avec @keyframes) attacher cette animation à un élément (avec animation-name) Notre première…

  • CSS3

    CSS3 : transformations et transitions

    Le CSS3 permet d’effectuer des transformations comme des translations ou des rotations de n’importe quel élément de la page. D’autre part avec les transitions la page peut devenir et s’animer selon les actions de l’utilisateur dont la plus fréquente est le passage du curseur de la souris. Je vous propose dans cet article d’explorer ces possibilités. Les transformations Pour les transformations on a la propriété transform. Ca ne fonctionne qu’avec les éléments de type boîte mais on peut facilement étendre l’action aux autres éléments avec inline-block. Translation Une translation est un déplacement horizontal ou vertical ou selon une direction quelconque. On dispose de ces fonctions : translateX(n) : translation de…

  • CSS3

    CSS3 : dégradés et fonds

    Après avoir vu les arrondis et ombres dans le précédent article je vous propose à présent de voir les dégradés et les fonds. Le CSS3 permet la création d’esthétiques dégradés linéaires ou radiaux. D’autre part il est possible d’avoir de multiples fonds, ce qui autorise une grande créativité. Les dégradés linéaires Un dégradé linéaire est un changement progressif de couleur qui suit une ligne droite, par exemple de gauche à droite, ou l’inverse, ou de haut en bas, ou de n’importe quel point à n’importe quel autre point. On trouve cela dans tous les logiciels de création graphique, comme Gimp par exemple. Il suffit de déterminer la couleur de départ,…