CSS3 cheatsheet (Chuleta CSS)

English here!

Si eres desarrollador, programador o diseñador web, es posible que esta chuleta (cheat sheet) te interese. Se trata del Lenguaje CSS, un lenguaje de marcado que se ideó con el propósito de simplificar el diseño web a través de un conjunto de sencillas propiedades aplicadas a uno o varios documentos.

Con el paso del tiempo, este lenguaje de hojas de estilo ha evolucionado mucho, permitiendo desde las tareas más básicas y elementales, como cambiar las dimensiones o los colores de un elemento web hasta efectos interactivos, transiciones, animaciones o incluso hasta efectos tridimensionales.

Esta cheatsheet es muy útil para aquellos que tenemos mala memoria o que queremos consultar de forma rápida la sintaxis de las propiedades CSS existentes.

Contenido

La cheatsheet contiene información sobre las siguientes características de CSS, dividido en dos páginas. La primera de ellas contiene en su mayoría características de CSS2, mientras que la segunda incorpora las novedades más populares de CSS3.

Primera página:

• Sintaxis general de CSS
• Formato de colores (hexadecimal, RGB, HSL, RGB/HSL+alfa)
• Colores y fondos
• Unidades y medidas
• Fuentes CSS2 (tipografías), alineaciones y variaciones
• Tipos de elementos
• Perfiles (outlines)
• Desplazamiento y posicionamiento de elementos
• Cursores del ratón
• Listas y tablas
• Modelo de cajas (Márgenes y espaciados)
• Bordes y estilos de borde
• Dimensiones y ubicaciones
• Columnas CSS3

Segunda página:

• Fondos CSS3
• Gradientes de fondo (lineales y radiales)
• Sombras de texto y elementos
• Prefijos «vendor» de motores de navegadores
• Bordes con imágenes
• Bordes redondeados
• Fuentes CSS3 (tipografías)
• Medios (útil para responsive design)
• Paginación en medios
• Transiciones CSS3
• Animaciones CSS3
• Filtros CSS3
• Transformaciones 2D
• Transformaciones 3D

Consideraciones

Aquellos que quieran imprimir la chuleta, recomiendo esperar unos días desde la publicación de este artículo, ya que probablemente en los comentarios se indiquen erratas o posibles errores, que se irán corrigiendo poco a poco.

Se agradecerá cualquier tipo de sugerencia, difusión o apunte sobre la cheatsheet.

Also, English version available

• Format: PDF
• Size: DIN A4
• Language: English, Español (Choose after)

Descarga / Download

He abandonado la opción de publicar esta cheatsheet bajo un formato de pago porque creo en otra forma de hacer las cosas. Confío en que todo el que sepa valorar el trabajo ajeno que ha supuesto la elaboración de esta chuleta realizará una donación con la cantidad que estime justa.

De hecho, si el ritmo de donaciones compensa el trabajo, me comprometo a elaborar una siguiente parte de la chuleta con la parte restante de CSS3, como selectores CSS, pseudoclases y pseudoelementos (útil para seleccionar elementos en CSS, Javascript o JQuery).

También tienes la PHP cheatsheet o la ModRewrite cheatsheet.

Acceder a la página de descarga

Agradezco toda difusión que se haga de esta chuleta. Por favor, si lo hacéis, utilizad el enlace de este artículo y no enlaces directos o que puedan hacer hotlinking. Si tienes cualquier tipo de problema con la descarga o donación, contacta conmigo.

20-06-2014