Soldat's log » css

Curso de introducción de CSS

chernando — Sat, 01 Mar 2008 20:32:54 +0000

Hemos publicado el material del curso que realizamos Ana y yo el pasado martes 26 de febrero en la web del Capítulo de la ACM. Cualquier comentario será bien recibido

http://acm.asoc.fi.upm.es/documentos/

“Conflicting Absolute Positions” por Rob Swan

chernando — Sun, 29 Jul 2007 09:37:25 +0000

Rob Swan publica en A List Apart “Conflicting Absolute Positions“, un breve artículo que comenta las posibildades de ajustar las cuatro posiciones de un objeto situado absolutamente.

La técnica descrita simplifica en gran medida los problemas que surgen cuando se quiere cuadrar objetos absolutamente ya que es una solución basada en únicamente en CSS sin hacer uso de JavaScript.

El desconocimiento aparente de esta técnica es debido, una vez más, a la falta de soporte de IE5 e I6. Por suerte Rob propone una solución adaptada a estos navegadores.

Jugando con las imágenes de fondo

chernando — Sun, 03 Jun 2007 12:16:36 +0000

Curioseando por la galería de CSS Zen Garden he encontrado unos divertidos usos de fondos de imágenes para crear efectos realmente sorprendentes. Voy a destacar dos de ellos:

Fun with backgrounds orange

Efecto: moviendo la barra de scroll la imagen del fondo va cambiando del kanji al texto ‘zen garden’.

Técnica: superposición de dos fondos, por un lado tenemos un fondo de líneas y por otro la imagen que combina el kanji y el texto (en líneas diferentes). Al desplazar la página las líneas coinciden o con el kanji o con el texto al mismo tiempo que oculta al otro. Simplemente genial

Otro ejemplo muy parecido es Two State Animation, en esta ocasión se consigue que una flor se balancee de un lado a otro.

CSS Zen Ocean

Este diseño es muy muy divertido.

Efecto: el subtitulo desaparece de vez en cuando, el submarinista enciende su linterna según profundiza en el océano, se forman burbujas de aire y en el fondo del mar el cofre del tesoro se abre y aparece un cangrejo dando una vuelta.

Técnica: la mayoría de los efectos están conseguidos con animaciones GIF de toda la vida, de una forma realmente original, pero lo que más me llamó la atención es la linterna del buzo. La idea es crear un degradado, de menor a mayor iluminación, y poner por encima una capa de transparencia que asemeje a la fuente de luz que produce la linterna, al desplazarlo se crea el efecto.

Retro Theater