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

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

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:

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

Caja de mensaje sólida

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

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

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

Compartir/Guardar