AI Engineering Tools

Programmation

Termes d'édition CSS pour modifier une page

Référence consultable pour nommer les en-têtes, boutons, espacements, états de survol, mises en page adaptatives et autres notions CSS.

63 résultats

Structure de page

En-tête

Header

Sens

La zone supérieure d'une page, qui contient généralement le titre du site, la navigation, les contrôles de thème, les contrôles de langue et le bouton de menu.

Modification

Modifier le remplissage, la hauteur, la bordure ou la position de l'en-tête modifie la hauteur et l'aspect fixe de la zone supérieure.

Note

Un en-tête plus grand peut réduire la zone de contenu visible, en particulier sur les appareils mobiles.

CSS lié

headerpaddingheightpositionborder-bottom

Exemple de demande

Réduisez la taille du titre de l'en-tête mobile tout en conservant la même hauteur d'en-tête.

Structure de page

Pied de page

Footer

Sens

La zone inférieure d'une page, souvent utilisée pour les liens, le texte juridique, les informations de contact ou la petite navigation.

Modification

Les modifications du remplissage et de la bordure du pied de page affectent l'espace disponible et la séparation du contenu situé au-dessus.

CSS lié

footerpaddingborder-topmargin-top

Exemple de demande

Ajouter plus de remplissage en haut du pied de page pour qu'il ne paraisse pas collé au contenu.

Structure de page

Section

Section

Sens

Une grande zone de contenu qui regroupe du contenu connexe, tel qu'une section principale, une liste d'outils, des cartes de référence ou un bloc d'article.

Modification

Le remplissage de la section modifie le rythme vertical de la page. Les changements de fond donnent à la section une impression de séparation.

CSS lié

sectionpadding-blockborder-topbackground

Exemple de demande

Réduire le remplissage vertical de la section des outils sur les appareils mobiles.

Structure de page

Conteneur

Container

Sens

Un wrapper interne qui empêche le contenu de la page de s'étendre trop sur les grands écrans.

Modification

L'augmentation de la largeur maximale rend le contenu plus large. L'augmentation du remplissage latéral maintient le contenu éloigné des bords de l'écran.

CSS lié

max-widthmargin-inlinepadding-inline

Exemple de demande

Rendez le conteneur principal légèrement plus étroit sur un ordinateur de bureau.

Structure de page

Carte

Card

Sens

Un bloc encadré qui présente un élément répété, tel qu'un outil, une entrée de référence ou un résultat.

Modification

Le remplissage, la bordure, le rayon et l'ombre de la carte contrôlent la densité ou la proéminence de chaque élément.

CSS lié

borderborder-radiuspaddingbackgroundbox-shadow

Exemple de demande

Rendez les cartes de référence plus compactes en réduisant leur remplissage.

Structure de page

Panneau

Panel

Sens

Une zone de travail encadrée, généralement contenant des contrôles, des entrées, des paramètres ou une sortie.

Modification

Les modifications de l'espacement et de la disposition des panneaux affectent la facilité d'utilisation des outils.

CSS lié

borderbackgroundpaddingdisplay

Exemple de demande

Aligner les contrôles du panneau en une seule ligne sur les ordinateurs de bureau et les empiler sur les appareils mobiles.

Structure de page

Navigation

Navigation

Sens

Un groupe de liens ou de boutons utilisés pour naviguer entre les principales pages ou catégories.

Modification

Les règles d'espacement, d'alignement et de visibilité modifient le comportement de la navigation sur les appareils de bureau et mobiles.

CSS lié

navdisplaygapalign-items

Exemple de demande

Masquez les liens de navigation sur les petits écrans et conservez le bouton de menu visible.

Structure de page

Menu

Menu

Sens

Une liste de liens ou d'actions qui s'ouvrent à partir d'un bouton.

Modification

La position, la largeur et l'index z déterminent où le menu s'ouvre et s'il apparaît au-dessus du contenu.

Note

Si le menu est placé dans le flux normal du document, il peut pousser toute la page vers le bas.

CSS lié

positionrighttopz-indexwidth

Exemple de demande

Faites en sorte que le menu s'ouvre en tant que panneau flottant aligné sur la droite.

Structure de page

Barre latérale

Sidebar

Sens

Une zone verticale située sur le côté gauche ou droit de la page, souvent utilisée pour la navigation ou les filtres.

Modification

La largeur de la barre latérale et les règles de réactivité déterminent si elle reste visible, se rétracte ou se déplace sous le contenu.

CSS lié

asidewidthpositiongrid-template-columns

Exemple de demande

Déplacer la barre latérale de filtre située en dessous du contenu sur les appareils mobiles.

Structure de page

Héros

Hero

Sens

La première grande section d'une page qui présente le but principal ou l'action.

Modification

Le remplissage de la zone de héros, la taille du titre et la mise en page affectent la première impression et la quantité de contenu qui tient dans la première zone visible.

CSS lié

paddingbackgroundmin-heightgrid

Exemple de demande

Réduire la taille du titre principal sur les appareils mobiles afin que les boutons d'action restent visibles.

Espacement et taille

Rembourrage

Padding

Sens

Espace à l'intérieur d'un élément, entre la bordure et le contenu.

Modification

L'augmentation du remplissage supérieur ajoute plus d'espace au-dessus du contenu à l'intérieur de l'élément.

Note

Plus de remplissage augmente généralement la taille visible de l'élément.

CSS lié

paddingpadding-toppadding-rightpadding-bottompadding-left

Exemple de demande

Augmentez légèrement le remplissage supérieur de l'en-tête.

Espacement et taille

Marge

Margin

Sens

Espace à l'extérieur d'un élément, entre celui-ci et les éléments voisins.

Modification

L'augmentation de la marge inférieure éloigne l'élément suivant vers le bas.

CSS lié

marginmargin-topmargin-rightmargin-bottommargin-left

Exemple de demande

Ajouter plus d'espace entre la section principale et la liste des outils.

Espacement et taille

Écart

Gap

Sens

L'espace entre les éléments à l'intérieur d'une mise en page flexible ou en grille.

Modification

L'augmentation de l'espacement sépare les éléments frères sans ajouter d'espace supplémentaire autour de l'ensemble du groupe.

CSS lié

gaprow-gapcolumn-gap

Exemple de demande

Réduire l'espacement entre le bouton de thème, le bouton de langue et le bouton de menu.

Espacement et taille

Largeur

Width

Sens

La taille horizontale d'un élément.

Modification

Une largeur fixe maintient l'élément stable. max-width lui permet de se réduire sur les petits écrans.

CSS lié

widthmin-widthmax-width

Exemple de demande

Faites en sorte que la largeur du panneau du menu corresponde à son élément le plus long.

Espacement et taille

Hauteur

Height

Sens

La taille verticale d'un élément.

Modification

Une hauteur fixe peut stabiliser un en-tête. max-height avec overflow peut empêcher les menus déroulants de devenir trop grands.

CSS lié

heightmin-heightmax-height

Exemple de demande

Conservez la hauteur de l'en-tête stable tout en réduisant la taille du titre.

Espacement et taille

Largeur maximale

Max width

Sens

La largeur maximale qu'un élément peut atteindre.

Modification

Réduire la largeur maximale rend les lignes de texte plus courtes et les panneaux plus étroits sur les grands écrans.

CSS lié

max-widthwidth

Exemple de demande

Définissez une largeur maximale pour la liste déroulante afin qu'elle ne recouvre pas trop de la page.

Espacement et taille

Haut / Droite / Bas / Gauche

Top / Right / Bottom / Left

Sens

Décalages de position utilisés avec les éléments positionnés.

Modification

right : 0 aligne un panneau flottant sur le bord droit de son parent positionné.

CSS lié

toprightbottomleftinset

Exemple de demande

Aligner le panneau de menu ouvert sur le côté droit des contrôles d'en-tête.

Texte

Taille de la police

Font size

Sens

La taille du texte.

Modification

Réduire la taille de la police permet aux étiquettes longues de tenir dans les espaces restreints, tels que les en-têtes mobiles.

CSS lié

font-sizetext-smtext-lg

Exemple de demande

Réduisez la taille du titre du site mobile, mais conservez-le sur une seule ligne.

Texte

Épaisseur de la police

Font weight

Sens

À quel point le texte apparaît-il gras ou en gras.

Modification

L'augmentation de la graisse de la police rend les étiquettes plus visibles sans modifier leur taille.

CSS lié

font-weightfont-boldfont-semibold

Exemple de demande

Rendez les étiquettes de catégorie légèrement plus audacieuses.

Texte

Hauteur de ligne

Line height

Sens

L'espace vertical que chaque ligne de texte occupe.

Modification

Augmenter l'interligne rend les paragraphes plus faciles à lire. Réduire l'interligne permet d'obtenir des étiquettes d'interface utilisateur UI plus compactes.

CSS lié

line-heightleading

Exemple de demande

Augmentez la hauteur de ligne du paragraphe dans la description principale.

Texte

Espacement entre les lettres

Letter spacing

Sens

L'espace entre les lettres individuelles.

Modification

Un petit espacement peut aider les étiquettes en majuscules à être plus claires. Un espacement excessif peut rendre le texte coréen maladroit.

CSS lié

letter-spacingtracking

Exemple de demande

Supprimer l'espacement négatif des lettres des boutons compacts.

Texte

Aligner le texte

Text align

Sens

L'alignement horizontal du texte à l'intérieur de son conteneur.

Modification

Le texte du menu aligné à droite peut donner l'impression qu'un menu flottant est attaché au bord droit.

CSS lié

text-align

Exemple de demande

Aligner à droite le texte de l'élément de menu à l'intérieur du panneau de menu.

Texte

Envelopper / Ne pas envelopper

Wrap / No wrap

Sens

Indique si un long texte peut passer à la ligne suivante ou s'il doit rester sur une seule ligne.

Modification

Sans envelopper, un en-tête reste stable, tandis que l'enveloppement peut afficher plus de texte, mais augmente généralement la hauteur.

CSS lié

white-spaceword-breakoverflow-wrap

Exemple de demande

Conservez le titre mobile sur une seule ligne et tronquez le débordement.

Texte

Tronquer / Ellipse

Truncate / Ellipsis

Sens

Un moyen de tronquer le texte sur une seule ligne et d'afficher des points.

Modification

La troncature empêche la rupture de la mise en page lorsque les étiquettes sont plus longues que prévu.

CSS lié

overflowtext-overflowwhite-space

Exemple de demande

Tronquez le titre du site sur les écrans très petits.

Couleur et arrière-plan

Couleur

Color

Sens

La couleur du texte ou des icônes.

Modification

Modifier la couleur affecte la lisibilité et la priorité visuelle.

CSS lié

color

Exemple de demande

Rendez le texte de la langue sélectionnée visible en mode sombre.

Couleur et arrière-plan

Contexte

Background

Sens

La couleur ou l'image derrière le contenu d'un élément.

Modification

Les changements de fond peuvent séparer les panneaux, mettre en évidence les états actifs ou améliorer le contraste.

CSS lié

backgroundbackground-color

Exemple de demande

Utilisez un fond plus foncé pour l'élément de langue sélectionné en mode sombre.

Couleur et arrière-plan

Opacité

Opacity

Sens

À quel point un élément est-il transparent.

Modification

Une opacité plus faible rend les éléments moins visibles, mais cela peut réduire la lisibilité.

CSS lié

opacityrgbacolor-mix

Exemple de demande

Rendez les contrôles désactivés moins visibles sans rendre le texte illisible.

Couleur et arrière-plan

Gradient

Gradient

Sens

Une transition progressive entre deux couleurs ou plus.

Modification

Les dégradés subtils peuvent ajouter de la profondeur, mais les dégradés marqués peuvent donner une impression de manque de praticité.

CSS lié

linear-gradientradial-gradientbackground-image

Exemple de demande

Conservez l'arrière-plan principal subtil et évitez un fort dégradé.

Couleur et arrière-plan

Couleur d'accent

Accent color

Sens

Une couleur de surlignement répétée utilisée pour les étiquettes, les états actifs ou les actions importantes.

Modification

Modifier la couleur d'accent modifie l'identité visuelle et l'importance de la page.

CSS lié

colorbackgroundborder-coloraccent-color

Exemple de demande

Utilisez la même couleur d'accent vert pour les étiquettes de catégorie et les puces actives.

Couleur et arrière-plan

Contraste

Contrast

Sens

La différence entre les couleurs de premier plan et d'arrière-plan.

Modification

Un contraste plus élevé améliore la lisibilité, en particulier en mode sombre et sur les écrans mobiles.

CSS lié

colorbackground-color

Exemple de demande

Augmentez le contraste des éléments déroulants en mode sombre.

Bordure et forme

Bordure

Border

Sens

Une ligne autour d'un élément.

Modification

La largeur et la couleur de la bordure contrôlent la façon dont une boîte ou un bouton est séparé de l'arrière-plan.

CSS lié

borderborder-colorborder-widthborder-style

Exemple de demande

Rendez la bordure du panneau du menu légèrement plus foncée en mode sombre.

Bordure et forme

Rayon de la bordure

Border radius

Sens

À quel point les coins d'une boîte ou d'un bouton sont-ils arrondis.

Modification

Un petit rayon donne une impression de praticité et de compacité. Un grand rayon donne une impression de douceur et de légèreté.

CSS lié

border-radius

Exemple de demande

Conservez les bords des cartes à un rayon de 8 px.

Bordure et forme

Ombre portée

Box shadow

Sens

Une ombre autour d'un élément qui le fait paraître en relief par rapport à la page.

Modification

Les ombres plus foncées donnent aux menus flottants ou aux modales une impression de superposition. Trop d'ombres peuvent donner une impression de lourdeur.

CSS lié

box-shadow

Exemple de demande

Ajouter une ombre subtile au panneau de menu flottant.

Bordure et forme

Plan

Outline

Sens

Une ligne affichée autour d'un élément, souvent lorsqu'il est mis en évidence par la navigation au clavier.

Modification

Un contour clair qui aide les utilisateurs du clavier à savoir quel contrôle est actif.

CSS lié

outlineoutline-offset:focus-visible

Exemple de demande

Conservez un contour de focus visible sur les boutons d'icône.

Bordure et forme

Séparateur

Divider

Sens

Une ligne utilisée pour séparer les sections ou les groupes.

Modification

Un séparateur peut rendre les limites de catégorie plus claires sans ajouter trop de poids visuel.

CSS lié

border-topborder-bottomhr

Exemple de demande

Ajouter des séparateurs subtils entre les catégories de menu.

Mise en page et position

Affichage

Display

Sens

Le mode de disposition de base d'un élément.

Modification

display : none masque un élément. flex et grid disposent des éléments enfants.

CSS lié

displaydisplay: nonedisplay: flexdisplay: grid

Exemple de demande

Masquez la navigation de bureau sur les écrans mobiles.

Mise en page et position

Flex

Flex

Sens

Une méthode de mise en page pour organiser les éléments dans une ligne ou une colonne.

Modification

flex-direction : column empile les éléments verticalement. flex-wrap permet aux éléments de passer à la ligne suivante.

CSS lié

display: flexflex-directionflex-wrapgap

Exemple de demande

Conservez les contrôles de l'en-tête dans une ligne flexible.

Mise en page et position

Grille

Grid

Sens

Une méthode de mise en page pour organiser le contenu en lignes et en colonnes.

Modification

Modifier les colonnes de la grille contrôle le nombre de cartes qui apparaissent par ligne.

CSS lié

display: gridgrid-template-columnsgrid-columngap

Exemple de demande

Afficher quatre cartes d'outils par ligne sur les écrans de bureau larges.

Mise en page et position

Aligner les éléments

Align items

Sens

Comment les éléments sont-ils alignés sur l'axe transversal dans flex ou grid.

Modification

align-items : centre verticalement les contrôles dans une ligne d'en-tête.

CSS lié

align-itemsplace-items

Exemple de demande

Centrez verticalement le titre et les boutons d'en-tête.

Mise en page et position

Justifier le contenu

Justify content

Sens

Comment les éléments sont-ils distribués sur l'axe principal dans flex ou grid.

Modification

justify-content : space-between pousse les groupes aux extrémités opposées.

CSS lié

justify-contentjustify-itemsmargin-left: auto

Exemple de demande

Conservez le titre à gauche et les contrôles à droite.

Mise en page et position

Position

Position

Sens

La façon dont un élément est positionné par rapport à la page ou à un autre élément.

Modification

position : absolute permet à une liste déroulante de flotter sans faire descendre la mise en page de la page.

CSS lié

positionrelativeabsolutefixedsticky

Exemple de demande

Rendez le panneau du menu absolu afin qu'il ne fasse pas descendre la page.

Mise en page et position

Indice Z

Z-index

Sens

L'ordre d'empilement des éléments positionnés.

Modification

Un indice z plus élevé peut placer les menus déroulants au-dessus du contenu de la page.

Note

l'index z ne fonctionne de manière prévisible que lorsque les contextes de positionnement et d'empilement sont pris en compte.

CSS lié

z-indexposition

Exemple de demande

Déplacer le menu déroulant de la langue au-dessus du panneau du menu.

Mise en page et position

Dépassement de capacité

Overflow

Sens

Que se passe-t-il lorsque le contenu est plus grand que son conteneur ?

Modification

overflow-y : auto permet à un menu long de faire défiler au lieu de dépasser l'écran.

CSS lié

overflowoverflow-xoverflow-ymax-height

Exemple de demande

Rendez les menus déroulants longs qui défilent dans une hauteur maximale.

Responsive

Point d'arrêt

Breakpoint

Sens

Une largeur d'écran où la mise en page change.

Modification

Modifier un point d'arrêt détermine si les tablettes se comportent davantage comme des appareils mobiles ou des ordinateurs de bureau.

CSS lié

@mediasmmdlgxl

Exemple de demande

Traitez les tablettes comme des ordinateurs de bureau pour la navigation principale.

Responsive

Mobile

Mobile

Sens

Styles destinés aux petits écrans de téléphone.

Modification

Les styles mobiles réduisent souvent la taille de la police, regroupent les colonnes et conservent les commandes adaptées aux écrans tactiles.

CSS lié

@mediamax-widthsm

Exemple de demande

Sur les appareils mobiles, empilez les cartes en une seule colonne.

Responsive

Bureau

Desktop

Sens

Styles destinés aux écrans plus larges d'ordinateurs portables ou de bureau.

Modification

Les styles de bureau peuvent utiliser davantage de colonnes, une navigation horizontale et des conteneurs de contenu plus larges.

CSS lié

@mediamin-widthlgxl

Exemple de demande

Sur un ordinateur de bureau, conservez la navigation par catégorie visible dans l'en-tête.

Responsive

Zone d'affichage

Viewport

Sens

La zone visible de l'écran du navigateur ou de l'appareil.

Modification

Les unités de zone d'affichage rendent les tailles relatives à l'écran visible.

CSS lié

vwvh100vw100vh

Exemple de demande

Limitez la largeur du menu à la zone visible pour éviter qu'il ne déborde sur les téléphones.

Responsive

Responsive

Responsive

Sens

Une conception qui s'adapte aux différentes tailles d'écran.

Modification

Les règles réactives peuvent faire fonctionner le même composant horizontalement sur un ordinateur de bureau et verticalement sur un appareil mobile.

CSS lié

@mediaclampmin()max()

Exemple de demande

Rendez les contrôles réactifs sans modifier leur ordre.

États d'interaction

Survol

Hover

Sens

L'état lorsque le pointeur de la souris se trouve au-dessus d'un élément.

Modification

Les styles de survol peuvent modifier l'arrière-plan, la couleur du texte, la bordure ou l'ombre pour indiquer qu'un élément est interactif.

Note

Les appareils tactiles n'ont pas de comportement de survol fiable, il est donc important que les actions importantes fonctionnent également par clic ou par tapotement.

CSS lié

:hoverbackgroundcolortransition

Exemple de demande

Ajouter un changement de couleur de fond lors du survol des éléments du menu.

États d'interaction

Actif

Active

Sens

L'état bref pendant qu'un bouton ou un lien est enfoncé.

Modification

Les styles actifs peuvent rendre les boutons plus tactiles grâce à un petit changement de couleur ou de position.

CSS lié

:activetransformbackground

Exemple de demande

Ajouter un léger effet de pression aux boutons de la barre d'outils.

États d'interaction

Focus

Focus

Sens

L'état lorsqu'une entrée, un bouton ou un lien est actuellement sélectionné pour la saisie au clavier ou la frappe.

Modification

Les styles de focus rendent la navigation au clavier visible et accessible.

CSS lié

:focus:focus-visibleoutline

Exemple de demande

Faites correspondre la couleur de l'anneau de mise en évidence de la zone de saisie de recherche à la couleur d'accentuation.

États d'interaction

Désactivé

Disabled

Sens

Un état dans lequel un contrôle est visible mais ne peut pas être utilisé.

Modification

Les styles désactivés réduisent souvent le contraste et suppriment l'interaction avec le pointeur.

CSS lié

:disabledopacitycursorpointer-events

Exemple de demande

Rendez les boutons désactivés visuellement inactifs, mais toujours lisibles.

États d'interaction

Sélectionné

Selected

Sens

L'état de l'élément actuellement sélectionné dans une liste, un groupe d'onglets ou un menu.

Modification

Les styles sélectionnés nécessitent généralement une couleur de fond ou de texte plus prononcée que les éléments normaux.

CSS lié

aria-currentdata-statebackgroundcolor

Exemple de demande

Faites en sorte que la puce de catégorie sélectionnée soit clairement différente des autres.

États d'interaction

Ouvert / Fermé

Open / Closed

Sens

Indique si un menu déroulant, un menu ou un panneau accordéon est actuellement visible.

Modification

Les états ouverts et fermés doivent avoir des indicateurs clairs, tels que des icônes plus/moins ou une rotation de flèche.

CSS lié

aria-expandeddisplayheightvisibility

Exemple de demande

Conservez toutes les catégories de menu fermées par défaut.

Composants UI

Bouton

Button

Sens

Un contrôle qui effectue une action lorsqu'il est cliqué ou tapé.

Modification

Le remplissage, la bordure, la couleur et les états du bouton déterminent à quel point il est facile et important.

CSS lié

buttonpaddingborderbackgroundcursor

Exemple de demande

Rendez le bouton d'action principale plus visible que le bouton secondaire.

Composants UI

Bouton d'icône

Icon button

Sens

Un bouton représenté principalement par une icône au lieu de texte.

Modification

Une largeur et une hauteur stables empêchent les boutons d'icône de se déplacer lorsque les états changent.

CSS lié

buttonwidthheightaria-labeldisplay: grid

Exemple de demande

Conservez le bouton de l'icône du menu carré et aligné avec le bouton de langue.

Composants UI

Liste déroulante

Dropdown

Sens

Une liste flottante qui apparaît après avoir appuyé sur un bouton ou un contrôle de sélection.

Modification

La position, la largeur, la hauteur maximale et l'index z de la liste déroulante contrôlent le placement et le positionnement des calques.

CSS lié

positiontoprightz-indexbox-shadow

Exemple de demande

Lorsque le menu déroulant de la langue s'ouvre, fermez le menu du site.

Composants UI

Accordéon

Accordion

Sens

Une section qui peut être ouverte ou fermée pour afficher ou masquer son contenu.

Modification

Les accordéons raccourcissent les menus longs en gardant les catégories fermées jusqu'à ce qu'elles soient nécessaires.

CSS lié

aria-expandedheightdisplayoverflow

Exemple de demande

Ajouter un comportement d'ouverture et de fermeture à chaque catégorie de menu.

Composants UI

Onglets

Tabs

Sens

Un contrôle pour basculer entre les vues associées sans quitter la page.

Modification

Le style de l'onglet sélectionné doit clairement indiquer quel affichage est actif.

CSS lié

role=tablistdisplayborderbackground

Exemple de demande

Faites en sorte que l'arrière-plan de l'onglet actif soit plus foncé que les onglets inactifs.

Composants UI

Modale

Modal

Sens

Un panneau superposé mis en focus qui apparaît au-dessus de la page.

Modification

La largeur, le fond et l'index z de la fenêtre modale contrôlent la force avec laquelle elle interrompt la page.

CSS lié

dialogposition: fixedinsetz-indexbackdrop

Exemple de demande

Centrez la fenêtre modale et maintenez-la plus étroite que la zone d'affichage.

Composants UI

Info-bulle

Tooltip

Sens

Un petit indice affiché à proximité d'un contrôle, souvent au survol ou à la mise au point.

Modification

Les info-bulles aident à expliquer les boutons uniquement représentés par des icônes, sans ajouter de texte permanent.

CSS lié

positiontitlearia-describedbyz-index

Exemple de demande

Ajouter un info-bulle qui étiquette le bouton d'icône du menu.

Composants UI

Entrée

Input

Sens

Un champ où l'utilisateur tape du texte ou des valeurs.

Modification

Le remplissage, la bordure, la couleur du texte d'espace réservé et le style de focus de l'entrée affectent le confort et la clarté.

CSS lié

inputborderpaddingplaceholder:focus

Exemple de demande

Rendez la zone de saisie de recherche pleine largeur et plus facile à toucher sur les appareils mobiles.

Composants UI

Badge / Puce

Badge / Chip

Sens

Une petite étiquette ou un petit contrôle de filtre arrondi.

Modification

La taille de la puce, le rayon et la couleur active affectent la perception de la lisibilité des filtres.

CSS lié

border-radiuspaddingbackgroundfont-size

Exemple de demande

Rendez les puces de catégorie actives visuellement plus attrayantes.