piouPiouM's dev» Archives pour le tag rgba – piouPiouM's dev

TextMate : convertir une couleur hexadécimale en notation RGBA

piouPiouM — Thu, 15 Apr 2010 10:19:56 +0000

CSS supporte divers formats de description des couleurs, le plus utilisé étant la notation héxadécimale #RRGGBB. L’introduction du support des couleurs RGBA par CSS 3 a été l’occasion pour certains de découvrir les notations rgba(255, 255, 255, 1) et sa version sans gestion de l’opacité rgb(255, 255, 255).

Il faut avouer que si nous disposons d’une palette d’outils d’aide à la saisie de couleurs en notation hexadécimale, il en est rien pour insérer une couleur au format rgb[a], et cela peut agacer. Mais c’était sans compter sur TextMate !

Convertir une couleur héxadécimale en notation RGBA

La commande TextMate Convert Hex to RGB(A) color va vous permettre de convertir via le raccourci clavier ⌘⇧X une couleur héxadécimale en son équivalent RGB(A).

Installation

Après avoir téléchargé le fichier qui suit, installez la commande d’un simple double-clique.

Convert Hex to RGB(A) color.tmCommand (4 Ko)

La nouvelle commande est maintenant disponible dans le bundle Source.

Pourquoi l’installer dans le bundle Source au lieu du bundle CSS ? Parce qu’elle peut être utile dans d’autre languages, comme JavaScript et sera ainsi disponible à tout moment, qu’importe le bundle actif.

Usage

Simple d’utilisation, positionnez-vous sur une couleur et activez la commande pour obtenir son équivalent en notation RGB :

#6633ff => rgb(102, 51, 255)
#63F    => rgb(102, 51, 255)

Ajoutez à une couleur héxadécimale la composante d’opacité pour remplacer la couleur par sa forme RGBA :

#6633FF80 => rgba(102, 51, 255, .50)
#63FA     => rgba(102, 51, 255, .67)
#63F0     => rgba(102, 51, 255, 0)

Vous pouvez également sélectionner une couleur (avec le sharp # initial) et lancer la convertion. Cela se révèle être particulièrement utile avec une sélection en colonne.

Code source

Voici le code ruby¹ utilisé au sein de la commande.

Continuez votre lecture sur des sujets similaires

Toute remarque ou conseil est le bienvenu. Il s’agit de mon premier script ruby… ↩

Du RGBA dans vos animations avec le plugin jQuery Color

piouPiouM — Sat, 20 Feb 2010 14:13:32 +0000

J’ai récemment eu à (ré)utiliser le plugin jQuery Color mais je me suis heurté à une limitation. Je travaillais sur un jeu de couleurs RGBA et malheureusement le plugin ne supportait pas ce mode colorimétrique (il se contente de travailler sur des couleurs RGB).

Qu’à cela ne tienne, en attendant que ma modification soit intégrée¹ au plugin, voici une version de jQuery Color pourvu du support des couleurs RGBA :

jquery.color.js (6 Ko)

La page de démonstration qui va bien.

Continuez votre lecture sur des sujets similaires

enfin, je l’espère :] ↩

JavaScript : tester le support des couleurs RGBA

piouPiouM — Sun, 14 Feb 2010 22:09:31 +0000

CSS3 introduit le support des couleurs en mode RGBA. Ce dernier permet de définir une valeur d’alpha à une couleur RGB. Voici comment détecter via JavaScript si un navigteur supporte la fonctionnalité¹.

Comment détecter qu’un navigateur supporte RGBA ?

Le principe est simple :

Atteindre le premier élément script² du document.
Mémoriser sa couleur de police (ou de fond).
Tester si la couleur n’est pas déjà en RGBA.
Oui ? Sauter à 7. Non ? Modifier la couleur de l’élément script en rgba(0, 0, 0, 0.5). Si le navigateur ne supporte pas le mode de couleur RGBA, l’action n’aura aucun effet.
Tester la non correspondance de la couleur initiale et de la nouvelle.
Réinitialiser la couleur de l’élément script.
Retourner le résultat du test.

Tester le support de RGBA via le DOM

L’implémentation DOM de l’algorithme n’a rien de complexe. Cependant, pour éviter de réitérer les manipulations DOM en cas de tests multiples, on assigne à la fonction une propriété result à l’aide de arguments.callee.

/**
 * Check whether the browser supports RGBA color mode.
 *
 * @author Mehdi Kabab 
 * @type Boolean
 * @return True if the browser support RGBA. False otherwise.
 */
function isRGBACapable() {
    if (!('result' in arguments.callee)) {
        var dScript = document.getElementsByTagName('script')[0],
            color   = dScript.style.color;
        if (/^rgba/.test(color)) {
            arguments.callee.result = true;
        } else {
            try {
                dScript.style.color = 'rgba(0, 0, 0, 0.5)';
            } catch (e) {};
 
            arguments.callee.result = (dScript.style.color != color);
            dScript.style.color     =  color;
        }
    }
 
    return arguments.callee.result;
};

Tester le support de RGBA via jQuery

Avec jQuery, il peut être utile d’initialiser une proprité jQuery.support.rgba pour éviter de lancer le test à de multiples reprises.

if (!('rgba' in jQuery.support)) {
    jQuery.extend(jQuery.support, {
        'rgba': isRGBACapable()
    });
}
 
/**
 * Check whether the browser supports RGBA color mode.
 *
 * @author Mehdi Kabab 
 * @type Boolean
 * @return True if the browser support RGBA. False otherwise.
 */
function isRGBACapable() {
    var $script = jQuery('script:first'),
        color   = $script.css('color'),
        result  = false;
    if (/^rgba/.test(color)) {
            result = true;
    } else {
        try {
            result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
            $script.css('color', color);
        } catch (e) {};
    }
 
    return result;
};

Continuez votre lecture sur des sujets similaires

toute autre propriété CSS3 peut être testée sur le même modèle, comme HSLA ou encore box-shadow. ↩
nous utilisons JavaScript, il est naturel de trouver au moins un élément script. ↩