Resaltar mensajes mediante CSS

19

Resaltar mensajes mediante CSS

Publicado por Nikko el dia 19 Oct 2007 - Guardado en 209 Views CSS 209 Views

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

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;
}

HTML:

<p class="alerta"> Texto Aqui</p>

Css Info

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;
}

HTML:

<p class="info"> Texto Aqui</p>

Css Descarga

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;
}

HTML:

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

Css Descarga

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;
}

HTML:

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

Css Importante

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;
}

HTML:

<p class="importante"> Texto aqui.</p>

Css Nota

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;
}

HTML:

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

Css Fuente

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;
}

HTML:

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

Css Actualizacion

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;
}

HTML:

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

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!

comentarios

Aikora

19 - 10 - 2007

Permalink

Desde hace rato quiero implementar más estas clases, de hecho en el K2 viene el de .alert ya incluido, pero por alguna razón cuando los hago personalizados no me lo reconoce y en el post no se ven. Alguna idea?

De antemano gracias. Saludos Nikko.
Peloton69

19 - 10 - 2007

Permalink

Soy demasiado tonto como para hacerlo, podría haber una explicación mas sencilla ?
diarioTHC | Resaltar contenido mediante CSS

19 - 10 - 2007

Permalink

[...] Enlace: Resaltar mensajes mediante CSS [...]
Resalta una porción de texto mediante CSS

19 - 10 - 2007

Permalink

[...] XYBERNETICOS, nos comenta que cuando visitamos ciertos blog, seguro que hemos visto una forma bastante llamativa [...]
Ereignis-Anzeigen mit CSS - Das Internet lebt

19 - 10 - 2007

Permalink

[...] Leider ist die ganze Ressource in Spanish geschrieben, aber CSS sollte jeder lesen können! Die Ressource findet ihr hier. Jetzt bookmarken Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte [...]
Resaltar mensajes mediante CSS - Parte II « Xyberneticos

19 - 10 - 2007

Permalink

[...] recordaran este artículo en el cual hablamos sobre una sencilla técnica para resaltar mensajes mediante css, pues hoy desde [...]
Siguiendo la Estela » Blog Archive » Resaltar mensajes utilizando hojas de estilo

19 - 10 - 2007

Permalink

[...] por ello que me ha resultado muy interesante encontrar en el Blog de Xyberneticos cómo podemos destacar estos textos. También se hacen eco de una especie de 2ª parte publicada [...]