Fermer

CSS

Comment afficher / masquer les éléments HTML en utilisant uniquement CSS

La possibilité d'afficher / masquer un élément HTML devrait être assez simple, non? Eh bien, nous pouvons utiliser certains attributs HTML et fonctions JavaScript si nous le voulons, mais que faire si nous voulons effectuer cette tâche sans utiliser JavaScript. Est-ce possible? Oui, c'est possible. Nous pouvons le faire avec seulement CSS. Oui, vous avez bien entendu! Voici comment obtenir le même résultat avec uniquement CSS. Comment afficher / masquer des éléments HTML avec CSS Dans cet exemple, nous allons simplement afficher / masquer une liste non ordonnée (ul li). La première étape consiste à créer […]

février 26, 2021

Lire l'article

Créez des effets d'image réactifs avec des dégradés CSS et des proportions

À propos de l'auteur Stephanie Eckles est une SWE front-end chez Microsoft. Elle est également l'auteur de ModernCSS.dev qui fournit des solutions modernes à d'anciens problèmes CSS en profondeur… En savoir plus sur Stéphanie ↬ Un problème classique dans CSS est de maintenir le rapport hauteur / largeur des images à travers les composants associés, tels que les cartes. La propriété aspect-ratio nouvellement prise en charge en combinaison avec object-fit offre un remède à ce mal de tête du passé! Apprenons à utiliser ces propriétés, en plus de créer un effet d'image dégradé réactif pour plus […]

février 23, 2021

Lire l'article

Gestion de l'index CSS Z dans les grands projets

À propos de l’auteur Steven Frieson est un développeur frontal qui aime résoudre les problèmes des gens, qu’ils soient des utilisateurs de sites Web ou des collègues développeurs. Il s'intéresse à beaucoup… En savoir plus sur Steven ↬ La résolution des valeurs d'index z est une tâche difficile pour de nombreux développeurs. Voici un mini-framework facile à mettre en œuvre basé sur des conventions existantes qui apporte clarté et confiance au travail avec z-index. Il existe plusieurs articles qui expliquent z-index ( en voici un bon ) ), car il continue de trébucher les développeurs de […]

février 10, 2021

Lire l'article

Ce que vous pouvez faire avec CSS aujourd'hui

À propos de l'auteur Un concepteur indépendant et un développeur front-end qui essaie d'améliorer l'expérience de chacun sur le Web en mettant l'accent sur l'amélioration progressive et… En savoir plus sur Andy ↬ Le présent et l'avenir du CSS sont en effet très prometteurs et si vous adoptez une approche pragmatique et progressive de votre CSS, les choses continueront à s'améliorer sur vos projets également. Dans cet article, nous examinerons la disposition de la maçonnerie, le sélecteur : is clamp () les unités ch et ex, la décoration de texte mise à jour et quelques autres […]

février 1, 2021

Lire l'article

Figer la ligne et la colonne dans un tableau HTML à l'aide de CSS

Une interface utilisateur interactive et facile à utiliser incite toujours l'utilisateur à travailler davantage. Chaque fois qu'une structure grille / table est utilisée pour afficher les données, un scénario courant montre une barre de défilement lorsque les données dépassent une plage visuelle. Lorsque l'utilisateur fait défiler le tableau à l'aide de la barre de défilement, l'en-tête de ligne ou la colonne défile également, ce qui est ennuyeux pour l'utilisateur d'identifier la ligne / colonne. Pour surmonter cela, nous pouvons simplement figer les lignes et les colonnes d'en-tête (s) basé sur l'exigence, et le reste des données […]

janvier 19, 2021

Lire l'article

Propriété de transformation CSS: quatre utilisations courantes

La propriété CSS transform permet à un développeur d'effectuer un certain nombre d'actions différentes sur un élément qui modifie la façon dont cet élément apparaît dans le navigateur. Bien que le domaine des possibilités de ce que vous pouvez faire avec une ou plusieurs valeurs de transformation soit très vaste, voici quelques utilisations courantes pour gagner du temps sur votre prochain projet. Centrage des icônes verticalement (ou horizontalement) Le premier exemple de valeur de transformation CSS que je veux examiner est translate () . Parlons de la transformation CSS translate () Ce que translate () nous […]

novembre 13, 2020

Lire l'article

Le guide de la grille CSS

Découvrons le nouveau système de création de mises en page bidimensionnelles en CSS appelé CSS Grid, comparons-le à Flexbox et apprenons à personnaliser de superbes mises en page. Dans cet article, nous allons en savoir plus sur un puissant système de mise en page pour créer des mises en page étonnantes et magnifiques sur le Web – nous allons en apprendre davantage sur CSS Grid. Nous allons comprendre pourquoi cette technologie a été créée et de quoi il s'agit exactement, quels problèmes elle nous aide à résoudre, ses similitudes avec Flexbox et comment elle fonctionne dans […]

novembre 5, 2020

Lire l'article

Disposition de maçonnerie CSS native dans la grille CSS

À propos de l'auteur Rachel Andrew n'est pas seulement rédactrice en chef de Smashing Magazine, mais aussi développeur Web, écrivain et conférencier. Elle est l'auteur de plusieurs livres, dont… En savoir plus sur Rachel Andrew … Il existe désormais une spécification pour la disposition de maçonnerie CSS native, dans le cadre de la spécification de disposition de grille. Dans cet article, Rachel Andrew explique son fonctionnement à l'aide de quelques démos que vous pouvez essayer dans Firefox Nightly. Un Niveau 3 de la spécification CSS Grid a été publié en tant que brouillon de l'éditeur , […]

novembre 2, 2020

Lire l'article

Un guide des formulaires HTML et CSS (pas de piratage!)

Historiquement, les formulaires HTML ont été assez délicats – premièrement, parce qu'au moins un peu de JavaScript était nécessaire, et deuxièmement, parce qu'aucune quantité de CSS ne pourrait jamais les faire se comporter. Cependant, ce n'est pas nécessairement vrai. dans le cas du web moderne, apprenons à baliser des formulaires en utilisant uniquement HTML et CSS. Former la structure de base Commencez par le ] élément. Rien d'extraordinaire ici. Couvrant juste la structure de base. < formulaire > … </ form > Si vous soumettez les données du formulaire naturellement (c'est-à-dire sans JavaScript), vous devrez inclure […]

octobre 7, 2020

Lire l'article

Changer le système de grille CSS dans l'éditeur de nouvelle page

Avec le moteur de rendu .NET Core, les clients peuvent profiter pleinement du nouvel éditeur de page de Sitefinity et de sa riche fonctionnalité. Il a beaucoup d'améliorations, dont un seul widget, dédié à la création mises en page, appelées Section. Les sections sont des espaces réservés pour les widgets de contenu. Ils peuvent être imbriqués ou configurés pour avoir plusieurs colonnes. Par défaut, le widget de section utilise l'un des systèmes de grille CSS les plus courants: le système de grille Bootstrap 4. Cependant, si vous avez un framework CSS préféré ou un système de […]

septembre 26, 2020

Lire l'article