Gadgets y otras cosas de neón | Oloblogger Esto me pidieron que lo explicara hace tiempo, pero como es habitual en mí, han pasado meses hasta q...

7 de febrero de 2012

Gadgets y otras cosas de neón

Esto me pidieron que lo explicara hace tiempo, pero como es habitual en mí, han pasado meses hasta que lo he podido hacer. Se trata de una manera sencilla de hacer que los bordes de las distintas cajas de nuestro sitio tengan aspecto de luces de neón.

Esto se consigue con un fondo oscuro y la propiedad box-shadow que explicamos ayer.
Aquí un ejemplo del resultado para que podáis decidir si os interesa esto o queréis aprovechar vuestro tiempo en otra cosa.




Vamos a empezar por crear este tipo de bordes para los gadgets de la barra lateral, pero con el mismo sistema podemos "neonizar" cualquier caja.

Lo primero sería localizar la clase que controla esa caja que queremos remozar y en las plantillas de diseño (2006) esta es .widget. Hay varios gadgets distribuidos por toda la plantilla -incluyendo el que genera las entradas- así que si no queremos que todo tenga este efecto, tenemos que concretar un poco más e indicar adicionalmente cual es su contenedor. Por lo general, este es #sidebar-wrapper.


Una vez localizado, simplemente vamos a aplicar un borde de color y con el mismo tono, un box-shadow a esas cajas. Para que simule el halo combinamos una sombra exterior y otra interior (inset) con punto de origen 0,0 y un desenfoque (blur) grande. Además, para que ambas sean totalmente visibles, aplicamos un padding para dejar espacio. Como es habitual, utilizamos todas las propiedades compatibles con navegadores que no interpretan bien box-shadow:

#sidebar-wrapper {padding: 10px;}
.sidebar .widget {padding: 10px;}
.sidebar .widget {border: 2px solid #FFEA00;
-moz-box-shadow: 0 0 15px #FFEA00, inset 0 0 15px #FFEA00;
-webkit-box-shadow: 0 0 15px #FFEA00, inset 0 0 15px #FFEA00;
-goog-ms-box-shadow: 0 0 15px #FFEA00, inset 0 0 15px #FFEA00;
box-shadow: 0 0 15px #FFEA00, inset 0 0 15px #FFEA00;
}


Con idéntico código (cambiando color y desenfoque al gusto), podemos hacer lo mismo con la cabecera (#header-wrapper, #header) o con el cuerpo de las entradas (.post-outer, .post). Si el padding no os funciona en alguno, sólo tenéis que añadirle un !important tras el valor.


Un truco extra sería aplicar distinto color a cada gadget (o entrada) formando una secuencia, tal y como habéis visto en el ejemplo del principio. Esto se consigue con la pseudoclase nth-of-type, algo que ya vimos también de refilón en esta otra entrada.


El código sería de esta otra manera para que dar al primero un color amarillo, al segundo azul, al tercero violeta y así sucesivamente:

#sidebar-wrapper {padding:10px;}
.sidebar .widget {padding: 10px;}

.sidebar .widget:nth-of-type(3n-2) {
border: 2px solid #FFEA00;
-moz-box-shadow: 0 0 15px #FFEA00, inset 0 0 15px #FFEA00;
-webkit-box-shadow: 0 0 15px #FFEA00, inset 0 0 15px #FFEA00;
-goog-ms-box-shadow: 0 0 15px #FFEA00, inset 0 0 15px #FFEA00;
box-shadow: 0 0 15px #FFEA00, inset 0 0 15px #FFEA00;
}

.sidebar .widget:nth-of-type(3n-1) {
border: 2px solid #73A1BB;
-moz-box-shadow: 0 0 15px #73A1BB, inset 0 0 15px #73A1BB;
-webkit-box-shadow: 0 0 15px #73A1BB, inset 0 0 15px #73A1BB;
-goog-ms-box-shadow: 0 0 15px #73A1BB, inset 0 0 15px #73A1BB;
box-shadow: 0 0 15px #73A1BB, inset 0 0 15px #73A1BB;
}

.sidebar .widget:nth-of-type(3n) {
border: 2px solid #873AB6;
-moz-box-shadow: 0 0 15px #873AB6, inset 0 0 15px #873AB6;
-webkit-box-shadow: 0 0 15px #873AB6, inset 0 0 15px #873AB6;
-goog-ms-box-shadow: 0 0 15px #873AB6, inset 0 0 15px #873AB6;
box-shadow: 0 0 15px #873AB6, inset 0 0 15px #873AB6;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

9 comentarios :

  1. Hola, tengo una duda sobre la realización de este efecto y es la siguiente: ¿ me podrías indicar dónde, en que parte de la plantilla colocar los códigos ? y si ha de ser CON o SIN expandir artilugios?
    Perdona mi ignorancia pero el trabajar con la plantilla sin ayuda no es lo mío.
    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Es código CSS y por tanto, hay que ponerlo entre las etiquetas SKIN. No es necesario expandir artilugios.

      Si tienes el nuevo diseñador quizás las clases no coincidan con las que yo indiqué, por eso explico cómo hacerlo.

      Ver: CSS y HTML.

      Eliminar
  2. hola oloman, amigo necesito tu ayuda para añadir un gadget en un lugar en especifico, espero que me puedas ayudar.

    lo que sucede es que quiero integrar un gadget para que salga en medio del contenido de las entradas o debajo del titulo de las entradas y no puedo porque me tira error y como tu eres un experto en esto solisito tu ayuda porfavor.

    ResponderEliminar
    Respuestas
    1. Hola. El lugar más fácil sería debajo del título de las entradas. En la plantilla encontrarás un DIV con clase post-header (dos si contamos el CSS para móviles). Pues bien si metes el código dentro de esa caja, te debería funcionar.

      Eliminar
  3. no me funciona, mira http://4.bp.blogspot.com/-cEbQwA80gkc/U7zKQbCzM7I/AAAAAAAAAj8/sgWcE7B6gnU/s1600/olo.JPG

    me tira error tras error aunque ponga las etiquetas div

    ¿te dejo un link con la plantilla para que lo hagas? si puedes, ya que sabes exactamente lo que vas hacer no te quitara ni un minuto, please

    ResponderEliminar
    Respuestas
    1. Mira arriba de la captura. Lo que te falta es un </div>

      Bueno, realmente te faltan dos, uno para FOOTER y otro para FOOTER-WRAPPER. Deberían ir seguidos y justo tras el cierre de la SECTIO (</b:section>).

      Eliminar
  4. se logro guardar pero no funciono, intente barias veces pero cada vez que yo intentaba entrar al blog me salia un error, o mejor dicho se dañaba la plantilla.

    lo que en realidad quiero hacer es, mostral dos cosas dentro de las entradas para la version pc del blog y mostrar una sola dentro de las entradas version movil, y la unica manera en que puedo lograr eso es si añado un gadgets dentro de las entradas indicandole con mobile='no' que debe ocuartarse, y por otro lado no quiero hacerlo con display none porque no me lo permiten.

    si te sabes una forma de hacerlo, te pido de favor que me la hagas saber, te lo agardeceria un monton amigo.

    ResponderEliminar
    Respuestas
    1. Desde este lado no puedo ayudarte más Kelvin, pues todo eso es estructura y cada plantilla tiene la suya. En un principio deberías poder hacerlo como dices, pero teniendo en cuenta que en las entradas NO puedes meter gadgets. Puede que te refieras a otra cosa cuando dices "entradas". Y tampoco entiendo lo de que no puedas usar display:none;

      Lo cierto es que me vas dando la información incompleta y en cada comentario nuevo has ido añadiendo nueva y así tampoco puedo saber qué es lo que quieres hacer exactamente.

      Eliminar