Sombras en CSS3

Como ya he dicho en alguna ocasión anterior, CSS3 va a traer muchos cambios, entre ellos algunas propiedades muy interesantes que van a facilitar ciertas labores que antes eran difíciles de hacer.

En este caso hablo de las sombras, que aunque no sea una de las cosas más usadas, si puede llegar a ser interesante en determinados diseños, como por ejemplo la sombra de la cabecera o de un objeto concreto para darle sensación de volumen.

Todo este se conseguirá en CSS3 con las propiedades text-shadow y box-shadow, para dar sombra a texto y cajas respectivamente.

Algunos navegadores ya tienen implementada cierta funcionalidad de CSS3 y por tanto se puede ver ejemplos en funcionamiento.

En general las dos propiedades tienen un comportamiento parecido, en ambas hay que indicar en el valor de la sombra su desplazamiento lateral, el vertical, así como el valor de lo “borroso” de la sombra (blur) y el color de la misma (que puede ir al principio o al final). Además se permite la inclusión de varias sombras por cada elemento.

El código para las sombras de dos elementos (texto y caja) podrían ser:

.texto {
   //Sombra hacia derecha, arriba,  color negro, poco difuminada
   text-shadow: 10px -10px 2px rgb(0,0,0)
}

.caja {
   //Sombra hacia izquierda, abajo,  color negro, algo difuminada
   box-shadow: -10px 10px 10px rgb(0,0,0)
}

Donde se podría modificar cualquiera de los parámetros al gusto hasta encontrar algo que se asemeje a lo que se busca

Tutorial de posicionamiento CSS

Si estás aprendiendo CSS (o convirtiéndote en un experto) y tienes algún tipo de problema o te cuesta entender la forma de posicionar elementos con CSS, hay un tutorial de 10 “pasos” que te puede ayudar y mucho, puesto que tiene todas las posibilidades perfectamente explicadas y con unos ejemplos con los que no te costará nada entender como funciona.

Está en Inglés pero se entiende perfectamente.

Modificar la clase de un elemento con JavaScript

Supongo que la mayor parte de la gente ya sabe más o menos como hacerlo, y si no, hay miles de plugins y/o librerías javascript para hacerlo de una forma fácil y sin complicarse la vida. Pero para aquellos que tienen las ganas de hacerlo por ellos mismos y no han conseguido dar con la solución, voy a escribir un pequeño tutorial sobre como modificar la clase de un elemento con javascript.

El punto de partida es entender la idea: se pretende modificar la clase, el atributo class de un elemento de una página html. ¿Para que?, se preguntarán algunos: es bien sencillo, hay veces que resulta útil para poder modificar el estilo del elemento por uno prefijado de antemano y para ello es más fácil modificar su clase por una ya previamente creada y correctamente definida en un documento de hoja de estilo.

Para poder realizar dicha modificación es necesario poder acceder al elemento que queremos modificar, para ello hacemos uso de la función getElementById de JavaScript, que permite acceder a cualquier elemento del documento a través del atributo id. Su uso es algo como:

 document.getElementById('id');

Donde ‘id’ es el atributo id del elemento sobre el que se quiere acceder.

Una vez accedemos al elemento, podemos realizar diferentes acciones sobre el mismo, desde leer su contenido (a través de innerHTML) a modificar diversos aspecto.
Para realizar la modificación de la clase del elemento, se hace uso del atributo class del elemento devuelto por la anterior función, en concreto se podría modificar de la siguiente manera:

document.getElementById('id').className = "nuevoClass";

Donde “nuevoClass” representa el nuevo nombre de la clase que se le quiere dar al elemento.

Se puede realizar modificaciones más complejas, accesos y muchas más cosas por lo que recomiendo jugar un poquito para poder ver que es lo que nos interesa y que es lo que somos capaces de realizar.

Si te interesa este tema, puedes leer mucho más sobre el la modificación del DOM HTML con JavaScript en el manual del w3school.