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.
Flexbox introduction
flex-direction, justify-content, align-items, align-self
Flexbox avancé
flex-wrap, align-content, flex, flex-flow
Flexbox - Figma Auto Layout
Devmode dans Figma, Auto Layout et Flexbox
Flexbox intermédiaire
figma dev mode et flexbox, flex-grow, flex-shrink, flex-basis, order
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
Imbrication CSS
Qu'est-ce que l'imbrication CSS (CSS Nesting) ?
Imbrication CSS (intro)
Qu'est-ce que l'imbrication CSS (CSS Nesting) ?
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 d'état
:hover, :active, :visited, :focus
Pseudo-classes avancées
:first-of-type, :only-of-type, :empty, :not, :has
Pseudo-classes de descendance (child)
:first-child, :last-child, :only-child, :nth-child
Pseudo-éléments
::before, ::after
Responsive
Adaptation aux différents écrans
Résumé CSS
Notions CSS vues en Web 1.
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
Typographie avancée
hiérarchie des textes, ...
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