Entradas etiquetadas ‘css’
Curso de introducción de CSS
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 
“Conflicting Absolute Positions” por Rob Swan
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
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
-
