-
Propriétés
Propriétés CSS -
Par Nagalia le 21 Septembre 2018 à 13:06
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
CONTENUCONTENU UN PEU PLUS LONGCONTENU 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
CONTENUCONTENU UN PEU PLUS LONGCONTENU 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 inverseDisons 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
CONTENUCONTENUCONTENUOn peu cependant forcer une taille défini aux colonnes en ajoutant la propriété "flex-wrap" au flexContainer
.flexContainer {
display : flex;
flex-wrap : wrap;
}CONTENUCONTENUCONTENUPour déterminer l'allignement de vos colonnes dans le container, utilisez la propriété "justify-content"
.flexContainer {
display : flex;
justify-content : center;
}CONTENUCONTENUCONTENULes 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 à droiteCONTENUCONTENUCONTENU• "space-between" : prend tout l'espace sans conserver de marge
CONTENUCONTENUCONTENUSi j'augmente la hauteur du container, les colonnes s'adaptent pour occuper tout l'espace
CONTENUCONTENUCONTENUIl es possible de changer ce comportement avec la propriété "align-items"
.flexContainer {
display : flex;
align-items : center;
height : 150px;
}CONTENUCONTENUCONTENULes 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
2 commentaires -
Par Nagalia le 10 Décembre 2013 à 00:11
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
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.
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);
}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);
}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);
}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);
}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);
}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 couleurssélecteur{
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}Saturate permet de modifer la saturation des couleurs.
0 met l'élément en nuance de gris
1 ne modifie rien
10 sature au maximumsé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 -
Par Nagalia le 23 Février 2012 à 10:40
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 ;)
Opacitysé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.
RGBACertaine 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...
31 commentaires -
Par Nagalia le 25 Décembre 2011 à 10:00Transform
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:
rotationsé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)
redimensionnersélecteur {-webkit-transform: scale(X);
-moz-transform: scale(X);
-o-transform: scale(X);
transform: scale(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
Inclinersélecteur{ -webkit-transform: skewXdeg);
-moz-transform: skew(Xdeg);
-o-transform: skew(Xdeg);
transform: skew(Xdeg);}On parle encore en degré ;)
X incline horizontalement et Y verticalementDéplacersé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 -
Par Nagalia le 30 Octobre 2011 à 21:06
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