Éclipse totale de page
Ce que vous cherchiez est passé derrière la Lune. Il reviendra, mais pas ici.
Retour à l’accueilHTML + CSS404
404 Éclipse totale
Une page 404 où le zéro est la Lune qui masque le Soleil, avec une couronne tournante et un anneau de diamant.
Réglages
1x
Code
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>404 · Page introuvable</title>
<style>
body { margin: 0; background: #000; }
.n4-eclipse {
--accent: #f5c77e;
--k: 1;
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
container-type: size;
display: grid;
place-items: center;
background: #000;
color: #f5f5f7;
font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 1.4;
}
.n4-eclipse *,.n4-eclipse *::before,.n4-eclipse *::after {
box-sizing: border-box;
}
.n4-eclipse .n4-copy {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6cqmin;
width: 100%;
max-width: 680px;
padding: 0 6cqw;
}
.n4-eclipse .n4-title {
margin: 0;
font-size: clamp(17px,4.2cqmin,36px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
}
.n4-eclipse .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-eclipse .n4-tag {
font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.n4-eclipse .n4-cta {
margin-top: 1.8cqmin;
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.5em;
border-radius: 999px;
background: #f5f5f7;
color: #000;
font-size: clamp(13px,2.2cqmin,16px);
font-weight: 600;
text-decoration: none;
transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.n4-eclipse .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-eclipse .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-eclipse .n4-stars,.n4-eclipse .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-eclipse .n4-stars {
background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
opacity: .75;
animation: n4-eclipse-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-eclipse .n4-stars2 {
background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
opacity: .55;
animation: n4-eclipse-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-eclipse [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-eclipse-tw {
from {
opacity: .3;
}
}
@keyframes n4-eclipse-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-eclipse-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-eclipse *,.n4-eclipse *::before,.n4-eclipse *::after {
animation: none!important;
transition: none!important;
}
}
.n4-eclipse {
background: radial-gradient(90% 70% at 50% 42%,#0d0c14,#000 70%);
}
.n4-eclipse .n4-num {
margin: 0 0 1cqmin;
display: flex;
align-items: center;
font-size: clamp(84px,30cqmin,300px);
font-weight: 700;
letter-spacing: -.05em;
line-height: .9;
}
.n4-eclipse .n4-num b {
background: linear-gradient(180deg,#fff 15%,#57575c 95%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: n4-eclipse-rise calc(1.4s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
.n4-eclipse .n4-num b:last-child {
animation-delay: calc(.15s / var(--k));
}
.n4-eclipse .n4-moon {
position: relative;
width: .7em;
height: .7em;
margin: 0 .06em;
border-radius: 50%;
background: radial-gradient(circle at 42% 38%,#121214,#000 60%);
box-shadow: 0 0 0 .006em rgba(255,255,255,.95),0 0 .04em .012em #fff,0 0 .14em .03em color-mix(in srgb,var(--accent) 80%,#fff),0 0 .5em .12em color-mix(in srgb,var(--accent) 40%,transparent),0 0 1.1em .35em color-mix(in srgb,var(--accent) 16%,transparent);
animation: n4-eclipse-glow calc(6s / var(--k)) ease-in-out infinite;
}
.n4-eclipse .n4-moon::before {
content: "";
position: absolute;
inset: -.22em;
border-radius: 50%;
background: conic-gradient(from 20deg,transparent 0 6%,color-mix(in srgb,var(--accent) 55%,#fff) 10%,transparent 18% 40%,rgba(255,255,255,.55) 47%,transparent 55% 72%,color-mix(in srgb,var(--accent) 45%,#fff) 80%,transparent 88%);
-webkit-mask: radial-gradient(circle,transparent 54%,#000 57%,transparent 76%);
mask: radial-gradient(circle,transparent 54%,#000 57%,transparent 76%);
filter: blur(.018em);
opacity: .9;
animation: n4-eclipse-spin calc(18s / var(--k)) linear infinite;
}
.n4-eclipse .n4-moon::after {
content: "";
position: absolute;
top: 9%;
right: 11%;
width: .05em;
height: .05em;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 .05em .03em #fff,0 0 .22em .06em color-mix(in srgb,var(--accent) 70%,#fff);
animation: n4-eclipse-diamond calc(5s / var(--k)) ease-in-out infinite;
}
.n4-eclipse .n4-title,.n4-eclipse .n4-sub,.n4-eclipse .n4-cta {
animation: n4-eclipse-fade calc(1s / var(--k)) calc(.5s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-eclipse-rise {
from {
opacity: 0;
transform: translateY(.12em);
filter: blur(.04em);
}
}
@keyframes n4-eclipse-glow {
50% {
filter: brightness(1.25);
}
}
@keyframes n4-eclipse-diamond {
0%,100% {
opacity: .2;
transform: scale(.5);
}
45%,55% {
opacity: 1;
transform: scale(1.6);
}
}
</style>
</head>
<body>
<main class="n4-eclipse">
<div class="n4-stars" aria-hidden="true"></div>
<div class="n4-copy">
<p class="n4-num" aria-hidden="true"><b>4</b><span class="n4-moon"></span><b>4</b></p>
<h1 class="n4-title">Éclipse totale de page</h1>
<p class="n4-sub">Ce que vous cherchiez est passé derrière la Lune. Il reviendra, mais pas ici.</p>
<a class="n4-cta" href="/">Retour à l’accueil</a>
</div>
</main>
</body>
</html>
Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans 404
Où l’utiliser
Un visiteur qui tombe sur un lien cassé repart en quelques secondes. Une page 404 personnalisée qui mérite un regard vous fait gagner ces secondes, et le bouton le ramène vers votre accueil plutôt que chez un concurrent. Cette éclipse va bien à un studio photo, un cabinet d’architecture ou une marque qui aime les ambiances sombres et posées.
C’est une page complète en HTML et CSS : déposez le 404.html sur votre serveur et c’est réglé. Remplacez d’abord le doré par la couleur de votre marque, puis réécrivez le titre à votre façon. Si votre site est clair et joyeux, un autre modèle conviendra mieux.