En HTML5 existen colores predefinidos que tienen nombres mucho más fáciles de recordar que sus respectivos códigos hexadecimales. Es mucho más fácil acordarse de nombres de colores como 'Tomato', 'Gold', 'Olive', 'Chocolate', 'Silver', 'Magenta' o 'Salmon' que de sus respectivos códigos de color en hexadecimal: '#FF6347', '#FFD700', '#808000', '#D2691E', '#C0C0C0', '#FF00FF' o '#FA8072'.
Así, como ambas líneas tienen exactamente el mismo resultado...en tu mano queda utilizar una u otra forma...
color=tomato;
color=#FF6347:
A continuación presentamos una recopilación de los mejores colores (a gusto personal, claro) de cada tonalidad (aunque hay muchos más)...
(Haz clic en cada uno de estos tonos para abrir/cerrar la información)
En CSS3, se pueden definir transparencias, ya sea en el color de fondo de un <div> en concreto como en algunos elementos individuales.
Así, para definir un color de fondo con un índice de transparencia determinado utilizamos 'rgba (rojo, verde, azul, transparencia)':
background-color:rgba(255,0,0, 0.4);
El primer cuadro representa un color rojo con una opacidad del 40% (0.4), mientras que el segundo cuadro se ha añadido para poder ver la diferencia con el color rojo sin transparencia.
En este ejemplo se han utilizado los valores RGB del color rojo (255 para el rojo (el máximo valor), 0 (el mínimo valor) tanto para el verde, como para el azul), con un 0.4 (40%) de opacidad (o 60% de transparencia, según como se vea).
Si deseas ver una tabla de relación entre los códigos de color en hexadecimal y los RGB accede a FarystyDesign.
Otra posibilidad que existe (para algunos objetos, como es el caso de las imágenes SVG entre otros) es utilizar el atributo 'opacity, indicando los mismos valores (de 0: totalmente transparente a 1: totalmente opaco).
opacity: 0.4;
Degradados
Los degradados a través de código CSS3 han sido una de las que más vueltas han dado hasta estabilizarse y generalizarse de la misma forma en (casi) todos los navegadores.
Vamos a dejar en el bául del ólvido el infernal código de degradado que utilizaban las versiones de Chrome anteriores a la 10 y de Safari anteriores a la 5 y nos vamos a concentar en el código genérico que funciona en:
Firefox 3.6+
Chrome +10
Safari +5.1
Opera 11.10+ (Sólo degradados lineales)
(e increiblemente en) Internet Explorer 10+
Degradados lineales
Primero definimos dónde empieza el degradado (top, bottom, right, left) o bien indicando un ángulo (45deg), seguido de los colores que compondrán el degradado y de manera opcional se puede indicar cuánto durará cada color (en porcentaje).
Degradado lineal (linear-gradient) que se inicia en la esquina superior izquierda con una inclinación de 30 grados (30deg) y que en toda su extensión pasa por los colores crimson, sienna, royalblue, indianred y purple.
background:linear-gradient(top, black 10%, orangered 75%, yellow);
Degradado lineal (linear-gradient) que empieza en la parte superior del <div> (top) y que define 3 colores indicando sus dimensiones. Así, mientras el negro ocupa el 10% del espacio, el orangered ocupa el 65% (del 10 al 75%), quedando el 25% restante para el yellow).
Degradados radiales
Aunque Opera todavía no admite degradados radiales, la estructura y sintaxis es muy parecida a los degradados lineales aunque utilizando radial-gradient.
Primero definimos dónde está el centro del degradado a través de una posición horizontal y luego una vertical (utilizando center, top, bottom, right, left o unas coordenadas en píxeles 125px 200px). Seguidamente se define la forma (circle o ellipse). Después opcionalmente se puede definir cómo se expandirá el degradado. Por último se definen los colores que compondrán el degradado y de manera opcional se puede indicar cuánto durará cada color (en porcentaje).
background:radial-gradient(dónde está el centro, circle/ellipseexpansión del degradado, color1, 40%, color2, 60%);
Los diferentes valores referentes a la expansión del degradado son:
closest-side:
El degradado se expande hasta que su forma exterior se encuentra con el lado de la caja que está más cerca del centro del degradado.
En este ejemplo vemos como su forma exterior (círculo amarillo) crece desde su centro hasta el lado de la caja que está más cercano al centro del degradado, que es el lado de arriba).
farthest-side:
El degradado se expande hasta que su forma exterior se encuentra con el lado de la caja que está más lejos del centro del degradado.
En este ejemplo vemos como su forma exterior (círculo amarillo) crece desde su centro hasta que se encuentra con el lado más alejado del centro del degradado, que en este caso es el lado derecho.
closest-corner:
El degradado se expande hasta que su forma exterior se encuentra con la esquina de la caja que se encuentra más cerca al centro del degradado.
En este ejemplo vemos como la forma exterior (círculo amarillo) crece desde el centro hasta encontrarse con la esquina más cercana al centro del degradado, que en este caso es la esquina superior izquierda de la caja.
farthest-corner:
El degradado se extiende hasta que su forma exterior se encuentra con la esquina de la caja que se encuentra más lejos del centro del degradado.
En este ejemplo podemos ver como su forma exterior (el círculo amarillo) crece desde el centro del degradado hasta encontrarse con la esquina más alejada de su centro, que en este caso es la esquina inferior derecha de la caja.
Algunos ejemplos:
background:radial-gradient(center center, circle, black, #1162ac);
Degradado radial (radial-gradient) que empieza en el centro del <div> (center center), que tiene una forma de círculo (circle) y que va del color negro hasta un color azul con código hexadecimal #1162ac.
Degradado radial (radial-gradient) que empieza horizontalmente a 200px de la esquina superior izquierda y verticalmente en la parte superior (top) y que con forma elíptica (ellipse) va del color white hasta el black, pasando -por partes iguales- por el azul con código de color #1162ac.
background:radial-gradient(center center, ellipse, white 25%, peru 66%, black 96%);
Degradado radial (radial-gradient) que empieza en el centro (center center) y que define las dimensiones elípticas de los colores que se van a utilizar. White en un 25%, peru en un 41% (del 25 al 66%) y black en un 30% (del 66 al 96%), ocupando también el 4% restante al no indicarse más colores.
Compatibilidad con navegadores
Para que los degradados funcionen en la mayoría de navegadores modernos es necesario añadir el código CSS con los diferentes prefijos de navegador, sin olvidar el código genérico (sin prefijos) para que también funcione cuando los prefijos no sean necesarios.
