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.

Transparencias en CSS3

Con la llegada de la nueva versión del estándar CSS (CSS3), tendremos muchísimas novedades, una de las más importantes y comentadas es la posibilidad de incluir valor para la opacidad de los colores, dicho de otra manera significa que se podrá especificar transparencias para los elementos, lo que puede dar mucho juego.

Para poder llevar a cabo la especificación de la transparencia, se ha añadido una nueva forma de indicar los valores de los colores, se trata de una extensión de la forma anterior rgb(R,G,B), que ahora queda rgba(R, G, B, A), teniendo que ser el valor de alpha(A) entre 0.0(total transparencia) y 1.0(total opacidad, valor por defecto). Un ejemplo de la misma sería:

.transparente {

color: rgb(0,0,0); // Color de letra negro, para IE

color: rgba(0,0,0, 1); // Color de letra negro, no transparencia

color: rgba(0,0,0, 0.5); // Color de letra negro, transparencia del 50%

background-color: rgb(256, 256, 256); // blanco, para IE

background-color: rgba(256, 256, 256, 0.5); // blanco, transparencia 50%

background-color: rgba(256, 256, 256, 0); // blanco, transparencia 100%

border: 1px solid rgb(128, 128, 128); // gris, para IE

border: 1px solid rgba(128, 128, 128, 0.6); // gris, transparencia 40%

}

Dicha forma de indicar los colores se permite para todas las especificaciones, ya sea color de fondo, de letra, de borde o cualquier otro.

Se puede ver un ejemplo del uso de transparencias en CSS dentro de las pruebas que realizo.

Para más información sobre las transparencias, lo mejor es buscar en la información oficial de la especificación de CSS3.

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.

Tamaños de las fuentes en html

Cuando uno se enfrenta a la realización de una página web y más concretamente al del diseño de la misma, una de las decisiones más importantes que se deben tomar en la misma, es la forma en la que se van a indicar los tamaños, y en concreto el de las fuentes.

Su importancia va más allá del simplemente estético, ya que una mala elección del tamaño de la fuente puede conllevar a que sea inaccesible para determinados tipos de personas o por lo menos que sea incomodo para el usuario de la misma, por lo que no es ni mucho menos para tomárselo a broma. Además, hay que tener en cuenta el comportamiento de los distintos navegadores con estas formas, así como el funcionamiento en temas de herencia de estas propiedades.

Para ayudar un poco con este tema voy a hacer un análisis pormenorizado de las distintas posibilidades, describiendo como se usan cada uno y, como no, como las tratan los navegadores. en concreto voy a hablar de las medidas en px, %, em y con el uso de palabras clave, dejando de lado el de pt ya que su uso es simplemente para impresión.

px

El px se usa como acompañamiento de un valor numérico y define el número de píxeles de alto que va a tener el texto que estemos indicando.

Es una de las medidas más precisas, pues 11 píxeles son 11 píxeles, pero también una de las menos recomendadas en los diseños accesibles, puesto que no permite al usuario configurar el tamaño de la letra y no todos los navegadores incluyen un zoom total (aunque si lo hacen casi todos lo modernos).

Los tamaños en píxeles no son heredados en cascada, pero si son tomados en cuenta en caso de usar las palabras clave en sucesores.

Aunque todos los navegadores toman está medida con el mismo alto, no todos la muestran igual puesto que difieren en la anchura de la letra.

%

El % se usa como acompañamiento de un valor numérico y define el tanto por ciento con respecto al tamaño base que debería tener, este tamaño base viene definido según la forma de heredar las propiedades de CSS y hay que tener especial cuidado con ello.

Un tanto por ciento mayor que 100 aumenta el tamaño de letra, mientras que uno menor lo reduce.

En caso de ser usado en un página, es recomendable usar un tamaño base para el body (y opcionalmente para otras etiquetas básicas) para poder tener un mayor control. Una de sus principales ventajas es que su tamaño se modifica en los navegadores antiguos (lease IE6 y anteriores).

em

El em se usa como acompañamiento de un valor numérico y su definición es una la más complicadas de todas, puesto que es algo ambigua, en teoría un 1em es el tamaño base del elemento, por defecto es 16px, pero en caso de modificar el tamaño de la fuente del body, este será el tamaño del em. Su valor se ve modificado en cascada y por tanto hay que tener cuidado con como se trata puesto que si se coloca el tamaño del párrafo a 1.3em y el de los elementos de listas li a 1.2em, un elemento de lista dentro de un párrafo tiene 1.3*1.2.

El valor numérico es tratado como un multiplicador del valor base y por tanto es parecido al uso de %, en concreto 1.5em ~= 150%, al menos en teoría.

Un uso clásico de esta propiedad es especificar el valor de la fuente del body a 62.5% (10px en teoría) y empezar a modificar el resto a partir de ahí.

Palabras clave

se trata de palabras concretas para el tratamiento de medidas, pueden ser: xx-small, x-small, small, medium, large, x-large, y xx-large y las medidas relativas larger y shorter.
Su comportamiento, según parece, es muy parecido en los distintos navegadores y por tanto puede ser una buena forma de trabajar para diseños sencillos poniendo un tamaño base y jugando con la palabras clave relativas.

Con toda esta información se puede comenzar un diseño web mucho mejor y avanzar más rápido siempre y cuando se haga un buen uso de la potencia de las distintas posibilidades.

Via: css-tricks.com