Créer des coins arrondis avec la bordure arrondie CSS

Introduction

Dans ce laboratoire, les participants exploreront la puissante propriété CSS border-radius pour créer des coins arrondis visuellement attrayants sur les éléments web. En adoptant une approche étape par étape, les apprentissants commenceront par configurer un document HTML de base et appliquer progressivement diverses techniques de border-radius pour comprendre comment manipuler dynamiquement les coins des éléments.

Le laboratoire couvre des compétences fondamentales telles que la création de coins arrondis uniformes, l'application de rayons différents à chaque coin et l'expérimentation de variations de border-radius. En travaillant sur des exemples pratiques, les étudiants acquerront une expérience pratique dans l'utilisation de CSS pour transformer des éléments div à bords droits en composants de design lisses et arrondis, améliorant l'attrait esthétique des interfaces web.

Configure le document HTML

Dans cette étape, vous allez configurer le document HTML de base pour explorer les propriétés CSS border-radius. Nous allons créer un fichier HTML simple qui servira de base pour nos expériences de style CSS.

Ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé index.html en cliquant avec le bouton droit dans l'explorateur de fichiers et en sélectionnant "Nouveau fichier".

Copiez et collez la structure HTML suivante dans le fichier index.html :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Border-Radius Exploration</title>
    <style>
      /* Nous ajouterons nos styles CSS ici dans les étapes suivantes */
    </style>
  </head>
  <body>
    <div class="container">
      <h1>CSS Border-Radius Examples</h1>
      <!-- Nous ajouterons nos éléments div ici dans les étapes suivantes -->
    </div>
  </body>
</html>

Ce document HTML de base fournit une structure simple pour notre exploration des bordures arrondies CSS. Analysons les composants clés :

La déclaration <!DOCTYPE html> assure que le navigateur utilise la norme HTML la plus récente
Les balises <meta> facilitent le codage des caractères et la conception responsive
Nous avons inclus une balise <style> interne où nous ajouterons notre CSS dans les étapes suivantes
Le <body> contient une div conteneur que nous utiliserons pour nos exemples

Sortie d'exemple lorsque vous ouvrez ce fichier dans un navigateur :

CSS Border-Radius Examples

Enregistrez le fichier et assurez-vous qu'il se trouve à ~/projet/index.html.

Appliquer une bordure arrondie de base à un élément div

Dans cette étape, vous allez apprendre à appliquer la propriété de bordure arrondie de base pour créer des coins arrondis sur un élément div. La propriété border-radius vous permet de créer facilement des coins arrondis et lisses sur les éléments HTML.

Ouvrez le fichier index.html dans l'IDE Web. Dans la balise <style>, ajoutez le CSS suivant pour créer un div de base avec des coins arrondis :

<style>
  .rounded-box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 20px;
    margin: 20px;
  }
</style>

Maintenant, ajoutez un div avec la classe rounded-box à l'intérieur de la section <body> de votre HTML :

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>
  </div>
</body>

Analysons les propriétés CSS :

width et height définissent la taille du div
background-color donne au div une couleur solide
border-radius: 20px crée des coins arrondis avec un rayon de 20 pixels
margin ajoute de l'espace autour du div

Lorsque vous ouvrez ce fichier HTML dans un navigateur, vous verrez un carré bleu avec des coins arrondis. La propriété border-radius applique une courbure égale à tous les quatre coins du div.

Sortie visuelle d'exemple :

+--------------------+
|                    |
|   Blue box with    |
|   rounded corners  |
|                    |
+--------------------+

Expérimentez en changeant la valeur de border-radius pour voir comment elle affecte la courbure des coins. Essayez des valeurs telles que 10px, 50px ou même 100px pour voir différents effets de rondeur.

Créer des div avec des rayons de coin différents

Dans cette étape, vous allez apprendre à créer des div avec des rayons de coin différents, vous donnant ainsi plus de contrôle sur le arrondi des coins individuels. La propriété border-radius peut être utilisée pour créer des formes uniques et intéressantes.

Mettez à jour la section <style> dans votre fichier index.html avec le CSS suivant :

<style>
  .different-corners {
    width: 250px;
    height: 200px;
    background-color: #2ecc71;
    margin: 20px;
  }

  .top-left-corner {
    border-top-left-radius: 50px;
  }

  .bottom-right-corner {
    border-bottom-right-radius: 30px;
  }

  .mixed-corners {
    border-top-left-radius: 40px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 60px;
  }
</style>

Maintenant, ajoutez les divs correspondants à votre corps HTML :

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="rounded-box"></div>

    <div class="different-corners top-left-corner"></div>
    <div class="different-corners bottom-right-corner"></div>
    <div class="different-corners mixed-corners"></div>
  </div>
</body>

Analysons les différentes applications de la bordure arrondie :

border-top-left-radius: 50px arrondit seulement le coin supérieur gauche
border-bottom-right-radius: 30px arrondit seulement le coin inférieur droit
La div mixed-corners montre comment vous pouvez définir des rayons différents pour chaque coin indépendamment

Sortie visuelle d'exemple :

+--------------------+
|  Green box with   |
|  varied corner    |
|  roundings        |
+--------------------+

Expérimentez en changeant les valeurs en pixels pour voir comment différents rayons de coin créent des formes uniques. Vous pouvez utiliser diverses unités telles que les pixels (px), les pourcentages (%) ou même utiliser des valeurs différentes pour les rayons horizontaux et verticaux.

Explorer les propriétés individuelles du rayon de coin

Dans cette étape, vous approfondirez les propriétés individuelles du rayon de coin et apprendrez à créer des coins arrondis plus complexes et précis en utilisant différents unités et techniques.

Mettez à jour la section <style> dans votre fichier index.html avec le CSS suivant :

<style>
  .individual-radius {
    width: 300px;
    height: 200px;
    background-color: #e74c3c;
    margin: 20px;
  }

  .elliptical-corners {
    border-top-left-radius: 50px 25px;
    border-top-right-radius: 25px 50px;
    border-bottom-right-radius: 40px 20px;
    border-bottom-left-radius: 20px 40px;
  }

  .percentage-corners {
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
  }
</style>

Ajoutez les divs correspondants à votre corps HTML :

<body>
  <div class="container">
    <h1>CSS Border-Radius Examples</h1>
    <div class="individual-radius elliptical-corners"></div>
    <div class="individual-radius percentage-corners"></div>
  </div>
</body>

Explorons les nouvelles techniques de bordure arrondie :

Coins elliptiques :
- Utilisez deux valeurs pour chaque coin : border-radius: rayon horizontal rayon vertical
- Crée une courbe en forme d'ellipse au lieu d'un cercle parfait
- Exemple : border-top-left-radius: 50px 25px crée une courbe asymétrique
Coins basés sur les pourcentages :
- Utilisez des pourcentages pour créer des rayons de coin réactifs et proportionnels
- border-top-left-radius: 30% arrondit le coin en fonction de la taille de l'élément
- Très pratique pour créer des designs adaptatifs

Sortie visuelle d'exemple :

+--------------------+
|  Red boxes with   |
|  unique corner    |
|  roundings        |
+--------------------+

Expérimentez en changeant les valeurs et les unités de rayon pour voir comment elles affectent l'apparence de l'élément.

Expérimenter avec les variations de la bordure arrondie

Dans cette étape finale, vous allez explorer des techniques avancées de bordure arrondie qui peuvent créer des formes uniques et créatives à l'aide de CSS. Nous allons démontrer comment la bordure arrondie peut être utilisée pour créer des dessins géométriques complexes.

Mettez à jour la section <style> dans votre fichier index.html avec le CSS suivant :

<style>
  .creative-shapes {
    width: 250px;
    height: 250px;
    margin: 20px;
    background-color: #9b59b6;
  }

  .circle {
    border-radius: 50%;
  }

  .leaf-shape {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }

  .complex-shape {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
</style>

Ajoutez les divs correspondants à votre corps HTML :

<body>
  <div class="container">
    <h1>CSS Border-Radius Creative Shapes</h1>
    <div class="creative-shapes circle"></div>
    <div class="creative-shapes leaf-shape"></div>
    <div class="creative-shapes complex-shape"></div>
  </div>
</body>

Explorons ces variations créatives de la bordure arrondie :

Cercle parfait :
- Utilisez border-radius: 50% pour créer un cercle parfait
- Fonctionne en rendant le rayon égal à la moitié de la largeur/hauteur de l'élément
Forme ressemblant à une feuille :
- Arrondissez sélectivement des coins spécifiques pour créer des formes organiques
- border-top-left-radius: 50% crée un coin courbé
Forme asymétrique complexe :
- Utilisez la syntaxe avancée border-radius: horizontal / vertical
- border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% crée une forme unique et asymétrique

Sortie visuelle d'exemple :

+--------------------+
|  Purple shapes    |
|  with creative    |
|  border-radius    |
+--------------------+

Expérimentez en changeant les valeurs en pourcentage et observez comment elles transforment la forme de l'élément.

Sommaire

Dans ce laboratoire, les participants apprennent à créer des coins arrondis à l'aide des propriétés de bordure arrondie en CSS grâce à une exploration étape par étape. Le laboratoire commence par la configuration d'un document HTML de base avec une balise de style interne, fournissant une base pour les expériences de mise en forme CSS. Les participants commencent par créer une structure HTML simple puis appliquent progressivement des techniques de bordure arrondie aux éléments div.

Le parcours d'apprentissage comprend l'application d'une bordure arrondie de base pour créer des coins lisses, l'expérimentation avec différents rayons de coin et l'exploration des propriétés individuelles du rayon de coin. En travaillant sur des exemples pratiques, les participants acquièrent une expérience pratique dans la manipulation des formes d'éléments à l'aide de CSS, comprenant comment la bordure arrondie peut transformer l'apparence visuelle des éléments de page web avec des techniques de mise en forme simples et intuitives.