Credit image

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

CSS3 cheatsheet (Chuleta CSS)

Chuleta o cheatsheet de CSS3 (lenguaje de marcado de hojas de estilo) en formato PDF, muy útil para desarrolladores, diseñadores o programadores web.

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

Emezeta CSS3 Cheat Sheet is a CSS3 reference card. You can download it in PDF format, ready for printing. Putting this cheat sheet together has meant a huge amount of time and effort, so if you find it useful, please consider supporting my work by making a donation. Your donations are what will keep the cheat sheet and all the upcoming versions free of charge. Thank you.

  • 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.

¿Quieres aprender a usar todo esto? Con la organización de la Oficina de Software Libre y de la Fundación General de la Universidad de La Laguna, imparto un curso online de Diseño web con CSS3 en el que aprenderás a diseñar páginas webs con CSS3 y sus diferentes características y ventajas.

Temario y enlaces de inscripción: Curso de diseño web y CSS3 (de principiante a experto)

Escrito por Manz, el , en programacion. Comentarios recibidos: 12.

12 comentarios de lectores
kidcobain
kidcobain
1

primero \o/ magnifico trabajo, me gustaría colaborarte pero se me hace imposible ahora. la primera vez que llegue a este sitio fue por los cheatsheets de php, que por cierto me pareció raro que no mencionaste en este articulo

Rodolfo
Rodolfo
2

Me encanta , la idea , recurro mucho a estas herramientas ya que no no estoy todo el dia codeando , muchas gracias por el trabajo y por la forma de compartirlo . Como sugerencia podrias poner 1?‚? en la donación y no empezar con 3?‚? ,

Manz
Manz
3

@kidcobain: ¡Gracias! Tienes toda la razón, incluiré una nota. @Rodolfo: He incluído «2 euros» también como donación. Mi razón para no incluir cantidades inferiores, es que Paypal aplica unas tarifas que en cantidades pequeñas son considerables. ¡Un saludo y muchas gracias!

  • 1
Witzi
Witzi
4

Hola! He realizado la donación, me ha salido la confirmación de pago de PayPal, con el email de confirmación correspondiente, pero no me redirige a una descarga ni nada. ¿Cómo se supone que debo descargarla? Gracias!

Manz
Manz
5

@Witzi: Por alguna razón que desconozco, el widget de Paypal no está redireccionando tras hacer la donación (y parece bien configurado para ello). Creo que ya está solucionado. Si alguien tiene algún problema similar, puede descargar la cheatsheet directamente marcando 0EUR y pulsando el botón Descargar. ¡Saludos y gracias por las donaciones!

angel
angel
6

Chicos de verdad también querría colaborar, es mi compromiso moral con vosotros por este trabajo y de verdad lo haré un saludo...

Rey julien
Rey julien
7

Muy buen aporte, sin duda esto ahorra mucho trabajo a la hora de diseñar.

Carlos
Carlos
8

Por esta vez, que estoy sin trabajo hace un tiempo, la descargaré sin donar (lo siento :( ) En cuánto consiga algo de dinero la descargo de nuevo y te doy algunos eurazos, buen trabajo!

Javi Felices
Javi Felices
9

Buenas y muchas gracias por tu trabajo, ya miraré las otras chuletas, y esperando otras, que seguro que caerán, porque la gente entiende que esto tiene mucho curro.

ale
ale
10

está magnifico!! muchisimas gracias, en cuanto pueda donarte lo haré, un saludo.

Angel
Angel
11

Muchísimas gracias!!, muy útil :)

  • 1
javier_17k
javier_17k
12

Increíble trabajo!

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.