Bibliothèque

Ressources & codes

Composants CSS prêts à copier-coller avec aperçu live. Chaque snippet est autonome et directement utilisable dans vos projets.

Contraste Palette Ressources Jeux
29 composants
Bouton principal (sage)
CSS
.btn {
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .75rem 1.8rem;
  background: #4A5C44;
  color: #F5F2E8;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .3s cubic-bezier(.16,1,.3,1);
}
.btn:hover {
  background: #6A7C62;
  transform: translateY(-2px);
}
Bouton outline
CSS
.btn-outline {
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .7rem 1.7rem;
  background: none;
  color: #1A1814;
  border: 1px solid #1A1814;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-outline:hover {
  background: #1A1814;
  color: #F5F2E8;
}
Bouton ghost
CSS
.btn-ghost {
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .7rem 1.7rem;
  background: none;
  color: #78766E;
  border: 1px solid rgba(26,24,20,.12);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover {
  border-color: #1A1814;
  color: #1A1814;
}
Bouton flèche animée
CSS
.btn-arrow {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: #1A1814;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  transition: gap .3s cubic-bezier(.16,1,.3,1);
}
.btn-arrow:hover { gap: 1.1rem; }
Bouton pill
CSS
.btn-pill {
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .65rem 1.6rem;
  background: #4A5C44;
  color: #F5F2E8;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn-pill:hover {
  background: #6A7C62;
  transform: scale(1.03);
}
Bouton loading
CSSHTML
/* CSS */
.btn-loading { display: inline-flex; align-items: center; gap: .6rem; }
.spinner {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* HTML */
<button class="btn-loading">
  <span class="spinner"></span>
  Chargement…
</button>
Branding
Identité visuelle
Studio de direction artistique.
Carte simple
CSSHTML
.card {
  background: #ECEAE0;
  padding: 1.5rem;
  border: 1px solid rgba(26,24,20,.08);
}
.card-img {
  aspect-ratio: 16/9;
  background: #D8DDCF;
  margin-bottom: 1rem;
}
.card-cat {
  font-size: .52rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #4A5C44;
  margin-bottom: .4rem;
}
.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.2;
}
Maedeup Studio
Voir le projet ↗
Carte hover zoom image
CSS
.card { overflow: hidden; }
.card-img-wrap { overflow: hidden; }
.card-img {
  width: 100%; height: 100%;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.card:hover .card-img { transform: scale(1.06); }
.card-title { transition: color .2s; }
.card:hover .card-title { color: #4A5C44; }
✦
Direction artistique
Moodboard, supervision de campagnes et création d'univers visuels.
Carte dark
CSS
.card-dark {
  background: #1A1814;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .2s;
}
.card-dark:hover {
  border-color: rgba(74,92,68,.4);
}
.card-dark-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 300;
  color: #F5F2E8;
}
.card-dark-desc {
  font-size: .7rem;
  color: rgba(245,242,232,.45);
  line-height: 1.6;
}
L'image juste
Graphiste & DA · La Rochelle
Duo serif + label caps
CSS
/* Titre serif */
.title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 6vw, 7rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.025em;
}
.title em { font-style: italic; color: #4A5C44; }

/* Label caps */
.label {
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #B4B0A8;
}
Élégance
Texte dégradé (clip)
CSS
.text-gradient {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 300;
  font-style: italic;
  background: linear-gradient(135deg, #4A5C44, #1A1814);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
Lien avec soulignement progressif Texte avec barre au hover
Liens animés CSS
CSS
/* Soulignement progressif */
.link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size .35s cubic-bezier(.16,1,.3,1);
}
.link:hover { background-size: 100% 1px; }

/* Barre strike au hover */
.strike { position: relative; }
.strike::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: #4A5C44;
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.strike:hover::after { width: 100%; }
Input & select underline
CSS
.field {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(26,24,20,.15);
  padding: .5rem 0;
  font-family: inherit;
  font-size: .85rem;
  color: #1A1814;
  outline: none;
  width: 100%;
  transition: border-color .2s;
}
.field:focus { border-color: #1A1814; }
.field::placeholder { color: #B4B0A8; }
label {
  font-size: .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #B4B0A8;
}
J'accepte les CGC
Recevoir la newsletter
Checkbox CSS custom
CSSHTML
.checkbox { display: flex; align-items: center; gap: .8rem; cursor: pointer; }
.check-box {
  width: 18px; height: 18px;
  border: 1px solid rgba(26,24,20,.2);
  position: relative;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.check-box.checked {
  background: #4A5C44;
  border-color: #4A5C44;
}
.check-box.checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: 1.5px solid #fff;
  border-left: none; border-top: none;
  transform: rotate(40deg);
}
Identité visuelle
Reveal texte (slide up)
CSS
.reveal-wrap { overflow: hidden; }
.reveal-text {
  display: inline-block;
  animation: revealUp .8s cubic-bezier(.16,1,.3,1) forwards;
}
/* Avec JS + IntersectionObserver : */
.reveal-text { transform: translateY(105%); }
.reveal-text.visible {
  animation: revealUp .8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes revealUp {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}
Loaders CSS
CSS
/* Pulse */
.pulse {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #4A5C44;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,92,68,.5); }
  50%      { box-shadow: 0 0 0 14px rgba(74,92,68,0); }
}

/* Dots bounce */
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4A5C44;
  animation: bounce .8s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: .16s; }
.dot:nth-child(3) { animation-delay: .32s; }
@keyframes bounce {
  0%,80%,100% { transform: scale(.6); opacity: .4; }
  40%          { transform: scale(1);  opacity: 1;  }
}
✦ Scroll down
Progression
Float & barre de progression
CSS
/* Float */
.float { animation: float 3s ease-in-out infinite; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Progress bar */
.bar-track {
  height: 2px;
  background: rgba(26,24,20,.1);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: #4A5C44;
  transition: width .3s linear; /* JS: el.style.width = pct+'%' */
}

/* Scroll progress (JS) */
window.addEventListener('scroll', () => {
  const pct = window.scrollY /
    (document.body.scrollHeight - window.innerHeight) * 100;
  bar.style.width = pct + '%';
});
Branding — Identité visuelle — DA — Shopify — Branding — Identité visuelle — DA — Shopify —
Marquee / ticker
CSS
.marquee { overflow: hidden; }
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 24s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item { padding: 0 2.5rem; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* ⚠ Dupliquer le contenu ×2 pour le loop */
Disponible Nouveau Branding
En ligne
Badges & tags
CSS
.badge {
  font-size: .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .75rem;
}
.badge-sage    { background: rgba(74,92,68,.1); color: #4A5C44; }
.badge-dark    { background: #1A1814; color: #F5F2E8; }
.badge-outline { border: 1px solid rgba(26,24,20,.15); color: #78766E; }

/* Badge avec dot */
.badge-dot { display: inline-flex; align-items: center; gap: .4rem; }
.badge-dot::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor;
}
Survolez-moi
Conseil de typographe ✦
ou
Tooltip & séparateur
CSS
/* Tooltip */
.tooltip { position: relative; display: inline-block; }
.tooltip-content {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #1A1814; color: #F5F2E8;
  font-size: .6rem; padding: .4rem .8rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.tooltip:hover .tooltip-content { opacity: 1; }

/* Séparateur centré */
.divider { display: flex; align-items: center; gap: 1rem; }
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(26,24,20,.08);
}
.divider span {
  font-size: .52rem; letter-spacing: .2em;
  text-transform: uppercase; color: #4A5C44;
}
16:9
Une très longue ligne de texte qui sera tronquée avec des points de suspension
Aspect-ratio & tronquer
CSS
/* Aspect ratio natif */
.ratio-16-9  { aspect-ratio: 16/9; }
.ratio-4-3   { aspect-ratio: 4/3; }
.ratio-1-1   { aspect-ratio: 1; }
.ratio-4-5   { aspect-ratio: 4/5; }

/* Tronquer sur 1 ligne */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Tronquer sur N lignes */
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Grille éditoriale CSS
CSS
/* Grille fluide */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: rgba(26,24,20,.08);
}
.grid > * { background: var(--bg); }

/* 12 colonnes */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  padding: 0 clamp(1.5rem, 5vw, 3.5rem);
}

/* Masonry (CSS) */
.masonry { columns: 3 260px; column-gap: 1.5rem; }
.masonry > * { break-inside: avoid; margin-bottom: 1.5rem; }
Votre projet mérite mieux.
Bande CTA inline
CSS
.cta-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #1A1814;
  padding: 1.8rem 2rem;
}
.cta-strip-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #F5F2E8;
  flex: 1;
}
.cta-strip-btn {
  font-size: .58rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: #4A5C44;
  color: #F5F2E8;
  border: none;
  padding: .6rem 1.2rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.cta-strip-btn:hover { background: #6A7C62; }
Bouton badge & icône
CSS
/* Badge notification */
.btn-wrap { position: relative; display: inline-flex; }
.btn-badge {
  position: absolute; top: -8px; right: -8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #C07070; color: #fff;
  font-size: .5rem; display: flex;
  align-items: center; justify-content: center;
}

/* Bouton avec icône + slide */
.btn-icon {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.5rem; border: 1px solid #1A1814;
  background: none; cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-icon svg {
  width: 14px; stroke: currentColor; fill: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.btn-icon:hover { background: #1A1814; color: #F5F2E8; }
.btn-icon:hover svg { transform: translateX(3px); }
Bouton dégradé & underline CTA
CSS
/* Dégradé */
.btn-grad {
  background: linear-gradient(135deg, #4A5C44, #1A1814);
  color: #fff; border: none; padding: .75rem 1.8rem;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.btn-grad:hover { opacity: .85; transform: translateY(-2px); }

/* Underline CTA — texte + flèche */
.btn-underline {
  background: none; border: none; border-bottom: 1px solid #1A1814;
  padding: 0 0 2px; cursor: pointer; color: #1A1814;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: gap .3s cubic-bezier(.16,1,.3,1);
}
.btn-underline:hover { gap: .9rem; }
◈
Survolez-moi
Identité visuelle
Carte flip 3D
CSS
.flip-wrap { perspective: 600px; }
.flip-inner {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.flip-wrap:hover .flip-inner { transform: rotateY(180deg); }

.flip-face, .flip-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
}
.flip-face { background: #ECEAE0; }
.flip-back {
  background: #4A5C44; color: #F5F2E8;
  transform: rotateY(180deg);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-style: italic;
}
Maedeup Studio
Voir le projet ↗
Carte overlay reveal
CSS
.card { position: relative; overflow: hidden; }

.card-overlay {
  position: absolute; inset: 0;
  background: rgba(26,24,20,.82);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem;
  transform: translateY(100%);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.card:hover .card-overlay { transform: translateY(0); }

.card-overlay-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-weight: 300;
  color: #F5F2E8; font-style: italic;
}
.card-overlay-link {
  font-size: .52rem; letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245,242,232,.6);
}
"

Un résultat au-delà de mes attentes — une identité qui me ressemble vraiment.

Camille M. — Fondatrice
Carte témoignage
CSS
.card-testi {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1.5rem;
  position: relative;
}
.testi-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem; color: rgba(74,92,68,.25); line-height: .8;
}
.testi-text {
  font-size: .78rem; font-style: italic;
  color: var(--sub); line-height: 1.7; margin: .5rem 0 1rem;
}
.testi-author { display: flex; align-items: center; gap: .7rem; }
.testi-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #CDDCD0, #4A5C44);
}
.testi-name {
  font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
Déplacez la souris dans la zone
Survolez ↗
Curseur Encre — Point + anneau décalé
CSSJS
/* chargement... */