Bueno aqui traigo unos truquitos para que sepan como resaltar mensajes de una forma bonita


Texto por encima de la pagina o antes del codigo

Código:

<style type="text/css"> .alerta { background: #fff6bf url(http://xyberneticos.com/demos/Mensajes_css/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; } </style>

Donde quieres que resalte el texto

Código:

<p class="alerta">El texto</p>

Texto por encima de la pagina o antes del codigo

Código:

<style type="text/css"> .info { background: #fff6bf url(http://xyberneticos.com/demos/Mensajes_css/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 #ffd324; border-bottom: 2px solid #ffd324; color:#000000; } </style>

Donde quieres que resalte el texto

Código:

<p class="info">El texto</p>

Texto por encima de la pagina o antes del codigo

Código:

<style type="text/css"> .importante { background: #fff6bf url(http://xyberneticos.com/demos/Mensajes_css/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 #ffd324; border-bottom: 2px solid #ffd324; color:#000000; } </style>

Donde quieres que resalte el texto

Código:

<p class="importante">El texto</p>

Texto por encima de la pagina o antes del contenido

Código:

<style type="text/css"> .fuente { background: #F7F9E5 url(http://xyberneticos.com/demos/Mensajes_css/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; } </style>

Donde quieres que resalte el texto

Código:

<p class="fuente">Fuente <a href="#">Mi fuente</a></p>

Texto por encima de la pagina o antes del contenido

Código:

<style type="text/css"> .descarga { background: #FBC895 url(http://xyberneticos.com/demos/Mensajes_css/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; } </style>

Donde quieres que resalte el texto

Código:

<p class="descarga"> Enlace <a href="#">Descargar</a> </p>

Texto por encima de la pagina o antes del contenido

Código:

<style type="text/css"> .nota { background: #FAF9F7 url(http://xyberneticos.com/demos/Mensajes_css/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; } </style>

Donde quieres que resalte el texto

Código:

<p class="nota">Mi texto.</p>

Texto por encima de la pagina o antes del contenido

Código:

<style type="text/css"> .nuevo { background: #fff6bf url(http://xyberneticos.com/demos/Mensajes_css/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; } </style>

Donde quieres que resalte el texto

Código:

<p class="nuevo">Actualizacion: En el siguiente <a href="#">post</a>bla bla bla</p>

Fuente: http://xyberneticos.com/
Editado: http://virkings.es.tl/