CSS, la mise en forme de vos pages Web.
Chaque régles CSS applique une valeur.
Selon les regles, ces valeurs sont des listes definies en textes ou des valeurs numeriques exprimées avec une unité de mesure (px,em, cm, etc.)
Pour les régles recevant des valeurs numériques, certaines n'acceptent pas de valeur négatives et sont tout bonnement ignorées par le navigateur.
Oui
Lire la suite de CSS et valeurs négatives et container querie
La pseudo classe :nth-child(X) permet de cibler un élement sur une position unique.
La pseudo classe :nth-child(Xn) permet de cibler un élement se situant toutes les N positions.
Par exemple, pour cibler tout les element se trouvant en quatriéme, huitiéme, douziéme, etc.. position: :nth-child(4n){} fera le travail.
Il est alors possible de mettre en place un motif visuel répétitif (pattern en anglais).
Nous profiterons de cet article pour evoquer les autres pseudo class autour de nth-child avec une petite parenthèse sur les selecteurs de combinaisons.
Lire la suite de La pseudo classe :nth-child(Xn) , pour un motif qui se répete ... ou pas.
Si float a beaucoup été utilisé pour créer des colonnes, choses auxquelles il n'etait pas vraiment destiné à l'origine, il a aujourd'hui shape-outside qui complete joliement son utilité premiere. définition sur Mozilla.org.
float permet d'ancrer à gauche ou à droite un élement en le retirant du flux naturel de la page. les contenus des élements suivant vont couler autour . Cette boite ainsi ancré se delimite par un rectangle de taille adaptée au contenu. c'est ce que shape-outside permet de modifier.
Une mise à jour de l'article est en cours, ce sera un pré-requis pour appréhender l'article une grille d'hexagone imbriqués en CSS..
Cette article va vous donner quelques exemples reprenant les vielles méthodes en comparaison sur une structure courante avec
Nous allons recréer cette structure visuelle en passant par float, grid et l'affichage en mode table.
Lire la suite de Histoire de colonne au fil du temps (layout)
decouvrez :is() l'alter ego de :not(),et :where() où la différence réside dans le calcul de la priorité des sélécteurs compilés.
Les selecteurs contenus dans :is(), :not() sont pris en compte dans le calcul de priorité, il ne le sont pas dans :where().
Aujourd'hui, nous sommes trés prés de pouvoir les utiliser sans réserves.
Garder un oeil sur Caniuse.com pour voir où en est le support, sans oublié la définition.
Un exemple de ce que l'on peut faire sans javascript en détournant l'usage habituel d'élément de formulaire pour que le visiteur puisse inter agir avec le diaporama en stoppant l'animation et afficher l'une des 3 images.
Voici un slider, relativement simple, de trois images qui passe de l'une à l'autre en fondu.
D'un côté une animation qui se déroule indéfiniment que l'on peut mettre en pause, et de l'autre, des inputs de type radio et leurs labels pour afficher telle ou telle image en stoppant l'animation.
MAJ en fin d'article: un exemple avec var() CSS pour faciliter l'ajout ou le retrait d'une image à ce diaporama.
! Article en partie obsolète en ce qui concerne IE.
Non, il n'y a pas de soluce universelle pour simuler des colonnes et aligner leurs contenus respectifs, mais des tas, En voici une pour le souvenir.
Aujourd'hui, nous avons flex et grid, en passe de devenir universels, mais il reste de nombreux appareils en services (tablette,télephone,..), des navigateurs obsolétes ou exotiques (ex:TV connectées), il y a aussi les applis de courriels. Les vielles méthodes restent des alternatives utiles. .
Lire la suite de Fausses colonnes avec inline-block et linear gradient
Reproduction simpliste d'une scéne de théatre avec le rideau qui s'ouvre et se ferme.
Au théatre Ce soir !
Lire la suite de Rideau coulissant en CSS (ouverture/fermeture)
Peut-on reproduire un élément de design uniquement via CSS ?
