Novedades de CSS3. Colores, opacidad y transparencia, modelo HSL. Esquinas redondeadas. Imágenes en los bordes. Gradientes lineales y radiales. Sombras de caja. Transiciones.


Muy importante: antes de utilizar algo de CSS3, debes de comprobar su grado de soporte por parte de los navegadores. Para ello puedes usar algún sitio web como HTML5 & CSS3 Support o Can I use...

Debes ver el vídeo CSS: Colores - Novedades en CSS3, en el que se explican los nuevos métodos para definir colores en CSS3, se explica el canal alfa que permite definir la opacidad o transparencia (RGBA) y el modelo de color HSL (Hue, Saturation, Lightness) que define el matiz, la saturación y la luminosidad.

Después tienes que ver el vídeo CSS: Novedades en CSS3, en el que se explican algunas de las principales novedades de CSS3, como son:



  1. CSS - MDN: Cascading Style Sheets, most of the time abbreviated in CSS, is a stylesheet language used to describe the presentation of a document written in HTML or XML (including various XML languages like SVG or XHTML). CSS is one of the core languages of the open web and has a standardized W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 a recommendation and CSS3, now split into smaller modules, is progressing on the standard track. The first early drafts of CSS4 modules are being written.
  2. CSS3 Demos - Demo Studio - MDN: Cascading Style Sheets level 3 (CSS3) provide serveral new features and properties to enhance the formatting and look of documents written in different kinds of markup languages like HTML or XML.
  3. CSS3 Tutorial: CSS is used to control the style and layout of Web pages. CSS3 is the latest standard for CSS. This tutorial teaches you about the new features in CSS3!
  4. CSS3.com: Cascading Style Sheets (CSS) are the modern standard for website presentation. When combined with structural markup language like HTML, XHTML, or XML (though not limited to these), CSS provide Internet browsers with the information that enables them to present all the visual aspects and elements of a web document. CSS apply things like borders, spacing between paragraphs, margins, headings on images, control of font faces or colors, background colors and images, textual effects like underlined or strike-through text, layering, positioning, and a number of other presentational effects. CSS controls the presentational aspects of a web page’s design, whereas HTML, XHTML, or XML control the structure of a webpage, which means more than determining that certain text is a heading, other text is a paragraph, other text os a list of hyperlinks, and so on.
  5. HSL Color Picker: Herramienta para seleccionar un color.
  6. Online Color Challenge: How well do you see color?
  1. Alpha compositing: In computer graphics, alpha compositing is the process of combining an image with a background to create the appearance of partial or full transparency. It is often useful to render image elements in separate passes, and then combine the resulting multiple 2D images into a single, final image in a process called compositing. For example, compositing is used extensively when combining computer rendered image elements with live footage.
  2. CSS current work & how to participate: This page contains a list of all completed specifications and drafts by the CSS WG (formerly “CSS & FP WG”). If you want to follow the development of CSS3, this is the place to start.
  3. CSS3 Generator: Un asistente muy sencillo de usar que genera código CSS para las nuevas propiedades de CSS3.
  4. Modelo de color HSL: El modelo HSL (del inglés Hue, Saturation, Lightness – Matiz, Saturación, Luminosidad), que es similar a HSV o HSI (del inglés Hue, Saturation, Intensity – Matiz, Saturación, Intensidad), define un modelo de color en términos de sus componentes constituyentes. El modelo HSL se representa gráficamente como un cono doble o un doble hexágono. Los dos vértices en el modelo HSL se corresponden con el blanco y el negro, el ángulo se corresponde con el matiz, la distancia al eje con la saturación y la distancia al eje blanco-negro se corresponde a la luminancia. Como los modelos HSI y el HSV, es una deformación no lineal del espacio de color RGB.