Buscando utilidades para validación de código CSS hemos encontrado holmes.css – CSS Markup Detective. Se trata de una herramienta stand-alone de diagnóstico de hojas de estilo que nos muestra, resaltados, los trozos de código inválidos, inaccesibles, obsoletos (http://www.w3.org/TR/html5/obsolete.html#obsoletos) o que presentan una marcación HTML (incluido HTML5) errónea.
Continuar leyendo →
Archivo | CSS
Feed RSS de esta secciónHolmes CSS detective: herramienta de diagnóstico de hojas de estilo
HTML5 y CSS3: 11 tutoriales para soluciones concretas
Como comentamos en el artículo “11 tendencias de diseño web para 2011” se espera que este sea el año en el que se produzca el uso intensivo de CSS3 y HTML5.
Mediante HTML5, podemos resolver parte de los elementos para los que, tradicionalmente, hemos utilizado Flash, aunque, todavía, con este nuevo estándar nos se pueden aplicar ciertas soluciones de diseño e interactividad que podemos lograr a través de Flash.
Por otra parte, las nuevas funcionalidades que nos ofrece CSS3 nos permiten ir dejando a un lado ciertos soluciones gráficas para las que antes exclusivamente necesitábamos imágenes: degradados, sombras, bordes redondeados de elementos gráficos, transformaciones, etc.
En este artículo incluimos referencias a tutoriales que nos pueden ayudar a comenzar a utilizar estos dos emergentes lenguajes de programación web. No se trata de tutoriales generales sobre ambas tecnologías, sino ejemplos de su aplicación a soluciones concretas como, entre otras situaciones, desarrollo de botones de acción en páginas web, desarrollo de formularios, aplicación de nuevas características de transformaciones y animaciones a casos concretos, interacción con jQuery, etc.
Guía de frameworks CSS gratuitos
Existen un buen número de razones para usar un framework para desarrollo de sitios web. Entre otras , este tipo de herramientas nos permiten acelerar el desarrollo, crear sitios más agradables estéticamente y nos pueden ayudar a eliminar algunos aspectos negativos de la (in)compatibilidad entre navegadores (aunque no todos ellos hacen esto, o lo hacen bien). Por otra parte, en algunos casos, y debido a la gran cantidad de entornos de desarrollo gratuitos para CSS existente, la decisión más complicada es elegir uno de ellos y, después, aprender a utilizarlos.
En la actualidad y en nuestra opinión, no existe un framework para CSS que destaque, de forma general, sobre los demás. La decisión sobre el uso de uno u otro marco depende de multitud de factores, aunque pensamos que el principal es el tipo de diseño web que queremos implementar. Existen frameworks destinados a diseños web en grid, otros más orientados a la tipografía de las páginas que creemos, algunos están diseñados para ensalzar determinados elementos de las páginas, etc.
Tampoco hay que olvidar la curva de aprendizaje que precisan unos y otros. Algunos marcos son ideales para diseñadores web que se inicien en este asunto y otros que necesitan un estudio intenso de sus funcionalidades y conocimientos avanzados.
En general, a la hora de elegir un framework CSS, hay que tener dos aspectos en cuenta:
- Asegurarnos que el entorno de desarrollo elegido es capaz de manejar el tipo de diseño escogido para nuestro sitio web y que soporta las funcionalidades que queremos implementar en el mismo.
- Nuestras propias capacidades para que, el conseguir los conocimientos adecuados sobre el entorno, no nos represente una barrera que nos impida sacar el máximo partido al mismo.
En las secciones de este blog dedicadas a herramientas de desarrollo web, podéis encontrar multitud de utilidades que nos pueden ayudar a encontrar un entorno de desarrollo que nos resulte cómodo. En este artículo (original de Cameron Chapman en Devsnippets y ampliado por nosotros), incluimos un listado de los frameworks CSS que consideramos más óptimos e indicamos sus principales características y ámbitos de aplicación. La decisión final sobre la elección de uno u otro dependerá de vosotros y de vuestras necesidades concretas…
CSS3: herramientas y utilidades
Aunque hoy por hoy todavía no se ha extendido de forma unánime el uso de CSS3 y algunos navegadores continúan sin darle soporte, si que podemos observar un crecimiento importante en su utilización en desarrollo web.
Respecto al soporte de navegadores, conferencias de desarrolladores profesionales de Microsoft se ha manifestado que la versión 9 de Internet Explorer 9 incluirá funcionalidades adicionales para funcionar con CSS3, específicamente Transformaciones 2D.
En este post incluimos las referencias publicadas por Webdesignledger a herramientas que nos pueden ayudar a incluir CSS3 en nuestros desarrollos. En concreto, se trata de utilidades que nos permiten generar elementos con funcionalidades como degradados, sombras, bordes redondeados de elementos gráficos, transformaciones, etc.
El valor añadido de algunas de ellas, además de la facilidad que nos ofrecen para generar el código, consiste en que los efectos creados al aplicar selectores CSS3 pueden ser visualizados de forma on-line en la página de las herramientas, lo que nos permite valorar su funcionamiento con el navegador que estemos utilizando. En el caso concreto de la última de las utilidades, podemos elaborar un test bastante completo de las capacidades del navegador que utilicemos respecto a CSS3.
Galerías en CSS para inspiración
Vía Blog Web Designer hemos conocido esta recopilación de 25 galerías desarrolladas en CSS que pueden servirnos de inspiración para desarrollos web en los que neesitemos implementar portfolios, catálogos de imágenes y, en general, en aquellos sitios web donde predominen los elementos gráficos.
Continuar leyendo →
Como crear un menú de navegación con imagenes de fondo en jQuery
En el tutorial Beautiful Background Image Navigation with jQuery publicado Codrops nos enseñar a crear un espectacular menú navegación que tiene un efecto de imagen deslizante de fondo mediante jQuery.
Para comprobar el efecto podéis ver la demo haciendo click en la siguiente imagen:
Menú de navegación con fondo de imágenes
La idea principal es contar con tres elementos de una lista que contienen la misma imagen de fondo pero con una posición diferente. La imagen de fondo para cada elemento se deslizará en distintos momentos, creando un efecto bastante llamativo. Además de eso vamos a tener sub-menús que aparecen con el deslizamiento de cada uno de sus elementos de menú.
