400
Subscribers
No data24 hours
No data7 days
No data30 days
Posts Archive
400
La valeur linear-gradient peut également acceptée des longueurs pour nos couleurs en terme de pourcentage et/ou en terme de pixels.
Pour ce faire, il suffit de rajouter le pourcentage souhaité jusqu'à obtenir 100% pour la dernière couleur :
Ex:
body{
background: linear-gradient(to right, green 20%, red 60%, yellow 100%);
}
Donnera cette image :400
Pour réaliser la couleur de mon pays, vert rouge jaune de la gauche vers la droite, je ferai :
body{
background: linear-gradient(to right, green, red, yellow);
}400
Ex:
body{
background: linear-gradient(to left, green, red, yellow);
}
Fera le dégradé en allant vers la gauche, et donc commencera de la droite vers la gauche.400
Ex:
body{
background: linear-gradient(to bottom, green, red, yellow);
}
Fera l'inverse de cette image, le vert en haut, le jaune en bas400
to top right, il commencera en diagonale du bas vers la gauche pour terminer du haut vers la droite
to bottom right, il commencera en diagonale du haut vers la gauche pour terminer du bas vers la droite
to bottom left, il commencera en diagonale du haut vers la droite pour terminer du bas vers la gauche.
Ex:
body{
background: linear-gradient(to top, green, red, yellow);
}
Donnera cette image en allant du bas vers le haut :400
Par la même occasion, on peut dire au navigateur le sens par lequel, il doit construire notre dégradé.
to top, pour dire en allant vers le haut. Donc il commencera du bas vers le haut
to bottom, pour dire en allant vers le bas. Il commencera du haut vers le bas
to left, il commencera de la droite vers la gauche
to right, il commencera de la gauche vers la droite
to top left, il commencera en diagonale du bas vers la droite pour terminer du haut vers la gauche.
400
Si vous avez essayé le code précédent, vous obtiendrez ceci dans votre navigateur.
Le résultat obtenu est une image !
400
La couleur et le fond
La propriété background (suite et fin)
Les dégradés
Un dégradé est une image produite par le navigateur en acceptant plusieurs couleurs comme paramètres.
Vous lui passez des couleurs (minimum 2) et vous obtenez une images constitué d'ensemble de ces couleurs.
Il existe deux types de dégradé :
Ceux en ligne (dit de linéaire)
Ceux en forme de cercle (dit de radian).
Pour utiliser un linéaire ou gradient linéaire, on utilise ceci : linear-gradient().
A l'intérieur de ces parenthèses, on lui passe les couleurs que l'on veut, que ce soit par leurs noms en anglais, ou hexadécimal etc...
Ex :
body{
background: linear-gradient(blue, #003f, green, purple);
}400
La couleur et le fond
La propriété background
Cette propriété va nous permettre de définir une couleur de fond ou une couleur d'arrière-plan.
Elle accepte les valeurs :
- En nom en anglais de couleur
- En écriture ou code hexadécimal
- En écriture ou code RGB
Comme avec la propriété précédente color !
Mais aussi, elle accepte les images en arrière plan, les dégradés de couleur ou même une image et une couleur d'arrière-plan, ou plusieurs images en même temps.
Pour définir une couleur d'arrière-plan, rien de plus facile :
p{
background: black; /*arrière plan noir*/
background: #000; /*arrière-plan noir*/
background: #000000; /*arrière-plan noir*/
background: rgb(0,0,0); /*arrière-plan noir*/
}
Pour définir une image d'arrière-plan :
Utilisé une image d'arrière-plan peut être lourd à charger et gourmand en connexion au prêt de vos différents visiteurs, assurez-vous que l'image ne soit pas lourde, et sois dans le format lisible par le navigateur comme dans la partie vue en HTML pour l'insertion d'images, disponible via ce lien.
Ainsi, pour faire une image en arrière plan (et écrire par dessus cette image), on devra :
- utilisé ceci url()
- Placer a l'intérieur des parenthèses de url(), le lien vers l'image par rapport au fichier actuel !
- C'est tout.
Ex:
body{
background: url('mon image.jpg');
}400
La couleur et le fond
La propriété color (suite et fin)
- La notation RGB , c'est une écriture du code couleur avec des valeurs numériques allant de 0 à 255. RGB veux dire : Red-Green-Blue en anglais pour Rouge-Vert-Bleu en français.
Cette notation se fait en 3 ou 4 bits.
Le 1er bit pour le taux de rouge (représentant le R de Red : valeurs allant de 0 a 255)
Le 2e bit pour le taux de vert (représentant le G de Green)
Le 3e bit pour le taux de bleu (représentant le B de Blue).
S'il y a un 4e bit, celui représente l'opacité (transparence). La valeur de l'opacité va de 0 (pour transparent) à 1 (pour pas opaque). Les valeurs telle que 0.1 sont fortement recommandé et utilisé, et peuvent s'abréger en .1 pour 0.1, ou .6 pour 0.6.
Les 3 ou 4 bits sont séparés par une virgule (,).
Ex:
p{
color: blue; /*couleur bleu*/
color: #00f; /*couleur bleu*/
color: #0000ff; /*couleur bleu*/
color: rgb(0,0,255); /*couleur bleu*/
color: rgb(0,0,255,.1); /*couleur bleu très opaque (très transparente) */
}400
La couleur et le fond
CSS, en plus de formater du texte, va nous permet encore plus de l'embellir.
La propriété color
Elle nous permet d'ajouter une couleur à notre texte.
On peut donner sa valeur sois en nom en anglais (ex: blue pour du bleu), ou encore en code hexadécimal ou même rgb etc...
- La notation hexadécimal , c'est une écriture informatique des nombres avec 16 valeurs de 0 à 9 et de A à F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F).
Pour nommer une couleur avec ce type de données, il faut connaître deux petites choses :
1. Le code hexadécimal d'une couleur peut-être donner sur 3 ou 4 bits !
• A 3 bits, on a :
1er bit : Le taux de rouge toujours comprise entre 0 à 9 et A à F (0 : valeur la plus petite, et F la valeur la plus grande)
2e bit : Le taux de vert
3e bit : Le taux de bleu.
• A 4 bit, on a :
Pareil comme lorsqu'on à 3 bits sauf que le
4e bit : est là pour l'opacité (0, transparent ou complètement opaque et F pour pas opaque).
2. Le code hexadécimal d'une couleur peut se donner sur 6 ou 8 bits. Dans ce cas :
Le 1er et 2e bit, pour le taux de rouge
Le 3e et 4e bit, pour le taux de vert
Le 5e et 6e bit, pour le taux de bleu
S'il y a le 7e et 8e bit, ça sera pour l'opacité.
NB: Donner une couleur qui ne respecte pas ce nombre de bit( 3 ou 4 bits ou alors 6 ou 8 bits) sera considéré comme invalide !
400
Bonsoir à tous, on se retrouve aujourd'hui pour continuer avec un nouveau tuto en CSS.
Votre environnement de travail étant déjà prêt, vous serez invité à tester des codes et à faire de petits exercices.
Let's go...
Installez-vous bien 😊
400
Bonsoir, j'espère que vous allez bien ?Juste pour vous annoncer qu'il y'aurait pas cour ce soir à cause d'un empêchement.
Mais nous reprendrons les cours Bientôt.
Merci pour la compréhension 🙏🙏
400
La suite demain 20h00.
Si j'ai du retard veuillez m'excuser mais il y aura tout de même bel et bien cours.
A demain avec un grand sourire à tous 😊
