CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

Muchas veces ocurre, queremos resaltar algo y no sabemos con qué. Una imagen, no. colores brillantes, tampoco. ¿Por qué no usamos CSS? En esta entrada explicaremos como resaltar mensajes con CSS, poniendo ejemplos de hasta 8 formas.

Principalmente se basa en la mezcla del color del fondo, texto y bordes, es decir, la triple armonía. Todas tienen CSS y XHTML válido. Recordamos que la imagen de fondo debe ser el icono (podemos obtenerlos desde FamFamFam gratuitamente) :

1. Alerta

Código 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;
}

Código HTML

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

2. Info

Código 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;

}

Código HTML

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

3. Descarga

Código 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;
}

Código HTML

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

4. Descarga (II)

Código 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;
}

Código HTML

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

5. Importante

Código 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;

}

Código HTML

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

6. Nota

Código 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;

}

Código HTML

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

7. Fuente

Código 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;
}

Código HTML

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

8. Actualización

Código 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;
}

Código HTML

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

Estandarización

CSS 2.1 válido.

XHTML 1.0 Transitional válido.

Ejemplo y descarga

Podemos descargar todos los ejemplos o ver como funciona cada ejemplo online.

Nota final

Como siempre, podemos personalizarlo de la manera que queramos, no tienen porqué ser estos colores e iconos. Los iconos tienen licencia y debe enlazarse al autor (FamFamFam).

Vía | Xybernéticos