Wextensible

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:

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.