Fiche Triche CSS & HTML

Copie-colle, modifie et expérimente !

🎨 Couleurs

Palettes prêtes à l'emploi

#ef4444

#f97316

#eab308

#22c55e

#3b82f6

#8b5cf6

#ec4899

#0f172a

/* Changer la couleur du texte */
color: #3b82f6;

/* Changer la couleur de fond */
background-color: #0f172a;

Dégradés

/* De gauche à droite */
background: linear-gradient(to right, #ef4444, #8b5cf6);

/* De haut en bas */
background: linear-gradient(to bottom, #3b82f6, #22c55e);

/* En diagonale, 3 couleurs */
background: linear-gradient(135deg, #f97316, #ec4899, #8b5cf6);

✏️ Texte

Taille, style et épaisseur

font-size: 24px;              /* taille */
font-weight: bold;            /* gras */
font-style: italic;          /* italique */
text-align: center;          /* centrer le texte */
text-transform: uppercase;    /* TOUT EN MAJUSCULES */
letter-spacing: 5px;          /* e s p a c e r  les lettres */
text-decoration: underline;   /* souligner */
text-decoration: none;        /* enlever le soulignement des liens */

Polices Google Fonts (à coller dans le <head>)

/* 1. Copie cette ligne dans le <head> de ton HTML */
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">

/* 2. Utilise-la dans ton CSS */
font-family: 'Pacifico', cursive;

Autres polices sympas à essayer : Permanent Marker, Press Start 2P, Protest Riot, Silkscreen, Bungee Shade

📦 Bordures & formes

border: 3px solid #3b82f6;       /* bordure bleue */
border: 3px dashed #ef4444;      /* bordure pointillée rouge */
border-radius: 20px;            /* coins arrondis */
border-radius: 50%;              /* cercle parfait ! */

🌑 Ombres

/* Ombre douce sur un bloc */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

/* Ombre colorée style "néon" */
box-shadow: 0 0 20px #3b82f6, 0 0 60px #3b82f6;

/* Ombre sur du texte */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

/* Texte néon */
text-shadow: 0 0 10px #ec4899, 0 0 40px #ec4899;

↔️ Espacement

padding: 20px;       /* espace INTÉRIEUR (entre le contenu et la bordure) */
margin: 20px;        /* espace EXTÉRIEUR (entre l'élément et ses voisins) */
margin: 0 auto;     /* centrer un bloc horizontalement */
max-width: 600px;   /* limiter la largeur d'un bloc */

Astuce : padding = coussin à l'intérieur, margin = marge à l'extérieur

🖼️ Images

Styliser une image

width: 50%;                /* moitié de la largeur */
width: 300px;              /* largeur fixe */
border-radius: 50%;         /* image ronde */
border-radius: 20px;        /* coins arrondis */
border: 5px solid gold;    /* cadre doré */

Filtres sur les images

filter: grayscale(100%);     /* noir et blanc */
filter: blur(5px);            /* flou */
filter: sepia(100%);          /* effet photo ancienne */
filter: brightness(150%);     /* plus lumineux */
filter: contrast(200%);       /* plus de contraste */
filter: hue-rotate(90deg);    /* changer les couleurs ! */
filter: saturate(300%);       /* couleurs ultra vives */

Images libres prêtes à coller

<!-- Paysage montagne -->
<img src="https://picsum.photos/id/29/800/400">

<!-- Forêt -->
<img src="https://picsum.photos/id/15/800/400">

<!-- Ville de nuit -->
<img src="https://picsum.photos/id/274/800/400">

<!-- Image aléatoire (change à chaque rechargement) -->
<img src="https://picsum.photos/800/400">

👆 Effets au survol (hover)

/* D'abord : ajouter la transition sur l'élément */
img {
  transition: all 0.3s ease;
}

/* Ensuite : dire ce qui change au survol */
img:hover {
  transform: scale(1.1);        /* zoom */
  filter: brightness(120%);    /* plus lumineux */
}

/* Lien qui change de couleur */
a:hover {
  color: #ec4899;
}

/* Bouton qui grossit */
h1:hover {
  transform: rotate(5deg) scale(1.05);
  color: gold;
}

Mets toujours transition sur l'élément de base (pas sur le :hover) pour que l'animation soit fluide dans les deux sens !

✨ Animations

Animation qui tourne en boucle

/* Définir l'animation */
@keyframes flotter {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* Appliquer à un élément */
h1 {
  animation: flotter 3s ease-in-out infinite;
}

/* Animation arc-en-ciel */
@keyframes arc-en-ciel {
  0%   { color: #ef4444; }
  25%  { color: #eab308; }
  50%  { color: #22c55e; }
  75%  { color: #3b82f6; }
  100% { color: #ef4444; }
}

h1 {
  animation: arc-en-ciel 4s linear infinite;
}

🧱 Balises HTML utiles

<!-- Titre (de h1 le plus gros à h6 le plus petit) -->
<h1>Mon gros titre</h1>
<h3>Un sous-titre</h3>

<!-- Paragraphe -->
<p>Du texte ici</p>

<!-- Texte en gras / italique -->
<strong>texte en gras</strong>
<em>texte en italique</em>

<!-- Lien -->
<a href="https://example.com">Clique ici</a>

<!-- Image -->
<img src="photo.jpg">

<!-- Liste -->
<ul>
  <li>Premier truc</li>
  <li>Deuxième truc</li>
</ul>

<!-- Bloc / conteneur (pour regrouper des éléments) -->
<div>
  <!-- tout ce que tu veux dedans -->
</div>

<!-- Ligne horizontale -->
<hr>

<!-- Retour à la ligne -->
<br>

😎 Emojis

Copie-colle directement dans ton HTML :

🚀 🎮 🎧 🎨 🔥 💜 ⚡ 🌙 🌈 👾 🎵 💀 🦄 ✨ 🍕 🏀 🎯 💎 🤖 🌍

Les emojis fonctionnent partout en HTML : dans les titres, les paragraphes, même dans les liens !

🖱️ Curseur personnalisé

/* Changer le curseur partout */
body {
  cursor: crosshair;
}

/* Autres curseurs : pointer, grab, wait, help, not-allowed, cell, move */

💡 Idées pour ta page

Fond qui couvre toute la page

body {
  background: linear-gradient(135deg, #0f172a, #1e1b4b, #0f172a);
  color: white;
}

Carte avec effet néon

.carte {
  background: #1e293b;
  border-radius: 20px;
  padding: 30px;
  border: 2px solid #3b82f6;
  box-shadow: 0 0 15px #3b82f6, 0 0 30px #3b82f655;
  transition: all 0.3s ease;
}
.carte:hover {
  box-shadow: 0 0 25px #8b5cf6, 0 0 50px #8b5cf655;
  border-color: #8b5cf6;
}

Texte avec dégradé

h1 {
  background: linear-gradient(90deg, #f97316, #ec4899, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Image ronde style avatar

img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid gold;
  object-fit: cover;    /* recadre sans déformer */
}