Diseño de cajas de mensaje en CSS, muy util en php

Diciembre 8th, 2008 | por jjeb™ |

Bueno esta información es para los que como yo somos un poco malos en cuanto a diseño y muchas veces estamos quebrándonos la cabeza para hacer que el mensaje o respuesta del sistema se vea de una manera agradable, y pues bueno les dejo una css que me encontré en la web hace ya un tiempo y que me ha sido de una gran ayuda, viene con un set de iconos que se encuentran en este sitio y algunos ejemplo de las salidas son las siguientes:


El código en css es el siguiente que me parece que es lo suficientemente claro:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/*Css para los mensajes..*/
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
width:400px;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}

Y la implementación es muy simple, acá un ejemplo:

Mensajes en css

1
2
3
4
5
6
7
8
9
10
11
12

 
Mensajes en css
<div class="error"><strong>Este es un error</strong></div>
<div class="info"><strong>Esta puede ser de información</strong></div>
<div class="success"><strong>Agregando un pequeña lista </strong>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
</div>
<div class="warning"> Otro ejemplo</div>

es cuestión de sólo llamar la clase.

Y bueno para terminar les dejo la descarga de la hoja de estilo y las imágenes con el set antes mencionado.

[Ver online] [Descargar]

Etiquetas: , , ,

  1. 4 Respuestas en “Diseño de cajas de mensaje en CSS, muy util en php”

  2. Por Darcon, Dic 22, 2008 | Responder

    Excelente, bastante intuitivo y agradable… muchas gracias!! sigue así

  3. Por jjeb™, Dic 22, 2008 | Responder

    @Darcon: Gracias …..:)

  4. Por carolina, Jul 13, 2009 | Responder

    no entiendoooooo nadaaaaaaa de nadaaaa

  5. Por carolina, Jul 13, 2009 | Responder

    no entiendoooooo nadaaaaaaa de nadaaaa

Publica un Comentario