Comment personnaliser la ligne de séparation

Ligne de séparation normale 



La même en couleur verte

en ajouter via l'editeur HTML <hr style="background-color: #2aff00; "/>



ou une bleu plus épaisse

en ajouter via l'editeur HTML <hr style="background-color: #0000FF; height: 10px; "/>


vous remarquerez le height: 10px; ce qui veut dire quelle fait 10pixel de hauteur

 

 Et une avec 4 bords arrondis identique

<hr style="height: 20px;  background-color: #FF0000; border-radius:10px;">


 

 Soyons fou... une autre plus design rouge avec bords arrondis différents

<hr style="height: 20px;  background-color: #FF0000; border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;border-top-left-radius: 10px;border-top-right-radius: 25px;">


height: 20px; Hauteur 20px

background-color: #FF0000; Couleur de la barre

border-bottom-left-radius: 15px; Angle inferieur gauche

border-bottom-right-radius: 15px;  Angle inferieur droit

border-top-left-radius: 10px;  Angle supérieur gauche

border-top-right-radius: 25px; Angle supérieur droit

 

 Pourquoi pas une autre avec image externe

<hr style="height: 15px; background: #fff url('http://www.sovavsiti.cz/css/hr1.gif') no-repeat scroll center;">


 

Et une autre avec cette image  reproduite autant de fois pour faire la ligne

<hr style="height: 38px;  background-color: #fff; background-image: url("LIEN VERS IMAGE");">


 

 Allez... une dernière avec des bords de couleurs différentes

<hr style="height: 20px; background-color: yellow; border: 5px; border-style: solid; border-color: red blue orange green;">

vous pouvez biensur remplacer red, blue... par vos couleurs perso #00000 ect...


 

 

 

  avec tout ceci vous pouvez présenter votre page...


 

bla bla bla 

bla bla bla bla bla 

bla bla bla ? 

 


 

2 votes. Moyenne 4.50 sur 5.