04 01
შექმნა Cross-Browser ხაზოვანი Gradients ერთად CSS3
ხაზოვანი გრადიენტები
ყველაზე გავრცელებული ტიპის გრადიენტი დაინახავთ არის ორი ფერის ხაზოვანი გრადიენტი. ეს იმას ნიშნავს, რომ გრადიენტი გადავა სწორი ხაზით თანმიმდევრობით თანმიმდევრულად პირველი ფერიდან მეორეზე ამ ხაზის გასწვრივ. ამ გვერდზე გამოსახულია მარტივი # 999 (მუქი ნაცრისფერი) #ff (თეთრი).
ხაზოვანი gradients არის მარტივი განსაზღვრა, და აქვს ყველაზე მხარდაჭერა ბრაუზერები. CSS3 ხაზოვანი gradients მხარდაჭერილია Android 2.3+, Chrome 1+, Firefox 3.6 +, Opera 11.1 + და Safari 4 +. Internet Explorer შეგიძლიათ დაამატოთ gradients გამოყენებით ფილტრი და მხარს უჭერს მათ უკან IE 5.5. ეს არ არის CSS3, მაგრამ ეს ვარიანტი არის ჯვარედინი ბრაუზერის თავსებადობა.
გრადიენტის განსაზღვრისას საჭიროა რამდენიმე სხვადასხვა რამის განსაზღვრა:
- რა ტიპის გრადიენტია ეს არის ხაზოვანი ან რადიალური
- სადაც გრადიენტი უნდა დაიწყოს
- სადაც გრადიენტი უნდა შეწყდეს
- რა ფერები გრადიენტშია და სად უნდა დაიწყონ და შეწყვიტონ
განსაზღვროთ ხაზოვანი gradients გამოყენებით CSS3, წერთ:
ხაზოვანი გრადიენტი ( კუთხე ან გვერდითი ან კუთხე , ფერის გაჩერება , ფერის გაჩერება )
- პირველი თქვენ განსაზღვრავს ტიპის გრადიენტი ერთად სახელი ხაზოვანი - გრადიენტი.
- შემდეგ, თქვენ განსაზღვრავს გრადიენტის დაწყების და შეწყვეტის წერტილებს ორი მიმართულებით: ხაზის კუთხე გრადუსი 0-დან 359-მდე, 0 გრადუსით. ან "მხარეს ან კუთხეში" ფუნქცია, როგორიცაა მარცხენა, მარჯვენა, ქვედა და ზედა. ეს განისაზღვრება უფრო დეტალურად მომდევნო გვერდზე. თუ თქვენ დატოვებთ ამას, გრადიენტი მიედინება ზედა ნაწილში ელემენტის ბოლოში.
- შემდეგ განსაზღვრავს ფერი შეწყვეტს. თქვენ განსაზღვრავს ფერი შეწყვეტს ფერი კოდი და სურვილისამებრ პროცენტული. პროცენტული მოგვითხრობს ბრაუზერი, სადაც ხაზი უნდა დაიწყოს ან დასრულდეს ეს ფერი. ნაგულისხმევი არის ხაზების გასწვრივ თანაბრად მოთავსება. თქვენ გაიგებთ უფრო მეტ ფურცლებს გვერდზე 3-ში.
ასე რომ, განვსაზღვროთ ზემოთ გრადიენტი CSS3, წერთ:
ხაზოვანი გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%);
და შექმნას იგი როგორც ფონზე DIV თქვენ წერთ:
div {
background-image: ხაზოვანი გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%;
}
ბრაუზერის გაფართოებები CSS3 Linear Gradients- ისთვის
თქვენი გრადიენტის მუშაობისთვის ჯვარედინი ბრაუზერის მუშაობისთვის საჭიროა ბრაუზერის გაფართოებები ყველაზე ბრაუზერებისთვის და ფილტრი Internet Explorer 9 -ისთვის და ქვედა (ფაქტობრივად 2 ფილტრები). ყველა ეს მიიღებს იმავე ელემენტებს, რათა განისაზღვროს თქვენი გრადიენტი (გარდა იმისა, რომ თქვენ შეგიძლიათ მხოლოდ განსაზღვროთ 2 ფერის გრადიენტი IE- ში).
Microsoft ფილტრები და გაფართოება - Internet Explorer არის ყველაზე რთული მხარდაჭერა, რადგან თქვენ გჭირდებათ სამი განსხვავებული ხაზი, რათა მხარი დაუჭიროს სხვადასხვა ბრაუზერის ვერსიებს. იმისათვის, რომ ზემოთ ნაცრისფერი თეთრი გრადიენტამდე დაიწერო,
/ * IE 5.5-7 * /
ფილტრი: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-მცოდნე-გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%);
Mozilla Extension -Moz- გაფართოება მუშაობს, როგორიცაა CSS3 ქონება, მხოლოდ -moz- გაფართოება. იმისათვის, რომ მიიღოთ ზემოთ გრადიენტი Firefox- ზე, დაწერე:
-მჟავა-ხაზოვანი გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%);
ოპერის გაფართოება - The -o- გაფართოება დაამატებს gradients ოპერის 11.1 +. აღნიშნული გრადიენტის მისაღებად დაწერე:
-ო-ხაზოვანი გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%);
Webkit Extension -Webkit- გაგრძელების მუშაობს ბევრი მოსწონს CSS3 ქონება. Safari 5.1+ ან Chrome 10 + -ის ზემოთ გრადიენტის განსაზღვრისათვის თქვენ წერენ:
-ვებბით-ხაზოვანი გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%);
ასევე არსებობს ვებკარტის გაფართოების ძველი ვერსია, რომელიც მუშაობს Chrome 2+ და Safari 4+. მასში თქვენ განსაზღვრავს გრადიენტის ტიპის ღირებულებას, ვიდრე საკუთრების სახით. ამ გაფართოებით ნაცრისფერი თეთრი გრადიენტის მისაღებად დაწერე:
-ვებრი-გრადიენტი (ხაზოვანი, მარცხენა ზედა, მარჯვენა ზედა, ფერადი შეჩერება (0%, # 999999), ფერადი შეჩერება (100%, # ffffff);
სრული CSS3 Linear Gradient CSS კოდი
სრული ჯვარედინი ბრაუზერი მხარდაჭერის მისაღებად რუხი თეთრი გრადიენტი ზემოთ თქვენ უნდა შეიცავდეს fallback მყარი ფერის ბრაუზერები, რომლებიც არ მხარს ვუჭერთ gradients, და ბოლო პუნქტის უნდა იყოს CSS3 სტილი ბრაუზერები, რომლებიც სრულად შეესაბამება. ასე რომ, წერთ:
ფონზე: # 999999;
ფონზე: -მოუსტის-ხაზოვანი გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%);
ფონზე: -ვებბით-გრადიენტი (ხაზოვანი, მარცხნივ ზედა, მარჯვენა ზედა, ფერადი შეჩერება (0%, # 999999), ფერადი შეჩერება (100%, # ffffff);
ფონზე: -ვებბით-ხაზოვანი გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%);
ფონის: -ო-ხაზოვანი გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%);
ფონზე: -მესამე ხაზოვანი გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%);
ფილტრი: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
ფონის: ხაზოვანი გრადიენტი (მარცხნივ, # 999999 0%, #ffffff 100%);
მომდევნო გვერდებზე ამ tutorial ახსნა ნაწილების გრადიენტი უფრო დეტალურად, და ბოლო გვერდზე მიუთითებს თქვენ ინსტრუმენტი, რომელიც არის შესანიშნავი გზა შექმნა CSS3 gradients ავტომატურად.
იხილეთ ეს წრფივი გრადიენტი მოქმედებაში მხოლოდ CSS- ის გამოყენებით.
04 04
დიაგონალური გრადიენტების შექმნა - გრადიენტის კუთხე
დაწყების და გაჩერების წერტილები განსაზღვრავს გრადიენტის კუთხეს. ყველაზე წრფივი gradients არიან ზემოდან ქვევით ან მარცხნივ. მაგრამ შესაძლებელია ააშენოს გრადიენტი, რომელიც მოძრაობს დიაგონალურ ხაზზე. გამოსახულება ამ გვერდზე გვიჩვენებს მარტივი გრადიენტი, რომელიც მოძრაობს 45 დგას კუთხეს გამოსახულების გასწვრივ მარცხნიდან მარჯვნივ.
კუთხეების განსაზღვრა გრადიენტური ხაზი
კუთხე არის ელემენტის ცენტრში წარმოსახვითი წრის ხაზი. 0deg ქულა up, 90deg ქულა უფლება, 180deg რაოდენობა ქვემოთ, და 270deg ქულა მარცხნივ. შეგიძლიათ ნებისმიერი კუთხის განსაზღვრა 0-დან 359 გრადუსამდე.
უნდა აღინიშნოს, რომ კვადრატში 45 გრადუსიანი კუთხე ზედა მარცხენა კუთხეში მიდის ქვედა მარჯვენა კუთხეში, მაგრამ მართკუთხედის დაწყებიდან და დასასრული წერტილები ოდნავ გარეგნულია, როგორც სურათში.
დიაგონალური გრადიენტის განსაზღვრის უფრო გავრცელებული გზა არის კუთხის განსაზღვრა, როგორიცაა ზედა მარჯვენა და გრადიენტი გადადის ამ კუთხეში, საპირისპირო კუთხეში. თქვენ შეგიძლიათ განსაზღვროთ შემდეგი პოსტი შემდეგი სიტყვებით:
- დაბრუნება
- უფლება
- ქვედა
- მარცხენა
- ცენტრი
და ისინი შეიძლება უფრო კომბინირებული იყოს უფრო კონკრეტული, როგორიცაა:
- ზედა მარჯვენა
- ზედა მარცხენა
- დაბრუნება ცენტრი
- ქვედა მარჯვენა
- ქვედა მარცხენა
- ქვედა ცენტრი
- მარჯვენა ცენტრი
- მარცხენა ცენტრი
აქ არის CSS for გრადიენტი მსგავსი სურათები, წითელი თეთრი მოძრავი ზემოდან მარჯვენა კუთხეში ბოლოში მარცხენა:
ფონზე: ## 901A1C;
background-image: -moz-linear-gradient (მარჯვენა ზედა, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (ხაზოვანი, მარჯვენა ზედა, მარცხენა ქვედა, ფერადი შეჩერება (0, # 901A1C), ფერადი გაჩერება (1, #FFFFFF));
ფონზე: -ვებბით-ხაზოვანი გრადიენტი (მარჯვენა ზედა, # 901A1C 0%, #ffffff 100%);
ფონზე: -ო-ხაზოვანი გრადიენტი (მარჯვენა ზედა, # 901A1C 0%, #ffffff 100%);
ფონზე: -მესამე ხაზოვანი გრადიენტი (მარჯვენა ზედა, # 901A1C 0%, #ffffff 100%);
ფონის: ხაზოვანი გრადიენტი (მარჯვენა ზედა, # 901A1C 0%, #ffffff 100%);
თქვენ შეიძლება შენიშნა, რომ არ არსებობს IE ფილტრები ამ მაგალითში. ეს იმიტომ, რომ IE მხოლოდ საშუალებას იძლევა ორი ტიპის ფილტრები: ზედა და ქვედა (default) და მარცხნივ მარჯვნივ (GradientType = 1 შეცვლა).
იხილეთ ამ დიაგონალური ხაზოვანი გრადიენტი მოქმედებაში მხოლოდ CSS- ის გამოყენებით.
04 04
ფერი შეწყვეტს
ერთად CSS3 ხაზოვანი gradients, შეგიძლიათ დაამატოთ მრავალი ფერები თქვენი გრადიენტი შექმნას კი fancier ეფექტი. ეს ფერები რომ დაამატოთ, თქვენ დამატებით ფერს დაამატებთ თქვენი ქონების ბოლოს, გამოყოფილია მძიმით. თქვენ უნდა შეიცავდეთ ხაზს, სადაც ფერები უნდა დაიწყოს ან დასრულდეს.
Internet Explorer ფილტრები მხოლოდ ორი ფერის გაჩერების მხარდაჭერას იძლევა, ასე რომ, როდესაც ამ გრადიენტის აშენებას აპირებთ, თქვენ უნდა შეიტანოთ მხოლოდ პირველი და მეორე ფერები, რომლითაც გსურთ.
აქ არის 3-ფერიანი გრადიენტის CSS:
ფონზე: #ffffff;
background: -moz-linear-gradient (მარცხნივ, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
ფონის: ხაზოვანი, მარცხენა ზედა, მარჯვენა ზედა, ფერის გაჩერება (0%, # ffffff), ფერადი შეჩერება (51%, # 901A1C), ფერადი შეჩერება (100%, # ffffff);
ფონზე: -ვებბით-ხაზოვანი გრადიენტი (მარცხნივ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ფონზე: -ო-ხაზოვანი გრადიენტი (მარცხნივ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ფონზე: -მესამე ხაზოვანი გრადიენტი (მარცხნივ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ფილტრი: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
ფონის: ხაზოვანი გრადიენტი (მარცხნივ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
იხილეთ ამ ხაზოვანი გრადიენტი სამი ფერი გაჩერება მოქმედების გამოყენებით მხოლოდ CSS.
04 04
ჩადება შენობა Gradients ადვილია
არსებობს ორი უბანი ვურჩევ გისურვებთ, რომ თითოეულ მათგანს აქვს სარგებელი და ნაკლოვანებები, მე ვერ ვნახე გრადიენტი მშენებელი, რომელიც ყველაფერს აკეთებს.
საბოლოო CSS Gradient გენერატორი
ეს გრადიენტი გენერატორი ძალიან პოპულარულია, რადგან იგი ასრულებს მსგავსი ფორმით გრადიენტი მშენებლების პროგრამებში, როგორიცაა Photoshop. მე ასევე მომწონს, რადგან ეს გაძლევთ ყველა CSS გაფართოებებს, არა მხოლოდ Webkit და Mozilla. პრობლემა ამ გენერატორთან არის ის, რომ ის მხოლოდ მხარს უჭერს ჰორიზონტალურ და ვერტიკალურ gradients. თუ დიაგონალური გრადიენტების გაკეთება გინდა, სხვა გენერატორს მივუგზავნო.
CSS3 Gradient გენერატორი
ეს გენერატორი მე ცოტა ხნის წინ მე მესმის, ვიდრე პირველი, მაგრამ ეს ხელს უწყობს შეცვლის მიმართულებით დიაგონალური.
თუ იცით კიდევ ერთი CSS Gradient გენერატორი, რომ მოგწონთ ეს უკეთესია, გთხოვთ მოგვწეროთ .