Frontend · Design · Code · Motion

L'Art
du Web

Un showcase complet des techniques frontend modernes — typographie, animations, layouts, composants et effets visuels réunis en un seul endroit.

CSS · Grid · Flexbox
Animations · Keyframes
Components · UX
Scroll
0
Sections
0
Composants
0
Animations
0
% Vanilla JS
01 — Typographie
Display Serif
Aa
Playfair Display · 900
Italic Serif
Élégance
Playfair Display · Italic
Sans-serif UI
Interface
Syne · 800
Monospace
const x = () => (
  "Frontend"
);
DM Mono · 300
Letterspacing
WEB
tracking: .4em
Prose éditoriale
« Le design n'est pas comment ça looks, c'est comment ça works. »
Playfair · Italic · line-height 1.8
02 — Couleurs & Dégradés
#0a0a0f — ink
#1e1e2a — smoke
#c9a84c — gold
#f0d080 — gold2
#c44b2b — rust
#2a7a78 — teal
#4a2f6e — violet
#f5f0e8 — paper
Dark Gold
Deep Teal
Violet Rust
Conic Full
Radial Mesh
Tricolore
03 — Animations CSS
Rotation
animation: spin 2s linear infinite
Pulse Scale
ease-in-out infinite
Wave Bars
staggered delay
Orbite
::after pseudo-element
Morph Shape
border-radius keyframes
Flip 3D
rotateY · preserve-3d
Bounce
cubic-bezier easing
Shimmer
background-position
Hello World!
Typewriter
steps() timing
04 — Layouts CSS
Flexbox · justify + wrap
display
flex
gap
wrap
align
justify
grow
shrink
CSS Grid · template-areas + span
grid-row: span 2
col 2
col 3
col 2
col 3
CSS Columns · Masonry-like
Item A
Item B
Item C
Item D
Item E
Item F
05 — Composants UI
Cards interactives
🎨
Design Système
Un système de design cohérent permet de construire des interfaces évolutives avec une identité visuelle forte.
Design CSS
Tabs
<div class="container">
 <h1>Hello World</h1>
</div>
.container { display: flex;
 gap: 1rem; padding: 2rem; }
const el = document.querySelector('.container');
el.classList.toggle('active');
Accordion
CSS Grid est un système de layout bidimensionnel qui permet de créer des mises en page complexes avec des lignes et des colonnes.
Flexbox est unidimensionnel (ligne ou colonne). Grid est bidimensionnel. Utilisez Flexbox pour des composants, Grid pour des layouts de page.
Block Element Modifier — une méthodologie de nommage CSS : .block__element--modifier pour une architecture scalable.
Toggles & Switches
Mode sombre activé
Notifications
Animations réduites
Barres de progression
HTML/CSS95%
JavaScript88%
Motion Design76%
TypeScript70%
Boutons & États
Badges & Tags
Frontend CSS Grid Animation Typography Flexbox Motion
06 — Effets Visuels
Glassmorphism
backdrop-filter: blur
Neon Glow
text-shadow: 0 0 30px
Gradient Border
wrapper + padding trick
Neumorphisme
box-shadow dual layers
Noise Texture
SVG feTurbulence
Particules Stars
Canvas 2D API
07 — Formulaires