♡ 3☆ Gadgets y otras cosas de neón

3 Compartir en Facebook Compartir en Twitter Enviar entrada por correo Imprimir artículo

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?