Cristian in CSS
July 27, 2008
Una técnica para montar un menú desplegable en CSS es la que hemos usado en http://www.barberaarquitectos.com, y que estamos a punto de publicar.
Muchas veces que la gente usa Javascript complejos para hacer simples dropdown’s que se pueden conseguir con CSS.
Puedes ver el ejemplo aquí, y el código completo aquí.
El HTML que utlizamos es el siguiente:
<ul>
<li>
<a href="index.php">Opción</a>
<ul>
<li><a href="/">Sub Opción</a></li>
<li><a href="/">Sub Opción</a></li>
</ul>
</li>
<ul>
Como veis usaremos un listado ul para las opciones principales y otro hijo, ul ul, para las opciones del menu desplegable.
Read more »
Cristian in CSS
July 5, 2008
Desde hace unos meses que quería echarle un ojo a un bundle para codificar imágenes en Base64 para textmate que vi que Arnau había publicado que vi también comentado por Shaun Inman y cogió bastante repercusión.
Hasta hoy no he encontrado un momento para instalarlo, pero es killer. Con ctrl+cmd+b automáticamente te hace la conversión, teniendo en cuenta que la imagen está en un ruta relativa.
Esto nos servirá para reducir el número de peticiones http en el servidor, y elimina la necesidad física de alojar la imagen en el servidor.
La imagen se embebe utilizando la propiedad data:url, con lo que hay que tener en cuenta la extensión del código generado para no alcanzar el límite máximo de longitud en la url aceptado por los navegadores.
Este es el código de un ejemplo básico de una imagen embebida en css, también lo podrías escupir como un output <img /> en HTML.
Read more »
July 5, 2008
Maquetando proyectos comerciales siempre nos aseguramos de que son compatibles con todos los navegadores. Yo personalmente testeo los entregables en Safari, Firefox, Opera en MacOs y Safari, Firefox, IE7 e IE6 en Windows… eso son un monton de navegadores instalados.
Afortunadamente si haces las cosas como se tienen que hacer el único navegador que te traerá quebraderos de cabeza es IE6.
Pues bien, hoy estaba delante de unos de esos bugs estúpidos de IE6, debido a que uso un modificador del compartimiento del navegador (pngfix.htc) para que se puedan renderizar correctamente las transparencias.
Este modificador del comportamiento, pese a que es genial e indispensable, tiene algunas limitaciones y hoy para solventar una de ellas necesitaba substituir el png transparente original por una versión de la imagen en gif sólo para IE6.
Al sacar la versión del png en gif por photoshop el resultado ha sido el de siempre, desastroso, he probado por probar por que por experiencia ya sabía que el renderizado que da a la imagen es un estropicio.
Entonces Sergio ha venido con un truco de la old school del que nunca había oído a hablar.
Cuando exportas la imagen para web, seleccionas gif, transparencia y en mate le copias el color de fondo en el que se supone que se asentará la transparencia; el color de fondo es un aproximado.
Este pequeño truco arregla los bordes rotos blancos que normalmente saca el gif y lo deja casi a la altura del png.
Me ha sorprendido, aunque afortunademente no creo que deba usarlo mucho.
Cristian in CSS
June 30, 2008
Rápidamente quiero dejar anotado un tip acerca de una técnica que he utilizado en la web de Gimmicklab, en las fichas que utlizamos para presentar los proyectos. puedes ver un ejemplo aquí.
El objetivo era presentar los proyectos a partir de una imagen y sólo darle al visitante la información del proyecto una vez que ha decido que le ha gustado la imagen y ha ejecutado una acción; en este caso un mouseover.
Rápidamente mediante javascript teníamos el efecto funcionando, pero me quedaba la sensación que en el hipotético caso de que el visitante usara un cliente con el javascript desactivado habría una parte de la información, la relativa a la descripción del proyecto, que no sería visible.
Al final investigando un poco y con imaginación di con esta solución.
Read more »
Cristian in CSS
June 26, 2008
Hace unas semanas un amigo me pidió ayuda con un problema de CSS con Safari que no posicionaba unas cajas flotantes correctamente.
El problema lo solucionamos en 5 minutos reseteando adecuadamente la hoja de estilos con la que trabajaba lo solucionamos correctamente.
Usar un reset en la hoja de estilos te facilita el trabajo ya que establece los parámetros para los elementos HTML en el mismo valor para todos los navegadores.
Personalmente uso el reset de Eric Meyer, considero que es el que profundiza más en los elementos y con su semántica.
Puedes añadir el reset de varias formas.
En proyectos pequeños ( -500 líneas de código) suelo incluir el reset directamente en la hoja de estilos principal, al principio.
En proyectos grandes me inclino pro separar el contenido de los archivos CSS en varias hojas, para ganar mas control.
Ahí tienes dos opciones, incluir el link a la hoja de estilos en el header de la página HTML siempre antes que cualquier otra hoja de estilos, o incluir el reset en la hoja de estilo principales mediante un @import, también siempre antes de cargar el contenido de la hoja de estilos.
Read more »
