• Propriétés

  • La propriété filter en CSS3 permet de modifier de façon assez sympathique les couleurs d'un élément. Survoler les images pour voir l'effet

    Les filtres CSS3

    sélecteur{
          -webkit-filter: blur(Xpx);
          -moz-filter: blur(Xpx);
          -o-filter: blur(Xpx);
          filter: blur(Xpx);
    }

    Blur permet de flouter un élément. Remplacez X par une valeur en px, indiquant l'étendu du flou. 0px laisse l'élément normal.

    Les filtres CSS3

    Grayscale permet de passer un élément de couleur en nuance de gris, 0 n'a aucun effet, et 1 passe l'élément en noir et blanc. Vous pouvez utiliser les décimaux de 0 à 1 (0.3 ; 0.4 ; etc...)

    sélecteur{
          -webkit-filter: grayscale(1);
          -moz-filter: grayscale(1);
          -o-filter: grayscale(1);
          filter: grayscale(1);
    }

    Les filtres CSS3

    Le même fonctionnement que grayscale, en mettant l'élément en sepia. Utilisez les valeurs de 0 à 1.

    sélecteur{
          -webkit-filter: sepia(1);
          -moz-filter: sepia(1);
          -o-filter: sepia(1);
          filter: sepia(1);
    }​

    Les filtres CSS3

    Brightness vous permet d'augmenter la luminosité d'un élément.
    0 represente le noir
    1 l'élément normal
    Vous pouvez ensuite aller jusqu'à 10 pour augmenter la luminosité

    sélecteur{
          -webkit-filter: contrast(5);
          -moz-filter: contrast(5);
          -o-filter: contrast(5);
          filter: contrast(5);
    }

    Les filtres CSS3

    Même fonctionnement que brightness, Contrast permet d'augmenter le contraste entre les couleur.
    0 n'a aucun contraste, ce qui affiche un élément gris
    1 ne modifie rien
    Vous pouvez ensuite aller jusqu'à 10 pour augmenter le contraste.

    sélecteur{
          -webkit-filter: brightness(5);
          -moz-filter: brightness(5);
          -o-filter: brightness(5);
          filter: brightness(5);
    }

    Les filtres CSS3

    Hue-Rotate fait "tourner" la teinte des couleurs. En tournant de 180° vous inversez les teintes.
    Je parle bien de teinte et non de couleur. Cette propriété n'a aucun effet sur les éléments en nuance de gris.

    sélecteur{
          -webkit-filter: hue-rotate(180deg);
          -moz-filter: hue-rotate(180deg);
          -o-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
    }

    Les filtres CSS3

    Invert inverse les couleurs d'un élément.
    0 ne modifie rien
    0.5 rend l'élément d'un gris uni
    1 inverse totalement les couleurs

    sélecteur{
          -webkit-filter: invert(1);
          -moz-filter: invert(1);
          -o-filter: invert(1);
          filter: invert(1);
    }

    Les filtres CSS3

    Saturate permet de modifer la saturation des couleurs.
    0 met l'élément en nuance de gris
    1 ne modifie rien
    10 sature au maximum

    sélecteur{
          -webkit-filter: saturate(10);
          -moz-filter: saturate(10);
          -o-filter: saturate(10);
          filter: saturate(10);
    }

     

    Vous pouvez bien sûr utiliser plusieurs filtres sur le même élément. N'hésitez pas à bidouiller un peu les valeurs pour trouver ce que vous voulez.


    34 commentaires
  • Comment régler l'opacité des images, d'un élément ou d'une couleur? Avec la propriété "opacity" ou avec les couleur rgb et la valeur alpha ;)

    Opacity
    sélecteur {opacity: valeur;}

    Opacity admet une valeur entre 0 (transparent) et 1 (totalement visible). Si vous voulez nuancer l'opacité, mettez par exemple 0.5
    /!\ Il faut mettre un point, non une virgule ;)
    Ecrite ainsi, cette propriété modifie l'opacité de tout un élément: texte, image, fond, ombre...

    Pour que seule les images est une opacité plus faible (et que votre article ne devienne pas transparent en même temp) il faut écrire le sélécteur, en précisant que les propriété ne s'appliqueront qu'aux images:

    sélecteur img {opacity: valeur;} 

    Maintenant, seules les images à l'interieur de se sélecteur auront une opacité différente.

    RGBA

    Certaine fois, il serait pratique de pouvoir rendre une couleur un peu plus transparente, comme le fond d'un article, sans  que le texte ne devienne aussi transparent. Pour cela, on utilise rgba.
    Il faut savoir maitriser les couleur rgb (voir Couleur) auquel on rajoute la valeur alpha qui va nous permettre de régler l'opacité. On note le code suivant:

    sélecteur {propriété: rgba(Rouge, Vert, Bleu, Alpha);}

    On change les valeur de Rouge, Vert et Bleu avec un nombre compris entre 0 et 255 pour donner la couleur. Ensuite, on change Alpha par une valeur comprise entre 0 (transparent) et 1 (totalement visible). Comme pour opacité, on note 0.5 avec un point, non avec une virgule.

    /!\ ça semble logique, mais rgba ne s'utilise qu'avec des propriété qui utilise des couleur comme background-color, color, box-shadow...


    38 commentaires
  • Transform

    Voici une propriété css3 qui peu renvoyer le javascript aux oubliettes. L'inconvénient? Et bien... c'est du css3 donc compatible seulement avec les versions les plus récentes des navigateurs.

    Transform? C'est quoi?

    Une propriété qui permet d'appliquer quatre effet assez sympa:

     

    rotation

    sélecteur {-webkit-transform: rotate(Xdeg);
    -moz-transform: rotate(Xdeg);
    -o-transform: rotate(Xdeg);
    transform: rotate(Xdeg);}

    On parle en degré. Logique non? Remplacez Xdeg par un nombre de degré (positif ou négatif)

     

    redimensionner
    sélecteur {-webkit-transformscale(X);
    -moz-transformscale(X);
    -o-transformscale(X);
    transformscale(X)}

    Remplacez X par un chiffre entier ou décimal (/!\ mettre un point, pas une virgule => 1.3 et non 1,3)
    1= aucun changement
    0= invisible
    2=deux fois plus grand

    En claire, c'est le coeficient de dilatation
    Vous pouvez aussi faire:

    sélecteur {-webkit-transform: scale(X, Y);
    -moz-transform: scale(X, Y);
    -o-transform: scale(X, Y);
    transform: scale(X, Y); }

    X étant la largeur et Y la hauteur 

     

    Incliner
    sélecteur{ -webkit-transformskewXdeg);
    -moz-transformskew(Xdeg);
    -o-transformskew(Xdeg);
    transformskew(Xdeg);}

    On parle encore en degré ;)
    X incline horizontalement et Y verticalement 


    Déplacer

    sélecteur{ -webkit-transform: translate(Xpx, Ypx);
    -moz-transform: translate(Xpx, Ypx);
    -o-transform: translate(Xpx, Ypx);
    transform: translate(Xpx, Ypx); }

    Enfin, le déplacement. On déplace horizontalement de Xpx et verticalement de Ypx ;) 


    Dans ces exemple, je n'ai utiliser la propriété que sur l'état survolé (:hover) mais vous pouvez très bien l'utiliser comme état permanant ;)

    54 commentaires
  • Le propriété color concerne uniquement la couleur du texte et s'écrit de la façon suivante :

    sélecteur {
       color: #COLOR;
    }

    Voyons maintant quelques exemple concrets :

    p {
       color: red;
    }
    p a {
       color: green;
    }

    Tout le texte à l'intérieur de mon paragraphe est rouge, et les liens sont verts

    Vous pouvez utiliser les couleurs nommées, les code hexa, le rgb, ainsi que le rgba pour avoir du texte transparent

    p {
       color: rgba(255,0,0,0.5);
    }

    Le texte de mon paragraphe est rouge avec une transparence de 50%

    Référez-vous à cet article si vous voulez en savoir plus sur l'utilisation des couleurs


    8 commentaires
  • /!\ Ne fonctionne qu'avec les dernière version de Google Chrome, Mozilla Firefox et Safari (autre navigateur non testé) et ne marche absolument pas avec Internet Explorer

    /!\ Ce code n'est pas à la porté des débutant en css. Il faut savoir maitriser les pseudo-classe.


    A savoir également que le CSS3 n'étant pas encore correctement implémenter (même dans les dernières versions des navigateur), il faut rajouter un petit truc devant la propriété en question :

    "-webkit" fonctionne pour google chrome et safari
    "-moz" fonctionne pour mozilla
    La dernière ligne est en prévision de quand tout les navigateur reconnaîtrons ce code (c'est pas demain la veille, mais bon)

    sélecteur { propriété: valeur;
                       -webkit-transition-propriety: propriété;
                       -moz-transition-propriety: propriété;
                       transition-propriety: propriété}

    Le "transition-propriety" indique a quelles propriétés on va appliquer l'effet entre l'état normal et celui survolé/cliqué.

    • si vous voulez que toutes les propriété soient animé, mettez "all" comme valeur 
    • si vous voulez que seules quelques propriété soient animé, mettez ne nom des propriété séparé par des virgule 
    • si vous ne voulez pas d'animation, mettez "none" comme valeur
    sélecteur { propriété: valeur;
                       -webkit-transition-duration: Xs;
                       -moz-transition-duration: Xs;
                       transition-duration: Xs;} 

    "transition-duration" indique le temps que durera la transition. Vous pouvez donner comme uniqter la seconde (ex: 2s) ou la milliseconde (ex: 30ms).
    Si vous avez préciser plusieurs propriété pour la transition, vous pouvez mettre différente durées, séparé par des virgule.

    sélecteur { propriété: valeur;
                       -webkit-transition-timing-function: valeur;
                       -moz-transition-timing-function: valeur;
                       transition-timing-function: valeur;}

    Le "transition-timing-function" Précise la fonction de transition à utiliser (accélération...) Désolé pour les allergique aux math, mais on va parler fonction X)
    Vous pouvez mettre comme valeur un des mot suivant:

    • ease : Rapide sur le début et ralenti sur la fin. 
    • linear : La vitesse est constante sur toute la durée de l'animation. 
    • ease-in : Lent sur le début et accélère de plus en plus vers la fin. 
    • ease-out : Rapide sur le début et décèlere sur la fin. 
    • ease-in-out : Le départ et la fin sont lents. 

    Pour que ça soit plus simple a comprendre, voici les courbes (emprunté à Alsacréation)

    sélecteur { propriété: valeur;
                       -webkit-transition-delay: Xs;
                       -moz-transition-delay: Xs;
                       transition-delay: Xs;} 

    Le "transition-delay" détermine le départ de la transition. La transition commence par défaut quand l'élément est déclenché (survol, clique...) mais on peu la retarder.

    Pour éviter d'encombrer votre page css, on peu raccourcir les code, en notant simplement la propriété "transition"

    sélecteur { propriété: valeur;
                       -webkit-transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";
                       -moz-transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";
                       transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay";} 

    Remplacer les propriété "transition-property", "transition-duration"... par leur valeur.


    82 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique