სხეულის ფონის სურათები შესრულებულია მარტივად

html

მრავალფეროვან საიტს ნახავთ ბევრ საიტზე, სადაც ჩანს, რომ ცენტრის შინაარსი არეობს გვერდს გადაფარებული ჩრდილით. სინამდვილეში ეს საკმაოდ მარტივი მეთოდია იმისათვის, რომ თქვენი ბლოგი ლამაზად გამოიყურებოდეს (ან სხვა ვებსაიტი) ერთი ფონის სურათით.

როგორ კეთდება?

  1. გაერკვიეთ, რამდენად ფართოა თქვენი შინაარსი. მაგალითი: 750 px.
  2. ააშენეთ სურათი თქვენს ილუსტრაციულ პროგრამაში (მე ვიყენებ ილუსტრატორს) უფრო ფართო ვიდრე შინაარსის არეალი. მაგალითი: 800 პიქსელი.
  3. სურათის ფონი დააყენეთ იმ ფონისთვის, რომლის წაკითხვაც გსურთ ბლოგის თითოეულ მხარეს.
  4. დაამატეთ თეთრი რეგიონი ფონს.
  5. წაისვით ჩრდილი თეთრ რეგიონზე, რომელიც ექსტრადირდება რეგიონის ორივე მხრიდან.
  6. მოსავლის ფართობის სიგანე დააყენეთ 1 პიქსელით სიმაღლეზე. ეს გახდის სურათის ჩამოსატვირთად ლამაზი და კომპაქტური სწრაფი გაწევისთვის.
  7. გამოსახულების გამოტანა.

აი, როგორ ვაწყობდი მას Illustrator– ის გამოყენებით (გაითვალისწინეთ, რომ მოსავლის ფართობი გაცილებით მაღალი მაქვს… ეს მხოლოდ იმისთვისაა, რომ ნახოთ რას ვაკეთებ):
ფონი ილუსტრატორთან ერთად

აქ მოცემულია მაგალითი, თუ როგორ გამოიყურება გამომავალი ფონის სურათი:
ფონის სურათის მაგალითი

აქ მოცემულია, თუ როგორ უნდა გამოიყენოთ სურათი თქვენი სხეულის სტილის ნიშნის გამოყენებით CSS ფაილი.

ფონი: # B2B2B2 url ('images / bg.gif') განმეორებითი y ცენტრი;

აქ მოცემულია ფონის სტილის ტეგის ამოკვეთა:

  • # B2B2B2 - ადგენს გვერდის ფონის მთლიან ფერს. ამ მაგალითში, ნაცრისფერია, რომ ემთხვეოდეს ნაცრისფერ ფონის სურათს.
  • url ('images / bg.gif') - ადგენს იმ ფონის სურათს, რომლის გამოყენებაც გსურთ.
  • განმეორება-y - ადგენს სურათის გამეორებას y ღერძზე. ასე რომ, ფონის სურათი განმეორდება გვერდის ზემოდან ქვემოთ.
  • ცენტრი - ადგენს სურათს გვერდის ცენტრში.

ლამაზი და მარტივი… ერთი სურათი, ერთი სტილის ნიშანი!

2 კომენტარები

  1. 1
  2. 2

რას ფიქრობთ?

ეს საიტი იყენებს Akismet- ს, რათა შეამციროს სპამი. შეისწავლეთ თქვენი კომენტარის მონაცემები დამუშავებული.