css Couleur de fond <body> bicolore

  • Initiateur de la discussion Esteban
  • Date de début
E

Esteban

Invité
Salut,

Pensez-vous qu'il soit possible en CSS de colorer le <body> avec une séparation verticale, à droite une couleur et à gauche une autre couleur ?
Je voudrais éviter d'utiliser une image. Je me suis, un peu, creusé la tête mais je vois pas comment faire.

Merci les zamis !
 
Solution
Côté gauche NOIR et côté droit BLANC séparation franche au milieu, pas de dégradé/fondu
bicolore en CSS sans fondu
background: -moz-linear-gradient(left, #000 0%, #000 50%, #000 50%, #FFF 50%);

mikadox

Membre
Je ne parviens pas à faire fonctionner ce CSS :unsure:
Sur Codepen rien ne se passe...

D'ailleurs je ne comprends pourquoi il y a 4 valeurs de couleur dans le gradient, ce code de base fonctionne par contre.
CSS
background: linear-gradient(90deg, rgba(221,18,18,1) 0%, rgba(5,23,246,1) 50%);
 

Jack

Membre
Je ne parviens pas à faire fonctionner ce CSS :unsure:
Pour une compatibilité complète:
CSS
background: linear-gradient(left, #000 0%, #000 50%, #000 50%, #FFF 50%);
background: -moz-linear-gradient(left, #000 0%, #000 50%, #000 50%, #FFF 50%);
background: -webkit-linear-gradient(left, #000 0%, #000 50%, #000 50%, #FFF 50%);
background: -o-linear-gradient(left, #000 0%, #000 50%, #000 50%, #FFF 50%);
 

Ces discussions pourraient vous intéresser...

Bonjour, Je voulais partager avec vous un lien que j'ai découvert récemment : Random Colors - Hex Colors Pour trouver l'inspiration il est juste parfait, les couleurs et leurs nuances sont superbement bien présentées. En cliquant sur le code couleur vous êtes redirigés vers une page...
Bonjour à tous, Je voulais faire un bouton avec un fond transparent mais quand j'applique opacity au bouton tout devient transparent même le texte. Comment avoir juste le fond ?
Salut le forum, Je cherche à réaliser un bouton bicolore dont la séparation entre les deux couleurs soit une diagonale. Je n'ai pas de problème avec le code HTML ni le CSS pour les couleurs <div class="btn"> <div class="btn-left">Valider</div> <div...
-->
Haut