• Propriétés

  • Les flexbox vous permettent, si votre html est structuré correctement, de créer des grilles responsive (qui s'adapte à la taille de l'écran de l'utilisateur) très rapidement.

    Pour commencer, la structure de votre HTML doit être la suivante :

    <div class="flexContainer">
       <div class="colonne">CONTENU</div>
       <div class="colonne">CONTENU UN PEU PLUS LONG</div>
       <div class="colonne">CONTENU TREEEEEEEEES TREEEEEEES LONG...</div>
    </div>

    Dans votre CSS ajoutez simplement :

    .flexContainer {
          display : flex;
    }

    Le résultat est le suivant : 3 colonne côte à côte dont la taille s'adapte à son contenu

    CONTENU
    CONTENU UN PEU PLUS LONG
    CONTENU TREEEEEEEEES TREEEEEEES LONG...

    Vous pouvez modifier ce comportement par défaut en CSS en ajoutant la propriété "flex-direction"

    .flexContainer {
          display : flex;
          flex-direction : row-reverse;
    }

    Dans cet exemple la valeur "row-reverse" place mes colonnes à l'envers

    CONTENU
    CONTENU UN PEU PLUS LONG
    CONTENU TREEEEEEEEES TREEEEEEES LONG...

    Toutes les valeurs de "flex-direction":
    • "row" : comportement par défaut, les colonnes sont alignées horizontalement dans le bon sens
    • "row-reverse" : les colonnes sont alignées horizontalement dans le sens inverse
    • "column" : les colonnes sont placées les unes en dessous des autres
    • "column-reverse" : les colonnes sont placées les unes en dessous des autres dans le sens inverse

    Disons maintenant que je spécifie une largeur à mes colonnes

    .colonne {
          width : 300px;
    }

    Mes colonnes sont automatiquement redimensionnées pour qu'elles tiennent toutes alignées dans leur container

    CONTENU
    CONTENU
    CONTENU

    On peu cependant forcer une taille défini aux colonnes en ajoutant la propriété "flex-wrap" au flexContainer

    .flexContainer {
          display : flex;
          flex-wrap : wrap;
    }

    CONTENU
    CONTENU
    CONTENU

    Pour déterminer l'allignement de vos colonnes dans le container, utilisez la propriété "justify-content"

    .flexContainer {
          display : flex;
          justify-content : center;
    }

    CONTENU
    CONTENU
    CONTENU

    Les autres valeurs de cette propriété sont :
    • "flex-start" : valeur par défaut, aligné à gauche
    • "flex-end" : aligné à droite
    • "center" : aligné au center
    • "space-around" : prend tout l'espace en conservant des marges à gauche et à droite

    CONTENU
    CONTENU
    CONTENU

    • "space-between" : prend tout l'espace sans conserver de marge

    CONTENU
    CONTENU
    CONTENU

    Si j'augmente la hauteur du container, les colonnes s'adaptent pour occuper tout l'espace

    CONTENU
    CONTENU
    CONTENU

    Il es possible de changer ce comportement avec la propriété "align-items"

    .flexContainer {
          display : flex;
          align-items : center;
          height : 150px;
    }

    CONTENU
    CONTENU
    CONTENU

    Les autres valeurs possibles sont :
    • "stretch" : valeur par défaut, les colonnes occupent toute la hauteur disponible
    • "flex-start" : collé en haut du container
    • "flex-end" : collé en bas du container
    • "center" : centré verticalement dans le container

    Suite de l'article : les propriétés des colonnes (en cours d'écriture)

    2 commentaires
  • 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


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