Seguramente habrás visto visitando algunos blog una forma bastante llamativa de resaltar ciertos mensajes. Creo que existe un plugin que nos permite hacer esto, por ejemplo el que se utiliza en el theme Redoable. Aunque ahora dejaremos el plugin de lado, para comenzar a personalizar nuestros propios mensajes llamativos. La idea es jugar con el texto y el contraste de fondo y dependiendo el mensaje a mostrar acompañarlo con un determinado icono.

Ver Demo - Descarga Ejemplos - Si desean mas iconos: FamFamFam

Css Alerta

PLAIN TEXT
CSS:
.alerta {
background: #fff6bf url(images/error.gif) 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;
color:#000000;
}

PLAIN TEXT
HTML:
<p class="alerta"> Texto Aqui</p>

 

Css Info

PLAIN TEXT
CSS:
.info {
background: #E7F9F8 url(images/info.gif) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #B5D4FE;
border-bottom: 2px solid #B5D4FE;
color:#000000;

}

PLAIN TEXT
HTML:
<p class="info"> Texto Aqui</p>

 

Css Descarga

PLAIN TEXT
CSS:
.descarga {
background: #FBC895 url(images/descargared.gif) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #F7AB75;
border-bottom: 2px solid #F7AB75;
color:#000000;

}
.descarga a {
color:#E15F13;
text-decoration:none;
border-bottom:1px dotted #E15F13;
}

PLAIN TEXT
HTML:
<p class="descarga"> Enlace <a href="www.xyberneticos.com">Descarga</a> archivo</p>

 

Css Descarga

PLAIN TEXT
CSS:
.descarga2 {
background: #F7FABE url(images/descarga.gif) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #DFE786;
border-bottom: 2px solid #DFE786;
color:#000000;

}
.descarga2 a {
color:#4B4B4B;
text-decoration:none;
border-bottom:1px dotted #444;
}

PLAIN TEXT
HTML:
<p class="descarga2"> Enlace <a href="www.xyberneticos.com">Descarga</a> archivo</p>

 

Css Importante

PLAIN TEXT
CSS:
.importante {
background: #FDD1C5 url(images/importante.gif) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #FBAB95;
border-bottom: 2px solid #FBAB95;
color:#000000;

}

PLAIN TEXT
HTML:
<p class="importante"> Texto aqui.</p>

 

Css Nota

PLAIN TEXT
CSS:
.nota {
background: #FAF9F7 url(images/nota.gif) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #F2EFEA;
border-bottom: 2px solid #F2EFEA;
color:#000000;

}

PLAIN TEXT
HTML:
<p class="nota"> texto aqui.</p>

 

Css Fuente

PLAIN TEXT
CSS:
.fuente {
background: #F7F9E5 url(images/via.gif) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #DBDCCD;
border-bottom: 2px solid #DBDCCD;
color:#000000;

}
.fuente a{
color:#4B4B4B;
text-decoration:none;
border-bottom:1px dotted #444;
}

PLAIN TEXT
HTML:
<p class="fuente">Fuente <a href="http://www.xyberneticos.com/">Xyberneticos</a></p>

 

Css Actualizacion

PLAIN TEXT
CSS:
.nuevo {
background: #fff6bf url(images/new.gif) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #FBC383;
border-bottom: 2px solid #FBC383;
color:#000000;
}
.nuevo a {
color:#E15F13;
text-decoration:none;
border-bottom:1px dotted #E15F13;
}

PLAIN TEXT
HTML:
<p class="nuevo">Actualizacion: En el siguiente <a href="http://www.xyberneticos.com/">post</a> bla bla bla bla</p>