Resaltar mensajes mediante CSS
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;
-
}
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;
-
}
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;
-
}
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:
Aikora said,
Wrote on October 20, 2007 @ 0:28
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 said,
Wrote on October 20, 2007 @ 6:20
Soy demasiado tonto como para hacerlo, podría haber una explicación mas sencilla ?
diarioTHC | Resaltar contenido mediante CSS said,
Wrote on October 20, 2007 @ 11:58
[...] Enlace: Resaltar mensajes mediante CSS [...]
Resalta una porción de texto mediante CSS said,
Wrote on October 22, 2007 @ 7:22
[...] XYBERNETICOS, nos comenta que cuando visitamos ciertos blog, seguro que hemos visto una forma bastante llamativa [...]
Ereignis-Anzeigen mit CSS - Das Internet lebt said,
Wrote on February 8, 2008 @ 7:15
[...] 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 said,
Wrote on March 25, 2008 @ 21:00
[...] 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 said,
Wrote on March 26, 2008 @ 15:10
[...] 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 [...]