Puedes recibir las actualizaciones gratis por email

Colección de cajas de mensajes CSS

caja-mensajes-css

Ya os enseñamos un recopilatorio de cajas hechas con CSS para incluir vuestros mensajes donde veíamos de que formas distintas podíamos resaltar mensajes con CSS. Esta vez queremos enseñar otras formas más originales para dicho propósito. Podemos descargar el código fuente de los estilos de los mensajes que vamos a analizar.

Aclaramos que todos los colores y tamaños pueden ser personalizados según vuestro gusto. Empezemos:

Caja de mensajes limpia

caja-mensaje-css1

Código HTML

<div class="clean-gray">Clean message box</div>

Código CSS

.clean-gray{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
}

Puedes usar colores pasteles claros para el fondo y colores pasteles oscuros para el borde.

Caja de mensaje con icono

caja-mensaje-css2

Un fondo que describe un determinado evento por medio de un icono y el color de fondo (alerta, error…). Es el tipo que usamos en la lista de cajas de mensajes anteriormente expuesta:

Código HTML

<div class="clean-gray">Clean message box</div>

Código CSS

.icon-heart{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}

Podemos usar estos iconos llamados Sweetie Pack:

sweetie

O ver la lista de iconos que tenemos en el blog.

Caja de mensaje sólida

caja-mensaje-css3

Código HTML

<div class="solid-green">Solid message box green</div>

Código CSS

.solid-green{
background:#008000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
}

Caja de mensajes con bordes redondeados alternados

caja-mensaje-css4

Código HTML

<div class="round-a-gray"><div>Alternated rounded borders message box</div></div>

Código CSS

.round-a-gray{
background:#444444 url(img/round_gray-left.png) left top no-repeat;
color:#FFFFFF;
text-align:center;
}
.round-a-gray div{
background:url(img/round_gray-right.png) right bottom no-repeat;
padding:4px;
}

Caja de mensajes con forma de mensaje de bocadillo

caja-mensaje-css5

Código HTML

<div class="tooltips-gray">Solid message box<div></div></div>

Código CSS

.tooltips-gray{

background:#444444;
color:#FFFFFF;
text-align:center;
padding-top:4px;
}
.tooltips-gray div{
background:url(img/tips_gray.png) left bottom no-repeat;
padding-top:4px;
height:18px;
}

Vía | Woork

Sigue la onda...

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!

Autor de CSSBlog ES

Por ahora hay 6 comentarios ¿Quieres opinar?

06.29.09

Interesante…
Me gustan, a ver como las puedo implementar.
Gracias,
y saludos !!

06.29.09

Claro y directo, muy bueno.

Por cierto, me sobran un par de divs cerrados al final del último ejemplo.
1. Solid message box

06.29.09

Ah, el segundo div es para el palito del bocadillo, ahora lo veo.

[...] Colección de cajas de mensajes CSS Ya os enseñamos un recopilatorio de cajas hechas con CSS para incluir vuestros mensajes donde veíamos de que formas distintas podíamos resaltar mensajes con CSS. Esta vez queremos enseñar otras formas más originales para dicho propósito. Po (tags: css caixa de mensagens) [...]

06.29.09

Pedro como vas en semanas pasadas tenias un diseño muy bacano por el cual llegue a tu blog, el diseño era sobre unas telas con letras cosidas, que mostraban y hablaban sobre estilos (CSS), una plantilla muy buena para un diseño que queria tener de referencia, es posible que me envies el link de donde lo bajaste o puedes colocarlo en tu blog de nuevo, gracias.

Edwin

06.29.09

Hola Edwin, el diseño de esa plantilla fue creado por mí, y por ahora no tengo intención de liberarlo.

Un saludo.

Escribir un comentario

Tu comentario:
* El nombre, email y el comentario son requeridos
Comentaristas del mes
Últimos comentarios
  • Boda: Gracias Pedro, lo probaré a ver si me funciona bien porque le iría perfecto a mi blog que...
  • drakkar: hola necesito centrar el menu dentro del div que lo contiene pero mira lo que pasa cuando hago esto: <...
  • Erik: Gracias muchas.. muy bueno!
  • Pedro CM: Ya veo que lo retwitteaste por Twitter, me alegro ;-) . My recent post Pack de 100000 tipografías...
  • JuniHH: Te agradezco muchismo el enlace de los bordes redondeados sin necesidad de JS's raros. Cuando...
Patrocinadores