Menú de titulares que se parten en dos
Enlaces enormes que al pasar el ratón o enfocarlos se cortan por la mitad y se separan para dejar ver una línea escondida.
Ajustes
Código
<nav class="uvq14-slc" aria-label="Menú principal"><a href="#"><span class="n" aria-hidden="true">01</span><span class="w"><span class="b">Proyectos</span><span class="t" aria-hidden="true">Proyectos</span><span class="m">Doce casos reales</span></span></a><a href="#"><span class="n" aria-hidden="true">02</span><span class="w"><span class="b">Estudio</span><span class="t" aria-hidden="true">Estudio</span><span class="m">Seis personas, un taller</span></span></a><a href="#"><span class="n" aria-hidden="true">03</span><span class="w"><span class="b">Contacto</span><span class="t" aria-hidden="true">Contacto</span><span class="m">Respondemos en un día</span></span></a></nav>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 Texto y scroll
Ver todos: Texto y scrollDónde usarlo
Los menús grandes en mayúsculas son habituales en webs de estudio, y este añade un corte: cada palabra se dibuja dos veces con recortes complementarios, así que al pasar el ratón la mitad superior y la inferior se separan con colores distintos y aparece un pequeño texto en el hueco. Los enlaces siguen siendo anclas normales con nombres legibles. Encaja en navegación de portfolios, menús de agencia e índices editoriales.
Escribe el primer elemento en el campo de texto y edita los demás y sus textos en el HTML. El color principal pinta la mitad superior y el texto escondido, y el secundario la mitad inferior. El foco con teclado provoca el mismo corte que el cursor.