b1001d accompagne vos mille et un projets web

Hexa PAGE - Classes - Encadrement

Les bordures

Tout élément HTML se présente sous forme rectangulaire. Il comporte donc quatre bords, chacun définit par son style, sa couleur, son épaisseur.

Les classes de bordures fournies par Hexa Page sont toutes exprimées avec un style de ligne pleine. Pour d'autres styles, consultez le paragraphe suivant listant une série de cadres prédéfinis.

Les quatre bordures

<p><span class="hx-border-size-3 hx-border-primary">Ce texte est encadré en bleu</span> et pas celui-là</p>

Ce texte est encadré en bleu et pas celui-là

  • hx-border-size-[size]
    Les quatre bordures prennent la même épaisseur.
    [size] = 0, 1, 3, 5, 10, 20, 30 
  • hx-border-[color]
    Les quatres bordures prennent la même couleur.
    [color] = nocolor, color1, color2, color3, color4, color5, colorbg, primary, secondary, success, danger, warning, info, light, dark, white, black.

Les bordures séparément

<p>Une méthode pour souligner un <span class="hx-border-bottom-size-1">mot</span><p>

Une méthode pour souligner un mot

  • hx-border-top-size-[size]
    Epaisseur de la bordure du haut. Mêmes valeurs que hx-border-size-[size]
  • hx-border-top-[color]
    Couleur de la bordure du haut. Mêmes valeurs que hx-border-[color]
  • hx-border-bottom-size-[size]
    Epaisseur de la bordure du bas. Mêmes valeurs que hx-border-size-[size]
  • hx-border-bottom-[color]
    Couleur de la bordure du bas. Mêmes valeurs que hx-border-[color]
  • hx-border-left-size-[size]
    Epaisseur de la bordure de gauche. Mêmes valeurs que hx-border-size-[size]
  • hx-border-left-[color]
    Couleur de la bordure de gauche. Mêmes valeurs que hx-border-[color]
  • hx-border-right-size-[size]
    Epaisseur de la bordure de droite. Mêmes valeurs que hx-border-size-[size]
  • hx-border-right-[color]
    Couleur de la bordure de droite. Mêmes valeurs que hx-border-[color]

Les cadres

<p>Encadrement d'un <span class="hx-frame-ellipse">mot-clé</span> par une ellipse</p>

Encadrement d'un mot-clé par une ellipse

Chaque classe hx-frame définit un style de cadre.

  • hx-frame-simple
    L'élément est encadré de quatre bordures pleines de 1px d'épaisseur.
    Les angles sont aigus.
  • hx-frame-smooth
    L'élément est encadré de quatre bordures pleines de 1px d'épaisseur.
    Les angles sont légèrement arrondis.
  • hx-frame-cartouche
    L'élément est encadré de quatre bordures pleines de 1px d'épaisseur.
    Le cadre s'apparente à un cartouche égyptien en position horizontale.
  • hx-frame-bullet-right
    L'élément est encadré de trois bordures pleines de 1px d'épaisseur.
    Les bords haut et bas se rejoignent au milieu du bord droit.
  • hx-frame-bullet-left
    L'élément est encadré de trois bordures pleines de 1px d'épaisseur.
    Les bords haut et bas se rejoignent au milieu du bord gauche.
  • hx-frame-bullet-boat
    L'élément est encadré de quatre bordures pleines de 1px d'épaisseur.
    Les angles bas/gauche et bas/droit sont fortement arrondis.
  • hx-frame-bullet-wreck
    L'élément est encadré de quatre bordures pleines de 1px d'épaisseur.
    Les angles haut/gauche et haut/droit sont fortement arrondis.
  • hx-frame-ellipse
    L'élément est encadré d'une ellipse.
  • hx-frame-blob
    L'élément est encadré de quatre bordures.
    Les angles sont arrondis avec des rayons de courbures différents.
    Destiné à des éléments approchant de la forme carrée.
  • hx-frame-papyrus
    L'élément est encadré de quatre bordures.
    Les angles sont arrondis avec des rayons de courbures différents.
    Destiné à des éléments approchant de la forme rectangulaire avec une orientation de type page.
  • hx-frame-tab-on
    L'élément est encadré de trois bordures. Celle du bas étant supprimée.
    Les angles haut/gauche et haut/droit sont légèrement arrondis.
  • hx-frame-tab-off
    L'élément est encadré de quatre bordures.
    Les angles haut/gauche et haut/droit sont légèrement arrondis.
  • hx-frame-parentheses
    L'élément est encadré de deux bordures courbes à gauche et à droite formant des parenthèses.

Espace tampon entre contenu et cadre

Les classes suivantes permettent de créer un espace entre le contenu et la bordure de son conteneur.

Il est à noter que l'encadrement d'un contenu peut également s'effectuer par un simple espace vide. Cette méthode est même aujourd'hui la plus couramment utilisée.

Les quatres bordures

  • hx-pad-[size]
    Un espace tampon de [size]px est inséré entre le contenu et chaque bordure du conteneur.
    [size] = 5, 10, 15, 25, 50, 100 

Les bordures séparément

  • hx-pad-top-bottom-[size]
    Un espace tampon de [size]px est inséré entre le contenu et les bordures haute et bas du conteneur.
    [size] = 5, 10, 15, 25, 50, 100 
  • hx-pad-left-right-[size]
    Un espace tampon de [size]px est inséré entre le contenu et les bordures gauche et droite du conteneur.
    [size] = 5, 10, 15, 25, 50, 100 
  • hx-pad-top-[size]
    Un espace tampon de [size]px est inséré entre le contenu et la bordures haute du conteneur.
    [size] = 5, 10, 15, 25, 50, 100 
  • hx-pad-bottom-[size]
    Un espace tampon de [size]px est inséré entre le contenu et la bordure bas du conteneur.
    [size] = 5, 10, 15, 25, 50, 100 
  • hx-pad-left-[size]
    Un espace tampon de [size]px est inséré entre le contenu et la bordure gauche du conteneur.
    [size] = 5, 10, 15, 25, 50, 100 
  • hx-pad-right-[size]
    Un espace tampon de [size]px est inséré entre le contenu et la bordure droite du conteneur.
    [size] = 5, 10, 15, 25, 50, 100 

Espace autour du cadre

Les classes suivantes permettent de créer un espace entre un élément et les autres autour de lui.

Il est à noter que l'encadrement d'un contenu peut également s'effectuer par un simple espace vide. Cette méthode est même aujourd'hui la plus couramment utilisée.

Les quatre bordures

  • hx-margin-[size]
    Un espace de [size]px est ajouté au delà des quatres bordures.
    [size] = 5, 10, 15, 25, 50, 100 

Les bordures séparément

  • hx-margin-top-bottom-[size]
    Un espace de [size]px est ajouté au delà des bordures haute et basse.
    [size] = 5, 10, 15, 25, 50, 75, 100 
  • hx-margin-left-right-[size]
    Un espace de [size]px est ajouté au delà des bordures gauche et droite.
    [size] = 5, 10, 15, 25, 50, 75, 100 
  • hx-margin-top-[size]
    Un espace de [size]px est ajouté au delà de la bordure haute.
    [size] = 5, 10, 15, 25, 50, 75, 100 
  • hx-margin-bottom-[size]
    Un espace de [size]px est ajouté au delà de la bordure basse.
    [size] = 5, 10, 15, 25, 50, 75, 100 
  • hx-margin-left-[size]
    Un espace de [size]px est ajouté au delà de la bordure gauche.
    [size] = 5, 10, 15, 25, 50, 75, 100 
  • hx-margin-right-[size]
    Un espace de [size]px est ajouté au delà de la bordure droite.
    [size] = 5, 10, 15, 25, 50, 75, 100