Gadgets y otras cosas de neón – Seguro ~ CosasParaMiBlogs

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 propiedadbox-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, unbox-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 unpadding para dejar espacio. Como es habitual, utilizamos todas las propiedades compatibles con navegadores que no interpretan bienbox-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 elpadding 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 pseudoclasenth-of-type, algo que ya vimos también de refilón enesta 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;
}

CosasParaMiBlogs

martes, 7 de febrero de 2012

Gadgets y otras cosas de neón – Seguro

Popular Posts

Blogger news

Labels

Blog Archive