Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS Colores

❮ Anterior Siguiente Capítulo ❯

Colores CSS3

CSS es compatible con nombres de colores, hexadecimal y colores RGB.

Además, también introduce CSS3:

  • colores RGBA
  • colores HSL
  • colores HSLA
  • opacidad

Soporte para el navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con los valores de color CSS3 / propiedad.

Propiedad
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
opacidad 4.0 9.0 2.0 3.1 10.1

RGBA Colores

Valores de color RGBA son una extensión de los valores de color RGB con un alpha del canal - que especifica la opacidad de un color.

Un valor de color RGBA se especifica con: RGBA (rojo, verde, azul, alpha ). El alpha parámetro es un número entre 0.0 (completamente transparente) y 1.0 (totalmente opaco).

RGBA (255, 0, 0, 0,2);
RGBA (255, 0, 0, 0,4);
RGBA (255, 0, 0, 0,6);
RGBA (255, 0, 0, 0,8);

El ejemplo siguiente define diferentes colores RGBA:

Ejemplo

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
Inténtalo tú mismo "

HSL Colores

HSL significa Tono, Saturación y Luminosidad.

Un valor de color HSL se especifica con: HSL (tono, saturación, luminosidad).

  1. Hue es una medida de la rueda de color (de 0 a 360):
    • 0 (o 360) es de color rojo
    • 120 es verde
    • 240 es azul
  2. La saturación es un valor de porcentaje: 100% es el color.
  3. La ligereza es también un porcentaje; 0% es oscuro (negro) y 100% es de color blanco.
hsl (0, 100%, 30%);
hsl (0, 100%, 50%);
hsl (0, 100%, 70%);
hsl (0, 100%, 90%);

El ejemplo siguiente define diferentes colores HSL:

Ejemplo

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
Inténtalo tú mismo "

HSLA Colores

Valores de color HSLA son una extensión de los valores de color HSL con un alpha del canal - que especifica la opacidad de un color.

Un valor de color HSLA se especifica con: HSLA (tonalidad, saturación, luminosidad, alpha ), donde la alpha parámetro define la opacidad. El alpha parámetro es un número entre 0.0 (completamente transparente) y 1.0 (totalmente opaco).

HSLA (0, 100%, 30%, 0,3);
HSLA (0, 100%, 50%, 0,3);
HSLA (0, 100%, 70%, 0,3);
HSLA (0, 100%, 90%, 0,3);

El ejemplo siguiente define diferentes colores HSLA:

Ejemplo

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
Inténtalo tú mismo "

Opacidad

La propiedad CSS3 opacidad establece la opacidad de un valor RGB especificado.

El valor de la propiedad de opacidad debe ser un número entre 0.0 (completamente transparente) y 1.0 (totalmente opaco).

RGB (255, 0, 0); opacidad: 0,2;
RGB (255, 0, 0); opacidad: 0,4;
RGB (255, 0, 0); opacidad: 0,6;
RGB (255, 0, 0); opacidad: 0,8;

Observe que el texto anterior también será opaco.

El siguiente ejemplo muestra los diferentes valores RGB con la opacidad:

Ejemplo

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
Inténtalo tú mismo "

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»


❮ Anterior Siguiente Capítulo ❯