Apprendre la programmation HTML et CSS #7 Couleur, bordures et Ombres

Veux-tu apprendre à créer de belles apparences en CSS ?  Aujourd’hui nous allons voir un pilier fondamental du CSS. Nous allons parler d’ombres, de couleurs et de bordures. C’est vraiment pour être appliqué à tout type de contenu HTML, ce qui va te permettre de modifier beaucoup d’éléments pour ajouter un côté visuel.

Alors si le design de ton futur site web ou site actuel t’intéresse, alors tu dois regarder ce tutoriel au complet pour apprendre ses trucs de base. En plus, ce sont des éléments simples à apprendre.

Pour ce tutoriel, tu vas devoir savoir comment ajouter des propriétés CSS et ajouter un fichier CSS. Si ce n’est pas déjà le cas, n’hésite pas à regarder ce tutoriel que j’ai fait pour le faire.

Version vidéo

Tu préfères la version vidéo ? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne Youtube Informerick.

Cours HTML/CSS Débutant #7 – Couleur, bordure et Ombres (2022)

Gérer la couleur en CSS

En 1er lieu, nous allons parler de couleur en CSS. Comme tu as dû le remarquer, tu dois ajouter des couleurs en CSS alors je vais te montrer les façons d’ajouter les couleurs parce que ce n’est pas aussi simple que crier ciseaux.

Ici nous allons parler des hexadécimales, de RGB mais aussi de transparence, car nous allons pouvoir créer des couleurs transparentes pour ajouter à notre site web pour créer de belles apparences.

Couleur avec l’hexadécimale

  en 1er lieu lieux, nous avons la couleur hexadécimal. La couleur hexadécimal est une série de six caractères hexadécimaux qui vont de 0 à F.

 Voici un exemple de code couleur hexadécimal:

#FFFFFF -> Blanc

#000000 -> Noir

Pour te faciliter la tâche, il existe un outil du W3C, l’organisme qui a en charge de HTML et CSS  qui te permet de sélectionner facilement une couleur et d’avoir son code hexadécimal. Regarder l’outils du W3C pour sélectionner une couleur hexadécimal.

Couleur avec le RGB et transparent

Après nous avons le RGB et pour rouge, vert, bleu en anglais. Nous allons utiliser ces trois couleurs élémentaire du cercle chromatique pour gérer nos couleurs. Il n’y a pas plus d’avantages que l’hexadécimal à part sur point: avec les RGB nous allons pouvoir jouer avec les effets de transparence.

Voici un code RGB sans transparence:

rgb(0, 0, 0) → Noir

Maintenant voici un code avec transparence, nous avons utiliser le RGBA. La valeur de transparence va de 0 à 1 et donc un chiffre à virgules:

rgba(0, 0, 0, 0.5) → Noir semi-transparent à 50%

PS: Vous pouvez aussi récupérer le code RGB avec l’outils de saisie de couleur W3C.

Couleur avec le nom anglais

Et finalement en CSS nous allons pouvoir utiliser le nom anglais des couleurs de base. Par exemple pouvoir utiliser la couleur red pour rouge ou green pour vert, etc. Cela va nous être utile pour utiliser des couleurs sans se compliquer la vie.

Modifier la couleur du texte en CSS ( color )

Désormais que nous savons comment ajouter des  couleur en CSS, nous allons pouvoir commencer à jouer avec des vraies propriétés. Nous allons en 1er lieu modifier la couleur d’un texte.

Voici la propriété pour modifier la couleur du texte:

P{
Color: red; /* Met le texte en rouge */
}

Ajouter un couleur de fond CSS

Dans la même ligne que la couleur du texte, il va nous être possible de modifier la couleur de fond. La couleur de fond va être appliqué sur tout ce qu’on va y ajouter donc même les sous-éléments, les textes, les listes à puces, etc.

Voici la propriété CSS pour modifier la couleur de fond:

.monelement{
Background-color: red; /* Met en rouge la couleur du fond de la classe monelement */
}

Ajouter des bordures en CSS

Dorénavant que nous avions vu des essentielles des couleurs et surtout la transparence RGB, nous allons pouvoir ajouter des bordures à notre CSS.

Ajouter des bordures

Alors ce qui va falloir faire pour ajouter des bordures, c’est de sélectionner l’élément que nous voulons entourer. Veuillez être sûr de que ces délimitations dans la page soit bien définie. Car s’il y a des gros espaces sur ce que nous avons sélectionné, la bordure seront appliquées sur les gros espaces, il peut être louche lors d’un rendu.

Voici la propriété CSS pour ajouter des bordures:

.monelement{
Border: largeur | style | couleur /* ceci est l’ordre */
}

/*Exemple*/
.monelement{
Border: 12px dashed green; /* bordure de 12 px d’épaisseur, qui est avec des barres et verte */
}

Types de bordures

Bon désormais que vous savez comment ajouter des bordures, il va falloir savoir lesquels sont les types de bordures que vous pouvez ajouter à CSS. Voici la liste de tous les types de bordures que vous pouvez ajouter.

PS: Faire attention, car pas tous les navigateurs supportent tous les types de bordures.

• Dotted (Pointillé)
• Dashed (Pointillé avec des lignes)
• Solid (Plein)
• Double (Deux lignes)
• Groove (Donne un effet Rainures 3D)
• Ridge (Donne un effet crête 3D)
• Inset (Dégradé intérieur)
• Outset (Dégradé Exterieur)

Créer un arrondi de bordure

Et la dernière chose qui va vous être utile lorsque vous allez ajouter des bordures en CSS et qui est très demandé: les arrondis de bordure.

 Vous allez être capables d’arrondir les bordures de vos éléments. Vous devrez ajouter la propriété CSS au même élément que celui que vous avez ajouté des bordures.

Voici la propriété CSS pour faire un arrondi de bordure :

.monelement{
Border-radius: Unité /* Unité d’arrondissement, comme des PX */
}

/* Exemple */
.monelement{
Border-radius: 5px; /* Arrondi de 5px dans les coins */
}

Ajouter des ombres en CSS

Par la suite, après tout cela, nous allons être capable d’ajouter des ombres. En fait, en CSS il existe deux types d’ombre: les ombres ajoutés sur du texte, cela permet à l’ombre de copier le texte au complet. Nous avons aussi les ombres à ajouter à tout autres éléments qui sont en forme de boîte donc le box-shadow.

Ajouter des ombres de texte en CSS ( text-shadow )

Si vous voulez ajouter des ombres à du texte, voici la propriété qu’il faut ajouter:

P{
Text-shadow: Décalage axe X | Décalage axe Y | Effet de dégradé | Couleur
}

/* Exemple * /

P{
Text-shadow: 32px 10px 50px #000000;
}

PS: Vous pouvez additionner les ombres pour ajouter plusieurs effets et plusieurs couleurs avec une virgule.

Ajouter des ombres à des objets ( box-shadow )

Après avoir ajouté des ombres à du texte, tous les autres types d’ombre vous sembler simple.

 Voici la propriété CSS pour ajouter des ombres en boîte:

.monelement{
Box-shadow: Décalage axe X | Décalage axe Y | Effet de dégradé | Couleur
}

/* Exemple */

.monelement{
box-shadow: 32px 10px 50px #000000;
}

Liste de bordures et ombres à copier

Bon, au début il va vous être dur de créer des bordures et des ombres, le meilleur moyen de vous pratiquer et de regarder des exemples ce que d’autres ont fait. Alors ici je vous laisse une liste d’ombres et de bordures stylées que vous voulez pouvoir copier, le code CSS peut être appliqué par vous-même. 

Liste d’ombres CSS

Liste de bordures CSS 

FAQ

Comment choisir une couleur Hexadécimal HTML CSS ?

Tu peux utiliser l’outils de sélection de couleur du W3C qui est l’organisme officiel qui s’occupe du HTML et CSS.

Comment supprimer une bordure CSS ?

Il se peut que certains éléments soient déjà avec une bordure (notamment avec WordPress) et vous pouvez supprimer avec cette propriété CSS:

border-style: none;

Comment générer une ombre en CSS ?

Vous pouvez utiliser un générateur d’ombre CSS pour faciliter votre vie dans la création d’ombre. Je vous recommande toute fois de regarder le code CSS qu’il vous donne pour vous pratiquer à le faire par vous-même plus tard.

Voici un générateur d’ombres CSS.

Ce tutoriel se trouve dans la catégorie: Programmation