🎨 Arrière-plan

Apportez du sens à vos éléments grâce aux classes de couleur de fond et ajoutez une touche de style avec des dégradés élégants.

Comment ils fonctionnent

Les classes d’arrière-plan d’Orochi permettent de modifier rapidement la couleur de fond d’un élément ou d’y appliquer un dégradé fluide sans écrire de CSS supplémentaire. Ces classes sont basées sur les variables de couleur du framework et s’adaptent automatiquement au mode clair ou sombre.

Orochi fournit deux grandes familles de classes d’arrière-plan :

Ces classes vous offrent une grande liberté pour exprimer votre identité visuelle, tout en gardant un design harmonieux et cohérent avec le reste d’Orochi.

Couleur d'arrière-plan

Les classes de couleur d’arrière-plan d’Orochi vous permettent d’appliquer rapidement une teinte uniforme à n’importe quel élément. Chaque classe est basée sur la palette principale du framework et s’adapte parfaitement aux textes et aux modes clair/sombre. Utilisez-les pour mettre en valeur des sections, des cartes ou des boutons sans écrire une seule ligne de CSS.

.o-bg-primary
.o-bg-secondary
.o-bg-success
.o-bg-danger
.o-bg-warning
.o-bg-info
.o-bg-light
.o-bg-dark
.o-bg-black
.o-bg-white
<div class="o-bg-primary">.o-bg-primary</div>
<div class="o-bg-secondary">.o-bg-secondary</div>
<div class="o-bg-success">.o-bg-success</div>
<div class="o-bg-danger">.o-bg-danger</div>
<div class="o-bg-warning">.o-bg-warning</div>
<div class="o-bg-info">.o-bg-info</div>
<div class="o-bg-light">.o-bg-light</div>
<div class="o-bg-dark">.o-bg-dark</div>
<div class="o-bg-black">.o-bg-black</div>
<div class="o-bg-white">.o-bg-white</div>
          
💡 Personnalisation
:root {
--o-bg-primary:#votre_couleur;
--o-bg-secondary:#votre_couleur;
--o-bg-success:#votre_couleur;
--o-bg-danger:#votre_couleur;
--o-bg-warning:#votre_couleur;
--o-bg-info:#votre_couleur;
--o-bg-light:#votre_couleur;
--o-bg-dark:#votre_couleur;
--o-bg-black:#votre_couleur;
--o-bg-white:#votre_couleur;
}