CSS
Anatomie d'une règle
Structure, ancêtre, déclaration
Animation
@keyframes, animation-name, animation-duration, etc.
Animation Sprite Sheet
animation image par image
Aspect-ratio
Créer un élément dont la dimension reste proportionnelle.
Background
color, image, gradient
Border
border, border-radius
Box-model
Chaque élément d'une page est une boîte rectangulaire
Box-shadow
Ombrage d'un élément.
Box-sizing
border-box, content-box
Display
block, inline, inline-block, none
Filtres
blur, contrast, grayscale, sepia, etc.
Float
Permet à un élément de flotter à gauche ou à droite
Flux
L’affichage de base des éléments dans une page
@font-face
Importer des polices d'écritures
Font
color, family, weight, size, style, line-height
Google fonts
+ de 850 polices gratuites
Linear-gradient
Générer un dégradé.
Margin
marge extérieur
Masquage
clip-path, mask-image
Media queries
Requête @media
Modes de fusion
multiply, screen, overlay, etc.
Nommage et formatage
À priori, nommer des éléments peut sembler facile.
Object-fit
contain, cover, fill
Opacity
Gérer l'opacité d'un élément.
Outline
border, width, style, color
Overflow
visible, hidden, auto, scroll
Padding
marge intérieur
Position
static, relative, absolute, fixed, sticky
Pseudo-classes
hover, active, visited, focus
Pseudo-classes avancées
:first-of-type, :only-of-type, :empty, :not, :has
Pseudo-classes intermédiaires
first-child, last-child, only-child, nth
Pseudo-éléments
::before, ::after
Responsive
Adaptation aux différents écrans
Sélecteurs
balise, #, ., combinaison, descendant
Sélecteurs avancés
groupes, *, >, ~, +, [attr]
Scroll-snap
scroll-snap-type, scroll-snap-align, scroll-padding
Spécificité
Chaque sélecteur en CSS se voit attribuer un pointage.
Text
align, decoration, transform, stroke, shadow
Transformation
translate, rotate, scale, skew, origin
Transition
passer d'un état A à un état B
Unités de couleur
hex, rgb, hsl, etc.
Unités de mesure
vw, vh, vmin, vmax, calc, min, max, clamp
Unités de mesure avancées
vw, vh, vmin, vmax, calc, min, max, clamp
Variables
::root, var(--varname)
Vertical-align
baseline, top, middle, bottom, super, sub
Width & Height
min-width/height, max-width/height
Z-index
Order d'apparition des éléments dans le flux