Contenu
En utilisant du code CSS, vous pouvez générer un fond rayé pour une page Web sans utiliser de graphiques. Cet effet utilise les niveaux de dégradé CSS avec plusieurs sauts de couleur, ainsi que la propriété background-size pour que le vecteur de dégradé se répète sur l'écran. La meilleure façon de faire est de commencer avec une couleur d’arrière-plan unie et de créer une de vos bandes transparentes pour que la couleur soit mise en évidence. Les utilisateurs qui visitent votre page à l'aide d'anciens navigateurs Internet verront leur couleur unie.
Les instructions
-
Ouvrez le fichier de feuille de style CSS dans le Bloc-notes ou dans un programme d’édition de code. Ajoutez cette règle à la fin du fichier:
html {hauteur: 100%; }
Cette règle permet de remplir tout l’arrière-plan d’une page Web avec la bande de dégradé qu’elle créera.
-
Définissez une couleur d'arrière-plan pour votre page dans "html {}" afin de fournir la couleur de base pour vos bandes et une valeur par défaut pour les anciens navigateurs:
html {hauteur: 100%; couleur de fond: noir; }
-
Ajoutez le code suivant à votre "html {}" par défaut pour créer un effet de bande horizontale:
image de fond: dégradé linéaire (transparent 50%, blanc 50%);
Cela créera deux coupures de couleur, la première étant transparente et la seconde étant blanche. Chaque interruption de couleur occupe 50% de l'espace du dégradé à l'écran. Ajustez la largeur des bandes en modifiant les valeurs en pourcentage.
-
Ajoutez une valeur de zéro au premier saut de couleur et séparez-le par une virgule:
Image d'arrière-plan: dégradé linéaire (0, transparent 50%, noir 50%);
Cela positionnera vos bandes verticalement plutôt que horizontalement.
-
Dupliquez la propriété background-image et ses valeurs dans une nouvelle ligne. Faites cela deux fois, en créant trois lignes avec le même code. Ajoutez le préfixe "-moz" au dégradé linéaire dans l'une des lignes de code dupliquées. Ajoutez le préfixe "-webkit" à l’autre ligne en double:
image d'arrière-plan: dégradé linéaire (0, transparent 50%, blanc 50%); image d'arrière-plan: -moz-linear-gradient (0, transparent 50%, blanc 50%); image d'arrière-plan: -webkit-linear-gradient (0, transparent 50%, blanc 50%);
-
Limitez le dégradé à un certain nombre de pixels en définissant la taille de l'arrière-plan dans la ligne suivante de votre code CSS:
taille de l'arrière-plan: 20px;
Modifiez le nombre de pixels de la taille de l’arrière-plan pour modifier la taille du dégradé. En raison de la répétition constante du dégradé de la largeur de la page, chaque répétition correspond à un ensemble de bandes à l'écran.
Les instructions
Avis
- Certains navigateurs plus anciens ne prennent pas en charge les dégradés CSS3. Lorsque vous souhaitez afficher des bandes pour tous les types de navigateurs, utilisez des commentaires conditionnels pour inclure une feuille de style avec un graphique répétitif.