Kehon taustakuvat on tehty helposti

html

Hieno ominaisuus, jonka löydät monilta sivustoilta, on se, että keskimmäinen sisältöalue näyttää peittävän sivun varjolla sen takana. Se on oikeastaan ​​melko yksinkertainen tapa saada blogisi näyttämään hyvältä (tai muulta verkkosivustolta) yhdellä taustakuvalla.

Miten se tehdään?

  1. Selvitä, kuinka laaja sisältösi on. Esimerkki: 750 kuvapistettä.
  2. Rakenna kuva kuvasovelluksessasi (käytän Illustratoria) leveämpi kuin sisältöalue. Esimerkki: 800 kuvapistettä.
  3. Aseta kuvan taustaksi tausta, jonka haluat olevan blogin molemmilla puolilla.
  4. Lisää valkoinen alue taustan päälle.
  5. Levitä varjo valkoiselle alueelle, joka puristuu alueen molemmilta puolilta.
  6. Aseta rajausalueen leveys yhdellä pikselillä. Tämä tekee kuvasta ladattavan mukavan ja kompaktin nopeaan renderointiin.
  7. Tulosta kuva.

Näin olen rakentanut sen Illustratorilla (huomaa, että sadon pinta-ala on paljon korkeampi ... se on vain, jotta näet, mitä teen)
Tausta Illustratorilla

Tässä on esimerkki siitä, miltä tulos näyttäisi taustakuvan kanssa:
Esimerkki taustakuvasta

Näin voit käyttää kuvaa käyttämällä kehon tyyppitunnistetta CSS tiedosto.

tausta: # B2B2B2 URL-osoite ('images / bg.gif') toista y-keskusta;

Tässä on leikkaus taustan tyylitunnisteesta:

  • # B2B2B2 - määrittää sivun taustavärin. Tässä esimerkissä se on harmaa vastaamaan taustakuvan harmaata.
  • url ('images / bg.gif') - määrittää taustakuvan, jota haluat käyttää.
  • Repeat-y - asettaa kuvan toistumaan y-akselilla. Joten taustakuva toistuu sivun ylä- ja alaosasta.
  • keskellä - asettaa kuvan sivun keskelle.

Mukavaa ja helppoa ... yksi kuva, yksi tyylimerkki!

2 Kommentit

  1. 1
  2. 2

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.