Por lo visto IE7 soportará transparencias en los png, pero de momento nos tenemos que apañar con IE6 que no los soporta. Es una lástima no poder usar png con transparencias, ya que los gráficos tienen muchos más colores que los gif y nos permiten hacer diseños mucho más elaborados.

A pesar de todo, hay un filtro de IE que permite usar PNG con transparencias. Buscando encontré este hack, PNG behaviour, que usa el filtro para el fondo de una imagen y bahaviour en el css. Como imagen usa un gif transparente. El problema de este sistema es que solo funciona para imágenes inline, además de necesitar el AddType text/x-component .htc en el httpd.config de tu apache o utilizar el htaccess, para que funcione (esta solución truculenta la encontré aquí).

¿Qué se puede hacer para usarlo en el fondo, o propiedad “background” en CSS? El primer sistema que encontré usaba el filtro directamente en el CSS. Es un buen método si no te importa que no valide en CSS, pero como esta es una prioridad para muchos de nosotros la única alternativa es usar javascript.

El siguiente método incluye un javascript que solo lee i.e. al ponerle entre comentarios para ie. También se puede poner crear un css externo para i.e. y comentarlo de la misma manera. Puedes encontrar el javascript aquí.

El javascript es relativamente sencillo. También necesitarás de un gif en blanco de 1px. Tendrás que especificar donde se encuentra en el javascript. Y eso es todo lo que hay que hacer. El javascript sustituye cualquier background que tenga un png.

Solo quedan dos problemas. Uno es que si estas usando rollovers css con png no te funcionaran porque el javascript se ejecuta sobre todos los fondos con png. Intenta usar gif en los rollovers si es posible. Lo segundo es que el javascript se carga después del css asi que en i.e veras el png sin transparencia durante un instante mientras se carga.

Seguramente tendré que usar algún detector de version i.e. para que no use el javascript cuando se use IE7.

Si estas pensando en hacer un menú de pestañas CSS (tabbed CSS menu) para tu blog o web, mirate las de Exploding-Boy. Te los puedes bajar gratis de su página y son muy guapos.

visto en Criterion, un blog sobre diseño que por cierto también está muy bien

Hace poco usé este plugin en un proyecto usando wordpress como cms. Una de las cosas que encontré que necesitaba era pasar valores de cada página. Pensé que una manera de hacerlo sería usar los campos que hay debajo de los posts, esos que ves en edición avanzada.
Creas una variable y le das un valor y luego lo puedes usar en otro plugin como variable por ejemplo.
Los campos son interesantes porque puedes poner cosas como que estoy leyendo ahora, la musica que estoy escuchando y cosas así y luego ponerlas en tu post usando the_meta(); luego el código fuente sale en forma de lista y la clase en un span que envuelve a cada clave y así puedes darle un estilo usando css. Puedes encontrar más información aquí: Using custom fields

Al ponerme a usarlo me di cuenta que no me servía, ya que esos campos solo sirven para añadir un contenido dentro de los posts, dentro del wp-loop. Yo necesitaba las variables para fuera del loop de los posts, para añadir un bloque de contenido con un plugin en una plantilla.

Así intentando solucionar este problema encontré este plugin con el que puedes usar esos campos en cualquier parte de tu plantilla. El plugin se llama get custom value.

Además de los valores del campo puedes pasar html para poner antes y después, asi que puedes darle estilo también a los campos.

Por fin nos hemos bajado los trial de Macromedia, Dreamweaver 8, Fireworks 8 y Flash 8.
De momento intenté probar el Dreamweaver 8 con mi server local y ver como funciona el nuevo CSS preview en webs dinámicas en vivo, pero por alguna razón me da un error. Lo encuentro muy raro, ya que en la misma ventana de error sale la página dinámica correctamente. La conexión a la base de datos funciona y los settings en el server de testeo son todos correctos.
En fin, seguiré usando TopStyle Pro 3 que de momento me va muy bien para el diseño y programación CSS.

Bueno de casi todos los males. Muchos seguro.
Hoy encontre otro bug del i.e que hace que desaparezcan los fondos de elementos de lista. La solución: pon al principio de tu css para que valga para todos los elementos de lista la regla
ul, ol, dl {
position: relative; /*para el bug de los fondos que desaparecen en ie*/
}
ya sabes que funciona tambien para las cosas raras que pasan con los floats dentro de bloques posicionados absolute…

pues eso, si encuentras algo raro en el ie, prueba position:relative por si funciona. Es como eso de darle una patada al electrodoméstico cacharro de turno

En css cada vez que descubro un truco nuevo es como encontrar un caramelo. Este truco en particular es de los buenos. Consiste en hacer los rollovers de los menus sin necesidad de recortar cada uno de los botones, en estados normal y over, con fireworks o photoshop y sin tener que usar javascript o hacer un preload de las imágenes. Ya te puedes imaginar la de codigo spagheti que te puedes ahorrar aquí.
Lee el resto de esta entrada »