Kierperhannergrënn Biller liicht gemaach

HTML

Eng schéi Feature déi Dir op ville Site fannt ass wou den Zentrumsinhaltsberäich d'Säit mat engem Drop Shadow hannendrun iwwerlagert. Et ass tatsächlech eng relativ einfach Method fir Äre Blog schéin ze maachen (oder aner Websäit) mat engem eenzegen Hannergrondbild.

Wéi geet et?

  1. Erauszefannen wéi breet Ären Inhalt ass. Beispill: 750px.
  2. Baut e Bild an Ärer Illustratiounsapplikatioun (ech benotze Illustrator) méi breet wéi den Inhalt. Beispill: 800px.
  3. Setzt den Hannergrond vum Bild op den Hannergrond deen Dir op all Säit vum Blog wëllt hunn.
  4. Füügt eng wäiss Regioun iwwer den Hannergrond derbäi.
  5. Füügt e Schatten op déi wäiss Regioun aus, déi vun enger Säit vun der Regioun extrudéiert.
  6. Setzt d'Erntegebitt d'Breet ëm 1 Pixel an der Héicht. Dëst wäert d'Bild eroflueden léif a kompakt fir séier Rendering.
  7. Output d'Bild.

Hei ass wéi ech et mat Illustrator konstruéiert hunn (bemierkt datt ech d'Cropgebitt vill méi héich hunn ... dat ass just fir datt Dir gesitt wat ech maachen):
Hannergrond mam Illustrator

Hei ass e Beispill wéi d'Ausgab mam Hannergrondbild ausgesäit:
Beispill vun Hannergrond Bild

Hei ass wéi Dir d'Bild uwennt mat Ärem Kierperstil Tag an Ärem CSS Fichier.

Hannergrond: # B2B2B2 url ('images / bg.gif') repeat-y center;

Hei ass eng Dissektioun vum Hannergrondstil Tag:

  • # B2B2B2 - setzt déi allgemeng Hannergrondfaarf vun der Säit. An dësem Beispill ass et gro fir dat gro um Hannergrondbild ze passen.
  • url ('images / bg.gif') - setzt den Hannergrondbild dat Dir benotze wëllt.
  • widderhuelen-y - setzt d'Bild fir op der y-Achs ze widderhuelen. Also den Hannergrondbild widderhëlt sech vun uewen bis ënnen op der Säit.
  • Zentrum - setzt d'Bild am Zentrum vun der Säit.

Flott an einfach ... ee Bild, ee Style Tag!

2 Comments

  1. 1
  2. 2

Wat denks du?

Dëse Site benotzt Akismet fir Spam ze reduzéieren. Léiert wéi Är Kommentarfaten veraarbecht ginn.