400
Subscribers
No data24 hours
No data7 days
No data30 days
Posts Archive
400
La différence est flagrante entre l'ombre du texte et l'ombre de block !
Fin du cours pour cette soirée.
J'espère que ces propriétés vous aideront car elles sont grandement utilisé de nos jours dans la majorité des sites web que vous visitez.
Bon apprentissage et a Lundi pour la suite 🔥👍
400
Les ombres : sur des blocs
La propriété box-shadow
Elle nous permettra de créer des ombres pour des balises directement de types blocks !
Pour rappel :
Une balise de type block est une balise qui occupe tout l'espace en rajoutant la suite du contenu à la ligne.
On aura besoin des 4 valeurs comme avec le text-shadow, mais rajouter une 5e (qui est facultative si on veux) qui sera :
- la nature de l'ombre (cette valeur est facultative car défaut elle existe de manière à ne pas être creuse).
p{
box-shadow: 3px 3px 2px #0002; /*notre bordure va vers la droite en montant et de nature bombée (pas creuse)*/
box-shadow: -1px 2px 1px green; /* notre ombre va vers la gauche en montant et de nature creuse (pas bombée).*/
}400
Les ombres : sur du texte
La propriété text-shadow
Cette propriété va nous permettre de mettre de l'ombre ou de faire ressortir l'ombre de nos différents textes.
On aura besoin de 4 valeurs :
- pour l'effet d'ombre vers la droite
- pour l'effet d'ombre vers le haut
- pour l'opacité de l'ombre (si elle doit être forte ou faible)
- la couleur de notre ombre
Ex:
p{
text-shadow: 3px 3px 2px #0002; /*notre bordure va vers la droite en montant*/
text-shadow: -1px 2px 1px green; /* notre ombre va vers la gauche en montant*/
}400
Les ombres
Les ombres nous permettent de reflecter du texte ou un conteneur de code.
Son utilisation est un petit peu complexe.
Car elle peut s'appliquer sur le texte ou sur un bloc.
On doit savoir où on veux produire l'ombre,
On doit choisir la couleur de cet ombre
On doit pouvoir choisir si l'ombre doit être forte ou faible
On doit pouvoir être en mesure de spécifier si l'ombre doit être du premier ou du second plan (creuse ou pas).
En rapport avec ces points de comparaison, nous pouvons déjà être sur que nos ombres doivent avoir entre 4 et 5 valeurs pour qu'elles soient correctement définis.
400
Les bordures (fin)
Bonus : La super propriété border
Cette propriété a pour avantage de nous permettre de combiner les différents border- directement dans celle-ci, tout comme avec la propriété font.
En utilisant border, vous l'aurez compris, on devra renseigner 3 valeurs correspondant à border-width, border-style, et border-color.
Ex:
p{
border: solid 1px #003; /*bordure fine en trait continu et de couleur bleue*/
border: white dotted 5px; /*border blanche en trait interrompu assez épaisse*/
}
Vous l'aurez compris, on peut donner ces 3 valeurs dans l'ordre qui nous convient.400
Les bordures
La propriété border-width (pour l'épaisseur de la bordure)
Accepte les valeurs en :
px : pixel
pt : point
vw: valeur par rapport à la largeur de l'écran
vh : valeur par rapport à la hauteur de l'écran
Etc...
Ex:
p{
border-width: 1px;
border-width: 1vw;
}
NB: Si la propriété border-width n'est pas défini, alors la bordure n'existera pas car ça valeur sera de 0. Pour une valeur nulle, on dit qu'elle est inexistante.400
Les bordures
La propriété border-style (pour le style de la bordure)
Les valeurs pour cette propriété peuvent être :
solid : la bordure est droite sans interruption
dotted : la bordure est en trait interrompu
double : double trait droit sans interruption
none : pas de bordure
Ex:
p{
border-style: solid; /* bordure droite*/
border-style: double; /*bordure en double*/
border-style: dotted; /*bordure en trait interrompu*/
border-style: none; /*pas de bordure*/
}400
Les bordures
Les bordures nous permettent de bien délimiter nos différentes parties ou nos différents blocs de code.
Elle peut avoir une couleur, un style, et même une épaisseur.
La propriété border-color (pour la couleur de la bordure)
La valeur de cette propriété se donne tout comme avec les valeurs des propriétés color et background c'est à dire : via le nom de couleur (en anglais), via la notation hexadécimal et/ou via le code RGB.
Ex:
p{
border-color: gray; /*couleur grise*/
border-color: #600; /*couleur grise*/
border-color: #660000; /*couleur grise*/
}400
De même, on peut produire un dégradé radian en forme de cercle ou sous forme elliptique !
L'ajout des termes tels que : circle at, ou ellipse at.
Cette propriété est généralement moins utilisé et par conséquent, nous n'allons pas nous attarder dessus.
Pour ceux voulant avoir une expérience avec cette propriété, on en parle dans la documentation officiel sur : https://developer.mozilla.org/fr/docs/Web/CSS/gradient/radial-gradient
400
Les dégradés (suite)
Pour utiliser un radian ou gradient en forme de cercle, on utilise ceci : radial-gradient(). La différence avec ce dégradé est que le dégradé va commencer du centre pour aller vers l'extérieur.
Ex :
body{
background: radial-gradient(#003, purple);
}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 😊
