Configura y descarga tu Preload con CSS, GRATIS !!!

Preload online con CSS

Preload online con CSS

Con CSS Load puedes generar y descargar gratuitamente tu preload. No incluye ninguna imagen todo es puro CSS y además te ofrece la posibilidad de compatibilizar el código con todos los navegadores más importantes de la red.
Tienes dos tipos de preload, uno gráfico y otro con texto. En ambos casos puedes elegir entre varias animaciones, y en el de texto además es editable, es decir, puedes escribir lo que quieras en tu preload.

Todo es configurable, color principal, color de fondo, puedes dejar fondo transparente, elegir fuente de texto, …

CONFIGURAR Y DESCARGAR PRELOAD

Menú Responsive para tu diseño web

El diseño de una web responsive, adapta su tamaño y arquitectura, a la resolución del dispositivo en el que la estamos viendo. Ya hemos visto como en una web de columnas, al reducir la resolución, las columnas se desplazan para colocarse una debajo de la otra, en el orden que hayamos establecido, pero ¿qué pasa con el menú?.

La mejor solución por diseño y sobre todo por usabilidad es la que presentamos hoy aquí. Se trata de convertir el menú horizontal en un menú desplegable, tal y como podéis ver en las imágenes que encontrareis más adelante.

Para una resolución grande, el menú aparece en horizontal, con una opción a continuación de la otra. Cuando bajamos la resolución de tal modo que no cabe en el ancho de la pantalla, convertimos esa única fila en tres, y si seguimos reduciendo la pantalla, lo que va a ocurrir es que las tres filas se van a convertir en un menú desplegable.

Como podréis comprobar cuando os descarguéis el código, el menú está limitado a 600px de ancho. Son 6 opciones de menú y cada una con un ancho de 100px. Es evidente que entonces, para cualquier soporte que tenga una resolución mayor a 600px, no tenemos que tener ningún problema, es decir, si utilizamos cualquier ordenador o una tablet como puede ser el iPad, el menú se verá tal y como fue diseñado, una lista con todos sus elementos en una misma fila.

A continuación, vamos a ver cómo se construye esta web y cómo se distingue en la CSS las distintas resoluciones.

(más…)

CSS3 y jQuery !!!. Ejemplos alucinantes.

CSS3 y jQuery. Descubre en este post, alucinantes efectos que te ayudarán en tus próximos diseños web.

En este blog de diseño web podréis encontrar gran variedad de artículos sobre jQuery y CSS3 . 

En esta ocasión, he intentado hacer una selección lo más variada posible, de ejemplos que podemos necesitar, pero sin duda, al que tenga tiempo, le recomiendo que se de un paseo por http://tympanus.net/ para ver la cantidad de ejemplos que nos ofrece esta tecnología.

Se trata de 14 ejemplos de jQuery y CSS3 para mejorar tu web. En algunos casos se trata de ejemplos para integrar en tu web, y en otros, de verdaderos proyectos para generar una web espectacular.

 

(más…)

Manipular Viewport con CSS

Viewport

Cuanto accedemos desde un smartphone o tablet a un sitio web, normalmente el navegador comprueba la resolución del terminal y escalan el contenido para adaptarlo a su pantalla.

Esta práctica ocasiona verdaderos quebraderos de cabeza en el diseño web para smartphones.

El viewport es un atributo del tag <meta> que  se incluye dentro del <head> de un documento HTML. Su aspecto es el siguiente:

(más…)

Recursos HTML5 GRATIS !!!

Recursos HTML5 GRATIS


HTML5 ha representado una tremenda evolución en el diseño web.
En este post podréis encontrar varias direcciones en las que poder encontrar documentación y ejemplos de diseños web realizados con HTML5.

(más…)