Comment créer un dégradé lisse sur une page Web

Un concepteur de sites Web a beaucoup d'options pour l'élaboration de l'apparence et la sensation d'une page Web. gradients de fond sont une telle option. Ils peuvent être une partie fonctionnel ou décoratif de la conception web. La méthode la plus courante pour ajouter un dégradé à un simple page web est décrite ici. Vous aurez besoin de compétences HTML.

Choses que vous devez

  • Ordinateur avec connexion Internet
  • logiciel de retouche d'image
  • manuel de référence de CSS ou une ressource en ligne
  • hôte Web
  1. Créez votre dégradé l'image

    • 1

      Déterminer les couleurs, la durée, et l'orientation de votre dégradé, en fonction de vos besoins de mise en page de la page Web. La durée est le nombre de pixels le gradient va atteindre de bout en bout. L'orientation est généralement vertical ou horizontal (avec étant vertical le plus commun), mais en diagonale, radiale, et les orientations irrégulières sont possibles.

    • 2

      Lancez votre programme de retouche d'image (comme Photoshop) et de créer une image pour tenir le gradient. Pour donner à vos visiteurs de votre site le plus rapide l'expérience de chargement de page, cette image doit être aussi faible que possible dans les dimensions. Pour un gradient vertical, il peut être une large pixel par le nombre de pixels dans la travée. Ceci est parce que l'image sera carrelée (ie, répétée) autant de fois que nécessaire pour remplir la page. Pour un gradient horizontal, il suffit de passer ces valeurs autour de: 1 pixel de hauteur et cependant de nombreux pixels de large. Pour les dégradés plus complexes, l'astuce de carrelage ne fonctionnera pas, et vous aurez à créer une image pleine grandeur.

    • 3

      Créez le gradient aide de l'outil de création de gradient du programme.

    • 4

      Enregistrez l'image avec un nom mémorable et le télécharger sur votre site Web. Pour une bonne gestion de contenu, les images doivent être placées ensemble dans leur propre dossier sur votre serveur site Web hôte.

    • Placez votre dégradé dans une page Web en utilisant une feuille de style mondial

      • 1

        Créer ou ouvrir la feuille de style globale de la page Web. Ceci est un fichier distinct du document HTML. Il doit être nommé "style.css." Vous pouvez créer et éditer des fichiers CSS avec un simple bloc-notes.

      • 2

        Écrire la langue suivante dans votre document CSS:

        body {




         background-image: URL (AAA)

        GO

         background-repeat: BBB

        GO

         background-position: CCC DDD

        GO

         background-color: XXXXXX



        GO
        }

        Préserver toutes les lignes et des espaces. Cette instruction va modifier votre page Web de "corps" élément. Si votre feuille de style a déjà des informations de corps, de modifier (si nécessaire) les valeurs des quatre attributs spécifiés ci-dessus. Sinon:

        Remplacer "AAA" avec l'URL locale de votre image, à partir du dossier racine. Par exemple, si votre image est nommé "gradient.png" et est situé dans la "images" dossier de votre site, vous pouvez remplacer le "XXX" avec "images / gradient.png."

        Remplacer "BBB" avec la valeur de l'attribut de répétition appropriée. Si vous utilisez une image verticale de dégradé qui est à seulement 1 pixel de large, vous auriez besoin d'insérer "repeat-x" au lieu de "Bureau." Si vous utilisez un gradient horizontal, vous pouvez utiliser "repeat-y" à la place. Et si vous utilisez, un dégradé complexe pleine grandeur, vous devez entrer "no-repeat."

        Pour les deux autres valeurs, la position et la couleur, consulter un manuel de référence de CSS ou une ressource en ligne pour voir exactement ce syntaxe à utiliser. L'information de position placera votre dégradé dans la zone correcte de la page Web. La couleur de fond doit être identique à la couleur du terminal de votre dégradé, de sorte que les deux se mêlent douceur.

      • 3

        Appelez la feuille de style dans chaque page web sur votre site en ajoutant la ligne de code HTML suivant n'importe où à l'intérieur du tag en haut de chaque document HTML:

        Ensuite, vous avez terminé. Tant que vous mettez un balise dans votre document, qui est la norme HTML pratique le gradient sera automatiquement ajouté chaque fois qu'un visiteur charge la page.

    Conseils & Avertissements

    • "CSS" signifie "cascade feuille de style." CSS est un complément au format HTML (hypertext markup language). Une feuille de style est censé contenir toutes les informations de mise en page sur une page web de base, tandis que le Web lui-même (le document HTML) est censé contenir le contenu réel de la page Web. Cette division permet de faire des changements à disposition un site Web entier en modifiant un seul fichier CSS-le fichier plutôt que de passer par chaque document HTML individuellement.
    » » » » Comment créer un dégradé lisse sur une page Web