Lo que vendrá...

22 Julio 2010
Posted in Tips

Estupendo vídeo de lo que nos podemos encontrar en un futuro no muy lejano:

(F) http://branitvfx.com/

Transparencias con CSS

23 Mayo 2010
Posted in Resúmenes

Cada navegador tiene una manera distinta de implementar la transparencia de un elemento. Para poder utilizar esta propiedad debemos conocer los tipos de transparencia que podemos usar con CSS. Son estos:

Declarando la clase .tranasparente posteriormente la podemos usar donde la necesitemos en el código HTML. Es habitual usarla para imágenes con enlaces, que al pasar el ratón por encima (pseudo-clase :hover) se vuelven opacas, mientras tanto están semitransparentes, ejemplo:

La Tipografía con CSS

23 Mayo 2010
Posted in Resúmenes

La fuente juega un papel fundamental en el diseño de nuestro sitio Web. De ella depende que un potencial lector siga leyendo o abandone la página porque le resulte demasido incómoda para poder leerla ("percepción del observador").

Algunas veces nos encontramos con un tipo de fuente que nos resulta bonita, si la utilizamos en nuestro sitio Web probablemente sólo nosotros la vemos así pues depende de que dicho "tipo de fuente" esté disponible en el sistema del que está visualizando la página.

Hay una lista de tipografías estándares que todos los navegadores saben interpretar, pero que pasa con el resto de tipografías, ¿podemos utilizarlas?. La respuesta es sí, salvando algunos inconvenientes técnicos y de copyright.

Usando una propiedad @font-face de CSS3:

La propiedad @font-face es muy útil para definir en un sitio Web una fuente que el usuario no tenga instalada en su ordenador. El método consiste en subir la fuente que queremos utilizar a nuestro sitio Web y definirla utilizando CSS.

Para el tipo de fuente se pueden usar el formato TrueType (.tff) o OpenType (.otf) y hay muchos sitios donde podemos descargar gratuitamente fuentes de los dos formatos, algunos de éstos son: http://www.sostars.com/ , http://www.1001freefonts.com/ , etc...

La propiedad @font-face está soportada por Firefox 3.5.x, IE7+, Safari 3+ y 4+

En este ejemplo vemos como aplicar 4 tipos de fuentes "no estándar" en cada uno de los ítems del ejemplo que utilicé para implementar el menú con CSS.

Lo primero es declarar la nueva fuente utilizando la propiedad @font-face y dos atributos necesarios: font-family y src, en este último debemos indicar la ubicación (ruta) del archivo de la fuente, si fuera necesario, en este caso está en una carpeta llamada fonts. De esta forma el navegador la descarga y la asocia para que se pueda mostrar.

En segundo lugar debemos usar la propiedad font-family en la clase o ID donde la vamos a aplicar. Aquí tenéis el código completo de este ejemplo:

El menú con CSS

15 Mayo 2010
Posted in Resúmenes

Hay varias formas de implementar un menú en una página Web utilizando reglas CSS, auque lo más común es modificando las propiedades de las listas desordenadas, etiqueta  <ul> ... </ul>  y sus ítems  <li> ... </li>  y empleando la etiqueta de enlace  <a> ... </a> .

En primer lugar debemos distinguir entre menú horizontal y menú vertical. Tanto uno como el otro son semejantes salvo en el detalle de la posición en la que se muestran en la página.

El primer paso es distinguir la lista que formará el menú de las listas normales, para ello creamos  un selector ID llamado #menu.

Añadiendo / Suprimiendo la línea  float: left;  de la regla #menu li conseguimos un menú horizontal ( si la ponemos) o vertical ( si la quitamos). Evidentemente luego debemos posicionar el menú en el lugar que deseemos. En el ejemplo siguiente el menú es horizontal. Si queremos que quede por encima de la cabecera debemos añadir la propiedad clear: both; a ésta. Ver Ejemplo.

Modificando los estilos de cada elemento del menú y utilizando imágenes de fondo y las pseudo-clases :hover y :active, se pueden crear menús horizontales complejos, ejemplos de esto los puedes encontrar en esta dirección  http://exploding-boy.com/  : Ejemplos1, Ejemplos2.

Además existen otros muchos menús diferentes, horizontales y verticales, como los que puedes ver aquí: http://alvit.de/css-showcase/css-navigation-techniques-showcase.php.