elWebmaster.com

Más allá de las funciones que uno generalmente usa en las hojas de estilo CSS (como los selectores) existen reglas menos comunes, como las “reglas @” (at-rules, en inglés). Este tipo de reglas tienen usos muy diversos y algunas son específicas de ciertos navegadores.

Las reglas @ comienzan siempre con el símbolo de la arroba y luego su nombre clave. Dependiendo de cual se trate podrá necesitar un único argumento (la regla “import“ por ejemplo) o un bloque de código (la regla “media“). Veamos bien cuáles son. Seguir leyendo

Los que tengan poca idea sobre CSS o simplemente quieran usar uno de estos excelentes layouts, pueden descargarlos directamente desde el sitio de Intensivstation.ch. Las plantillas sólo tienen organización de sectores y color, de modo que puedes ponerles tus imágenes o texto.

Para facilitarte aún más las cosas se encuentran organizadas por categorías: ajustadas, elásticas, centradas, de una, dos o tres columnas, etc. Todas cumplen con los estándares y tienen XHTML y CSS2 válidos. Haz clic aquí para ir al sitio.

Css Zen Garden es una demostración de lo que se puede lograr visualmente a través del CSS. Su propósito es que el css sea tomado en serio por los artistas gráficos y demostrar el gran valor de separar la maquetación HTML del diseño.

Básicamente, consiste en una página donde distintos usuarios suben sus hojas de estilo. Lo interesante es ver cómo podemos cambiar los distintos diseños pero el código html es siempre el mismo. Seguir leyendo

No necesariamente tiene que tratarse de un mapa geográfico, sino que puede ser cualquier mapa de imagen que al pasar el puntero del mouse por encima despliegue información adicional, otras imágenes, etc. Todo con CSS.

En la web de MikeCherim.com tenemos un ejemplo para que veamos cómo funciona y también desde allí podemos descargar los archivos XHTML y CSS necesarios para que revises el código y lo uses en tu sitio web. Haz clic aquí para ir al sitio.

Hoy en día todo lo que a diseño y presentación en un sitio web se refiere se hace con estilos CSS, por lo que siempre vienen bien estos trucos para aplicar algún detalle de calidad a nuestra página, claro, respetando los estándares.

Si tienes una galería de imágenes con vistas previas puedes usar este sencillo truco para ir ampliando las fotos al pasar el puntero del mouse por encima. Como utiliza la propiedad overflow, no desarma el diseño del sitio, además es muy veloz. Seguir leyendo

Ahora todo se maqueta y/o diseña con CSS. Los potentes estilos reducen el peso de la página, permiten que el HTML se centre en un sentido “semántico” y se posicione mejor en los buscadores, así como también nos permiten rediseñar un sitio entero en dos patadas.

Por eso son tan útiles esos pequeños trucos de bolsillo que uno suele ir recolectando por ahí, para echar mano en un momento de necesidad. Con gusto te dejo esta lista de 12 trucos de CSS que a mi modo de ver son muy usados y también muy necesitados. Seguir leyendo

Los estilos CSS nos trajeron muchas ventajas en cuanto al diseño de nuestros sitios web, pero por alguna razón parece que estamos limitados al uso de 4 o 5 tipos de fuentes que están presentes en cualquier computadora, por miedo a que las demás no se visualicen correctamente.

Así es como no vemos otra cosa que Arial, Helvetica o Georgia en la mayoría de los blogs de la red. Pero hoy en día tenemos una gama más amplia de opciones a la hora de elegir, siempre dentro de las fuentes “seguras”. Te recomiendo 7 que sin duda deberías tener en cuenta. Seguir leyendo

Toolbox CSS es simplemente un conjunto de fragmentos de código CSS que no está relacionado con ningún sitio web en particular, para que puedas copiar y usar directamente en tus proyectos. La idea es que no escribas 1.000 veces la misma clase para una propiedad float.

Toolbox CSS es completamente libre, puedes hacer lo que quieras con él, modificarlo, usarlo como está, etc. Puedes usarlo como una segunda hoja de estilos “fija” o agregarlo a tu CSS principal. Seguir leyendo

CleanCSS es un servicio online gratuito que te permite copiar el código de tu hoja de estilos CSS y optimizarlo en forma automática. Está pensado para quienes trabajen CSS desde Dreamweaver (¡atentos alumnos del taller de Thor! ^_^) dado que este suele agregar código innecesario que hace más pesados los archivos (y lentos para cargar).

Tenemos 5 opciones de compresión: desde la más extrema (ningún ser humano entenderá el código luego) hasta la más “prolija”. Haz clic aquí para probar CleanCSS.

Sin duda es algo que muchos programadores estaban pidiendo. Por fin la tercera versión de CSS soportará variables. Hay un poco de controversia con este cambio, dado que CSS se comienza a parecer a un lenguaje de programación.

En síntesis, ahora podremos declarar variables en CSS3. Cada uno decidirá para qué las usa y verá si su código pasa a tardar el triple en cargar, si le va perfecto o si se queda con lo que venía usando y se apoya en Javascript. Por ahora, conozcamos la sintaxis. Seguir leyendo