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 !
Je cherche le lien pour ceux qui préfèrent le cours sous forme vidéo.
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.
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
Différence entre un paragraphe avec une marge interne (celui en bleu) et un paragraphe sans marge interne (celui en rouge).
400
Les marges internes et les marges externes
Les marges internes
On appelle marge interne, l'espace vide qui sépare le texte de la fin du bloc. Les marges internes ne sont utilisés que sur les balises de type block !
Comment mettre une marge interne ?
La propriété padding
Cette propriété à besoin selon votre utilisation d'entre 1 à 4 valeurs !
Pour une valeur :
Cette valeur sera utilisée comme espacement du haut, droite, bas et gauche !
Pour 2 valeurs :
La 1ere sera l'espacement du haut et du bas
La 2e sera l'espacement de gauche et de droite
Pour 3 valeurs :
La première sera l'espacement du haut
La deuxième sera l'espacement de gauche et de droite
La droite sera l'espacement du bas.
Pour 4 valeurs :
La 1ere sera l'espacement du haut
La 2e sera l'espacement de droite
La 3e sera l'espacement du bas
La 4e sera l'espacement de gauche
Ex:
p{
padding: 5px; /*marge interne du haut, droite, bas et gauche de 5 pixels*/
padding: 5px 10px; /*marge interne de 5 pixels en haut et en bas et 10 pixels de droite et de gauche*/
padding: 10px 20px 5px; /*marge interne de 10 pixels de haut et 20 pixels de droite et gauche et 5 pixels de bas*/
padding: 1px 2px 3px 4px; /*marge interne de 1 pixel de haut, 2 pixels de droite, 3 pixels de bas et 4 pixels de gauche*/
}
Pour que vous comprenez ce que c'est qu'une marge interne, regardons cette image (image suivante) et je vais y ajouter une bordure pour voir la limite de notre balise. Vous allez donc pouvoir observer l'espace qu'il y a entre le texte et la limite de la balise (pour cette exemple, la limite se voit grâce à notre bordure) :400
Bonjour chers Abonnés.
Je viens vous présente ce bot que jai eu à cree qui est une forme de chat GPT (Une IA )ou vous pouvez lui poser toutes vos questions quelques soit le sujet (sur la programmation...)et avoir des réponses gratuitement et bien détaillé.
Voici le lien du bot pour ceux qui seront intéressé Coding Tech ai 👈 clique ici
