Niquelao

This fish eye menu is a simple example of the things we can make with two special CSS 3 properties: transition (today only supported by Safari and Chrome with -webkit-transition) and transform (supported by Safari and Chrome with -webkit-transform and by Firefox with -moz-transform). Sigue leyendo →

…te desvelaré el final de Perdidos sólo con CSS. Si utilizas otro, habrás de esperar a la siguiente temporada…

Ayer me dio por recopilar las propiedades que previsiblemente incluirá CSS 3 para controlar el fondo de cualquier elemento (en el medio visual) y sus correspondientes valores. Varias de ellas coinciden con las que habitualmente empleamos en nuestras hojas de estilo, con lo que no nos deberían resultar extrañas. El resto son nuevas propiedades que vienen a subsanar las carencias que los profesionales en CSS habían identificado.

A partir de ello he preparado la siguiente tabla: Sigue leyendo →

Hace unos días estuve en Zaragoza impartiendo un curso sobre CSS avanzado (incluido en el catálogo de cursos de CTIC). Como es lógico, y especialmente por tratarse de un curso sobre hojas de estilo y técnicas avanzadas, preparé la presentación en rumoslide (como el 95% de los usuarios lo llaman así, al final se quedará con ese nombre). Sigue leyendo →

Pues si, todo parecía ir bien en la ponencia que Bert Bos nos ofreció en Fundamentos Web 2007. Pero de repente, lo dijo, planteó que como prioridad para el siguiente nivel de CSS (nuestras muy amadas, queridas y respetadas CSS) estaría el comportamiento de los enlaces en lo que se refiere al lugar donde aparecerá el recurso al que apuntan.

Algunos no le dieron más importancia que la que tiene dentro del propio contexto. Sin embargo, otros empezamos a darle vueltas a lo que a primera vista era algo que no podíamos comprender: ¿vamos a retroceder y volver a mezclar lo que entendemos por presentación con lo que entendemos por comportamiento?

Sigue leyendo →

Este artículo lo voy a comenzar a la inversa. No es que me proponga escribirlo de espaldas sino que voy a comenzar citando (blockquote-ando) el consejo con el que lo concluiré:

Salvo que seamos originales y queramos mostrar ese recuadro generado por el campo oculto (“casi oculto”), la solución es simple. Le aplicamos “display: none” y arreglado. Mi consejo es que no se traten de marcar los campos ocultos con una clase para luego aplicarle la propiedad que acabo de escribir. En su lugar se puede aprovechar el que Firefox entiende e interpreta los selectores de atributos:

[css]input[type=hidden] { display: none; }[/css]

Sigue leyendo →

Es muy curioso el efecto que el recien llegado IE7 aplica cuando incluimos el elemento address dentro de un item de lista y a su vez flotamos esta a la derecha. Podréis preguntaros en qué situación se aplicarían estas propiedades a estos elementos… pues fácil: cuando ponemos nuestra dirección a la derecha en el pié de nuestra página… Sigue leyendo →

Se hace raro descubrir un bug de este tipo, es decir, una puta chorrada que, o bien no tienes nada que hacer o es la casualidad más casual la que hace que te des cuenta. Y además, que sea tarde. Ya se ha escrito sobre lo mismo hace más de un año en Maxgeek, Satzansatz y seguramente algún otro por ahí.

Sigue leyendo →

Cuando se pretende estructurar el contenido de un documento web, se debe evitar por todos los medios el tener presente cual va a ser el diseño visual, y en especial el layout. Esto es fundamental si se quiere conseguir un contenido estructurado de forma correcta desde el punto de vista del flujo de la información, así como un marcado semántico y un código óptimo. Para la consecución de este objetivo se ha de utilizar como premisa indiscutible el uso de los estándares del W3C, evitando el marcado extra cuya finalidad sea servir a la hoja de estilos para presentación.

Sigue leyendo →

Y ahora algo en serio

Supuestamente, el tamaño de fuente debería heredarse del elemento padre. Por casualidad (no sabemos quien lo dijo), hemos sabido que los elementos reemplazados (basicamente, controles de formulario, input) no siguen este comportamiento (algunas veces). Aquí estamos para daros la solución.

Sigue leyendo →