Colores y transparencias CSS-3

Colores CSS-3

La especificación de CSS Color Module Level 3 agrupa los aspectos de color, apreciándose los siguientes cambios más significativos con respecto a CSS-2.1:

  • Nombre de color transparent. En CSS-2.1 se definían colores con nombre color keywords CSS2, los cuáles siguen vigentes en CSS-3 color. Ya no aparece el nombre de color orange aunque se usará pues se declara en la lista SVG que veremos más abajo. El nombre de color transparent para declarar un color transparente en bordes y fondo ({border-color} y {background-color}) era posible en CSS-2.1, pero ahora con CSS-3 cualquier propiedad que establezca un color permite el nombre de color transparent.
  • Valores de color HSL. El espacio de colores puede representarse de varias formas. El sistema RGB establecido en CSS-2.1 y que sigue en CSS-3 nos pemite dar un valor de color con rgb(red, green, blue) siendo esos valores en el rango [0..255]. Viene a ser en definitiva un cubo de dimension 256x256x256. Otra forma de representar los colores es el sistema HSL, siendo H la inicial de hue que es el matiz del color, S la inicial de saturation, la saturación y la L de lightness o luminosidad. Así el valor de color hsl(0, 100%, 50%) es el mismo que rgb(255, 0, 0) que viene a ser el color rojo.
  • La nueva propiedad {opacity} tiene un valor real en el rango [0.0,1.0] para la transparencia del color (u opacidad), siendo cero totalmente transparente y 1 totalmente opaco. Esta propiedad puede ser especificada como un valor de color con rgba(red, green, blue, alpha), siendo alpha este valor para la transparencia en ese rango de 0 a 1. También podemos incluir la transparencia en los valores de color HSL, con hsla(hue, saturation, lightness, alpha). Sobre esta propiedad ya experimenté algo en el apartado estilo CSS-3 opacity para transparencias.
  • Nombres de color extendidos o SVG. Es una lista de nombres de color que ya estaba especificada en SVG color keywords y que ahora se incorpora a CSS-3.
  • Nombre de color currentColor. En CSS-2.1 se decía por ejemplo que la propiedad {border-color} tenía como color por defecto o inicial el especificado en la propiedad {color}, pero no quedaba reflejado con ningun palabra clave para ello.

En estos temas experimentaré algunas de estas cosas con Explorer 8 y 9, Firefox 6.0, Safari 5.0, Chrome 14.0 y Opera 11.51.

Transparencias CSS-3

En Explorer 8-9 no funcionará este ejemplo, pero en los otros navegadores señalados sí pues hacen uso de estas características de CSS-3.

Ejemplo:

TEXTO DE FONDO
opacity

El código es el siguiente

<div style="position: relative; border: blue solid 1px; 
width: 10em; height: 3em;">TEXTO DE FONDO
<div style="position: absolute; left: 5px; top: 5px; 
width: 5em; border: red solid 5px; color: red;
background-color: rgba(128,128,128,0.5)">
opacity</div>
</div>

Hay un contenedor posicionado relativamente con un texto de fondo y luego situamos otro contenedor posicionado absolutamente a 5px de su borde superior izquierdo con el texto "opacity" y bordeado en rojo. Tiene un color de fondo gris con una transparencia de 0.5, pero la transparencia se aplica sólo al color de fondo, no al de primer plano o de bordes. Es casi lo mismo que dotar de la propiedad {opacity} en lugar de usar rgba(), pero ahora la transparencia se aplica a todo el elemento:

Ejemplo:

TEXTO DE FONDO
opacity
<div style="position: relative; border: blue solid 1px; 
width: 10em; height: 3em;">TEXTO DE FONDO
<div style="position: absolute; left: 5px; top: 5px; 
width: 5em; border: red solid 5px; color: red;
background-color: rgb(128,128,128); opacity: 0.5;">
opacity</div>
</div>

En el cubo de color del siguiente tema usaré la forma rgba() para establecer los colores transparentes.

Propiedades CSS en un XML

Hace unos años hice algunas pruebas para practicar con las propiedades CSS. La idea básica era intentar racionalizar el conjunto de propiedades en una estructura XML. El vínculo W3C tabla de todas las propiedades CSS 2.1 nos muestra ya de hecho cierto esquema en esas propiedades. A partir de ahí construí un XML con el siguiente esquema:

<css title="CSS" version="2.1" lang="es" 
href="http://www.w3.org/TR/CSS2/propidx.html">  

    //PARTE DE PROPIEDADES
  
    <propertygroup id="borders" title="Bordes">
        <property id="border" title="4 Bordes" initial="none medium transparent" 
        href="http://www.w3.org/TR/CSS2/box.html#propdef-border">
            <values title="grosor {border-width}">
                <value content="value" title="valor" form="formLongitud" />                
                <valueref idref="border-widths" />
                <value content="inherit" title="heredado" />
            </values>             
            <values title="estilo {border-style}">
                <valueref idref="border-styles" />
                <value content="inherit" title="heredado" />
            </values>            
            <values title="color {border-color}">
                <value content="value" title="valor" form="formColor" />
                <valueref idref="colors" />
                <value content="transparent" title="transparente" />
                <value content="inherit" title="heredado" />
            </values>
            <applies>Todos</applies>
            <percentages>N.A</percentages>
            <media>Visual</media>
            <comment>
                4 BORDES: En este caso se...
            </comment>            
        </property>
        <property id="border-top" title="Superior" initial="none medium transparent" 
        href="http://www.w3.org/TR/CSS2/box.html#propdef-border-top">
            ...
        </property>
        ... siguen border-right, ..., border-style, etc. ...
    </propertygroup>
    
    ... más grupos de propiedades: fuentes, fondo, márgenes, relleno,
    texto y alineaciones, posicionamiento, presentación ,listas,
    interactivas, tablas y contenido generado ...
    
    //PARTE DE DEFINICIONES DE VALORES
        
    <valuesdef id="colors" title="Colores CSS">
        <value content="black" title="negro" val="rgb(0,0,0)" />        
        <value content="gray" title="gris" val="rgb(128,128,128)" />
        <value content="silver" title="plata" val="rgb(192,192,192)" />
        <value content="white" title="blanco" val="rgb(255,255,255)" />  
        <value content="navy" title="marino" val="rgb(0,0,128)" />
        ... más valores ...
    </valuesdef>
    
    ... otras definiciones de valores ...
    
</css>

Este css21.xml con su css.dtd, junto a otros componentes, los usé para montar un editor HTML-CSS de tipo WYSIWYGAcrónimo de What You See Is What You Get algo como "lo que ves es lo que tienes", lo que permite construir documentos HTML con CSS sin escribir código sino manipulando gráficamente los objetos y cambiando sus propiedades mediante comandos en botones o que se muestran en ventanas emergentes, por ejemplo. . Pero esto fue en 2009 y luego lo abandoné aunque me sirvió para aprender. Lo he probado en estos días y veo que aún funciona en Firefox (versión 6 de Septiembre 2011), pero ya no va bien con Explorer 8. Por ejemplo, una captura de pantalla actual de ese editor

edita bordes

Muestra un elemento seleccionado y una ventana emergente para editar los bordes del elemento. En definitiva, no voy a mostrar ese editor completo pues tendría que actualizarlo. Pero si que quiero reutilizar, actualizar y mostrar algunos componentes de esa aplicación para subirlos a este sitio. En esta primera entrega presento aquellos componentes relacionados con el color CSS: el cubo de color y la paleta de color, actualizándolos a lo que expone CSS-3 relacionado con el color.

En Febrero 2013 he creado el editor de propiedades CSS cuyo objetivo es también racionalizar todas las propiedades CSS, pero ahora en un esquema de datos de notación de objetos JavaScript (como JSON), ofreciendo además ejemplos de uso de cada propiedad.