CSS - Coins arrondies : Guide pour les débutants
Salut à toi, futur designer web ! Aujourd'hui, on va plonger dans le monde merveilleux des coins arrondis en CSS. En tant que ton enseignant informatique de quartier, je suis là pour te guider dans cette aventure, étape par étape. Alors, prends ta boisson favorite, installe-toi confortablement, et rendons ces angles saillants lisses !
Qu'est-ce que les coins arrondis ?
Avant de nous pencher sur le code, parlons de ce que sont vraiment les coins arrondis. Imagine que tu as un morceau de papier carré. Maintenant, si tu coupais les coins avec des ciseaux, tu obtiendrais des coins arrondis. C'est exactement ce que nous allons faire avec nos éléments web, mais numériquement !
La propriété magique : border-radius
En CSS, nous utilisons une propriété appelée border-radius pour créer des coins arrondis. C'est comme notre paire de ciseaux numériques ! Jetons un coup d'œil sur la manière dont nous pouvons l'utiliser.
Syntaxe de base
.rounded-box {
border-radius: 10px;
}Cette simple ligne de code arrondira les quatre coins de notre élément de 10 pixels. Pretty neat, huh ?
Valeurs possibles
Maintenant, explorons les différentes manières dont nous pouvons utiliser border-radius. C'est comme avoir différents types de ciseaux dans notre boîte à outils !
| Type de valeur | Exemple | Description |
|---|---|---|
| Longueur | 20px |
Spécifie le rayon en pixels |
| Pourcentage | 10% |
Rayon relatif à la taille de l'élément |
| Initial | initial |
Réinitialise à la valeur par défaut |
| Hérité | inherit |
Hérite de l'élément parent |
Valeurs de longueur
.slightly-rounded {
border-radius: 5px;
}
.very-rounded {
border-radius: 20px;
}Dans ces exemples, nous utilisons des valeurs en pixels. Plus le nombre est grand, plus les coins deviennent arrondis !
Valeurs en pourcentage
.responsive-rounded {
border-radius: 10%;
}Utiliser des pourcentages est excellent pour le design réactif. La courbure s'ajustera en fonction de la taille de l'élément !
S'applique à
Tout ne peut pas avoir des coins arrondis (ce serait fun pourtant !). Voici ce que nous pouvons arrondir :
- Éléments de niveau bloc
- Éléments inline-block
- Éléments de tableau
- Certains éléments remplacés (comme les images)
Syntaxe DOM
Pour ceux qui sont curieux de manipuler les coins arrondis avec JavaScript, voici comment vous pouvez le faire :
object.style.borderRadius = "10px";Cela définit border-radius à 10 pixels en utilisant JavaScript. C'est comme utiliser une paire de ciseaux programmable !
CSS Border Radius - Valeur de longueur
Reprenons un peu plus avancé. Nous pouvons en fait spécifier des rayons différents pour chaque coin !
.fancy-box {
border-radius: 10px 20px 30px 40px;
}Cela définit le coin supérieur gauche à 10px, le coin supérieur droit à 20px, le coin inférieur droit à 30px, et le coin inférieur gauche à 40px. C'est comme avoir quatre paires de ciseaux différentes !
Images avec coins arrondis en CSS
Savais-tu que nous pouvons aussi arrondir les coins des images ? C'est comme donner à tes photos une coupe de cheveux stylée !
.rounded-image {
border-radius: 50%;
}Cela transformera ton image carrée en un cercle parfait. Parfait pour les photos de profil !
Propriétés liées à border-radius en CSS
Border-radius a quelques amis dans le monde CSS. Rencontrons-les :
| Propriété | Description |
|---|---|
| border-top-left-radius | Arrondit le coin supérieur gauche |
| border-top-right-radius | Arrondit le coin supérieur droit |
| border-bottom-right-radius | Arrondit le coin inférieur droit |
| border-bottom-left-radius | Arrondit le coin inférieur gauche |
Ces propriétés te permettent de cibler des coins spécifiques. C'est comme avoir des ciseaux de précision !
.partially-rounded {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}Cela arrondira uniquement les coins supérieur gauche et inférieur droit. Parfait pour créer des formes uniques !
Exemple pratique : Créer une bulle de dialogue
Mettons nos nouvelles connaissances en œuvre et créons une simple bulle de dialogue :
.speech-bubble {
background-color: #f0f0f0;
border-radius: 20px;
padding: 20px;
position: relative;
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -20px;
left: 20px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #f0f0f0 transparent;
}Ici, nous utilisons border-radius pour arrondir la bulle principale, puis nous créons un petit triangle avec le pseudo-élément ::after pour faire penser à une bulle de dialogue. C'est comme du papier plié numérique !
Conclusion
Et voilà, les amis ! Nous avons fait le tour des bases des coins arrondis en CSS. Souviens-toi, le design web est tout à fait expérimental. N'ayez pas peur de jouer avec ces propriétés et de voir quelles superbes créations vous pouvez发明er !
La prochaine fois que vous naviguez sur le web, observez les coins arrondis que vous voyez. Maintenant, vous connaissez le secret derrière eux ! Continuez à pratiquer, et bientôt vous serez le maître des bords lisses dans le monde numérique.
Bonne programmation, et que tous vos coins soient aussi lisses que vous le souhaitez !
Credits: Image by storyset