რა არის ჩაშენებული ვებ ფონი. მთელი ფონის საპასუხო სურათი CSS– ით

პოპულარული Zadarma სერვისის 1C– თან დაკავშირება ახლა რამდენიმე წუთის საქმეა. საკმარისია დააკავშიროთ მზა გაფართოება 1C და Zadarma ინტეგრაციისთვის. ნებისმიერ თანამშრომელს შეუძლია ადვილად შეასრულოს ინსტალაცია, თუნდაც დასუფთავების ქალბატონი, დეიდა მაშა, დასუფთავების სპეციალისტი.

უპირველეს ყოვლისა, ჩვენ გავამახვილეთ ყურადღება მცირე ბიზნესზე, რომელიც აქტიურად იყენებს Zadarma PBX და 1C კონფიგურაციას: მცირე ფირმის მენეჯმენტი 1.6.

როგორც ადრე იყო

ზადარმასთან ინტეგრირებისთვის, თქვენ უნდა გამოიყენოთ სპეციალური ციფერბლატი, რომელიც ჩაშენებულია 1C– ში - ეგრეთ წოდებული SIP ფონი. ეს ვარიანტი შესაფერისი იყო, როდესაც იყო რამდენიმე "თუ":

თუ 1C დაინსტალირებულია ადგილობრივ კომპიუტერზე და არა სადმე ტერმინალურ სერვერზე
თუ მომხმარებელი თანახმაა გამოიყენოს 1C აკრიფეთ სამაგიდო ტელეფონის ნაცვლად

ზოგადად, თუ ყველა "თუ" დათანხმდა, მაშინ ინტეგრაცია შესაძლებელი იყო.

როგორ გახდა ახლა

ახლა, 1C და Zadarma ინტეგრაციისთვის, საერთოდ არ აქვს მნიშვნელობა რომელი ბოლო მოწყობილობა გამოიყენება ზარებისთვის. ეს შეიძლება იყოს არაფერი:

სამაგიდო ტელეფონი
რბილი ტელეფონი დაინსტალირებული OS- ში
ბრაუზერში გაშვებული ვებ ფონი

Zadarma– ს 1C გაფართოება ურთიერთქმედებს API– თან და არა აკრიფეთ. ამიტომ, არ აქვს მნიშვნელობა კონკრეტულად რას დაურეკავს მომხმარებელი.

მარტივი ინსტალაცია

ინსტალაცია შედგება 1 ნაბიჯისგან. მოდით გაჩვენოთ 2 ეკრანის ანაბეჭდი.

განთავსება მთავარ გვერდზე

ზადარმას სატელეფონო პანელი ავტომატურად გამოჩნდება მთავარ გვერდზე. თუ მოულოდნელად მომხმარებელს ეს არ სჭირდება, მაშინ მას შეუძლია უბრალოდ მოხსნას მენიუს "ნახვა" - "გვერდის დაწყება".

ადვილად დასაყენებელი

ჩვენ ვიღებთ API გასაღებებს Zadarma– ს პირადი ანგარიშიდან

და ჩადეთ ისინი 1C- ში

და რა თქმა უნდა, ჩვენ ვწერთ ანგარიშის შესვლას / პაროლს simplit.io– ზე.

ესე იგი, ახლა თქვენი 1C დაკავშირებულია ზადარმასთან.

მოუწოდებს დაწკაპუნებით 1C

სადაც არ უნდა ვნახოთ "ტელეფონის" ხატი, შეგვიძლია დავაწკაპუნოთ და ზადარმა დაიწყებს ნომრის აკრეფას.

მოთხოვნები "საკონტაქტო ინფორმაცია" არის დოკუმენტების, საცნობარო წიგნების მრავალ სიაში - თქვენ აღარ გჭირდებათ კლიენტის ბარათზე გაშვება ზარის შესასრულებლად. მაგალითად, შეგიძლიათ პირდაპირ დარეკოთ შეკვეთების, ინვოისების, სახარჯო მასალების სიიდან

კლიენტის ბარათი შემომავალი ზარისთვის

ფუნქცია, რომელიც ფაქტობრივად გახდა სტანდარტული და სავალდებულო 1C და PBX ინტეგრაციისას. მიუხედავად იმისა, რომ უნდა აღინიშნოს, რომ ის ყოველთვის არ არის მოთხოვნადი, ამიტომ მისი გამორთვა შესაძლებელია ტელეფონის პანელის პარამეტრებში.

ზარის რეგისტრაცია ღონისძიების დოკუმენტით

ანალოგიურად, თქვენ შეგიძლიათ აკონტროლოთ "ღონისძიება-სატელეფონო ზარის" დოკუმენტის ავტომატური შექმნის აუცილებლობა. ამ დოკუმენტის გამოყენებით მოსახერხებელია კომენტარის დატოვება ზარზე.

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

თქვენ შეგიძლიათ დაურთოთ შეხსენება სატელეფონო ზარის დოკუმენტს, რაც ძალიან მოსახერხებელია, თუ თანამშრომელი დაჰპირდება, რომ მოგვიანებით დაურეკავს კლიენტს.

PBX ზარების ისტორია

ზარების ისტორია, რა თქმა უნდა, ძალიან მნიშვნელოვანი რამაა. 1C და Zadarma ინტეგრაციის გაფართოება იძლევა ისტორიასთან მუშაობის რამდენიმე ვარიანტს.

მაგალითად, მომხმარებელს სურს თავად ნახოს ამბავი.მსგავსია ჩვენს მობილურ ტელეფონში ბოლოდროინდელი ზარების ჩამონათვალი. ამ ისტორიის ნახვა შესაძლებელია მთავარ გვერდზე ისტორიის ჩანართის გახსნით.

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

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

ავტორისგან:ამ სამეურვეოში ჩვენ გავეცნობით ფონის სურათის შექმნის მარტივ ტექნიკას, რომელიც სრულად გადაჭიმულია ბრაუზერის ხედის მთელ სიგანეზე. ამისათვის ჩვენ გვჭირდება ფონის ზომის CSS თვისება; JavaScript არ არის საჭირო.

მაგალითები საპასუხო მთლიანი ფონის სურათებისა

დღესდღეობით, საკმაოდ პოპულარული გახდა უზარმაზარი ფოტოს ფონად გამოყენება, რომელიც იკავებს მთელ ვებ გვერდს. აქ არის რამოდენიმე საიტის მაგალითები, რომლებსაც აქვთ მთელი ფონის საპასუხო სურათები:

თუ გსურთ მიაღწიოთ მსგავს შედეგს თქვენს მომავალ ვებ პროექტში, მაშინ ეს სტატია არის ის, რაც გჭირდებათ.

Ძირითადი პრინციპები

აქ არის ჩვენი სამოქმედო გეგმა.

გამოიყენეთ ფონის ზომის თვისება, რომ სრულად შეავსოთ ხედი

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

გამოიყენეთ მედია მოთხოვნა მობილური მოწყობილობებისთვის მცირე ფონის სურათების დასამუშავებლად

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

დემოში გამოყენებული სურათი არის 5500x3600 პიქსელი. ეს რეზოლუცია საკმარისია ბაზარზე არსებული კომპიუტერის ფართო ეკრანის უმეტესობისთვის. მაგრამ ამისათვის თქვენ უნდა დაამუშაოთ 1.7 მბ ფაილი.

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

Html

მარკირებისთვის, თქვენ გჭირდებათ მხოლოდ ეს:

ჩვენ ვაპირებთ მიანიჭოთ ფონის სურათი სხეულის ელემენტს ისე, რომ სურათი ყოველთვის ავსებს ბრაუზერის მთელ ხედს.

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

CSS

სხეულის ელემენტისთვის ჩვენ ვადგენთ შემდეგ სტილებს:

სხეული ( / * სურათის გზა * / ფონი-სურათი: url (სურათები / ფონი-ფოტო. jpg); / * ფონის სურათი ყოველთვის ორიენტირებულია ვერტიკალურად და ჰორიზონტალურად * / ფონი-პოზიცია: ცენტრის ცენტრი; / * ფონის სურათი არ მეორდება * / background-repeat: არა-გამეორება; / * ფონის სურათი ფიქსირდება ხედვის ფანჯარაში, ამიტომ არ იცვლება, როდესაც შინაარსის სიმაღლე აღემატება სურათის სიმაღლეს * / background-attachment: fixed; / * ეს არის ის, რაც საშუალებას იძლევა ფონის სურათი კონტეინერის ზომაზე მორგებისთვის * / ფონი-ზომა: ყდა; / * ადგენს ფონის ფერის ჩვენებას ფონის სურათის ჩატვირთვისას / / ფონის ფერი: # 464646;)

სხეული (

/ * გზა სურათისკენ * /

background - image: url (images / background - photo.jpg);

/ * ფონის სურათი ყოველთვის ორიენტირებულია ვერტიკალურად და ჰორიზონტალურად * /

/ * ფონის სურათი არ მეორდება * /

ფონი - გამეორება: არა - გამეორება;

/ * ფონის სურათი დაფიქსირებულია ხედის ფანჯარაში, ასე რომ, ის არ იცვლება, როდესაც შინაარსის სიმაღლე აღემატება სურათის სიმაღლეს * /

/ * ეს არის ის, რაც საშუალებას აძლევს ფონის სურათს შეცვალოს კონტეინერის ზომა * /

ფონი - ზომა: ყდა;

/ * ადგენს ფონის ფენის ჩვენებას ფონის სურათის ჩატვირთვისას / /

ფონი - ფერი: # 464646;

ყველაზე მნიშვნელოვანი თვისება / მნიშვნელობა წყვილი, რომელსაც უნდა მიაქციოთ ყურადღება:

ფონი-ზომა: ყდა;

ფონი - ზომა: ყდა;

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

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

სურათის ზომის გაზრდა მისი ორიგინალური ზომიდან გავლენას ახდენს გამოსახულების ხარისხზე. გაითვალისწინეთ ეს შესაფერისი სურათის არჩევისას. დემო იყენებს უზარმაზარ 5500x3600px ფოტოს ფართო ეკრანის მონიტორებისთვის, ასე რომ დასჭირდება ძალიან დიდი ეკრანი ხარისხის დამახინჯების მიზნით. მოდით გადავიდეთ. ფონის სურათის შესანარჩუნებლად ხედის ცენტრში, ჩვენ ვამატებთ:

ფონი-პოზიცია: ცენტრის ცენტრი;

ფონი - პოზიცია: ცენტრის ცენტრი;

ეს ჩანაწერი ათავსებს ფონს საკოორდინატო ღერძზე ხედის ცენტრის ცენტრში. შემდეგი, ჩვენ უნდა განვსაზღვროთ რა ხდება, როდესაც შინაარსის სიმაღლე აღემატება ხედვის ხილულ სიმაღლეს. როდესაც ეს მოხდება, გამოჩნდება გადახვევის ზოლი.

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

ფონური დანართი: ფიქსირებული;

ფონი - დანართი: ფიქსირებული;

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

სტენოგრამის CSS

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

კორპუსი (ფონი: url (background-photo.jpg) ცენტრის ცენტრალური საფარი განმეორებითი დაფიქსირებული;)

სხეული (

ფონი: url (ფონი - photo.jpg) ცენტრის ცენტრალური საფარი არა - გამეორება დაფიქსირდა;

ყველაფერი რაც თქვენ გჭირდებათ არის შეცვალოთ url მნიშვნელობა, რათა მიუთითოთ თქვენი ფონის სურათის გზაზე.

არასავალდებულო: მედია შეკითხვა მცირე ეკრანებისთვის

მცირე ეკრანებისთვის, მე ვიყენებ Photoshop– ს, რათა გავაფართოვო ორიგინალური ფონის სურათი პროპორციულად 768x505px, და ასევე გამოვიყენე Smush.it, რომ ზომა კიდევ უფრო შევამცირო. ამან შეამცირა ფაილის ზომა 1741KB– დან 114KB– მდე. იმ. სურათის ზომა შემცირდა 93%-ით.

გთხოვთ ნუ გამიგებთ, 114KB ჯერ კიდევ საკმაოდ ბევრია ესთეტიკური დიზაინის ელემენტისთვის. დამატებითი 114KB ოვერჰედის გათვალისწინებით, მე გამოვიყენებ ასეთ ფაილს მხოლოდ იმ შემთხვევაში, თუ ვნახავ შესაძლებლობას მნიშვნელოვნად გავაუმჯობესო მომხმარებლის გამოცდილება (UX). ამ დროისთვის ინტერნეტ ტრაფიკის მნიშვნელოვანი ნაწილი მოდის მობილური მოწყობილობების ფონზე - სურათი: url (სურათები / ფონი - ფოტო - მობილური - მოწყობილობები. jpg);

მედია მოთხოვნას აქვს მაქსიმალური სიგანე: 767 პიქსელის სიგანე, რაც ნიშნავს იმას, რომ თუ ბრაუზერის ხედი 767 პიქსელზე მეტია, დიდი ფონის სურათი იტვირთება.

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

გარდა ამისა, იმის გამო, რომ მცირე ზომის ეკრანის ზოგიერთ მოწყობილობას შეუძლია მეტი პიქსელის ჩვენება - მაგალითად, iPhone 5 ბადურის ჩვენებით შეუძლია აჩვენოს გარჩევადობა 1136x640px - მცირე ზომის ფონის პიქსელირება.

შეჯამება

თქვენ შეგიძლიათ ნახოთ წყაროს კოდის უფრო თანამედროვე ვერსია ამ გაკვეთილიდან GitHub– ზე. მე შემიძლია მხოლოდ ერთი რამ გაგაფრთხილოთ: გთხოვთ გამოიყენოთ ეს ტექნიკა სიფრთხილით, რადგან დიდმა ფაილებმა შეიძლება სერიოზულად დააზიანოს UX, განსაკუთრებით იმ შემთხვევაში, თუ საბოლოო მომხმარებელი იყენებს ნელ და არასაიმედო ინტერნეტ კავშირს. ეს არის კიდევ ერთი მიზეზი, რის გამოც უნდა აირჩიოთ ფონის შესაბამისი ფერი, რათა მომხმარებელმა შეძლოს შინაარსის წაკითხვა ფონის სურათის ჩატვირთვისას.

ვებსაიტების ფონზე დიდი ვიდეოები საკმაოდ პოპულარული ტენდენციაა ვებ დიზაინში. ჭკვიანურად გამოყენებულ ვიდეოებს შეუძლიათ ვებგვერდი უფრო დრამატული და მიმზიდველი გახადონ მომხმარებლებისთვის.

გარდა ამისა, ვიდეო ფონი შეიძლება შეუფერხებლად და "დამუხრუჭების" გარეშე ითამაშო, განსხვავებით JavaScript- ით შექმნილი ფონისგან, რომელიც მოითხოვს გარკვეული კოდისა და სურათების ჩატვირთვას, სანამ მომხმარებელი ნახავს ანიმაციის შედეგს.

არის კომპანიები, როგორიცაა Powerhouse ან Adidas, რომლებიც იყენებენ ვიდეოს ვებ – გვერდის ფონად, რათა მომხმარებელს მიაწოდონ კონკრეტული შეტყობინება ან ამბავი პროდუქტის ან მომსახურების შესახებ.

მიუხედავად იმისა, რომ ვიდეო ფონის შექმნის ყველაზე პოპულარული გზაა HTML5 გამოყენება ვიდეომონიშნეთ CSS– ის ზოგიერთ პარამეტრთან ერთად, ასევე ყურადღება უნდა მიაქციოთ ალტერნატიულ ვიდეო წყაროებს, მაგალითად, YouTube– ს. ამ შემთხვევაში, თქვენ არ უნდა ინერვიულოთ სერვერის ნელი პასუხის გამო, რადგან მოთხოვნა იგზავნება პირდაპირ YouTube- ზე.

ამ სტატიაში მე გაჩვენებთ, თუ როგორ შეგიძლიათ შექმნათ მაგარი ვებსაიტი, რომელიც იყენებს YouTube ვიდეოებს ფონად. ჩვენ ვიყენებთ jQuery.mb.YTPlayer.js– ს, რათა შეცვალოთ და გავაკონტროლოთ ჩვენი ვიდეოს სახე. მოდით დავიწყოთ!

ჩამოტვირთეთ წყაროები
დემო

თქვენ დაგჭირდებათ:

// დიდი ფონის შინაარსი აქ

// განყოფილების შინაარსის შესახებ აქ // მცირე ფონის განყოფილების შინაარსი აქ

ახლა თქვენ უნდა შეავსოთ თითოეული ნაწილი შინაარსით. დიდ ფონზე და მცირე ფონის განყოფილებაში მოათავსეთ კლასი ნიმუში,ჩვენს ვიდეოში მსუბუქი ტექსტურის შესაქმნელად. თქვენ ასევე უნდა დაამატოთ h1, h2, პუნქტი და ღილაკი.

YOUTUBE

ფონური ვიდეო

მინდა ვისწავლო ეს

განათავსეთ ნებისმიერი YouTube ვიდეო საიტის ფონზე

გაინტერესებთ როგორ დაამატოთ ვიდეო თქვენი ვებსაიტის ფონზე?
ეს ისეთივე ადვილია, როგორც მსხლის დაბომბვა! JQuery MB.YTPlayer, jQuery მოდულით, თქვენ შეგიძლიათ ჩაწეროთ ნებისმიერი YouTube ვიდეო თქვენი საიტის ფონზე.
თქვენ შეგიძლიათ მარტივად გადააქციოთ ნებისმიერი ვიდეო HTML ფონად. არ არის დაგვიანებული გვერდის დატვირთვა და სერვერის დატვირთვა!

ჩამოტვირთეთ მოდული ახლა

ჩვენ სოციალური ქსელებიდან ვართ

მე გამოვიყენე შრიფტი Font Awesome სოციალური ხატებისთვის, რომლებიც განლაგებულია განყოფილებაში მცირე ფონის განყოფილება... შემდეგ ჩვენ დავამატებთ შაბლონს ჩვენი ვიდეოსთვის მოდულის გამოყენებით jQuery.mb.YTPlayer. განათავსეთ შემდეგი კოდი დაუყოვნებლივ .

აი, რას ვიყენებდით ვიდეოს მორგებისთვის:

კლასი მოთამაშე- ამ კლასს იყენებს მოდული mb.YTP მოთამაშე
videoURL- ვიდეოს ბმული
შეკავება- CSS სელექტორი, რომელშიც ვიდეო უნდა დაკვრა
ავტომატური ჩართვა- ვიდეოს ავტომატური დაკვრა
მუნჯი- ხმის არსებობა
დაწყება- დრო, საიდანაც უნდა დაიწყოს ვიდეოს დაკვრა
გამჭვირვალეობა- ვიდეო გამჭვირვალობა

CSS

მოდით დავამატოთ სტილები ჩვენს საიტზე. უპირველეს ყოვლისა, მოდით განვსაზღვროთ html, კორპუსი, აბზაცების ტეგები და ტყვიის სია.

Html (სიმაღლე: 100%) სხეული (შრიფტი: 15px / 23px "Raleway", sans-serif; margin: 0; padding: 0; height: 100%; width: 100%; -webkit-font-smoothing: antialiased;- webkit-text-size-adjust: 100%) p (font-size: 20px; line-height: 140%; text-align: center) ul li (display: inline-block; list-style: none; padding-right : 10 პიქსელი;)

შეფუთვა (z- ინდექსი: 600; პოზიცია: ნათესავი). შაბლონი (ფონი-სურათი: url (../ images / pattern.png); ფონი-გამეორება: გამეორება; ფონი-დანართი: გადახვევა; სიგანე: 100%; სიმაღლე: 100%; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0). გამყოფი (ფონი-სურათი: url (../ images / divider.png); ჩვენება: ბლოკი; სიგანე: 300px; სიმაღლე: 35px; ზღვარი: 10px ავტო ) #colorize (ფერი: # f1c40f; font-family: "Lato", sans-serif; font-size: 40px)

დროა შევქმნათ სტილი დიდი ფონის განყოფილებაში. Დაინსტალირება z- ინდექსიჩართული 550 და პარამეტრი გადავსებადამალული. ეს არის იმისთვის, რომ თავიდან ავიცილოთ YouTube შინაარსი (სუბტიტრები, ანოტაციები) ჩვენს ვებგვერდზე. დანარჩენი სტილები საჭიროა სათაურებისთვის, ღილაკებისთვის და ნაგულისხმევი სურათისთვის (უფრო მოგვიანებით).

დიდი ფონი (z- ინდექსი: 550; ტექსტის გასწორება: ცენტრი; სიმაღლე: 100%; წთ-სიმაღლე: 100%; პოზიცია: ნათესავი; გადავსება: დამალული) .დიდი ფონი .დიდი ფონი-კონტეინერი (სიგანე: 830px ; max-width: 100%; ჩვენება: inline-block; პოზიცია: აბსოლუტური; ზედა: 50%; მარცხნივ: 50%; -webkit-transform: translate (-50%,-50%); -moz-transform: თარგმნა (-50%,-50%); -ms-transform: თარგმნა (-50%,-50%); -o-transform: თარგმნა (-50%,-50%); გარდაქმნა: თარგმნა (-50%, -50%)) .big-background-title (font-family: "Raleway", sans-serif; font-size: 78px; color: #fff; font-weight: 300; text-transform: uppercase; text-align : ცენტრი; ზღვარი-ქვედა: 22px; padding-top: 20px; ჩვენება: inline-block; ფონი-დანართი: გადახვევა; background-repeat: განმეორება-x; ფონი-პოზიცია: ზედა ცენტრი) a.big-background-btn ( font-family: "Lato", sans-serif; font-size: 13px; text-transform: დიდი; text-decoration: none; color: #fff; background: transparent; border: 2px solid #fff; padding: 10px 14px ; კურსორი: მაჩვენებელი; ასო-ინტერვალი: 2px; text-align: ცენტრი; ჩვენება: შიდა ბლოკი; -webkit- გადასვლა: .4s ფონზე მარტივია; -moz-გარდამავალი: .4s ფონზე მარტივია; -o-გარდამავალი: .4s ფონზე მარტივია; გარდამავალი: .4s ფონზე მარტივია; ) .big-background-btn: hover (ფერი: #fff; background: rgba (255,255,255,0.20)) .big-background-default-image (ფონი: url (../ images / sunset.jpg); ფონის გამეორება : არა-გამეორება; ფონი-პოზიცია: ცენტრის ცენტრი; ფონის ზომა: საფარი; სიგანე: 100%; სიმაღლე: 100%; z- ინდექსი: 0; უკანა ხილვადობა: დამალული)

ახლა მოდით გადავიდეთ განყოფილებაზე დაახლოებით განყოფილება... მოდით დავაკონფიგურიროთ პარამეტრი ფონის ფერითეთრამდე და ბალიში 60px ზედა და ქვედა და 20px მარცხნივ და მარჯვნივ.

განყოფილების შესახებ (შრიფტი-ოჯახი: "ლატო", sans-serif; ფერი: # 7f8c8d; ფონი: #fff; შევსება: 60px 20px). მონაკვეთის შესახებ კონტეინერი (ტექსტის გასწორება: ცენტრი; შევსება-ქვედა: 50px) . შესახებ სექცია-სათაური (font-family: "Raleway", sans-serif; font-size: 40px; background: #fff; color: # 3d566e; padding: 0 35px; margin-bottom: 22px; background-attachment: გადახვევა; ფონი-გამეორება: განმეორება-x; ფონი-პოზიცია: ცენტრის ცენტრი; ტექსტი-გარდაქმნა: დიდი) a.about-section-btn (font-family: "Lato", sans-serif; font-size: 13px; text -ტრანსფორმაცია: დიდი; ტექსტი-გაფორმება: არცერთი; ფერი: # 34495e; ფონი: გამჭვირვალე; საზღვარი: 2px მყარი # 34495e; შევსება: 10px 14px; კურსორი: მაჩვენებელი; ასო-ინტერვალი: 2px; ტექსტის გასწორება: ცენტრი; ჩვენება: inline-block; -webkit-გარდამავალი: .4s ფონური სიმარტივე; -moz-გარდამავალი: .4s ფონური განმუხტვა; (ფერი: #fff; ფონი: # 34495e;)

მცირე ფონის განყოფილებისთვის, რომელიც ასევე წარმოადგენს ქვედა კოლონტიტულობას, ჩვენ მივანიჭებთ სიგანეს 100% და პარამეტრს გადავსებადამალული. ჩვენ ასევე დავამატებთ ზოგიერთს ბალიშიზედა და ქვედა ისე, რომ ჩვენი ვიდეო ჩანს. დაბოლოს, მოდით დავამატოთ სტილი სოციალური მედიის ღილაკებისთვის.

მცირე ფონის განყოფილება (შრიფტი-ოჯახი: "Raleway", sans-serif; padding: 100px 0; position: relative; width: 100%; overflow: hidden). Small-background-container (position: relative; text-align : ცენტრი) .small-background-title (font-size: 40px; color: # f1c40f; font-weight: 300; z-index: 10; ჩვენება: inline-block; text-transform: uppercase; margin-bottom: 20px margin-top: 20px; პოზიცია: ნათესავი; background-attachment: scroll; background-repeat: repeat-x; background-position: top center). social a (ფერი: #fff). social a: hover (ფერი: # bdc3c7)

მედია შეკითხვები

იმისათვის, რომ ჩვენი საიტი იყოს საპასუხო, მოდით დავამატოთ მედიის შეკითხვები.

მედიის ეკრანი და (მაქსიმალური სიგანე: 768 პიქსელი) (. განყოფილების სათაური (ხაზის სიმაღლე: 1)) მედიის ეკრანი და (მაქსიმალური სიგანე: 480 პიქსელი). ) .small-background-title (line-height: 1) / *. player (ჩვენება: არცერთი;)-> თუ გსურთ ვიდეოს წაშლა bg სპეციალურ ხედზე w / o plugin * /) @მედიის ეკრანზე და ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen and (max-width: 320px) (.small-background-title (font-size: 30px))

jQuery

ახლა მოდით ჩართოთ ჩვენი YouTube ვიდეო. მოდით დავურეკოთ კლასს მოთამაშე jQuery კოდის შიგნით. განათავსეთ შემდეგი კოდი დახურვის ტეგამდე და ტეგების შიგნით .
$ (ფუნქცია () ($ (". მოთამაშე"). mb_YTPlayer ();));

უკანა ვარიანტი

YouTube– ის ფონური ვიდეოები არ ითამაშება მობილურ მოწყობილობებზე ან ტაბლეტებზე, რადგან YouTube წესები ამას არ იძლევა.

თუმცა, ჩვენ შეგვიძლია გამოვიყენოთ jQuery ნაგულისხმევი ფონის სურათის დასამატებლად იმ შემთხვევაში, თუ ბრაუზერი აღმოაჩენს, რომ მომხმარებელი შემოვიდა საიტზე მობილური მოწყობილობიდან.

ხელით გადაწყვეტა

იმის დასადგენად, რომ მომხმარებელი შესულია მობილური მოწყობილობიდან ან ტაბლეტიდან, ჩვენ შეგვიძლია ელემენტის დამალვა ეკრანის კონკრეტულ ზომაზე. მაგალითად, ჩვენ გვსურს ვიდეოს ფონის ამოღება 480px ფართო ეკრანებზე. თქვენ უბრალოდ უნდა დაამატოთ ჩვენება: არცერთი მოთამაშის ელემენტს:

მედიის ეკრანი და (მაქსიმალური სიგანე: 480 პიქსელი) (. მოთამაშე (ჩვენება: არცერთი;))

რაც შეეხება jQuery– ს, აქ ჩვენ დავაყენებთ ცვლადს არის_ მობილურიცრუ პარამეტრით. შემდეგ დარწმუნდით, რომ კლასი მოთამაშეაქვს ჩვენება: არანაირი პარამეტრი. თუ ასეა, მაშინ დაამატეთ კლასი big-background-default-imageგანყოფილებებამდე დიდი ფონიდა მცირე ფონის განყოფილებანაგულისხმევი ფონის სურათის გამოსაყენებლად. წინააღმდეგ შემთხვევაში, არაფერი შეიცვლება.

(ფუნქცია ($) ($ (დოკუმენტი). უკვე (ფუნქცია () (var is_mobile = false; if ($ (". player"). css ("ჩვენება") == "არცერთი") (is_mobile = true;) if (is_mobile == true) (// პირობითი სკრიპტი აქ $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) სხვა ($ (" მოთამაშე "). mb_YTPlayer ();))));)) (jQuery);

გამოსავალი jQuery მოდულით

ნაგულისხმევი სურათის დაყენების კიდევ ერთი გზა არის jQuery მოდული მოწყობილობა. js(http://matthewhudson.me/projects/device.js/). ეს გაამარტივებს მობილური მოწყობილობების ეკრანის სხვადასხვა ზომის პირობების აღწერის პროცესს. ამ მოდულის გამოყენებით, ჩვენ შეგვიძლია უბრალოდ დავწეროთ შემდეგი კოდი:

(ფუნქცია ($) ($ (დოკუმენტი). უკვე (ფუნქცია () (//Device.js შეამოწმებს ტაბლეტია თუ მობილური - http://matthewhudson.me/projects/device.js/ თუ (! მოწყობილობა ტაბლეტი () &&! მოწყობილობა. მობილური ()) ($ (". მოთამაშე"). mb_YTPlayer ();) სხვაგან (// jQuery დაამატებს ნაგულისხმევ ფონს სასურველ კლასში $ (". დიდი ფონი, .პატარა- background-section "). addClass (" big-background-default-image ");)));)) (jQuery);

აქ მე გამოვიყენე მეთოდები მოწყობილობა. მობილური ()და მოწყობილობა. მაგიდა ()მოწყობილობის შესამოწმებლად, საიდანაც მომხმარებელი შესულია. თუ პირობა დაკმაყოფილებულია, რომ კლასი დაემატება big-background-default-imageგანყოფილებაში დიდი ფონიდა მცირე ფონის განყოფილება... წინააღმდეგ შემთხვევაში კლასი მოთამაშეუცვლელი დარჩება და ვიდეო ითამაშებს.

ჩვენ დავალაგეთ

ვიდეო შესანიშნავი საშუალებაა თქვენი მესიჯის აუდიტორიისათვის გადასატანად. ეს შეიძლება იყოს ძლიერი ინსტრუმენტი თქვენი საიტისთვის, თუ სწორად იყენებთ.

დარწმუნებული ვარ, რომ ვებ დიზაინის განვითარება და გაუმჯობესება, იქნება უფრო და უფრო შემოქმედებითი იდეები ვებგვერდის დიზაინში ვიდეოს გამოყენებისათვის. ვიმედოვნებ, რომ თქვენ გაიგეთ ერთი ან ორი რამ ამ გაკვეთილში. დაწერეთ თქვენი აზრი და კომენტარები კომენტარებში.

მთარგმნელისგან.თარგმანთან დაკავშირებით ყველა სურვილისა და კომენტარის შემთხვევაში, გთხოვთ დამიკავშირდეთ პირადში. მადლობა!