Componente de Firefox para diseñadores y maquetadores Web: Pixel Perfect
Estos son algunos de los diseños en XHTML+CSS que existen actualmente en la red y que se basan en el correcto posicionamiento del arte gráfico usando un esquema de divisiones o cajas que enmarcan el resultado final…
Supongo que muchas veces os preguntaréis cómo diseñan estos genios sus páginas web, (mirad estos 35 excelentes diseños de webs e-commerce) no nos hace falta Flash realmente, sino que usando XHTML y CSS se pueden crear maravillas, ya lo estáis viendo.
Sin embargo, la tediosa tarea de colocar cada imagen en su sitio dentro de una división, cada fondo en el renglón adecuado y el pixel colocado en el milímetro ideal…es una tarea de titanes!, pero para eso amigos tenemos la herramienta Pixel Perfect…para colocar perfectamente los gráficos dentro de nuestra estructura y a mano :)
Y para muestra, un vídeo:
Para instalar esta extensión de Firefox sólo hay que pinchar aquí. (Debes tener Firebug instalado)
Para usarlo: Vamos a nuestra web, pulsamos F12 o sobre el icono de Pixel Perfect
y añadimos una capa con «Add overlay» que será la imagen que necesitamos colocar mediante valores CSS.
Por ejemplo:
Ahora podemos colocar la imagen que hemos añadido gráficamente, para obtener el HTML+CSS correspondiente a esta colocación pinchamos en la pestaña «HTML» y buscamos el objeto añadido dinámicamente o bien pulsamos en «Inspeccionar» y luego en la capa con la imagen superpuesta de modo que podemos copiar fácilmente el código creado por el generador de la extensión.
Felices modificaciones CSS :D
Artículos relacionados:
Deja tu comentario
Buscar...
