Images d'arrière-plan du corps réalisées facilement

html

Une fonctionnalité intéressante que vous trouverez sur de nombreux sites est l'endroit où la zone de contenu centrale semble recouvrir la page avec une ombre portée derrière elle. C'est en fait une méthode assez simple pour rendre votre blog agréable (ou un autre site Web) avec une seule image d'arrière-plan.

Comment est-il fait?

  1. Déterminez la largeur de votre contenu. Exemple: 750px.
  2. Créez une image dans votre application d'illustration (j'utilise Illustrator) plus large que la zone de contenu. Exemple: 800px.
  3. Définissez l'arrière-plan de l'image sur l'arrière-plan que vous souhaitez avoir de chaque côté du blog.
  4. Ajoutez une zone blanche sur l'arrière-plan.
  5. Appliquez une ombre sur la zone blanche qui extrude de chaque côté de la zone.
  6. Définissez la zone de recadrage sur la largeur de 1 pixel de hauteur. Cela rendra l'image à télécharger agréable et compacte pour un rendu rapide.
  7. Sortez l'image.

Voici comment je l'ai construit à l'aide d'Illustrator (notez que la zone de recadrage est beaucoup plus haute… c'est juste pour que vous puissiez voir ce que je fais):
Fond avec Illustrator

Voici un exemple de l'apparence de la sortie avec l'image d'arrière-plan :
Exemple d'image d'arrière-plan

Voici comment appliquer l'image en utilisant votre balise de style de corps dans votre CSS fichier.

background: # B2B2B2 url ('images / bg.gif') centre de répétition;

Voici une dissection de la balise de style d'arrière-plan :

  • #B2B2B2 - définit la couleur d'arrière-plan globale de la page. Dans cet exemple, le gris correspond au gris de l'image d'arrière-plan.
  • url ('images / bg.gif') - définit l'image d'arrière-plan que vous souhaitez utiliser.
  • repeat-y - définit l'image pour qu'elle se répète sur l'axe y. Ainsi, l'image d'arrière-plan se répète du haut vers le bas de la page.
  • centre - définit l'image au centre de la page.

Sympa et facile… une image, une étiquette de style!

2 Commentaires

  1. 1
  2. 2

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..