Imagini de fundal ale corpului realizate cu ușurință

html

O caracteristică frumoasă pe care o veți găsi pe multe site-uri este aceea în care zona de conținut centrală pare să suprapună pagina cu o umbră în spate. Este de fapt o metodă destul de simplă de a face blogul să arate frumos (sau alt site web) cu o singură imagine de fundal.

Cum se face?

  1. Aflați cât de larg este conținutul dvs. Exemplu: 750 px.
  2. Construiți o imagine în aplicația dvs. de ilustrație (folosesc Illustrator) mai largă decât zona de conținut. Exemplu: 800 px.
  3. Setați fundalul imaginii pe fundalul pe care doriți să îl aveți pe fiecare parte a blogului.
  4. Adăugați o regiune albă pe fundal.
  5. Aplicați o umbră pe regiunea albă care extrudează din ambele părți ale regiunii.
  6. Setați zona de decupare lățimea cu 1 pixel înălțime. Acest lucru va face ca imaginea să fie descărcată frumoasă și compactă pentru redare rapidă.
  7. Redă imaginea.

Iată cum l-am construit folosind Illustrator (rețineți că am suprafața de recoltare mult mai înaltă ... asta este doar pentru a vedea ce fac):
Fundal cu Illustrator

Iată un exemplu despre cum ar arăta ieșirea cu imaginea de fundal:
Exemplu de imagine de fundal

Iată cum să aplicați imaginea utilizând eticheta stilului corpului în CSS fișier.

fundal: # B2B2B2 url ('images / bg.gif') centru de repetare;

Iată o disecție a etichetei stilului de fundal:

  • # B2B2B2 - setează culoarea generală a fundalului paginii. În acest exemplu, este gri pentru a se potrivi cu griul de pe imaginea de fundal.
  • url ('images / bg.gif') - setează imaginea de fundal pe care doriți să o utilizați.
  • repeat-y - setează imaginea să se repete pe axa y. Deci imaginea de fundal se va repeta de sus în jos a paginii.
  • centru - setează imaginea în centrul paginii.

Frumos și ușor ... o imagine, o etichetă de stil!

4 Comentarii

  1. 1
  2. 2

Ce părere ai?

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.