Css გრადიენტის შევსება. ხაზოვანი გრადიენტი

გრადიენტი - შერჩეული ტერიტორიის შევსება ფერის ჩრდილების თანმიმდევრობით მათ შორის გლუვი გადასვლებით. გრადიენტი გამოიყენება გლუვი გადასვლის საჩვენებლად ორ ან მეტ ფერთა ჩრდილს შორის. გრადიენტის მაგალითი:

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

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

CSS3 განსაზღვრავს ორი ტიპის გრადიენტს:

• ხაზოვანი გრადიენტი(ხაზოვანი გრადიენტი) - გლუვი გადასვლა ფერიდან ფერზე სწორი ხაზით.
• რადიალური გრადიენტი(რადიალური გრადიენტი) - გლუვი გადასვლა ფერიდან ფერზე ერთი წერტილიდან ყველა მიმართულებით.

ხაზოვანი გრადიენტი

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

Linear-gradient() ფუნქცია იღებს შემდეგ მძიმით გამოყოფილ არგუმენტებს:

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

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

Div ( ფონის სურათი: ხაზოვანი გრადიენტი (შავი, თეთრი); სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი; ) სცადეთ »

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

გრადიენტური ხაზის მიმართულება შეიძლება განისაზღვროს ორი გზით:

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

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

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

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

Div ( ზღვარი: 10 პიქსელი; სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი; float: მარცხნივ; ) #ერთი (ფონი-სურათი: ხაზოვანი-გრადიენტი(მარცხნივ, შავი, წითელი); ) #ორი (ფონ-სურათი: ხაზოვანი-გრადიენტი( ზედა მარცხნივ, შავი, წითელი #სამი (ფონი-სურათი: ხაზოვანი-გრადიენტი (65 გრადუსი, შავი, ყვითელი); სცადეთ »

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

Div ( ზღვარი: 10 პიქსელი; სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი; ათწილადი: მარცხნივ; ) #ერთი (ფონი-სურათი: ხაზოვანი-გრადიენტი (მარჯვნივ, წითელი, ლურჯი, ყვითელი); ) #ორი (ფონ-სურათი: ხაზოვანი- გრადიენტი (ზემოდან მარცხნივ, ლურჯი, თეთრი, ლურჯი ) სცადეთ »

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

ფერის მნიშვნელობა შეიძლება განისაზღვროს სხვადასხვა გზით, მაგალითად, ფერის სახელის მითითებით, თექვსმეტობითი (HEX) მნიშვნელობებით, RGB (RGBA) ან HSL (HSLA) სინტაქსის გამოყენებით. მაგალითად, გამჭვირვალე გრადიენტის გამოყენება შეიძლება გამოყენებულ იქნას ფონის ფერთან ან სურათთან ერთად გრადიენტის ქვეშ, საინტერესო ვიზუალური ეფექტების შესაქმნელად:

Div ( ზღვარი: 10px; სიგანე: 300px; სიმაღლე: 100px; ფონის ფერი: მწვანე; ) #one (ფონი: ხაზოვანი-გრადიენტი(მარცხნივ, rgb(255,255,0), rgba(255,255,0,0)); ) #ორი (ფონი: წრფივი-გრადიენტი(rgb(255,255,255), rgba(255,255,255,0)); )

ბოლო განახლება: 04/21/2016

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

გრადიენტები CSS-ში არ წარმოადგენს რაიმე განსაკუთრებულ თვისებას. ისინი უბრალოდ ქმნიან მნიშვნელობას, რომელიც ენიჭება background-image თვისებას.

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

გრადიენტის შესაქმნელად თქვენ უნდა მიუთითოთ მისი დასაწყისი და რამდენიმე ფერი, მაგალითად:

ფონი-სურათი: ხაზოვანი-გრადიენტი(მარცხნივ,შავი,თეთრი);

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

გრადიენტების გამოყენებას ერთი ნაკლი აქვს - ბრაუზერების მრავალფეროვნება გაიძულებთ გამოიყენოთ გამყიდველის პრეფიქსი:

Webkit- /* Google Chrome-ისთვის, Safari-სთვის, Microsoft Edge-ისთვის, Opera 15 ვერსიის ზემოთ */ -moz- /* Mozilla Firefox-ისთვის */ -o- /* Opera 15-ის ზემოთ ვერსიისთვის (Opera 12) */

ასე რომ, გრადიენტის სრული გამოყენება ასე გამოიყურება:

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

ფონი-სურათი: ხაზოვანი-გრადიენტი (ქვედა, შავი, თეთრი);

თქვენ ასევე შეგიძლიათ დააყენოთ დიაგონალური მიმართულება ორი მნიშვნელობის გამოყენებით:

ფონი-სურათი: ხაზოვანი-გრადიენტი(ზედა მარცხენა,შავი,თეთრი);

გარდა კონკრეტული მნიშვნელობებისა, როგორიცაა ზედა ან მარცხნივ, ასევე შეგიძლიათ მიუთითოთ კუთხე 0-დან 360-მდე, რომელიც განსაზღვრავს გრადიენტის მიმართულებას:

ფონი-სურათი: ხაზოვანი-გრადიენტი (30 გრადუსი, შავი, თეთრი);

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

მაგალითად, 0 გრადუსი ნიშნავს, რომ გრადიენტი იწყება მარცხნიდან და მოძრაობს მარჯვნივ, ხოლო 45 გრადუსი ნიშნავს, რომ იწყება ქვედა მარცხნივ და მოძრაობს 45° კუთხით ზედა მარჯვნივ.

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

ფონი-სურათი: ხაზოვანი-გრადიენტი(ზედა, წითელი, #cccc, ლურჯი);

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

ფონი-სურათი: ხაზოვანი-გრადიენტი(მარცხნივ, #cccc, წითელი 20%, წითელი 80%, #cccc);

განმეორებითი გრადიენტი

განმეორებითი-წრფივი-გრადიენტის გამოყენებით შეგიძლიათ შექმნათ განმეორებადი წრფივი გრადიენტები. მაგალითად:

ფონი-სურათი: განმეორებითი-წრფივი-გრადიენტი(მარცხნივ, #cccc 20px, წითელი 30px, rgba(0, 0, 126, .5) 40px); background-image: -moz-repeating-linear-gradient(მარცხნივ, #cccc 20px, წითელი 30px, rgba(0, 0, 126, .5) 40px); background-image: -webkit-repeating-linear-gradient(მარცხნივ, #cccc 20px, წითელი 30px, rgba(0, 0, 126, .5) 40px);

ამ შემთხვევაში, გრადიენტი იწყება ელემენტის მარცხენა კიდეზე ნაცრისფერი ფერის ზოლით (#ccc) 20 პიქსელი სიგანით, შემდეგ 30 პიქსელამდე გადადის წითელზე და შემდეგ 40 პიქსელამდე ბრუნდება ღია ცისფერზე. (rgba(0, 0, 126, .5)). შემდეგ ბრაუზერი იმეორებს გრადიენტს, სანამ არ შეავსებს ელემენტის მთელ ზედაპირს.

• თარგმანი

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

გსურთ შექმნათ საყვარელი გრადიენტური ფონი თქვენს ვებსაიტზე? ფონი-სურათი: ხაზოვანი-გრადიენტი (წითელი, ლურჯი); მზადაა! დიახ, ცოტა მოსაწყენია. ასე რომ, თუ გსურთ რაიმე მეტი, გირჩევთ ამ გვერდს css და MDN რჩევებით. ისევ აქ ხარ? შემდეგ მოდით შევხედოთ რამდენიმე პუნქტს, თუ როგორ მუშაობს ხაზოვანი გრადიენტები. პირველ რიგში, გავიხსენოთ სინტაქსი, რომელიც შეიძლება გამოყენებულ იქნას ხაზოვანი გრადიენტის ფუნქციაში:

ხაზოვანი-გრადიენტი ([დან<угла>| რომ<стороны-или-угла>]?, );
ფუნქცია იღებს არჩევით პირველ არგუმენტს, რომელიც განსაზღვრავს გრადიენტის კუთხეს, რომელიც შეიძლება გამოიხატოს საზომი ერთეულის გამოყენებით (გრადუსი, რადიუსი, გრადუსი, რევოლუცია) ან როგორც საკვანძო სიტყვა (გვერდი ან კუთხე.

შემდეგ ფუნქცია იღებს ფერების სიას.

გრადიენტური ველი

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

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

თუმცა, თუ თქვენ ასევე იყენებთ ფონის ზომის CSS თვისებას და დააყენებთ მას, ვთქვათ, 200px * 200px, მაშინ გრადიენტის ველს ექნება ეს ზომა და, ნაგულისხმევად, განთავსდება DOM ელემენტის ზედა მარცხენა კუთხეში, თუ თქვენ ასევე დააყენეთ ფონის პოზიცია.

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

გრადიენტური ხაზი

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

გრადიენტური კუთხე

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

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

ეს კუთხე შეიძლება განისაზღვროს ორი გზით:

ერთ-ერთი საკვანძო სიტყვის გამოყენებით: ზემოდან (ზემოდან), ქვემოდან (ქვემოთ), მარცხნივ (მარცხნივ), მარჯვნივ (მარჯვნივ), ზემოდან მარჯვნივ (ზემოთ მარჯვნივ), ზემოდან მარცხნივ (ზემოთ მარცხნივ), ქვემოდან მარჯვნივ ( ქვემოთ მარჯვნივ), ქვედა მარცხნივ (ქვემოთ მარცხნივ);
ან კუთხის განსაზღვრით რიცხვით და საზომი ერთეულით, მაგალითად 45 გრადუსი (45 გრადუსი), 1 შემობრუნება (1 ბრუნი);

თუ კუთხე არ არის მითითებული, მაშინ ნაგულისხმევად ის მიმართულია ქვევით (ანუ არის 180 გრადუსი ან 0,5 ბრუნი):

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

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

და, როგორც ნაჩვენებია შემდეგ 2 სურათზე, ზევით შეესაბამება ნულოვანი გრადუსის კუთხეს:

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

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

ასე რომ, ზევით მარჯვნივ არ ნიშნავს, რომ გრადიენტური ხაზი გადის ზედა მარჯვენა კუთხეში და ეს არც კი ნიშნავს, რომ გრადიენტის კუთხე არის 45 გრადუსი!

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

ამ ანიმაციაში კუთხე იხრება 0-დან 360 გრადუსამდე 10-გრადუსიანი მატებით. GIF-ის დაბალი გარჩევადობა კი საშუალებას იძლევა უკეთ დაათვალიეროთ, თუ როგორ ჩნდება სხვადასხვა ფერები „ხაზებად“, რომლებიც ყოველთვის პერპენდიკულარულია გრადიენტური ხაზის მიმართ.

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

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

გრადიენტური ხაზის სიგრძე

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

შეხედე მაგალითს:

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

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

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

სინამდვილეში, თუ თქვენ მიუთითებთ გრადიენტური ველის W სიგანეს, H სიმაღლეს და გრადიენტის კუთხეს, მაშინ გრადიენტური ხაზის სიგრძეა:

Abs(W * sin(A)) + abs(H * cos(A))

ფერები

ფერები წარმოადგენს მძიმით გამოყოფილი სიას, რომელშიც თითოეული ელემენტი შეიძლება განისაზღვროს შემდეგნაირად:
<цвет> [<процентное соотношение> | <длина>]?

აქედან გამომდინარე, არ არის საჭირო იმის დაზუსტება, თუ სად უნდა განთავსდეს ფერები გრადიენტური ხაზის გასწვრივ. მაგალითად:

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

უმარტივეს მაგალითში მხოლოდ 2 ფერით, ფერი 1 განთავსდება 0% (გრადიენტული ხაზის დასაწყისში) და ფერი 2 განთავსდება 100% (გრადიენტული ხაზის ბოლოს).

შემდეგ, თუ დაამატებთ მესამე ფერს, კვლავ გექნებათ ფერი 1 0%-ზე, ფერი 2 50%-ზე და ფერი 3 100%-ზე და ა.შ.

ზემოთ მოყვანილ მაგალითში მოცემულია 5 გაჩერების ფერი და ბრაუზერმა გამოითვალა მათი შედარებითი პოზიცია, როგორც 0%, 25%, 50%, 75%, 100%. ამის მიზეზი არის გრადიენტური ველის გასწვრივ ერთგვაროვანი განაწილება.

ფერის პოზიცია შეიძლება გამოხატული იყოს პროცენტულად (გრადიენტული ხაზის ზომასთან შედარებით) ან CSS სიგრძის სახით (სადაც ნებისმიერი CSS ერთეული მოქმედებს).

აი მაგალითი:

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

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

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

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

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

მოდით შევხედოთ რამდენიმე მაგალითს:

ზემოთ მოყვანილ მაგალითში მხოლოდ მესამე ფერი (ყვითელი) არის განთავსებული 30%. ასე რომ, ყველა დანარჩენის უკეთ გასანაწილებლად, პირველი მოთავსებულია 0%-ზე, ბოლო 100%-ზე, ხოლო დანარჩენი ფერები ნაწილდება მათ შორის (ისე, რომ ნარინჯისფერი მთავრდება პირდაპირ 0%-დან 30%-მდე, ხოლო წითელი 30%-მდე და 100%).

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

რა თქმა უნდა, ძალიან მარტივი იქნებოდა, თუ 0% და 100% იყო ხისტი ლიმიტები, რომელთა გადაჭარბება შეუძლებელია. მაგრამ როგორც წინა მაგალითიდან ხედავთ, ბოლო ფერი მდებარეობს 120%-ზე და, შესაბამისად, ყველა სხვა ფერი უნდა გადანაწილდეს შესაბამისად ამ პოზიციის მიმართ (ნაგულისხმევი საწყისი წერტილი ამ შემთხვევაში რჩება 0%).

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

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

დავიწყოთ პირველი ფერით (წითელი), რომელიც მდებარეობს 30%. შემდეგ მეორე ფერი განლაგებულია 10%-ზე, რაც უკვე არასწორია, ვინაიდან, როგორც ზემოთ აღინიშნა, ფერები აღმავალ მდგომარეობაში უნდა იყოს მითითებული. ასე რომ, აქ ბრაუზერი ასწორებს მეორე ფერის პოზიციას და აყენებს მას იმავე პოზიციაზე, როგორც წინა ფერი (30%). შემდეგი მოდის მესამე ფერი (ყვითელი) 60%, რაც სწორია, მაგრამ მას მოსდევს მეოთხე (ლურჯი) 40%. კვლავ რეგულირდება პოზიცია და დაყენებულია იმავე მნიშვნელობაზე, როგორც წინა პოზიციონირებული ფერი.

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

ხელსაწყოები

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

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

ტეგები:

• CSS
• ხაზოვანი-გრადიენტი

ტეგების დამატება

ა! გრადიენტი შესანიშნავი საშუალებაა ფერების მანიპულირებისთვის CSS3. იმის ნაცვლად, რომ გამოიყენოთ სურათი ვებ გვერდზე გრადიენტური ეფექტის შესაქმნელად, უფრო მომგებიანი იქნება. CSS3 გრადიენტიდა ამით „გაანათეთ“ საიტი. ვინაიდან მომხმარებელს არ დასჭირდება დროისა და ტრაფიკის დაკარგვა ფონის სურათის ჩატვირთვაზე. გრადიენტის ორი ძირითადი ტიპი არსებობს: რადიალური და ხაზოვანი. დღევანდელი პოსტი მათ შესახებ იქნება.

ხაზოვანი გრადიენტი

როგორც კლასიფიკაცია ამბობს, გრადიენტები CSS3-შიარის სურათები. მათთვის განსაკუთრებული თვისებები არ არსებობს. და რეკლამა იყენებს ფონის სურათის თვისებას.

ზოგადად, გრადიენტური (წრფივი) სინტაქსი ასე გამოიყურება:

1 2 3 4 5 6 7

div( background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); ფონის სურათი: -o-წრფივი-გრადიენტი(ზედა, #FF5A00 0%, #FFAE00 100%); }

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

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

თუ კუთხე უარყოფითია, პოზიცია შეიცვლება ქვედა მარცხენა კუთხიდან ზედა მარცხენაზე.

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

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

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

რადიალური გრადიენტი, ისევე როგორც წრფივი, გამოცხადებულია ფუნქციად, მხოლოდ radial-gradient(). ასევე არსებობს ძირითადი მნიშვნელობები: ეს არის რადიალური გრადიენტის ფორმა (წრე - წრე ან ელიფსი - ელიფსი), საწყისი და საბოლოო ფერი. სინტაქსი ასეთია:

div( ფონი: რადიალური გრადიენტი (წრე, #F9E497, #FFAE00); }

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

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

ბრძანების კომბინაციები:

• ცენტრი ზევით - ზევით - 50% 0%;
• ზედა მარცხენა კუთხეში - მარცხენა ზედა - 0% 0%;
• ზედა მარჯვენა კუთხეში - მარჯვენა ზედა - 100% 0%;
• ცენტრში - ცენტრში - 50% 50%;
• მარცხენა ცენტრი - მარცხენა ცენტრი - 0% 50%;
• მარჯვენა ცენტრი - მარჯვენა ცენტრი - 100% 50%;
• ქვედა ცენტრი - ქვედა - 50% 100%;
• ქვედა მარცხენა კუთხეში - მარცხენა ქვედა - 0% 100%;
• ქვედა მარჯვენა კუთხეში - მარჯვენა ქვედა - 100% 100%.

აი მაგალითი პროცენტებით:

div( ფონის სურათი: რადიალური გრადიენტი (70% 20%, წრე, #F9E497, #FFAE00); }

პირველი ღერძის მნიშვნელობა Xმეორეში უ.

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

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

div( ფონის სურათი: რადიალური გრადიენტი (230px 50px, ელიფსის უახლოესი მხარე, თეთრი, ლურჯი); }

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

ახლა კი შორეულ მხარეებზე:

div( ფონის სურათი: რადიალური გრადიენტი (230px 50px, ელიფსი ყველაზე შორს, თეთრი, ლურჯი); }

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

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

div( background-image: linear-gradient(top, rgba (255, 90, 0, 0.2), rgba (255, 174, 0, 0.2)); }

ალფა არხი, ბოლო და 0.2-ის ტოლი, მიუთითებს, რომ 100% ფერის მხოლოდ 20% გამოიყენება.

ორივე ტიპში CSS3 გრადიენტიშეგიძლიათ გამოიყენოთ არა ორი, არამედ რამდენიმე ფერი.

div( ფონის სურათი: ხაზოვანი-გრადიენტი (ზედა, წითელი, ნარინჯისფერი, ყვითელი, მწვანე, ლურჯი, ინდიგო, იისფერი); }

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

div( background-image: განმეორებადი-რადიალური-გრადიენტი (წითელი, ლურჯი 20px, წითელი 40px); }

0% , #FFAE00 100%) ;
/* Firefox-ისთვის */
background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);
/* IE 10+-ისთვის */ ფონის სურათი: -o-წრფივი-გრადიენტი(ზედა, #FF5A00 0%, #FFAE00 100%);
}

div(
/* ოპერისთვის */
}

background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);

/* სტანდარტული სინტაქსი */

filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00, endColorstr= #33FFAE00);

სადაც ჰეშის შემდეგ 33 არის ფერის გაჯერების პროცენტი.

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

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

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

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

ხაზოვანი-გრადიენტი

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

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

მიმართულება შეიძლება განისაზღვროს გრადუსით ან საკვანძო სიტყვებით.

საკვანძო სიტყვები:

ზევით = 0 გრადუსი;

მარჯვნივ = ​​90 გრადუსი;

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

განსხვავება აშკარად ჩანს მართკუთხა ფიგურებში:

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

მნიშვნელობების დაყენების მაგალითები, em-ში და მნიშვნელობები, რომლებიც სცილდება ელემენტის საზღვრებს:

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

ასე შეგიძლიათ შექმნათ, მაგალითად, ფონი გვერდითი სვეტისთვის, რომელიც გადაჭიმულია მშობელი ელემენტის მთელ სიმაღლეზე:

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

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

თუ არ არსებობს შეზღუდვები, კოდი შეიძლება იყოს ბევრად უფრო მოკლე:

სინათლე ( ფონი: ატმის პუფის ხაზოვანი გრადიენტი (90 გრადუსი, რგბა (255, 255, 255, 0) 50%, რგბა (255, 255, 255, .4) 50%) ცენტრი ცენტრი / 2 მმ; . მუქი ( ფონი: ფოლადის ლურჯი წრფივი-გრადიენტი(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) ცენტრი ცენტრი / 100% 1em )

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

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

ასევე მნიშვნელოვანია იცოდეთ, რომ გამჭვირვალე საკვანძო სიტყვა ნიშნავს გამჭვირვალე შავს და არა გამჭვირვალე თეთრს, ასე რომ, თუ მას იყენებთ Firefox-ში, შეიძლება დასრულდეს მსგავსი რამ:

ამის თავიდან ასაცილებლად გამოიყენეთ სასურველი ჩრდილის სრულიად გამჭვირვალე ფერები, მაგალითად, თეთრი: rgba(255, 255, 255, 0) ან შავი rgba(0, 0, 0, 0). შეგიძლიათ წაიკითხოთ ფერების დაყენების სხვადასხვა გზების შესახებ.

კონკრეტული ფერის rgb აღნიშვნის გასარკვევად, შეგიძლიათ გამოიყენოთ CSS.coloratum, ინსტრუმენტი ლეა ვერუდან.

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

კოდის ნიმუში:

ფონი: განმეორებადი-წრფივი-გრადიენტი (მწვანე, მწვანე .5em, გამჭვირვალე .5em, გამჭვირვალე 1em);

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

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

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

არსებობს ძალიან მოსახერხებელი ინსტრუმენტი ბრაუზერის გრადიენტების სწრაფად შესაქმნელად: colorzilla.com/gradient-editor/. თანამედროვე ბრაუზერებისთვის კოდის გარდა, ის შემოგთავაზებთ კოდს ძველი IE და SVG მე-9-ისთვის.

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