Archivo de la categoría ‘CSS’

Videotutorial: Diseños flexibles con CSS3 media queries

martes, 19 de octubre, 2010

Con la llegada de los tablets y el aumento de uso de los smartphones con distintas resoluciones y tamaños de pantalla, nos surge el problema de crear versiones móviles diferentes para cada dispositivo.

CSS3 nos trae una nueva herramienta para atacar este problema: los media queries. El funcionamiento de los media queries consiste en disponer de un único documento html para todas las versiones, y seleccionar una u otra hoja de estilo CSS dependiendo de algunos parámetros del dispositivo, principalmente la resolución de la pantalla. De esta manera eliminamos la necesidad de redireccionar a una versión móvil diferente de nuestro sitio, sino que cada dispositivo leerá un bloque de reglas CSS según su anchura.

En este videotutorial voy a enseñaros cómo utilizar los media queries mediante un sencillo ejemplo de diseño de tres columnas de contenido y un menú. Veremos cómo las columnas se reordenan según disminuimos el tamaño del navegador, y por lo tanto cómo se mostraría en dispositivos de ese tamaño.

Ver Demo CSS3 media queries
Leer el resto de la entrada »

Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel

miércoles, 3 de marzo, 2010

Respondiendo a la multitud de peticiones en los comentarios del artículo sobre cómo crear un menú en acordeón, aquí os muestro cómo hacer el mismo menú pero con soporte para varios niveles.
Este menú está basado en el anterior, y como apenas necesitaba un pequeño cambio en el javascript para hacerlo multinivel, he aprovechado para convertirlo en un plugin y enseñaros en un screencast cómo hacer vuestros propios plugins en jQuery.

Ver Demo menú acordeón multinivel
Leer el resto de la entrada »

Videotutorial: Mejora progresiva con CSS3

martes, 12 de enero, 2010

En este videotutorial voy a enseñaros algunas propiedades de CSS3 que nos servirán para mejorar visualmente nuestros diseños sin necesidad de usar imágenes o javascript, concretamente el manejo de sombras, gradientes y transformaciones sólo con CSS. Puesto que CSS3 aún no es un estándar, tendremos que usar las extensiones propietarias que implementan los navegadores más modernos, como las últimas versiones de Safari, Chrome y Firefox. Estas propiedades generalmente contiene el prefijo -moz para Firefox y -webkit para Safari y Chrome (webkit es que el motor utilizado en estos navegadores).

Ver Demo CSS3
Leer el resto de la entrada »

Fuentes en la web con @font-face

lunes, 21 de diciembre, 2009

Una de las grandes limitaciones que siempre hemos tenido diseñando en la web ha sido la incapacidad de poder usar fuentes mas allá de las que el usuario tiene instaladas por defecto en su sistema. Por ello las opciones que teníamos era utilizar imágenes (sólo recomendable para encabezados y menús) y las clásicas fuentes Arial, Verdana, Georgia, …etc., las llamadas fuentes «web-safe» que sabemos se encuentran en la mayoría de los sistemas. Recientemente han salido herramientas como Cufón y Typekit, que nos permiten mostrar fuentes usando javascript, pero estos sistemas no son la solución más óptima.

Hoy día gracias al avance de los navegadores podemos usar cualquier fuente utilizando la propiedad CSS @font-face, siempre que tengamos en cuenta y respetemos la licencia de cada una, que debe permitir empotrado mediante @font-face. Podemos ver un listado de fuentes y licencias que permiten este uso en el wiki de webfonts.info.
A continuación os explicaré cómo utilizar @font-face para poder usar fuentes de verdad en la web.
Leer el resto de la entrada »

Menú vertical en acordeón con CSS y jquery

miércoles, 7 de octubre, 2009

menu_acordeonA pesar del buen feedback recibido sobre mi serie de tutoriales de CodeIgniter, los artículos sobre menús animados con CSS y javascript siguen siendo los más populares en este sitio, y parece que son bastante útiles para la gente que está empezando. Por ello hoy me tomo un pequeño respiro de los videotutoriales y voy a enseñaros cómo hacer el clásico menú vertical en acordeón con CSS y jQuery.
El resultado lo puedes ver aquí: Ver demo
Leer el resto de la entrada »

Menú animado desplegable con CSS y jquery

jueves, 9 de julio, 2009

menu_desplegableTras el inesperado éxito de mi artículo Menú animado con CSS y jquery, me he decidido a escribir un nuevo tutorial sobre creación de menús: cómo hacer un menú horizontal animado desplegable con CSS y jquery. Cada elemento del menú horizontal contendrá un submenú vertical que se desplegará con una animación. A su vez, al pasar el ratón sobre cada entrada del submenú éste cambiará de color de forma gradual. El resultado lo puedes ver aquí: Ver demo
Leer el resto de la entrada »

Menú animado con CSS y jquery

domingo, 17 de mayo, 2009

La diferencia entre un buen diseño y un diseño genial puede estar en pequeños detalles que proporcionen mayor riqueza visual, como los menús animados realizados habitualmente en Adobe Flash. Como no soy amigo del Flash (*insertar aquí delirio sobre porqué los desarrolladores serios odiamos flash*), voy a mostraros cómo hacer un menú similar al que tenemos en la cabecera de esta web usando CSS Sprites y javascript (jQuery).

Preparando las imágenes

En primer lugar montaremos los tres estados del botón (normal, hover y activo) en un sprite tal que así:

homeboton

La técnica de sprites consiste en utilizar una única imagen para todos los casos, mostrando sólo la parte que nos interesa mediante la propiedad background-position. La altura de la imagen es de 30px, de manera que para mostrar cada bloque cambiaremos la posición vertical del fondo a 0, 30px o 60px según el fragmento.
Leer el resto de la entrada »

RSS iTunes podcast Twitter

Categorías

Enlaces

Archivos