Share
Dans cette astuce, je vais vous montrer comment créer un joli fond dégradé, en utilisant n'importe quelle image et quelques lignes de CSS. De plus, je vais parler de performance et expliquer la propriété attache de fond au fur et à mesure.
Nous vivons dans un monde où le Web favorise (naturellement) les CSS et les visuels générés par le navigateur par rapport aux images. Les images ont une résolution limitée, ce qui les rend assez inflexibles. Ils peuvent également avoir un impact sur les performances d'un site Web, ce qui coûte plus de demandes de serveur et de bande passante..
Parfois, cependant, nous pouvons nous appuyer sur des images pour nous donner de beaux visuels. Ils ne doivent pas forcément être énormes en termes de taille de fichier ou de résolution et l'effet ne sera pas grandement compromis, même sur les écrans haute résolution et rétiniens. Voyons comment utiliser une image (au lieu de CSS) pour un fond dégradé.
Si vous souhaitez utiliser, modifier ou partager des images sans dépenser beaucoup d'argent, vous pouvez toujours vous fier à Google Advanced Image Search. Au bas de la page, vous pouvez sélectionner le type de droits d'utilisation que vous souhaitez rechercher. Dans ce cas, j'utiliserai une image pouvant être partagée, modifiée et libre d'utilisation..
Ouvrez Photoshop et créez un nouveau fichier. Définissez la largeur sur 300 px, la hauteur sur 300 px et la résolution sur 72 PPI..
Importez maintenant l'image que vous souhaitez modifier en tant qu'arrière-plan en dégradé et redimensionnez-la proportionnellement à la taille de la toile..
Pour obtenir un dégradé de fraîcheur, cliquez sur Filtre> Flou> Flou gaussien et réglez-le sur 40 (dans votre cas, vous pouvez augmenter ou diminuer le nombre en fonction de votre image). C'est tout.
Si vous vous sentez paresseux, vous pouvez également consulter 100 textures floues gratuites sur pepsized.com.
Une fois ces premières étapes terminées, il est temps de sauvegarder notre fond dégradé et de réduire autant que possible la taille, tout en conservant une qualité raisonnable. Cliquez sur Fichier> Enregistrer pour le Web et définissez le format d'image sur JPEG..
Maintenant pour la compression. Lorsque vous modifiez la qualité (maximum, très élevé, etc.), vous obtenez un aperçu du résultat final. Allez aussi bas que possible, ajustez finement en tapant la valeur réelle dans le champ de qualité (80 dans ce cas) et réglez Flou sur 2. Augmenter le flou réduira un peu plus la taille du fichier et adoucira davantage votre pixellisation..
Cochez "Progressif". Cela influence la manière dont l'image est chargée dans le navigateur. Le chargement progressif signifie qu'il sera chargé en plusieurs passes. il se charge d'abord complètement en basse qualité, puis un peu plus haut, puis un peu plus haut, au lieu de charger ligne par ligne.
Cliquez sur "Enregistrer" pour enregistrer votre image en dégradé. En bas à gauche de la fenêtre, vous verrez à quel point vous avez réussi à obtenir la taille de votre image..
Une fois que vous avez défini les paramètres qui vous conviennent, pourquoi ne pas les enregistrer pour un accès rapide à l'avenir? Avant de cliquer sur "Enregistrer", cliquez sur la petite icône de menu en haut à droite de la boîte de dialogue Enregistrer pour le Web, puis cliquez sur "Enregistrer les paramètres"..
Même si nous avons créé une petite image, en raison de sa nature floue, elle peut être efficacement étendue sur des résolutions beaucoup plus grandes sans réduire visiblement la qualité. Pour charger cette image sur l'arrière-plan de votre site Web, utilisez ce petit extrait de code CSS:
Accentsconagua
corps marge: 0; fond: url ('img / bg.jpg'); taille du fond: 100% 100%; attachement de fond: fixe; marge: 0 - Cela peut ne pas être nécessaire si vous avez correctement réinitialisé votre CSS pour commencer. Il supprime les espaces autour de votre image ou les contours du point de vue de votre navigateur..fond: url ('bg.jpg') - Chemin vers votre image de fond. Définir le chemin dans le url (").taille du fond: 100% 100%; - Ceci ajuste la largeur et la hauteur de votre image d'arrière-plan. La première valeur est la largeur, la seconde est la hauteur. La raison pour laquelle j'ai choisi le système de pourcentage est qu'elle conserve la même taille relative que la fenêtre d'affichage de chaque périphérique, en fonction de la valeur que vous avez définie. 100% rempliront la fenêtre de n'importe quel navigateur.attachement de fond: fixe - En utilisant cette propriété, nous pouvons spécifier si l’arrière-plan sera défilable ou corrigé. Dans notre cas, nous voulons que nos antécédents soient corrigés; il ne défilera pas avec le contenu. Je vais parler de cette propriété plus en profondeur ci-dessous.L'un des inconvénients de l'utilisation des images est que le fait de les extraire toutes dans le navigateur ajoute une demande supplémentaire au serveur. Le nombre de demandes parallèles que l'on peut faire est limité, de sorte que des restrictions peuvent se produire dans les cas où de nombreux actifs sont en cours de téléchargement. Pour résoudre ce problème, il est possible de convertir votre image en Base 64 et de l'insérer directement dans votre fichier CSS à l'aide d'un Data-URI..
Il existe de nombreux services qui effectuent cette tâche pour vous, mais l'auto-proclamé "outil super simple de dataURI" duri.me est extrêmement facile à utiliser..
Pour plus d'informations sur son fonctionnement, consultez l'introduction de Chris Brown dans Data URIs..
Jetez un coup d’œil à notre petite image de 300 px, étirée dans toute la fenêtre. Vous pouvez aussi regarder la démo en direct.
pièce jointe La propriété background-attachment est principalement utilisée pour spécifier si les images d'arrière-plan doivent défiler ou être fixées par rapport à leur élément parent.
Nous l'avons utilisé dans sa forme la plus simple:
body background-image: url ("img / imgname.png"); attachement de fond: fixe; Il prend également en charge plusieurs images d'arrière-plan, acceptant lui-même plusieurs valeurs séparées par des virgules. Dans cet exemple, la première image d'arrière-plan ("image1.png") défilera, la seconde ("image2.png") sera corrigée:
body background-image: url ("image1.png"), url ("image2.png"); pièce jointe en arrière-plan: scroll, fixed; Regarde la démo.
C’est un moyen simple d’obtenir en quelques minutes des dégradés d’allure originale. N'oubliez pas de déterminer si vous pensez que cela vaut la peine d'utiliser des dégradés CSS, mais j'espère que vous avez aimé ce tutoriel - merci d'avoir lu.!
