Les imatges de fons del cos es fan fàcilment

html

Una bona característica que trobareu a molts llocs és que l’àrea de contingut central sembla superposar la pàgina amb una ombra al darrere. En realitat, és un mètode bastant senzill per fer que el vostre bloc sembli agradable (o un altre lloc web) amb una sola imatge de fons.

Com es fa?

  1. Esbrineu quina amplada té el vostre contingut. Exemple: 750 px.
  2. Creeu una imatge a la vostra aplicació d’il·lustració (faig servir Illustrator) més àmplia que l’àrea de contingut. Exemple: 800 px.
  3. Establiu el fons de la imatge al fons que vulgueu tenir a cada costat del bloc.
  4. Afegiu una regió blanca sobre el fons.
  5. Apliqueu una ombra a la regió blanca que s’extreu de qualsevol costat de la regió.
  6. Establiu l’àrea de retallada per 1 píxel d’alçada. Això farà que la imatge es descarregui agradable i compacta per a una representació ràpida.
  7. Sortiu la imatge.

A continuació s’explica com l’he construït amb Illustrator (tingueu en compte que tinc la superfície de cultiu molt més alta ... és així perquè pugueu veure el que estic fent):
Fons amb Illustrator

Aquí teniu un exemple de com quedaria la sortida amb la imatge de fons:
Exemple d'imatge de fons

A continuació s’explica com aplicar la imatge mitjançant l’etiqueta d’estil corporal al vostre CSS arxiu.

fons: # B2B2B2 url ('images / bg.gif') centre de repetició;

Aquí teniu una dissecció de l'etiqueta d'estil de fons:

  • # B2B2B2: estableix el color de fons general de la pàgina. En aquest exemple, és gris que coincideixi amb el gris de la imatge de fons.
  • url ('images / bg.gif'): defineix la imatge de fons que voleu utilitzar.
  • repeat-y: estableix que la imatge es repeteixi a l'eix y. Per tant, la imatge de fons es repetirà de dalt a baix de la pàgina.
  • centre: estableix la imatge al centre de la pàgina.

Bonic i fàcil ... una imatge, una etiqueta d'estil!

2 Comentaris

  1. 1
  2. 2

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.