Création d'un remplissage gradiant de largeur variable en CSS

Je suis en train de construire un thème WordPress que j'aimerais avoir en-tête (dans WordPress, pas au sens HTML) qui va d'un coin à l'autre en haut de la page . Ancrer l'extrême gauche serait une image remplie d'une couleur unie sur son côté droit. Ancrer l'extrême droite serait une image remplie d'une couleur unie sur son côté gauche. Ce que je voudrais faire est remplir l'espace intermédiaire, indépendamment de la largeur du navigateur, avec un gradiant qui se fane de façon transparente de la couleur sur sa gauche à la couleur sur sa droite. Existe-t-il un moyen de le faire via CSS?Création d'un remplissage gradiant de largeur variable en CSS

Source

2009-02-27 Yes - that Jake.

Faites le gradient comme une image dans GIMP (un pixel de haut) et voir http://www.cssplay.co.uk/layouts/background.html

Source

2009-02-27 18:34:43 MarkusQ

Il n'y a aucun moyen pur CSS de le faire, mais une solution en utilisant CSS est de faire une image de fond d'une largeur suffisante pour la plus grande largeur d'écran que vous pourriez avoir et l'étirer jusqu'à la largeur actuelle du navigateur.

Une autre façon, si c'est de la même couleur, est de créer une image de fond en GIF de plus en plus transparente et de définir une couleur de fond de votre choix.

Voir this ou this.

Source

2009-02-27 18:36:08 lpfavreau

Voici une façon de le faire sans images. Vous pouvez considérer cela comme un hack, mais d'une certaine manière, le travail est fait. Ajustez le nombre de pas dans le dégradé selon vos besoins. Si vous souhaitez que l'échelle corresponde automatiquement à la taille de la fenêtre, utilisez d'autres éléments <b> et n'utilisez pas la bordure comme étape de dégradé. Puis dimensionnez les éléments <b> en utilisant des largeurs en pourcentage. Vous pouvez même générer le dégradé en utilisant Javascript si vous voulez garder la taille de téléchargement petite.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
    .grad b { 
     display: block; 
     float: left; 
     width: 16px; 
     height: 100%; 
     border-left-width: 16px; 
     border-right-width: 16px; 
     border-left-style: solid; 
     border-right-style: solid; 
     border-left-color: #FF0000; 
     background-color: #EE0011; 
     border-right-color: #DD0022; 
    } 
    .grad b+b { 
     border-left-color: #CC0033; 
     background-color: #BB0044; 
     border-right-color: #AA0055; 
    } 
    .grad b+b+b { 
     border-left-color: #990066; 
     background-color: #880077; 
     border-right-color: #770088; 
    } 
    .grad b+b+b+b { 
     border-left-color: #660099; 
     background-color: #5500AA; 
     border-right-color: #4400BB; 
    } 
    .grad b+b+b+b+b { 
     border-left-color: #3300CC; 
     background-color: #2200DD; 
     border-right-color: #1100EE; 
    } 
    .grad b+b+b+b+b+b { 
     border: none; 
     background-color: #0000FF; 
    } 
    .grad { 
     float: left; 
     font-size: 100%; 
     height: 30px; 
    } 
    </style> 
    </head> 
    <body> 
    <div class="grad"> 
     <b></b> 
     <b></b> 
     <b></b> 
     <b></b> 
     <b></b> 
     <b></b> 
    </div> 
    </body> 
</html>

Source

2009-02-27 19:15:11

Création d'un remplissage gradiant de largeur variable en CSS

Répondre

Questions connexes