Propriétés CSS3

Sur cette page, vous trouverez tous les groupes de propriétés CSS3 avec des références et de courtes descriptions.

Liste des propriétés CSS3

Propriétés d’animation

Property	Description
animation	Anime les propriétés CSS à valeurs discrètes (change progressivement d’un style à un autre).
animation-delay	Spécifie quand une animation commencera.
animation-direction	Définit comment l’animation doit être jouée : vers l’avant, vers l’arrière ou en cycles alternés.
animation-duration	Définit la durée (en secondes ou en millisecondes) nécessaire à l’animation pour terminer un cycle.
animation-fill-mode	Définit un style pour l’élément lorsque l’animation ne s’exécute pas (avant son démarrage, après sa fin, ou les deux).
animation-iteration-count	Définit combien de fois l’animation doit être jouée.
animation-name	Définit le nom de la règle @keyframes que vous souhaitez appliquer. Elle a deux valeurs : none et keyframename.
animation-play-state	Spécifie si l’animation est en cours d’exécution ou en pause.
animation-timing-function	Définit comment l’animation progressera pendant la durée de chaque cycle, et non sur l’ensemble de l’animation.
@keyframes (at-rule)	La règle @keyframes est la base des animations par images clés utilisées pour animer (changer progressivement d’un style à un autre) de nombreuses propriétés CSS.

Propriétés d’arrière-plan

Property	Description
background-clip	Spécifie jusqu’où la background-color et l’background-image doivent s’étendre par rapport à l’élément.
background-origin	Spécifie la zone de positionnement de l’arrière-plan pour une background-image.
background-size	Définit la taille de l’image d’arrière-plan.

Propriétés de bordure

Property	Description
border-bottom-left-radius	Définit la forme arrondie du coin inférieur gauche de l’élément.
border-bottom-right-radius	Définit l’arrondi du coin inférieur droit de l’élément.
border-image	Permet de spécifier une image comme bordure autour d’un élément.
border-image-outset	Spécifie de combien l’image de bordure s’étend au-delà de la boîte de bordure de l’élément.
border-image-repeat	Spécifie si la border-image sera arrondie, répétée ou étirée.
border-image-slice	Spécifie comment découper l’image définie par border-image-source en neuf régions : quatre coins, quatre bords et une partie centrale.
border-image-source	Définit l’image source pour créer l’image de bordure d’un élément.
border-image-width	Définit la largeur de l’image de bordure.
border-radius	Crée des coins arrondis pour le bord extérieur de la bordure d’un élément.
border-top-left-radius	Définit l’arrondi du coin supérieur gauche de l’élément. Il existe trois types d’arrondi.
border-top-right-radius	Définit la forme arrondie du coin supérieur droit de l’élément. Il existe trois types d’arrondi.

Propriétés de couleur

Property	Description
opacity	Spécifie la transparence d’un élément.

Mise en page Flexbox

Property	Description
align-content	Aligne les lignes d’un conteneur flex lorsqu’il y a de l’espace disponible verticalement (sur l’axe transversal).
align-items	Définit l’alignement par défaut des éléments flex le long de l’axe transversal.
flex	Spécifie les composants d’une longueur flexible.
flex-basis	Définit la taille principale initiale de l’élément flexible.
flex-direction	Définit l’axe principal d’un conteneur flex et définit l’ordre d’apparition des éléments flex.
flex-flow	Propriété raccourcie pour les propriétés flex-wrap et flex-direction.
flex-grow	Spécifie dans quelle mesure l’élément grandira par rapport aux autres éléments du conteneur flex.
flex-shrink	Spécifie dans quelle mesure l’élément rétrécira par rapport aux autres éléments du conteneur flex.
flex-wrap	Spécifie si les éléments flexibles doivent passer à la ligne ou non.
justify-content	Aligne les éléments lorsque ceux-ci n’utilisent pas tout l’espace disponible horizontalement.
order	Spécifie l’ordre d’un élément flexible à l’intérieur du conteneur flex ou grid.

Propriétés de police

Property	Description
font-size-adjust	Contrôle la taille de police lorsque la première police sélectionnée n’est pas disponible.
font-stretch	Rend le texte plus étroit ou plus large.

Propriétés de mise en page multi-colonnes

Property	Description
column-count	Spécifie le nombre de colonnes qui divise le contenu d’un élément.
column-fill	Contrôle le contenu de l’élément lorsqu’il est divisé en colonnes.
column-gap	Définit la longueur de l’espace entre les colonnes.
column-rule	Définit le style, la largeur et la couleur de la ligne entre les colonnes.
column-rule-color	Définit la couleur de la ligne.
column-rule-style	Définit le style de la ligne entre les colonnes.
column-rule-width	Définit la largeur de la ligne entre les colonnes.
column-span	Spécifie si l’élément s’étend sur une colonne ou sur toutes les colonnes.
column-width	Définit la largeur des colonnes.
columns	Propriété raccourcie pour column-count et column-width.

Propriétés de contour

Property	Description
outline-offset	Spécifie l’espace entre un contour et le bord de la bordure d’un élément.

Propriétés de texte

Property	Description
tab-size	Définit la largeur d’un caractère de tabulation.
text-align-last	Définit l’alignement de la dernière ligne du texte.
text-decoration-color	Définit la couleur de la décoration du texte.
text-decoration-line	Spécifie le type de ligne qui sera utilisé pour la décoration du texte.
text-decoration-style	Spécifie le style de la décoration du texte.
text-justify	Définit le comportement de l’espacement entre les mots ou les caractères.
text-overflow	Spécifie comment signaler à l’utilisateur le débordement du texte en ligne.
text-shadow	Permet d’ajouter des ombres au texte.
word-break	Spécifie où les lignes doivent être coupées.
word-wrap	Permet de couper les lignes en mots afin qu’elles s’adaptent à leur conteneur.

Propriétés de transformation

Property	Description
backface-visibility	Spécifie si la face arrière d’un élément doit être visible ou non.
perspective	Donne une perspective à un élément positionné en 3D et détermine la distance par rapport au plan z=0.
perspective-origin	Définit la position à partir de laquelle l’utilisateur regarde l’élément positionné en 3D.
transform	Spécifie une transformation bidimensionnelle ou tridimensionnelle de l’élément.
transform-origin	Permet de modifier la position de la transformation des éléments.
transform-style	Spécifie comment les éléments enfants sont rendus dans l’espace tridimensionnel (3D).

Propriétés de transition

Property	Description
transition	Propriété raccourcie pour les propriétés suivantes : transition-property, transition-duration, transition-timing-function, transition-delay
transition-delay	Spécifie quand l’effet de transition doit commencer.
transition-duration	Spécifie combien de temps l’animation de transition doit durer.
transition-property	Spécifie les noms des propriétés concernées par la transition.
transition-timing-function	Spécifie le déroulement de la transition pendant sa durée, en permettant de modifier la vitesse.

Propriétés de mise en forme visuelle

Property	Description
overflow-x	Spécifie si le contenu doit être masqué, visible ou défilé horizontalement lorsque le contenu déborde des bords gauche et droit de l’élément.
overflow-y	Spécifie si le contenu doit être masqué, visible ou défilé verticalement lorsque le contenu déborde des bords supérieur et inférieur de l’élément.
resize	Spécifie comment l’élément peut être redimensionné.
box-shadow	Permet d’implémenter plusieurs ombres autour de la boîte en spécifiant des valeurs pour la couleur, la taille, le flou, le décalage et l’inset.
box-sizing	Définit le calcul de la width et de la height d’un élément, si elles incluent le padding et les borders.

Practice

Trouvez-vous cela utile?