uvedobles.com» CSS

Generador de plantilla de columnas para web

dedavid — Fri, 23 Apr 2010 07:15:52 +0000

The 1Kb CSS Grid es una aplicación online que permite generar frameworks o estructuras de ficheros con el encolumnado ya creado bajo HTML y CSS. Ideal para realizar bocetos, mockups y todo tipo de pruebas.

Para configurar tu parrilla dispones de tres deslizadores desde donde debes configurar una parrilla imaginaria de columnas para dar forma a las capas de tu web.

El resultado te lo descargas en un fichero zipeado: Si abres el html te encontrás una plantilla como la siguiente:

El código que te genera es muy limpio. Únicamente dos archivos, un HTML y un CSS.

En nuestras pruebas hemos obtenido el siguiente código HTML






	The 1Kb Grid Demo – 9 columns, 80 pixels each, with 20 pixel gutter
	grid.css” type=”text/css” rel=”stylesheet” media=”screen”/>







	9



	6

	3
	3


	3

y el siguiente CSS
.grid_1 { width:80px; }
.grid_2 { width:180px; }
.grid_3 { width:280px; }
.grid_4 { width:380px; }
.grid_5 { width:480px; }
.grid_6 { width:580px; }
.grid_7 { width:680px; }
.grid_8 { width:780px; }
.grid_9 { width:880px; }

.column {
margin: 0 10px;
overflow: hidden;
float: left;
display: inline;
}
.row {
width: 900px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 -10px;
width: auto;
display: inline-block;
}

Enlace: http://www.1kbgrid.com

Páginas relacionadas con este artículo:

Compatibilidad CSS3 con diferentes navegadores

dedavid — Wed, 31 Mar 2010 07:21:57 +0000

Hoy te traemos una tabla realizada por la gente de findmebyip con el listado de propiedades para hojas de estilo bajo CSS3 y su correspondiente compatibilidad con sistemas Mac, Windows y con los navegadores: Chrome, Firefox, Opera, Safari e IE, en diferentes versiones.

Enlace: http://www.findmebyip.com/litmus/#target-selector

Páginas relacionadas con este artículo:

Estilos CSS del cursor

dedavid — Wed, 24 Mar 2010 15:32:33 +0000

Aquí tenéis toda los posibles estilos del cursor para que podáis aplicar bajo CSS, si pasáis el cursor por encima de “Prueba” veréis el resultado, este resultado diferirá de un navegador a otro, es decir el icono puede ser muy diferente entre FireFox, Safari, Chrome e Internet Explorer, el buen uso de la propiedad cursor hace las páginas web más usables sobre todo para estilos de menús basados en capas:

Valor	Prueba	Netscape	Explorer	Estilo CSS
default	Prueba	6+	4+	cursor:default
crosshair	Prueba	6+	4+	cursor:crosshair
hand	Prueba		4+	cursor:hand
pointer	Prueba	6+		cursor:pointer
Cross browser	Prueba		4+	cursor:pointer;cursor:hand
move	Prueba	6+	4+	cursor:move
text	Prueba	6+	4+	cursor:text
wait	Prueba	6+	4+	cursor:wait
help	Prueba	6+	4+	cursor:help
n-resize	Prueba	6+	4+	cursor:n-resize
ne-resize	Prueba	6+	4+	cursor:ne-resize
e-resize	Prueba	6+	4+	cursor:e-resize
se-resize	Prueba	6+	4+	cursor:se-resize
s-resize	Prueba	6+	4+	cursor:s-resize
sw-resize	Prueba	6+	4+	cursor:sw-resize
w-resize	Prueba	6+	4+	cursor:w-resize
nw-resize	Prueba	4+	4+	cursor:nw-resize
progress	Prueba		6+	cursor:progress
not-allowed	Prueba		6+	cursor:not-allowed
no-drop	Prueba		6+	cursor:no-drop
vertical-text	Prueba		6+	cursor:vertical-text
all-scroll	Prueba		6+	cursor:all-scroll
col-resize	Prueba		6+	cursor:col-resize
row-resize	Prueba		6+	cursor:row-resize
cursor:url(uri)	Prueba		6+	cursor:url(uri)

Páginas relacionadas con este artículo:

Inspira, expira, inspiración en CSS

dedavid — Wed, 10 Mar 2010 09:24:09 +0000

Inspira, expira, inspiración en CSS expiración en HTML, te presentamos un punto de referencia indispensable así que a bookmarquearlo de inmediato.

Esta reseña se trata de la galería de CSS de los denominados premios CSS Los CSS Awards, así que tras los cacareados Oscars, ahora toca el tema de los CSS, and the winner is:

Enlace: http://www.thecssawards.com/gallery.php

Páginas relacionadas con este artículo:

Temas para WordPress Bloc de notas

dedavid — Tue, 09 Mar 2010 07:14:05 +0000

Este tema para WordPress nos ha gustado mucho, muy limpio y memorable.

Lo mejor de ello es que sus creadores, la agencia N-desing Studio nos ha dejado el boceto con las medidas y mejor aún el fichero PSD para que puedas modificar la plantilla con Photoshop o Gimp para crear tu propia variación sobre este tema, a nosotros ya se nos han ocurrido un montón, el más evidente desaturar ese amarillo estilo post-it y pasarlo a blanco marcando el rayado de imprenta que contiene con un azul más intenso, dejar una goma de borrar marca Milan algo sucia de usarla colocada en alguno de los márgenes, algún garabato por el papel y vaya… inspirarnos en los cuardenos que nos acompañaron durante EGB.

La distribución y maquetación de este tema de WordPress para nosotros es perfecta, tamaño correcto, textos a la izquierda para facilitar la lectura y no tener que saltar el bloque de menú o sidebar con cada línea que el visitante lea, diferenciación visual entre fecha, título, breve del artículo. botones generales de navegación destacados en la parte superior y con un diseño muy Apple, todo a excepción del header que no aporta belleza alguna y diluye algo el buen efecto que puede causar este tema, un header que no mostramos en la captura y el fondo iMac translúcido

Aqui os dejamos el boceto o wireframe del tema para WordPress comentado:

El fichero PSD para que puedas editar: Fichero Photochop tema Wordpress (21)

El fichero con el tema para WordPress listo para uploadear: Tema Notepad para Wordpress (18)

Enlace: http://www.ndesign-studio.com/wp-themes/notepad

Páginas relacionadas con este artículo:

Estructuras redimensionables para iPhone

dedavid — Sat, 06 Mar 2010 07:31:39 +0000

Bueno, aunque el título reza que lo que hoy te traemos es exclusivo para iPhone, más bien es para cualquier tipo de dispositivo que disponga digamos de una pantalla especialmente pequeña o con unas proporciones diferentes a las habituales, incluídos los Androids, los aburridos Windows Mobile 7 y las gorditas Blackberries.

Se trata de un framework (un framework es una estructura de trabajo predefinida y un pequeño conjunto de utilidades básicas para el desarrollo enfocado) desarrollado bajo html 5 y compatible con casi todos los navegadores modernos y con el que gracias a él te podrás olvidar de las diferentes resoluciones para los diferentes dispositivos pues con este framework la web detecta la resolución de pantalla y autoadapta el contenido para que se visualice de forma óptima en el dispositivo lo que representa una clara mejora en la usabilidad de cualquier página web, blog o aplicación web.

Este framework está compuesto por un par de ficheros CSS, un javascript y una forma de maquetar el encolumnado mediante CSS. Aún no hemos podido ponerlo en práctica por nosotros mismos pero en la web que enlazamos, la de sus creadores, puedes jugar a resizar (redimensionar) la ventana del navegador y ver como el contenido se adapta de forma perfecta a cualquier tamaño y proporción.

Aquí tenéis, listo para bajar un archivo zipeado con los ficheros del framework y un ejemplo: Framework web para iPhone (18)

Enlace: http://lessframework.com/

Páginas relacionadas con este artículo:

Forzar la aparición de las barras de scroll con CSS

dedavid — Sat, 27 Feb 2010 09:33:24 +0000

En alguna ocasión te encontrás el siguiente escenario donde en determinados proyectos existe una clara molestia visual producida por los constantes salto en la maquetación del contenido que se desplaza unos 20 píxeles hacia tu izquierda al navegar entre una página y otra.

Este salto es normalmente producido por la existencia o no existencia de la barra de desplazamiento vertical o barra de scroll, una barra que quieras o no ocupa su espacio en el universo y como dice un tal arquímedes con su teoría sobre los líquidos esta barra desplaza el contenido tantos píxeles como volumen tiene la misma.

Aunque si bien este es un comportamiento natural, predecible y argumentable hacia tus clientes, el efecto que produce ese desplazamiento de contenidos es del todo indeseado y más aún cuando suele suceder desde la propia página de inicio o home donde muchos maniáticos de la comunicación, entre los que me incluyo, quieren poco texto poco espacio para evitar un exceso de información e invitar al cliente a profundizar, en páginas con más contenido y por tanto con la dichosita barra de scroll.

Pues bien, hemos acudido al dios salvador, que no es otro que el CSS y tachán la solución en tres líneas, y tan fácil como forzar la aparición de las barras sí o sí.

El código CSS:

html {
/* forzado de scrollbars */
min-height: 100%;
margin-bottom: 1px;
}

Páginas relacionadas con este artículo:

Diseño de tablas con CSS

dedavid — Wed, 03 Feb 2010 09:31:24 +0000

Si bien el uso de los comandos

actualmente está en deshuso a favor de los mágicos y a la vez más complejos

os vamos a pasar un enlace donde encontrarás un montón de estilos CSS muy optimizados para implementar en tus tablas.

En este enlace podrás ver en directo muchos de los CSS aplicados, pulsa sobre el título del diseño del CSS y la misma página que contiene una tabla se vestirá con el CSS escogido, dispones de un botón “Download” que te bajará o mostrará el CSS que se aplica sobre la tabla.

Enlace: http://icant.co.uk/csstablegallery/

Páginas relacionadas con este artículo:

Rotación de una imagen con CSS3

dedavid — Tue, 26 Jan 2010 20:25:26 +0000

Si pasas el ratón sobre la imagen superior esta rotará de forma automática, se me olvidaba, este efecto no es compatible con Internet Explorer, al igual que intentar acceder a tu banco, vamos a dejarlo claro, realmente Internet Explorer peca de inseguro e incompatible por lo que olvídate de él cuanto antes, pataletas a parte, hazte con un buen navegador web en serio, que los hay, por ejemplo FireFox, Safari o Chrome y para mayor sorpresa son gratuitos y empieza a disfrutar de cosas como la integración con el estandard de hojas de estilo CSS3.

El efecto que te mostramos en este post, es una pequeñísima muestra de una sencilla rotación de imagen, que señalamos, no está realizada con Flash, tan sólo se usa una sencilla propiedad de CSS3 por lo que es amigable con buscadores.

Páginas relacionadas con este artículo:

¿Cómo optimizar CSS?

dedavid — Tue, 01 Dec 2009 14:38:55 +0000

La optimización es un proceso que muchas veces dejamos a un lado, total cada día que pasa las conexiones de internet consiguen una mayor velocidad por lo que da igual 15 Kb. que 10 Kb.

Esta premisa es cierta. O al menos yo soy uno de los que considero que optimizar a veces es perder el tiempo, ahora los más puristas caerán sobre mi alegando que no optimizar es una falta de respeto a aquellos usuarios que aún van con módem de 56Kb. Ejem… en mi comienzos íbamos a 300 bytes/s… así que a la chita callando.

Otros, defensores a ultranza del posicionamiento en Google te afirmarán que Google mira que las páginas no ocupen mucho y siempre posiciona las más ágiles… fábulas, siempre y cuando no tengamos una hoja de estilo de 10 Mb. no hace falta alarmarse, ahora bien a veces interesa optimizar cuando esa optimización no conlleva tiempo porque te la realiza un programa.

No os penseis que ahora hablaremos de un programa que debes descargar e instalar para utilizarlo de uvas a peras o de higos a castañas, ahora no recuerdo el refrán o proverbio. Esta vez se trata de aplicaciones online con las que te conectas, pegas tu código le das a un botoncito y te comprime el código CSS, así de fácil y todo listo en 2 segundos.

Vamos a realizar unas rápidas pruebas con tres diferentes herramientas online que hemos encontrado para comprimir CSS, para ello vamos a tomar el CSS no optimizado de la web sobre diseño de aplicaciones web de www.dedavid.com, una web basada en nuestro sistema de gestión de contenidos cOOrporative.com, el tamaño original del CSS es de 10,08 Kb.

Compresores de hojas de estilo interesantes

La primera que os recomendamos es CleanCSS una utilidad de compresión de hojas de estilo CSS que trabaja muy bien, aunque no es capaz de mostrate un botón de copiar y deberás seleccionar el código a mano para copiarlo, en ella hay un botón de “descargar a archivo” pero a nosotros no nos ha funcionado, arroja un error de MySQL.

CleanCSS tiene un montón de opciones configurables, en nuestra prueba hemos obtenido una compresión de un 13,9% quedando nuestro CSS en 8,892 Kb.

Otra es CSSOptimizer que también te permite optimizar desde una URL, copiando y pegando como la anterior e incluso subiendo un archivo css. El sistema permite eliminar o conservar los saltos de líneas, una función muy valiosa, Compresión del 18,94% quedando en 8,17 Kb.

Otra de las herramientas que hemos encontrado es CSSdrive,

http://www.cssdrive.com/index.php/main/csscompressor/ donde hemos alcanzado un 14% obteniendo un archivo de 8.913 Kb.

Existen otras, muchas otras pero estas son las que nos han ofrecido los mejores resultados, proveen de una mayor confianza y durabilidad en el tiempo y visualmente son más agradables a la vista.

Si vosotros tenéis experiencia con alguna no dudéis en dejarnos un comentario.

Páginas relacionadas con este artículo: