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).
Archivo de la categoría ‘Diseño Web’
Videotutorial: Mejora progresiva con CSS3
Fuentes en la web con @font-face
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
A 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
Tras 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
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í:

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 »
Rediseño
La gente me comentaba “muy chula tu página… pero ¿porqué pone 2007 en el pie?”. Esta web necesitaba un rediseño urgente. Cualquiera que me conozca un poco (y mis recientes experimentos para recortarle horas al sueño lo atestiguan), sabe que si no lo he hecho antes no ha sido por falta de ganas, sino de tiempo. Así que sin planearlo, un día cualquiera en un arranque de creatividad le metí mano al photoshop hasta que salió una cabecera decente. La idea ya llevaba tiempo rondándome la cabeza. El resto vino solo.
Tras el diseño de la portada, tenía que decidirme sobre qué sistema iba a implementar el sitio. Las páginas iban a ser estáticas en su mayoría, pero me apetecía tener un blog (ya sabéis, hoy en día si no tienes blog la gente te mira raro por la calle). La cosa estaba entre wordpress o hacerme algo a medida con Codeigniter. Al final me decidí por wordpress. Podría decir que lo hice por la facilidad de instalación e uso, versatilidad, los plugins, etc. Mentira. Lo hice por la pijada de turno: la aplicación libre para iPod/iPhone. Quizá no lo use mucho, pero para cualquier geek eso de sacarse el iPod del bolsillo y decir “voy a escribir una entrada en mi blog” es la leche. Ya os contaré que tal va.
Categorías
- CodeIgniter 8
- CSS 6
- Desarrollo Personal 1
- Desarrollo Web 21
- Diseño Web 6
- Gadgets 1
- jQuery 4
- Marketing & SEO 2
- PHP 11
- Screencasts 11


