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
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;
}
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;
}
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
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
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;
}
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;
}
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
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;
}
Loading ...
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 [...]