Les 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

Les Propriétés d’animation

La propriété La description
animation Anime (passe progressivement d’un style à un autre) les propriétés CSS avec des valeurs discrètes.
animation-delay Spécifie quand une animation va démarrer.
animation-direction Définit comment l’animation doit être jouée : vers l’avant, vers l’arrière ou en alternance.
animation-duration Définit la durée (en secondes ou en millisecondes) qu’une animation prend pour compléter un cycle d’animation.
animation-fill-mode Définit un style à l’élément, lorsque l’animation n’est pas exécutée (avant qu’elle commence, après qu’elle se termine, 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 voulez appliquer. Elle a deux valeurs: none et keyframename.
animation-play-state Spécifie si l’animation est en cours ou en pause.
animation-timing-function Définit comment l’animation progressera pendant la durée de chaque cycle, et non pendant toute l’animation.
@keyframes La règle @keyframes est la base pour les animations keyframe, utilisées pour animer (passer progressivement d’un style à un autre) de nombreuses propriétés CSS.

Les Propriétés de Fond

La propriété La description
background-clip Spécifie la distance entre les propriétés background-color et background-image.
background-origin Spécifie la zone de positionnement de l’arrière-plan de la propriété background-image.
background-size Définit la taille de l’image de fond.

Les Propriétés de Bordure

La propriété La description
border-bottom-left-radius Définit la forme ronde du coin inférieur-gauche de l’élément.
border-bottom-right-radius Définit l’arrondissement 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 la quantité, par laquelle l’image de bordure est étendue au-delà de la boîte de bordure de l’élément.
border-image-repeat Spécifie si la propriété border-image sera arrondie, répétée ou étirée.
border-image-slice Spécifie comment couper l’image, spécifiée par la propriété border-image-source, en neuf régions : quatre coins, quatre bords, 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 Fait des coins arrondis pour le bord extérieur d’un élément.
border-top-left-radius Définit l’arrondissement du coin supérieure-gauche de l’élément. Il existe trois types d’arrondissement.
border-top-right-radius Définit la forme ronde du coin supérieur-droit de l’élément. Il y a trois types d’arrondissement.

Les Propriétés de Couleur

La propriété La description
opacity Spécifie la transparence d’un élément.

Mise en Page de la Boîte Flexible

La propriété La 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 pour les éléments flex. Il est le même, que la propriété justify-content , mais la version verticale..
flex Spécifie les composants d’une longueur flexible.
flex-basis Définit la taille initiale principale de l’élément flexible.
flex-direction Définit l’axe principal d’un conteneur flex et l’ordre, dans lequel les éléments flex apparaissent.
flex-flow Une propriété raccourcie pour les propriétés flex-wrap et flex-direction .
flex-grow Spécifie combien l’élément va croître, par rapport au reste des éléments du conteneur flex.
flex-shrink Spécifie combien l’élément va rétrécir par rapport au reste des éléments du conteneur flex.
flex-wrap Specifies if the flexible items should wrap or not.
justify-content Aligne les éléments, lorsque les éléments 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 grille.

Les propriété de Police

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

Les propriétés de Mise en Page Multi-colonnes

La propriété La description
column-count Spécifie si la propriété border-image sera arrondie, répétée ou étirée..
column-fill Contrôle le contenu de l’élément, lorsqu’il est divisé en colonnes.
column-gap Définit la longueur de l’écart entre les colonnes.
column-rule Définit le style, la largeur et la couleur de la règle entre les colonnes.
column-rule-color Définit la couleur de la règle.
column-rule-style Définit le style de la règle entre les colonnes.
column-rule-width Définit la largeur de la règle entre les colonnes.
column-span Spécifie si l'élément s'étend sur une colonne ou toutes les colonnes. .
column-width Définit la largeur des colonnes.
columns Une propriété raccourcie pour les propriétés column-count et column-width.

Les Propriétés de Contour

La propriété La description
outline-offset Spécifie l’espace entre un contour et le bord d’un élément.

Les Propriétés de Texte

La propriété La description
tab-size Définit la largeur d’un caractère d’onglet.
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 de texte.
text-decoration-line Spécifie le type de ligne, qui sera utilisé pour la décoration de texte.
text-decoration-style Spécifie le style de la décoration de texte.
text-justify Définit l'attitude de l’espacement entre les mots ou les caractères.
text-overflow Spécifie comment le texte en ligne débordant doit être signalé à l’utilisateur.
text-shadow Permet d’ajouter des ombres au texte.
column-width Définit la largeur des colonnes.
word-break Spécifie où les lignes doivent être brisées.
word-wrap Permet de briser les lignes en mots, de manière à s’adapter à son contenant.

Les Propriétés de Transformation

La propriété La description
backface-visibility Spécifie si la face arrière d’un élément doit être visible ou non.
perspective Donne à un élément positionné en 3D une certaine perspective et détermine la distance entre le plan z=0.
perspective-origin Définit la position à laquelle l’utilisateur regarde l’élément positionné en 3D.
transform Spécifie la 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).

Les Propriétés de Transition

La propriété La description
transition Une 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 la durée de l’animation de transition.
transition-property Spécifie les noms des propriétés pour la transition.
transition-timing-function Spécifie l'instance de la transition sur sa durée, permettant de changer la vitesse.

Propriétés de Formatage Visuel

La propriété La description
overflow-x Spécifie si le contenu doit être caché, visible ou défile horizontalement, lorsque le contenu déborde des bords gauche et droit de l’élément.
overflow-y Spécifie si le contenu doit être caché, visible ou défile verticalement, lorsque le contenu déborde des bords supérieurs et inférieurs de l’élément.
resize Spécifie comment l’élément est redimensionnable.
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’encart.
box-sizing Définit le calcul de la largeur et de la hauteur d’un élément, s’ils comprennent la rembourrage et les bordures.



Trouvez-vous cela utile?

Articles Associées