[HTML] Cargar LessJS desde la CDN de Google. Permite arrancar un proyecto con Less rapidamente sin tener ningún programa instalado, únicamente con una conexión de Internet. Luego, durante el desarrollo puedes cambiar la forma de trabajar a una que no dependa de Javascript (Ver apps recomendadas para trabajar con LESS).
Enlace: https://gist.github.com/1806334

[PHP] Usar modo desarrollo si el sitio web está en un servidor local. Intercambia entre el uso de la hoja de estilos css, si esta en producción, o el modo javascript con alerta de errores si esta en un servidor de desarrollo (localhost). Utiliza la CDN de Google como en el snippet anterior.
Enlace: https://gist.github.com/1806248

[LESS] Plantilla para definir estilos de fuente rapidamente.
Enlace: https://gist.github.com/1806368

[LESS] Desactivar la compresión de CSS al usar Simpless. Por defecto la aplicación comprime todos los estilos css y en algunas [extrañas] ocasiones quizá no querramos eso, para desactivar esa opción basta con agregar el siguiente comentario en la hoja de estilos less:

//simpless:!minify

[LESS] Librerias de estilos, no olviden que funcionan de forma muy similar a un snippet permitiendo acelerar su trabajo.
Enlace: Librerias de estilo en LESS.

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Qué significa organizar estilos

Aunque el diseño gráfico, incluyendo los estilos web, son usualmente algo desordenado, un tanto libre en su desarrollo hay momentos en que mantener un orden es beneficioso, especialmente con proyectos amplios o con un futuro prometedor, que como ejemplo podría mencionar temas de wordpress, aplicaciones web, portales de contenido, etc.

Significa que antes de crear si quiera una clase comenzarás definiendo en qué forma se dividirán los estilos, la paleta de colores, las fuentes a utilizar, la carpeta de imágenes, e incluso pre-definir clases genericas para utilizar en toda la hoja de estilos para algunos elementos repetitivos como el logotipo o colores de identidad de la marca

De qué forma me ayuda Less CSS a organizar estilos

Dividir estilos por sección

Una buena forma de dividir los estilos es por la sección del sitio web que modifican (portada, página interna, contacto, etc). De esta forma existirá una hoja de estilo por cada sección aunque al final se mezclen en una única hoja de estilos utilizando el comando import.

En el siguiente código estoy definiendo las hojas de estilos que utilizaré como base, la primera es parte del framwork Foundation sobre el cual trabajo, el segundo es una adaptación de la libreria de estilos Less Elements, la tercera es un framework propio sobre el que estoy trabajando y la última es una librería de estilos para controles de formulario. En situaciones así, en donde intervienen varias hojas de estilo los namespaces resultan muy útiles.

Predefiniendo la paleta de colores

Los colores se definen por su nombre en variables. También se pueden definir como variables llamadas como su contexto (error, hover, informativo) aunque esto es más complicado. Quizá la forma ideal (aunque no la más rápida) sea una combinación de ambas como en el siguiente ejemplo en dónde defino los colores que son parte de la identidad de la marca seguido de algunos colores definidos por su contexto (action que significa que son enlaces)

Para evitar confusiones con los nombres de variable acostumbro a anteponer una c al nombre de la variable, excepto que sea el nombre de un color lo dejo como esta.

Uso de fuentes

De vez en cuando las fuentes es un tema olvidado en los estilos web, se define un estilo y se olvida el resto. Pero es una buena práctica al menos definir cuatro tipos de fuentes:

• La fuente del contenido, o texto en general (fontBase)
• …de los titulares (fontHeadings)
• …de los controles de formularios o de elementos que actuen como parte de la interfaz, usualmente es una fuente más angosta y aún legible en dimensiones reducidas (fontControls)
• y la fuente del código fuente, que por recomendación debe ser monoespaciada.

En el ejemplo anterior además importe una hoja de estilos, font.less, que es la encargada de definir la webfont Yanone Kaffeesatz.

Definir variables de referencia

Definir variables de referencia no es necesario pero yo se los recomiendo, es un buen tip, por ejemplo para definir la ubicación de las imágenes, de las fuentes, el ancho máximo de la pantalla u otros valores de referencia dentro de todo el diseño gráfico. Por ejemplo si sabemos que el logotipo siempre deberá tener un margen especifico podríamos definirlo desde el inicio.

Luego de un código como el anterior es mucho más fácil trabajar, por ejemplo para agregar una imagen como fondo utilizariamos un estilo similar a este:

.panel{
  background:url("@{dirImages}/fondo.jpg") repeat;
}

Es importante aclarar que las variables se incluyen de la forma @{variable} porque están dentro de una cadena de texto.

Definir estilos globales

Para finalizar se debe definir los estilos globales, los del body y demás contenedores, para poder tener una base de estilos sobre la culal poder trabajar.

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

LESS CSS como muchos lenguajes de programación requiere de un interprete o aplicación que lo compile para que pueda ser utilizado, por si solo no funciona.

Simpleless

Es una aplicación multiplataforma (Windows, Mac y Linux) que permite monitorear una hoja de estilos less y cada vez que realizamos un cambio en la hoja de estilos, o en alguna de las hojas externas que utilice, compilará una nueva versión CSS de la misma. Es un proceso bastante sencillo y muy rápido.

Además Simpleless incluye compresión de estilos para ahorrar espacio y respeta la sintaxis para conservar comentarios importantes (los que tienen un signo de admiración después de /*! ejemplo */).

Por defecto compilará los estilos CSS en la misma carpeta que los estilos less, pero en el caso de que la carpeta de estilos less tenga una “hermana” llamada “css” los estilos serán almacenados allí. Es bastante básico pero algunos podrían pasarlo por alto y tampoco está documentado.

Actualmente es el cliente que estoy utilizando y lo recomiendo bastante.

Enlace: Simpless | http://wearekiss.com/simpless

Crunch!

Crunch! no solo compila estilos LESS sino además permite editarlos y por ser una aplicación desarrollada con Adobe Air es multiplataforma.

Enlace: Crunch | http://crunchapp.net/

Less.app / Winless

Aún no he probado Less.app pero entiendo que funciona de forma muy similar a Simpleless con algunas opciones más. Winless por otra parte es el equivalente de Less.app para Windows.

Enlace: Less.app | http://incident57.com/less/

Enlace: Winless | http://winless.org/

LessPHP

LessPHP no es una aplicación gráfica, es un script (clase mejor dicho) programada con PHP que permite compilar estilos LESS y escribirlos en un directorio especifico, de esta forma se pueden realizar aplicaciones web que compilen estilos LESS, generarlos en tiempo real o almacenandolos en cache.

Compilar estilos LESS CSS con PHP no es mejor que las aplicaciones anteriores, simplemente es diferente, permite automatizar varias tareas a la manera que elijamos y al estar unido a un lenguaje programación como PHP da paso a ponerse creativo y encontrar otras formas de explotar LESS.

Enlace: LessPHP | http://leafo.net/lessphp/

Compilar desde línea de comandos

Además de las opciones anteriores LESS se puede compilar desde línea de comandos, usando Winless o una de las aplicaciones listadas en el wiki: Command Line use of LESS.

Más aplicaciones

Pueden ver una lista de aplicaciones actualizada en el wiki de LessCss e incluso colaborar agregando algun otra que conozcan: GUI compilers that use LESS.js.

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Este artículo es continuación de la serie uptoeleven: less css, de febrero. Puedes ver el primer artículo de la serie en: Qué es Less CSS y cómo funciona.

LESS CSS no es un lenguaje complicado, sin embargo, tiene una curva de aprendizaje mediana, conseguir que los estilos funcionen es bastante rápido pero llegar a aprovecharlo al 100% toma un poco más de tiempo.

Entonces la pregunta es ¿Por qué usar Less CSS si ya existe CSS?

Mejoras rápidas con poco trabajo

Less CSS está desarrollado a partir de CSS por lo que la sintaxis es bastante similar, tanto que puedes mezclar archivos CSS con archivos de LESS sin problema. Puedes combinar la mitad de un estilo con la mitad de otro.

Esto permite migrar estilos CSS rápidamente y luego irlos mejorando eventualmente con las ventajas de Less. Además el enfoque del lenguaje es ahorrar trabajo por lo que existen muchos atajos y en resumen el tiempo de desarrollo se reduce, y los resultados se amplifican.

Mejor organización en desarrollo

Dentro de las caracteristicas de Less encontramos uso de variables, namespaces, mixins e importación de hojas de estilo externas (igual que CSS). Esto reunido en un solo lenguaje permiten que desde el punto de vista de desarrollo podamos reutilizar estilos, definir reglas, paletas de colores e incluso mantener nuestra propia politica para crear estilos. Literalmente podemos trabajar con “librerías de estilos” por separado y al final ofrecerle al visitante un único archivo CSS compilado, comprimido y funcional.

Bootstrap de Twitter trabaja con decenas de archivos less que se reducen a tres para el visitante

Optimización de estilos CSS

Al compilar LESS CSS con una aplicación como Simpless o Less.app podemos definir la opción de que comprima el archivo, de forma que la hoja de estilos final ocupe el menor espacio posible.

Reutilización de estilos

Los mixins de Less permiten reutilizar estilos, de forma que podemos definir un clase con estilos redondeados y luego invocarlas en diferentes clases para duplicar el estilo.

.control{
  border-radius: 4px;
  border:solid 1px #aaa;
  background:#eee;
}

.boton{
  .control;
  font-size:1em;
}
.panel{
  .control;
  padding:.5em;
}

El estilo anterior da como resultado que la clase botón y panel obtengan bordes redondeados, bordes y fondo gris de la clase control sin necesidad de escribirlo dos veces.

Funciones aritmeticas

Esta caracteristica es simplemente genial, podemos definir propiedades utilizando operaciones aritmeticas para ahorrarnos tiempo con la calculadora (o los dedos :p )

p{
 font-size: 18/16em; // da como resultado font-size:1.125em
}

 Variables

El uso de variables nos ahorra estar memorizando o copiando valores, como por ejemplo colores, nombres de fuentes, etc. En CSS cada vez que necesitamos un color debemos recordar el código exacto mientras que con LESS solo debemos recordar el nombre de la variable. En el siguiente ejemplo defino el color de un botón usando variables, y usando una función de color le indico que al posicionar el puntero encima cambie el color rojo por uno más claro (función lighten al 20%).

@rojo: #f00;
@verde: #0f0;
@blanco: #fff;

.boton{
  background:@rojo;
  color:@blanco;
  &:hover{
    background: lighten(@rojo, 20%);
  }
}

Más información

Enlace: Documentación de LESS (inglés) | http://lesscss.org/#-variables

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Bienvenido a la primera edición de uptoeleven — un reto personal de publicar once entradas sobre un mismo tema cada cada hora el onceavo día del mes.

LESS CSS es una ampliación a las famosas hojas de estilo CSS, pero a diferencia de estás funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, operaciones aritmeticas, entre otras, para acelerar y enriquecer los estilos en un sitio web.

LESS CSS no reemplaza a CSS, de hecho el resultado final es una hoja de estilos css completamente funcional y compatible, simplemente ofrece mejoras en el área de desarrollo, por lo que usarlo se vuelve recomendable si quieres ahorrar tiempo de desarrollo, utilizar caracteristicas avanzadas de estilos y para ahorrarte trabajo —de allí su nombre: less css (menos css).

Caracteristicas de LESS CSS

Las caracteristicas de LESS CSS son demasiadas, e incluso combinandolas pueden conseguir más, sin embargo, intentaré mencionar las más notables:

Variables

Las variables en less funcionan de forma similar a las constantes en los lenguajes de programación, permitiendo definir valores que podrán ser reutilizados en cualquier parte de la hoja de estilo, e incluso entre otras hojas de estilo. Su sintaxis es la siguiente:

@variable: valor;

Mixins

Los mixins son, como a mi me gusta llamarlos, clases dinámicas, porque funcionan de forma similar a las clases CSS pero con caracteristicas de funciones de programación. Es decir que pueden ser llamadas desde otras clases para obtener su valor y además permiten parametros, aunque no es necesario utilizarlos. Está caracteristica  hace posible definir una clase dando flexibilidad para variar algunos estilos como el color o tamaño del elemento. Su sintaxis, en el caso de que usemos parametros,  es la siguiente:

.mi_mixin(color: valordefecto){
  font-size:2em;
  color:@color;
  margin:0.2em;
}

Funciones de color

Las funciones de color son funciones pre-definidas de Less CSS que permiten alterar un color, para hacerlo más claro, oscuro, saturado, desaturado, cambiarle la tonalidad, etc. Son una gran herramienta para definir una paleta de colores sin estar buscando códigos de color. Las funciones de color son:

• lighten para aclarar un color.
• darken para oscurecerlo.
• saturate para saturarlo, o “aumentar el color”.
• desaturate para desaturarlo, o “reducir el color”.
• fadein para resaltarlo quitandole transparencia.
• fadeout para disimularlo usando transparencia.
• fade para cambiar la transparencia a 50%.
• spin para cambiar el tono de color.
• mix para mezclar dos colores.

su sintaxis es similar a está:

lighten(@color, 30%);
darken(@color, 30%);

Mantene sintonía con el blog para más información acerca de cada una de estas caracteristicas y cómo aprovecharlas mejor.

Cómo se usa

Hay varias formas de utilizar LESS CSS, una de ellas es a través de javascript del lado de servidor usando node.js, otra es utilizando javascript del lado del cliente con less.js y por último usando una aplicación que compile los estilos .less a .css.

Al iniciar a trabajar con LESS CSS es un error querer utilizar la versión de javascript del lado del cliente. Es un error porque esta versión se considero para uso en ambientes de desarrollo —al ser más rápido de corregir en caso de error—, además es lenta y aumenta el riesgo de fallar al depender completamente de javascript. Para hacer hacer experimentos locales o iniciar está muy bien pero para producción no se recomienda.

Más adelante escribiré sobre aplicaciones recomendadas para compilar .less a .css y las ventajas de cada una, pero por ahora, para comenzar, les digo que le den un vistazo a simpleless (multiplataforma), less.app (mac), o si buscan una solución a la medida pueden recurrir a LessPHP, una librería que permite compilar less css utilizando PHP permitiendo generar estilos dinámicamente, en tiempo real o creando cache.

¡Ya, comenza a usar LESS CSS! http://lesscss.org/

Indíce

1. Qué es LESS CSS y cómo funciona
2. LESS CSS vs CSS
3. Cómo compilar estilos LESS CSS
4. Mixins ¿Y eso con qué se come?
5. Cómo usar #namespaces en Less CSS
6. Cómo organizar estilos usando Less CSS
7. Librerias de estilos Less CSS
8. Acelerar la creación de sprites con Less CSS
9. Cómo compilar LESS CSS usando PHP
10. Snippets para trabajar con Less CSS
11. Manipular colores usando LESS

2 comentarios

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Ambos buscan cubrir las mismas necesidades, ofreciendo una serie de recursos web para acelerar el desarrollo de sitios web basados en estándares y buenas prácticas. Sin embargo, no son competencia directa aún. Boostrap es mucho más completo que Foundation al incluir gran cantidad de estilos por defecto y una colección de librerias de javascript, pero por otro lado Foundation ofrece un buen soporte a responsive design, es ligero y también más flexible para modificar.

La piedra angular

Durante algún tiempo trabajé con Foundation porque se ajusta mejor a mi forma de trabajar, que prefiero tener más control sobre la apariencia, sin embargo, hace unas semanas decidí que la mejor opción era crear un framework propio para trabajar. Por supuesto comenzar desde cero no era una opción así que debía elegir cuál framework, entre Foundation y Bootstrap, sería la piedra angular.

Foundation fue el ganador, principalmente porque lo conozco bien, así que me dedique a modificarlo, hice varios avances incluyendo migrarlo a Less e integrar Minify para optimizar archivos. Pero justo ayer decidí darle una segunda oportunidad a Bootstrap, realmente su grilla de 16 columnas me agrada y ofrece una base mucho más completa para el desarrollo de sitios web gigantes. Durante algunas horas me convenció tanto que estuve a punto de deshacer el trabajo realizado con Foundation y cambiarlo.

Pero pudo más Foundation y Bootstrap quedo rezagado de nuevo. Es contradictorio pero aunque Bootstrap continua siendo mucho más completo que Foundation, en cuanto a características y apariencia inicial (básicamente es la misma que Twitter), son esas mismas razones lo dejaron fuera del juego.

Bootstrap al buscar cubrir más estilos web se vuelve grande y complejo, y con esto no me refiero a que sea difícil de entender pero hay que manejar más archivos y variables, sumando tiempo al desarrollo. Esta ventaja, de poseer más características, también significa más estilos pre-definidos que a la larga quitan más control sobre diseño, ú obligando a dedicar más tiempo a la edición de estilos.

En resumen, Foundation es más pequeño pero está mejor enfocado, también es ligero y permite experimentar más gráficamente con los elementos web. Por otro lado Bootstrap ofrece una base bastante robusta para el diseño de interfaces, ofreciendo más opciones pero a la vez “amarrando” la apariencia a una línea de diseño gráfico previamente definida, que desde el punto de vista personal significa una personalización más lenta y complicada.

Si eres programador, o tu especialidad no es el diseño gráfico web, mi recomendación es que vayas tras Bootstrap, te dará una apariencia completa prácticamente sin necesidad de modificar estilos (apenas unas variables). Mientras que si lo tuyo es el diseño gráfico y los sitios web a la medida entonces la mejor opción es Foundation, que da mejor soporte a responsive design para ofrecer tu sitio web en versiones para computadoras, tablets o móviles.

Pedazos de comentarios, pequeños y aleatorios

• Estuve a punto de cambiar Foundation por Bootstrap, que es más completo y trabaja con 16 columnas, pero hubiera sido un error.
• Foundation es más simple que Bootstrap y requiere más trabajo de diseño, pero es mucho más flexible y rápido para prototipar.
• Vale aclarar: Foundation es más rápido porque uso una adaptación basada en Less y lo elegí para trabajo porque ofrece mejor soporte a responsive design.

La última palabra

Después de todo lo dicho, en donde Foundation parece ser el ganador, la última palabra aún no está dicha. El equipo de Twitter, liderado por @mdo, lanzará el 30 de enero la versión 2.0 de Bootstrap que promete un gran avance sobre la versión actual, la 1.4, y tampoco hay que olvidar que este es uno de los proyectos más grandes y activos de Github, lo cual es algo bastante notable en su desarrollo, ofreciendo corrección de errores y características nuevas más rápido.

Foundation por su parte es pieza clave para Zurb, una empresa genial de diseño web, que mantiene a su equipo enfocado en el framework, ofreciendo aportes al código diariamente y guiados por una serie de buenas practicas que hacen al framework muy innovador.

—
Nota en construcción, seguiré editando.

2 comentarios

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Botones en la página con ancho normal

Botón cortado cuando la página tiene dimensiones reducidas

La solución a este problema es utilizar dentro de los estilos del botón la propiedad white-space con el valor nowrap que le indica al navegador que el texto dentro de ese elemento no debe ajustarse. Esta propiedad es el equivalente CSS a la propiedad no break de los estilos de InDesign.

a.boton {
  color:#51626f;
  background:#e8eaec;
  border:solid 1px #51626f;
  white-space:nowrap;
  /* (...) */
}

Esta solución da como resultado que igual se utilicen dos líneas para los botones, pero evita que se rompa el botón:

Botón con el estilo corregido

Vale aclarar que este problema no es común en páginas web con ancho fijo o con botones de medidas especificas, y por esta misma razón la propiedad white-space tampoco es muy conocida, sin embargo, es compatible con la mayoría de navegadores recientes y puede aplicarse a otros elementos.

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Un sprite CSS es una técnica en la que se unen varias imágenes en una sola, se hace para optimizar espacio y tiempo de carga de un sitio web. Es posible ahorrar hasta el 60% del peso de los archivos y pueden reducirse decenas de imágenes a una sola.

En la imagen puede verse el sprite en desarrollo arriba y el resultado final abajo. Se ve igual se desarrolla diferente y rinde mejor.

Tip: Los sprites son muy populares dentro del desarrollo de juegos RPG, supongo que de allí viene la idea.

5 comentarios

ivanmendoza 2011 - Bajo licencia Creative Commons By-NC-SA.

Cross browsing, en resumen, consiste en realizar un sitio o aplicación web compatible entre más de un navegador, usualmente se utiliza cuando tu sitio web es compatible con navegadores que utilizan estándares y además Internet Explorer (que suele interpretar código a su modo), aunque el termino es valido para cualquier navegador.

Aplica propiedades CSS3 por separado

El problema aparece cuando Internet Explorer (IE) comienza renderizar mal las propiedades de CSS3, un error poco común pero que si esta presente arruina los estilos del sitio web.

La solución fue eliminar las propiedades CSS3 para IE, algo que me quito tiempo porque las propiedades estaban repartidas entre muchas clases en diferentes lugares y la mayoría eran básicamente iguales. Por ejemplo, si quisiéramos un botón con gradiente azul, sombra y esquinas redondeadas usualmente lo haríamos de esta forma

(por demo sólo estoy aplicando estilos CSS en Firefox, por eso coloco “–moz” frente a la propiedad).

La solución y buen practica es usar un selector por cada propiedad CSS3 que desees usar, de esta forma:

¿Por qué?
Porque de esta forma la clase principal permanece valida para todos los navegadores y sí las propiedades CSS3 nos dieran problema las podríamos eliminar (reiniciar) simplemente haciendo esto (en una hoja de estilo adicional específicamente para IE, o el navegador que este dando el problema):

o sí utilizan Turbine (ver más abajo en recursos) podrían excluir esas propiedades de Internet Explorer, de la siguiente forma

Resalte en magenta la propiedad browser. Está funciona gracias a Turbine y la extensión Sniffer. Básicamente dice: “aplica esta clase en todos los navegadores excepto Internet Explorer”. Se puede elegir versión u otros navegadores, pero para ejemplo así esta bien.

En el caso de Internet Explorer y las esquinas redondeadas puedes usar el script DD_roundies sobre la clase conBordesRedondos4px para obtener los mismos resultados.

Recursos para usar CSS3

CSS3 aún no es terreno solido por lo que hay que tener cuidado al usarlo para mantener la compatibilidad, y para eso existen algunos recursos que te facilitan la tarea

• Turbine. Un framework en PHP para desarrollar CSS, acelera el desarrollo y optimiza el resultado final.
• Plugin CSS3: habilita las opciones CSS3 para utilizarlas según el estándar actual mientras que Turbine CSS se encarga de ajustar la sintaxis a cada navegador.  De esta forma sólo escribes una vez la propiedad.

  

• Plugin Sniffer: permite mostrar u ocultar estilos CSS según el navegador que visita la página, mejora su visualización y facilitando el cross-browsing. Recomiendo leer la documentación al respeto.
• Internet Explorer 9 (aún en beta) ya soporta parte del estándar CSS3.
• Pueden encontrar más información en el sitio web de desarrolladores de IE9.
• CSS3.info “todo lo que necesitas saber sobre CSS3”.
• Técnicas para conseguir propiedades CSS3 con jQuery por aNieto2K.
• Consejos para mejorar nuestro cross browsing por aNieto2k.
• Además de un lista sin fin de generadores de estilos CSS3
• CSS3 Generator. Genera código de varias propiedades CSS3 para Firefox, Webkit (Chrome, Safari, etc.) y estándar.
• CSS3 Please. En resumen es una especie de plantilla con estilos CSS3 predefinidos pero que podemos modificar escribiendo nuestros propios valores, por desgracia la apariencia no es muy agradable aunque eso no le quita lo útil.
• CSS3 Gradient Generator. Generador de gradientes utilizando CSS3, la interfaz es gráfica y muy fácil de usar.

Hasta la próxima.

Comenta

ivanmendoza 2010 - Bajo licencia Creative Commons By-NC-SA.

La línea que se ve arriba, llamada outline, no debería ser tan extensa. Este error ocurre cuando a través de CSS queremos ocultar el texto de un elemento enviándolo lejos del área visible con text-indent. En el código de abajo se puede ver el text-indent a –9999em (lo enviaron muy lejos jeje).

Para corregirlo solo hay que añadir una regla más al CSS: overflow:hidden;

Con esto la línea se ajusta de nuevo al elemento porque ya no “busca” al texto fuera del área visible.

3 comentarios

ivanmendoza 2009 - Bajo licencia Creative Commons By-NC-SA.