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.
Antes de estilizar una alerta con CSS: Contexto
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:
A pesar de que la alertas html css 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 css 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 css 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.
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:
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”.
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!
