He reunido toda una gama de diferentes pestañas (CSS) que puedes usar en tus proyectos web.
Tanto si buscas inspiración como si quieres aprender cómo se hace, seguro que encontrarás algo que te guste en este artículo.
Saltemos directamente, ¿de acuerdo?
1. Barra de pestañas animada
Una genial barra de pestañas CSS animada con iconos en los que se puede hacer clic.
Requiere un poco de JS pero nada difícil. Tendría que emparejar esta barra de pestañas con su propio contenido: bastante fácil simplemente determinando qué pestaña está activa y mostrando el texto correcto.
2. Pestañas CSS puras
Un gran ejemplo de cómo puede crear pestañas HTML efectivas con solo CSS y sin JavaScript. Este también será muy fácil de aprender.
Este tiene animaciones geniales para cuando cambias de pestaña. Tanto en la propia pestaña como en el contenido.
También utiliza etiquetas HTML para formar cada pestaña, muy simple.
3. Pestañas CSS que se pueden cerrar
Con un poco de ayuda de JS, puede crear un bonito conjunto animado de pestañas que se pueden cerrar.
Viene con una animación elegante cuando los cierras, ¡pruébalo!
Esta es más una plantilla, pero nos muestra cómo podemos crear pestañas que tengan más de un propósito.
4. Pestañas animadas de HTML y CSS
Un buen ejemplo de pestañas animadas usando solo HTML y CSS.
Diseño limpio y minimalista con bonitas animaciones flotantes en cada pestaña. Cuando cambia entre pestañas, usa un desvanecimiento/flash para cambiar el texto, muy elegante. El CSS también está muy bien organizado.
5. Pestañas CSS con indicador
Si está buscando crear pestañas CSS con íconos, esta es para usted.
Las pestañas animadas con un indicador pueden ser útiles para crear un diseño mínimo, pero el usuario aún sabe dónde están. Estas pestañas de CSS irían muy bien en la página de destino de un producto para explicar las diferentes características de un producto o servicio.
6. Fichas de tarjetas (CSS)
Pestañas CSS dentro de una tarjeta, con animación al cambiar de pestaña.
Requiere un poco de JS pero estos diseños de tarjetas son muy populares, son una buena manera de contener información con una imagen o icono.
Una tarjeta es una excelente manera de presentar información atractiva al usuario y una pestaña le permite maximizar el espacio.
7. Escalar pestañas animadas (CSS)
Pestañas CSS con una animación de escala y contenido de ejemplo.
Utiliza una animación elegante de zoom/escalado para hacer la transición entre el contenido de las pestañas. Tiene una sensación limpia y minimalista, cada pestaña tiene un efecto de desplazamiento antes de hacer clic. Este es puro HTML y pestañas CSS.
8. Pestañas de zoom animadas (CSS)
Pestañas animadas con un efecto de zoom en el contenido, pero este efecto no es molesto porque el fondo permanece estático, es solo el texto el que se acerca y se aleja. Las pestañas tienen sus propias animaciones geniales y efectos de desplazamiento.
Es genial ver un diseño de pestaña CSS y HTML diferente donde no están adjuntos al contenido. El pequeño espacio realmente da una sensación diferente, haciendo que el diseño se destaque.
9. Tarjeta de filtro de pestañas CSS
Una tarjeta HTML que usa CSS y JS para crear una selección de filtro de pestañas.
Otro gran ejemplo para ver cómo se puede filtrar el contenido que usa pestañas CSS para mostrar lo que se necesita. Las pestañas en sí mismas tienen un sutil efecto de desplazamiento y el contenido cambia sin animación, por lo que es muy ágil.
Puede usar este ejemplo para ver cómo se podría usar algo en el mundo real, ¡solo mire esos indicadores de estado en línea!
10. Pestañas CSS basadas en Flexbox
Pestañas CSS totalmente receptivas que funcionan sin JS.
Se reduce a pestañas de estilo acordeón en dispositivos móviles y pantallas pequeñas. Tiene una animación de desvanecimiento sutil cuando cambias entre las pestañas.
11. Pestañas planas simples (CSS)
Pestañas CSS simples pero efectivas con un estilo minimalista. Sin animaciones sofisticadas, solo un diseño limpio. Funciona bien y las pestañas tienen un efecto de desplazamiento mínimo. Perfecto para un sitio web de diseño plano.
12. Diseño mínimo de pestañas CSS
Pestañas de solo CSS mínimas y planas.
Efecto simple de pestaña flotante con cambio rápido de contenido. Aunque la elección del diseño y el color es muy mutua, esto podría cambiarse fácilmente para adaptarse a su propia marca/estilo. Esta pestaña de CSS y HTML está muy bien codificada.
13. Pestañas de altura variable (CSS)
Un buen ejemplo de pestañas CSS con altura de contenido variable.
Diseño limpio y minimalista para usar también. Utiliza una transición de desvanecimiento suave entre el contenido. Todo el elemento de la pestaña también utiliza un elegante efecto de desplazamiento de sombra, lo que le permite al usuario saber que está interactuando con él.
14. Conjunto de diferentes pestañas CSS
Una buena selección de diferentes pestañas CSS Pestañas sensibles, centradas y pegajosas, etc.
Este CodePen viene con una amplia gama de ejemplos de pestañas CSS, diferentes estilos, indicadores de pestañas y fondos. Requiere un poco de JS para funcionar, pero la pestaña activa se puede cambiar usando JS, excelente si necesita activar una pestaña de otro evento.
¡Echar un vistazo!
15. Pestañas centradas (CSS)
Pestañas CSS centradas sin JS.
Una transición de fundido simple entre el contenido de la pestaña y cada pestaña tiene su propio indicador cuando se selecciona según el color de fondo.
Este ejemplo de pestaña CSS encajaría muy bien en una página de destino o de producto, ayudando a maximizar el espacio en un área. Puede cambiar fácilmente los colores para que se ajusten a su marca/estilo.
Menú de pestañas CSS con contenido y formularios.
Utiliza una transición de desvanecimiento rápido entre el contenido de las pestañas y tiene una variedad de contenido de ejemplo dentro de cada una, que muestra cómo podría usarse en un sitio web real.
Excelente para aprender y adaptarse a su propia marca/estilo.
17. Pestañas CSS receptivas con íconos
Pestañas CSS totalmente receptivas con íconos que usan un diseño y diseño mínimos. Un buen indicador superior también en cada pestaña seleccionada. Un gran ejemplo de cómo se puede tener en cuenta la altura vertical.
18. Ejemplo de cartera de pestañas CSS
Una barra de pestañas CSS bien organizada que cambia el contenido a continuación al estilo de un sitio web de cartera.
Este ejemplo nos muestra cómo las pestañas CSS son extremadamente útiles en el mundo real, incluso los elementos reales en el contenido de la pestaña funcionan.
Cada tarjeta en el contenido de la pestaña tiene sus propias etiquetas y botones, incluso un efecto de desplazamiento para que aparezcan. Diseño muy impresionante y caso de uso en el mundo real. Utiliza una transición de animación de fundido para pasar de un contenido a otro.
También es un gran ejemplo para aprender cómo solo puede mostrar ciertos elementos con ciertas etiquetas usando JS.
Un fantástico menú de pestañas CSS que utiliza un encantador degradado como fondo.
Viene con un ejemplo de elementos de entrada de la interfaz de usuario que le permite ver cómo podría usarse en una aplicación web real. No hay transición entre el contenido de las pestañas, por lo que todo se siente muy rápido.
20. Pestañas receptivas que se reducen
Un ejemplo de pestaña HTML y CSS puro de un diseño receptivo que usa pestañas y un agradable menú deslizante animado.
Estas pestañas se reducirán a un menú de estilo móvil cuando la pantalla se vuelva demasiado pequeña. ¡Es muy impresionante que todo esto se haya logrado sin ningún JS! Las pestañas tienen un encantador efecto de desplazamiento y un indicador en la parte superior.
Llevar
Hemos visto algunos grandes ejemplos y cada uno ofrece algo diferente. Desde diseños receptivos hasta elegantes animaciones y transiciones CSS, hay algo para todos.
¡Toma estos ejemplos y adáptalos fácilmente a tu propia marca o estilo! Las pestañas son una excelente manera de mostrar mucho más contenido en un área o de crear un diseño de interfaz de usuario intuitivo.
¿Te gusta la idea de las pestañas pero te apetece algo un poco más diferente? ¿Tiene mucho contenido que desea mostrar pero necesita algo más flexible y llamativo? Como una sorprendente alternativa a las pestañas CSS, puede mostrar su contenido usando fullPage.js
Su navegador no soporta la etiqueta de vídeo.
FullPage.js es una biblioteca de JavaScript con todas las funciones que puede usar para crear sitios web desplazables a pantalla completa únicos y potentes. Con fullPage.js, creará rápidamente sitios altamente pulidos que están a la altura de los sitios web más impresionantes: ¡es una biblioteca que ya utilizan empresas de renombre como EA, Sony y eBay! –
Compatible con los últimos software y editores de sitios web como Gutenberg y Elementor, seguramente podrá crear algo único.
Artículos relacionados
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
