Crear un mensaje de alerta con CSS

/ / Diseño

Crear un aviso o mensaje de alerta en tu página web con una hoja de estilo (CSS) es muy sencillo; tan sólo has de definir el estilo que quieres que tenga.

.alert {
	background: #fff6bf url(../exclamation.png) center no-repeat;
	background-position: 15px 50%; /* x-pos y-pos */
	text-align: left;
	padding: 5px 20px 5px 45px;
	border-top: 2px solid #ffd324;
	border-bottom: 2px solid #ffd324;
	}

Y en la página, deberás llamar a este mensaje utilizando un class=”alert” o el nombre que hayas decidido utilizar:

<p class="alert">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>

Dependiendo de la imagen que hayas utilizado, el resultado debería ser parecido a esto:
alerta

Deja un comentario