• 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,…

  • CSS3

    CSS3 : coins arrondis, ombres et couleurs

    Je vous propose de poursuivre l’exploration des possibilités du CSS3 avec pour cet article la possibilité d’arrondir les coins des boîtes, de générer d’élégantes ombres et de gérer finement les couleurs. Les couleurs Le CSS3 nous apporte de nouvelles façons de définir les couleurs. Classiquement on peut définir les couleurs : par leur nom, par exemple red, yellow, brown (vous avez la liste complète ici ou directement dans la spécification W3C) par le code hexadécimal, par exemple #22651f, ou en abrégé dans le genre #b52, on définit ainsi les couleurs primaires additives dans l’ordre rouge-vert-bleu par la fonction rgb(), avec les valeurs de rouge-vert-bleu de 0 à 255 ou en…

  • CSS3

    CSS3 : les sélecteurs

    J’inaugure la catégorie CSS3 en commençant par un article sur les sélecteurs. Pourquoi les sélecteurs ? Parce qu’ils constituent le coeur du CSS. Si on ne les avait pas pour cibler des éléments des pages HTML on serait bien en peine pour appliquer des règles de style ou pour agir avec Javascript. C’est un domaine qui a connu une lente évolution. Au départ on disposait seulement de sélecteurs pour les identifiant, les classes ou les types. Puis la collection s’est progressivement étendue. Avec le CSS3 on peut atteindre facilement n’importe quel élément. Les sélecteurs du CSS3 sont maintenant pris en charge par la majorité des navigateurs modernes, même IE9 !…