Estilizar una alerta con CSS

Autor: | Última modificación: 10 de noviembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

El desarrollo frontend se basa en la interacción entre los lenguajes de programación y de marcado HTML, JavaScript y CSS. Mientras los dos primeros se encargan de crear elementos y gestionar la lógica de sus comportamientos, respectivamente, CSS se encarga de diseñar el look de estos elementos en el navegador. En este post, te enseñaremos cómo estilizar una alerta con CSS para que siga la estética de tu proyecto web.

¿Qué haremos en este post?

En nuestros posts sobre crear un elemento personalizado en frontend y eliminar una alerta con click en frontend JavaScript, te hemos enseñado cómo crear una notificación que le dé feedback al usuario y que luego se pueda cerrar. Por el momento, esta alerta se ve de la siguiente manera:

Estilizar una alerta con CSS 1

A pesar de que la alerta anterior es funcional, la experiencia de usuario depende en gran medida no solo de la funcionalidad de sus elementos, sino también de su estética. Por ello, a continuación, te enseñaremos cómo estilizar una alerta con CSS para que se vea más agradable y siga los parámetros de diseño de tu web. Es decir, que se vea algo como las alertas que encuentras en la sección de message en la documentación de buefy.org.

¿Cómo estilizar una alerta con CSS?

El primer paso para estilizar una alerta con CSS es, claramente, crear un archivo .css. En nuestro caso, lo hemos llamado notification.css. Dentro de este archivo, lo primero que hacemos es seleccionar el elemento que queremos estilizar. Nosotros seleccionaremos el div en el que se encuentra nuestra alerta. A este div le hemos dado la propiedad class: notification, porque sabíamos que este identificador nos ayudaría después. Entonces, usamos la clase, abrimos llaves y empezamos a estilizar:

.notification {

}

Para aprender sobre las distintas propiedades de CSS, la lógica de este lenguaje de programación y seguir algunos ejercicios prácticos, te recomendamos explorar la etiqueta de CSS en la sección de desarrollo web de nuestro blog.

Una vez tengas creado tu archivo CSS, te recordamos enlazarlo a tu index.html para asegurarte de ver los cambios de estilo que estés ejecutando en tu navegador. Esto es fundamental para ir modificando los valores de propiedades según el aspecto que quieras en tu proyecto. Para enlazar nuestro archivo, hemos insertado la siguiente línea de código en la cabecera (etiqueta head) de nuestro index.html:

<link rel=»stylesheet» href=»notification.css»/>

Teniendo en cuenta que nosotros queremos estilizar una alerta con CSS de error cuadrada, usaremos las propiedades width y background-color para determinar la estética del fondo:

.notification {

width: 200px;

background-color: rgb (255, 67, 67)

}

Ahora, deberemos definir la apariencia del mensaje de la alerta. Para ello, usaremos propiedades que alteren la letra como color y font-size:

.notification {

width: 200px;

background-color: rgb (255, 67, 67);

color: white

font-size: 0.7 rem;

}

El siguiente paso es definir la relación entre el contenido de nuestra alerta y su contenedor. Para ello, usamos las propiedades padding y border:

.notification {

width: 200px;

background-color: rgb (255, 67, 67);

color: white

font-size: 1.5 rem;

padding: 0.5 rem;

border-radius: 0.2rem;

}

Gracias a estas propiedades, nuestra alerta se ve de la siguiente manera.

Estilizar una alerta con CSS 2

Ahora, deberemos ubicar el botón que nos permite cerrar nuestra alerta. Para ello, usaremos la propiedad position en .notification. Además, seleccionaremos el botón usando el comando .notification button para modificar su posición. A continuación, te mostramos los cambios que ejecutamos en nuestro código:

.notification {

width: 200px;

background-color: rgb (255, 67, 67);

color: white

font-size: 1.5 rem;

padding: 0.5 rem;

border-radius: 0.2rem;

position: relative;

}

.notification button {

position: absolute;

top: 5px;

right: 5px;

}

Las líneas de código anteriores nos han permitido estilizar una alerta con CSS que se ve de la siguiente manera:

Estilizar una alerta con CSS 3

Para continuar con el proceso, podrías usar propiedades para cambiar la letra y ubicación del mensaje, al igual que estilizar el botón aún más con las propiedades que te hemos mostrado para el div «notification».

¿Cuál es el siguiente paso?

Ahora que sabes cómo estilizar una alerta con CSS, te invitamos a seguir aprendiendo sobre este lenguaje de programación y sus posibilidades de diseño. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio donde aprenderás a desarrollar con herramientas y lenguajes como CSS, HTML y JavaScript. ¿Quieres aprender a estilizar todo tu frontend? ¡Matricúlate ya y conviértete en todo un experto en pocos meses!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!