Korpaj Fonaj Bildoj Faritaj Facile

html

Bela trajto, kiun vi trovos en multaj retejoj, estas, ke la centra enhava areo ŝajnas kovri la paĝon kun falanta ombro malantaŭ ĝi. Fakte ĝi estas sufiĉe simpla metodo por aspekti belan vian blogon (aŭ alian retejon) kun sola fonbildo.

Kiel ĝi realiĝas?

  1. Eltrovu kiom larĝa estas via enhavo. Ekzemplo: 750px.
  2. Konstruu bildon en via ilustra aplikaĵo (mi uzas Illustrator) pli larĝa ol la enhava areo. Ekzemplo: 800px.
  3. Agordu la fonon de la bildo al la fono, kiun vi volas havi ambaŭflanke de la blogo.
  4. Aldonu blankan regionon super la fono.
  5. Apliku ombron sur la blanka regiono, kiu elstaras de ambaŭ flankoj de la regiono.
  6. Agordu la rikoltan areon larĝe je 1 pikselo en alteco. Ĉi tio igos la elŝuteblan bildon bela kaj kompakta por rapida bildigo.
  7. Eligu la bildon.

Jen kiel mi konstruis ĝin per Illustrator (rimarku, ke mi havas la rikoltan areon multe pli alta ... nur tiel vi povas vidi, kion mi faras):
Fono kun Ilustristo

Jen ekzemplo de kiel aspektus la eligo kun la fonbildo:
Ekzemplo de Fona Bildo

Jen kiel apliki la bildon per via korpstila etikedo en via CSS dosieron.

fono: # B2B2B2 url ('images / bg.gif') ripeta centro;

Jen dissekcio de la fona stiletikedo:

  • # B2B2B2 - agordas la ĝeneralan fonkoloron de la paĝo. En ĉi tiu ekzemplo, estas grize kongrui kun la griza sur la fona bildo.
  • url ('images / bg.gif') - agordas la fonan bildon, kiun vi ŝatus uzi.
  • ripeti-y - agordas la bildon ripeti sur la y-akso. Do la fonbildo ripetiĝos de la supro ĝis la malsupro de la paĝo.
  • centro - starigas la bildon en la centro de la paĝo.

Bela kaj facila ... unu bildo, unu stila etikedo!

2 Komentoj

  1. 1
  2. 2

Kion vi pensas?

Ĉi tiu retejo uzas Akismeton por redukti spamon. Lernu, kiel via komento datiĝas.