Categoría:

Ejemplos

Visita nuestra colección de ejemplos de CSS para diseñadores y desarrolladores. Aprende a crear diseños impresionantes con snippets prácticos y fáciles de seguir. Desde animaciones hasta layouts responsivos, encuentra inspiración y código listo para usar que elevará tus proyectos web al siguiente nivel.

Ajustar imagen a su contenedor con CSS Flexbox

por Xesús Álvarez - 21/03/2024

Este ejemplo ilustra la sección: Ajustar imagen a su contenedor con CSS Flexbox, de nuestro artículo Ajustar una imagen a su contenedor CSS. Al final del mismo encontrarás el código HTML y CSS utilizados. Para este ejemplo hemos creado tres celdas de diferentes tamaños, y en cada una de ellas hemos posicionado la misma imagen […]

Ajustar imagen a su contenedor con CSS Grid

por Xesús Álvarez - 21/03/2024

Este ejemplo ilustra la sección: Ajustar imagen a su contenedor con CSS Grid, de nuestro artículo Ajustar una imagen a su contenedor CSS Al final del mismo encontrarás el código HTML y CSS utilizados. Para llevarlo a cabo hemos creado tres celdas de diferentes tamaños y en cada una de ellas hemos posicionado la misma […]

Efectos de texto con CSS ::after y ::before

por Xesús Álvarez - 12/03/2024

Crear efectos vistosos usando los pseudo-elementos ::after y ::before en CSS puede ser muy divertido y útil para añadir detalles estéticos a tus elementos HTML sin necesidad de agregar más marcado HTML. Estos pseudo-elementos permiten decorar, añadir contenido, y crear formas o efectos visuales interesantes directamente desde CSS. Vamos a crear un ejemplo donde utilizaremos […]

CSS ::first-letter – Ejemplo práctico

por Xesús Álvarez - 12/05/2023

Para crear un ejemplo que utilice el pseudo-elemento ::first-letter en CSS, podemos definir un estilo que haga que la primera letra de un párrafo sea más grande, de un color diferente, o incluso utilice una fuente distinta. Este efecto es a menudo utilizado en revistas o libros para embellecer el inicio de las secciones o […]

CSS ::first-line – Ejemplo práctico

por Xesús Álvarez - 11/05/2023

Para aplicar estilos a la primera línea de un texto usando el pseudo-elemento ::first-line en CSS, puedes modificar la apariencia de esta línea para que se destaque del resto del texto. Esto puede ser útil para captar la atención del lector al principio de un párrafo o sección. En este ejemplo, la primera línea de […]

Botón retroiluminado con CSS :hover

por Xesús Álvarez - 12/04/2023

Para un ejemplo vistoso que utiliza solo el efecto de hover en CSS, vamos a crear un botón con un efecto de iluminación que se activa cuando pasas el cursor sobre él. Este efecto será tanto visualmente atractivo como funcional, perfecto para captar la atención de los usuarios. Pasa el cursor por aquí Este botón […]

Botón con mensaje oculto con CSS :hover y ::after

por Xesús Álvarez - 12/03/2023

Si buscas un efecto de :hover que destaque cuando se utiliza junto con ::after, podemos crear un botón que revela un mensaje o efecto visualmente atractivo desde debajo del borde inferior al pasar el cursor. Este efecto utiliza el pseudo-elemento ::after para crear una sensación de «deslizamiento» del contenido desde abajo, que se hace visible […]

Campo de formulario con CSS :focus

por Xesús Álvarez - 12/02/2023

Para un ejemplo vistoso que utiliza la pseudoclase :focus en CSS, crearemos un campo de formulario que, al enfocarse, no solo cambia visualmente de manera significativa, sino que también mejora la interactividad y la experiencia del usuario. Este ejemplo mostrará cómo un campo de texto puede transformarse y destacarse cuando el usuario se centra en […]