Toma 404 de 404
Esta foto ha salido movida.
Hemos enfocado en todas partes y la página no aparece en el encuadre. Volvamos a la galería.
Ir a la galeríaHTML + CSS404
404 Estudio de fotografía
El visor de una cámara busca el enfoque: el 404 se enfoca, el punto AF se pone verde y salta el flash.
Ajustes
1x
Código
<!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 · Página no encontrada</title>
<style>
body { margin: 0; background: #000; }
.n4-photo {
--accent: #a3e635;
--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-photo *,.n4-photo *::before,.n4-photo *::after {
box-sizing: border-box;
}
.n4-photo .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-photo .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-photo .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-photo .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-photo .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-photo .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-photo .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-photo .n4-stars,.n4-photo .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-photo .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-photo-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-photo .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-photo-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-photo [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-photo-tw {
from {
opacity: .3;
}
}
@keyframes n4-photo-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-photo-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-photo *,.n4-photo *::before,.n4-photo *::after {
animation: none!important;
transition: none!important;
}
}
.n4-photo {
background: #050505;
color: #fafafa;
}
.n4-photo .n4-vf {
position: relative;
width: min(82cqmin,580px);
aspect-ratio: 3/2;
margin-bottom: 1.5cqmin;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 1cqmin;
background: radial-gradient(60% 70% at 50% 50%,#3f3f46,#18181b 80%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.n4-photo .n4-grid {
position: absolute;
inset: 0;
background: linear-gradient(90deg,transparent 33.2%,rgba(255,255,255,.18) 33.3% 33.5%,transparent 33.6% 66.5%,rgba(255,255,255,.18) 66.6% 66.8%,transparent 66.9%),linear-gradient(transparent 33.2%,rgba(255,255,255,.18) 33.3% 33.5%,transparent 33.6% 66.5%,rgba(255,255,255,.18) 66.6% 66.8%,transparent 66.9%);
}
.n4-photo .n4-vf::before {
content: "";
position: absolute;
inset: 4%;
background: linear-gradient(#fff,#fff) 0 0/6% 2px,linear-gradient(#fff,#fff) 0 0/2px 9%,linear-gradient(#fff,#fff) 100% 0/6% 2px,linear-gradient(#fff,#fff) 100% 0/2px 9%,linear-gradient(#fff,#fff) 0 100%/6% 2px,linear-gradient(#fff,#fff) 0 100%/2px 9%,linear-gradient(#fff,#fff) 100% 100%/6% 2px,linear-gradient(#fff,#fff) 100% 100%/2px 9%;
background-repeat: no-repeat;
opacity: .8;
}
.n4-photo .n4-subj {
font: 800 clamp(40px,20cqmin,150px)/1 -apple-system,system-ui,sans-serif;
letter-spacing: -.05em;
color: #f4f4f5;
animation: n4-photo-focus calc(4s / var(--k)) ease-in-out infinite;
}
.n4-photo .n4-af {
position: absolute;
width: 16%;
aspect-ratio: 1;
border: 2px solid #fafafa;
border-radius: .3cqmin;
animation: n4-photo-af calc(4s / var(--k)) steps(1) infinite;
}
.n4-photo .n4-top,.n4-photo .n4-info {
position: absolute;
left: 6%;
right: 6%;
display: flex;
justify-content: space-between;
font: 600 clamp(8px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
color: #e4e4e7;
}
.n4-photo .n4-top {
top: 7%;
}
.n4-photo .n4-info {
bottom: 7%;
}
.n4-photo .n4-bat {
width: 2.4em;
height: 1.1em;
border: 1.5px solid currentColor;
border-radius: .2em;
background: linear-gradient(90deg,currentColor 0 60%,transparent 60%) 2px 2px/calc(100% - 4px) calc(100% - 4px) no-repeat;
}
.n4-photo .n4-flash {
position: absolute;
inset: 0;
background: #fff;
opacity: 0;
animation: n4-photo-flash calc(4s / var(--k)) ease-out infinite;
}
.n4-photo .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.02em;
}
.n4-photo .n4-cta {
background: var(--accent);
color: #0a0a0a;
}
@keyframes n4-photo-focus {
0%,8% {
filter: blur(14px);
}
22% {
filter: blur(3px);
}
30% {
filter: blur(8px);
}
44%,82% {
filter: blur(0);
}
100% {
filter: blur(14px);
}
}
@keyframes n4-photo-af {
0% {
border-color: #fafafa;
opacity: 1;
}
20% {
opacity: .4;
}
30% {
opacity: 1;
}
44% {
border-color: var(--accent);
box-shadow: 0 0 1.4cqmin var(--accent);
}
84% {
border-color: #fafafa;
box-shadow: none;
}
}
@keyframes n4-photo-flash {
0%,62% {
opacity: 0;
}
63% {
opacity: .9;
}
70%,100% {
opacity: 0;
}
}
@media (prefers-reduced-motion:reduce) {
.n4-photo .n4-flash {
display: none;
}
}
</style>
</head>
<body>
<main class="n4-photo">
<div class="n4-copy">
<div class="n4-vf" aria-hidden="true" translate="no">
<i class="n4-grid"></i>
<span class="n4-top"><b>RAW</b><b>AF-S</b><b class="n4-bat"></b></span>
<b class="n4-subj">404</b>
<i class="n4-af"></i>
<span class="n4-info"><b>f/4.04</b><b>1/404</b><b>ISO 404</b><b>[ 404 ]</b></span>
<i class="n4-flash"></i>
</div>
<span class="n4-tag">Toma 404 de 404</span>
<h1 class="n4-title">Esta foto ha salido movida.</h1>
<p class="n4-sub">Hemos enfocado en todas partes y la página no aparece en el encuadre. Volvamos a la galería.</p>
<a class="n4-cta" href="/">Ir a la galería</a>
</div>
</main>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Ver todos: 404Dónde usarlo
Fotógrafos, estudios y laboratorios reconocerán esta pantalla al instante. El visor de una cámara con marcas en las esquinas, cuadrícula de tercios, indicadores RAW y AF-S y un icono de batería encuadra un 404 enorme. El objetivo busca el enfoque, se pasa y se asienta, el recuadro de autofoco se pone verde al fijar y el flash lanza un destello blanco antes de volver a empezar.
Los datos de exposición de abajo se suman al chiste con f/4.04, 1/404 e ISO 404. Todo es CSS, el flash desaparece con movimiento reducido y el verde lima marca el enfoque y el botón. Enlaza el botón a tu galería o portfolio.