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

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

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

1. მომზადება და კონტეინერი

იმისათვის, რომ შევქმნათ გრადიენტური ფონი CSS-ის გამოყენებით, ჩვენ დაგვჭირდება DIV ელემენტების რამდენიმე ბურთის გადაფარვა შავ ფერში. პირველ რიგში, გადადით CSS3 ვარიანტზე, რომ იმუშაოთ 2D ტრანსფორმაციასთან და ხაზოვან-გრადიენტთან, ბლოკების ზომისა და განლაგების მითითებით. მოდით გავხსნათ ახალი CSS სტილის ფაილი და ვნახოთ შემდეგი კოდი:

* (ზღვარი: 0; შიგთავსი: 0; საზღვარი: 0;) ტექსტი (ფონი: # 000;)

* ( ზღვარი: 0; შიგთავსი: 0; საზღვარი: 0; ) ტექსტი (ფონი: #000; )

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

HTML ფაილში ჩვენ ვწერთ კოდს:

მთავარი ბლოკი (ფონი: არცერთი; ზღვარი: 250 პიქსელი ავტო; სიგანე: 1800 პიქსელი; სიმაღლე: 700 პიქსელი)

2. შარი

ჩვენს გრადიენტურ ბურთებს ეწოდება "mylayer". როგორც კი შექმნით ერთ ასეთ ელემენტს, რობოტს არ სჭირდება დასაკეცი ხელსაწყოები (პროცესი აბსოლუტურად იდენტურია). ეს ყველაფერი იწყება გადახრის მეთოდით, მანამ, სანამ არ გამოიყენებთ 2D ტრანსფორმაციას და თავად გადახრის მეთოდს. ამის გაკეთება შეგიძლიათ X ღერძის მოხრით. კონდახში არსებული ყველა ბურთი მოძრაობს 45 გრადუსით მარცხნივ ან მარჯვნივ. HTML ამატებს:

დარჩენილი ტექსტური ბლოკი unstacked კოდისთვის. CSS სტილები შემდეგია:

.mylayer1 (სიგანე: 550px; სიმაღლე: 600px; float: მარცხნივ; ზღვარი: -15% 0% 0 10%; ტრანსფორმაცია: skew (45deg, 0deg) ;) .mylayer2 (0:0 ფუტი; 2% 0: ზღვარი: 0% 10% ; ტრანსფორმაცია: დახრილი (45 გრადუსი, 0 გრადუსი); .mylayer3 (სიგანე: 270 პიქსელი; სიმაღლე: 450 პიქსელი; ზღვარი: -22% 0% 0% -10%; ტრანსფორმაცია: დახრილი (-4 გრადუსი)

Mylayer1 ( სიგანე: 550px; სიმაღლე: 600px; float: მარცხნივ; ზღვარი: -15% 0% 0 10%; ტრანსფორმაცია: skew(45deg, 0deg); ) .mylayer2 ( სიგანე: 400px; სიმაღლე: 600 ზღვარი: 2% 0 % 0% 10%; ტრანსფორმაცია: skew(45deg, 0deg); ) .mylayer3 ( სიგანე: 270px; სიმაღლე: 450px; skew(-45deg, 0deg); .mylayer4 ( სიგანე: 350px; სიმაღლე: 300px; float: მარცხნივ ზღვარი: -22% 0% 0% -10%;

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

3. გრადიენტი ფონისთვის

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

.mylayer1 (ფონი: ხაზოვანი-გრადიენტი(ქვემოდან, rgba (229, 243, 12, 0) , rgba (243, 61, 12, 0.4) , rgba (12, 99, 243, ხაზოვანი-0) ფონი ქვემოთ , rgba (30 , 60 , 55 , 0.2 ) , rgba (75 , 40 , 125 , 0.5 ) , rgba (60 , 20 , 80 , 0.6 ) , 0 ) ); , rgba (0, 0, 0, 0), rgba (255, 255, 255, 0.3), rgba (255, 25)).

Mylayer1 (ფონი: ხაზოვანი-გრადიენტი(ქვემოდან, rgba(229,243,12,0), rgba(243,61,12,0.4), rgba(12,99,243,0))); ) .mylayer2 (ფონი: ხაზოვანი-გრადიენტი (ქვემოდან, rgba(30,60,55,0.2), rgba(75,40,125,0.5), rgba(60,20,80,0.6),rgba(0,0, 0,0)); .mylayer3 (ფონი: ხაზოვანი-გრადიენტი(ზევით, rgba(0,0,0,0), rgba(255,255,255,0.3), rgba(255,255,255,0.8))); ) .mylayer4 (ფონი: ხაზოვანი-გრადიენტი(ქვემოდან, rgba (0,0,0,0), rgba(35,25,65,0.5), rgba(140,60,130,0.9));

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

4. ფონის სურათი

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

body (ფონი: url (http://my_site/img/dots9.png) გაიმეორეთ ფიქსირებული ცენტრი, #000;)

body ( ფონი: url(http://my_site/img/dots9.png) გაიმეორეთ ფიქსირებული ცენტრი, #000; )

5. ერთად

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

ცრურწმენის ტრანსფორმირება CSS-ში

ეს მხოლოდ რამდენიმე სიტყვაა CSS ტრანსფორმაციის skew ფუნქციის შესახებ, რომელსაც ჩვენ წარსულში ვიკორიზირებდით. როგორც უკვე გესმით, არსებობს 2D ტრანსფორმაცია DIV ბლოკით, რაც მას ცვლის X და/ან Y ღერძის მიმართულებას. ამ მეთოდის 3 ვარიანტი არსებობს:

• skewX() - X ღერძის რეგულირება;
• skewY() - რეგულირება Y ღერძის გასწვრივ;
• skew() - X და Y მნიშვნელობები დაყენებულია მყისიერად.

დანარჩენ შემთხვევაში skew თქვენ უნდა მიუთითოთ 2 მნიშვნელობა (X და Y), მაგალითად ასე:

div (-ms-transform: skew (45deg, 5deg); /* IE 9-ისთვის */ -webkit-transform: skew (45deg, 5deg); /* Safari-სთვის */ transform: skew (45deg, 5deg);)

div (-ms-transform: skew(45deg, 5deg); /* IE 9-ისთვის */ -webkit-transform: skew(45deg, 5deg); /* Safari-სთვის */ ტრანსფორმაცია: skew(45deg, 5deg); )

საუბრის წინ, ასეთი ჩანაწერი გამოიყენება IE 9-ში და Safari-ში კოდის სწორი მუშაობისთვის. თუ skew ფუნქციის არჩევისას სხვა პარამეტრი გამოტოვებულია, ის გადადის ისე, რომ 0-ის ტოლი ხდება. skewX და skewY მხოლოდ ერთი მნიშვნელობა აქვთ.

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

CSS-ის გამოყენებით გრადიენტის შევსების მხარდაჭერა დაინერგა ორი მიზეზის გამო ბრაუზერებში, რომლებიც დაფუძნებულია Webkit ძრავზე (Google Chrome და Safari), მაგრამ სხვები იმ დროს არ უჭერდნენ მხარს ამ ძალას, ამიტომ გრადიენტები გამოიყენებოდა სურათების ფონზე. ახლა ეს პრობლემა მოგვარებულია, Firefox 3.6+ ახლა მხარს უჭერს ობიექტების გრადიენტულ შევსებას, შეგიძლიათ სცადოთ სურათების ნახვა, სადაც ეს შესაძლებელია.

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

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

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

გრადიენტები ვებკიტის ბრაუზერებში

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

Firefox 3.6+

Firefox გრადიენტის ვიკი

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

Internet Explorer

ეს ბრაუზერი დიდი ხანია და დამსახურებულად აფასებდა განლაგების დიზაინერების "ხანს" მისი უაღრესად ორიგინალური ქცევისთვის. i ღერძი ამ კატეგორიაში არის ფილტრი, ტექსტი, რომელიც არ წაიკითხება IE ბრაუზერის მიერ. აქ რადიალური შევსება არ არის მხარდაჭერილი, მხოლოდ ჰორიზონტალური ან ვერტიკალური, ორი განსხვავებული მნიშვნელობით - startColorstrі endColorstr. საჭიროა სწრაფად მუშაობა, წინააღმდეგ შემთხვევაში IE-ში შედეგი ძალიან ცუდად გამოიყურება და ბრაუზერების უმეტესობა მაინც შესანიშნავი იქნება.

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

ფონი: #999; /* ბრაუზერებისთვის css3-ის გარეშე */ ფილტრი: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); /* IE */ ფონისთვის: -webkit-gradient(წრფივი, მარცხენა ზედა, მარცხენა ქვედა, from(#ccc), to (#000)); /* webkit-ისთვის */ ფონი: -moz-linear-gradient(top, #cccc, #000); /* Firefox 3.6+-ისთვის */

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

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

ვლად მერჟევიჩი

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

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

მაგალითი 1. გრადიენტი

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

ამ კონდახის შედეგი ნაჩვენებია ნახ. 1.

Პატარა 1. ხაზოვანი გრადიენტი აბზაცისთვის

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

პოზიციის ჩასაწერად ჯერ ჩაწერეთ და შემდეგ დაამატეთ საკვანძო სიტყვები ზედა, ქვედა და მარცხნივ, მარჯვნივ, ასევე მათი დამატებები. სიტყვების თანმიმდევრობას არ აქვს მნიშვნელობა, შეგიძლიათ დაწეროთ ზევით მარცხნივ ან ზედა მარცხნივ. Მაგიდაზე 1 განსხვავებული პოზიცია და გრადიენტის ტიპი მითითებულია ფერებისთვის #000 და #fff, წინააღმდეგ შემთხვევაში შავიდან თეთრამდე.

მაგიდა 1. გრადიენტური ტიპები

თანამდებობა		აღწერა	ხედი
ზევით	0 გრადუსი	დაღმართი.
მარცხნივ	270 გრადუსი	მარჯვნიდან მარცხნივ.
ბოლოში	180 გრადუსი	ზემოდან ქვევით.
მარჯვნივ	90 გრადუსი	მარცხნიდან მარჯვნივ.
ზედა მარცხნივ		ხედი ქვედა მარჯვნიდან მარცხნივ ზედა.
ზევით მარჯვნივ		ხედი ქვემოდან მარცხნიდან ზევით მარჯვნივ.
ქვედა მარცხნივ		ხედი ზემოდან მარჯვნიდან ქვედა მარცხნივ.
ქვედა მარჯვნივ		ხედი ზემოდან მარცხნიდან ქვედა მარჯვნივ.

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

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

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

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

მაგალითი 2. Napivprozory ფერები

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

ამ კონდახის შედეგი ნაჩვენებია ნახ. 2.

Პატარა 2. გრადიენტი ვიზუალურად მანათობელი ფერებიდან

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

მაგალითი 3. გრადიენტის ღილაკი

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

ნაზად დამიჭირე

ამ კონდახის შედეგი ნაჩვენებია ნახ. 3.

Პატარა 3. გრადიენტური ღილაკი

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

კონდახი 4. მყარი ფერები

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

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

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

Პატარა 4. ჰორიზონტალური ხაზებისგან დამზადებული ფონი

გრადიენტები პოპულარული ხდება ვებ დიზაინერებში და მათ დამატებას ართულებს სხვადასხვა ავტორიტეტები ბრაუზერის კანის ქვეშ და ფერების არჩევისას. იმისათვის, რომ გაგიადვილოთ გრადიენტების შექმნა და კოდში ჩასმა, გირჩევთ საიტს www.colorzilla.com/gradient-editor, რათა დაგეხმაროთ გრადიენტების მარტივად დაყენებაში და საჭირო კოდის დაუყოვნებლივ ამოღებაში. მომზადებული შაბლონები (Presets), შედეგების მიმოხილვა (Preview), ფერების კორექტირება (Adjustments), საბოლოო კოდი (CSS), რომელსაც მხარს უჭერს IE ფილტრების საშუალებით. მათთვის, ვინც მუშაობს Photoshop-ში ან სხვა გრაფიკულ რედაქტორში, გრადიენტების შექმნა ძალიან კარგი იქნება, სხვებისთვის არ აქვს მნიშვნელობა სწრაფად გამოდგება. სრულიად გირჩევთ.

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

უცებ გაინტერესებთ, რატომ გინდოდათ მისი დადება სურათზე და რატომ? CSS, როგორც არის Photoshop?

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

პირველი ვარიანტი

კიდევ ერთი ვარიანტი

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

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

დემონსტრაცია .

Photoshop chi CSS?

სიმართლე გაირკვევა, საინტერესოა, ვისზეა საუბარი? დიზაინერი ხატავს თავის განლაგებას Photoshop, გრადიენტები მიედინება მიმდებარე ბურთზე. განლაგების დიზაინერი, რომელიც აანალიზებს განლაგებას, პასუხისმგებელია სურათების ბურთის გრადიენტის შექმნაზე და მათ ერთში შენახვაზე. jpg/png/gifფაილის ან გრადიენტის განლაგება ჩართულია CSS?

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

მოდი გადავიდეთ კოდის დაწერაზე, როდესაც ვიწყებთ მარკირებას.

HTML განლაგება

მონიშნეთ სათაურიიქნება კონტეინერი ფონის სურათისთვის და ტეგისთვის დივკლასში header_box- კონტეინერი ორი სათაურისთვის.

ტყე

სადაც ბუნება და ადამიანები

CSS კოდი

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

სათაური (
font-family: sans-serif;
შრიფტის წონა: 400;
შრიფტის ზომა: 16px;
ხაზის სიმაღლე: 1,7;
ფერი: #fff;
ტექსტის ტრანსფორმაცია: დიდი;
ასოების ინტერვალი: 7px;
}

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

ფონის ზომა: საფარი;

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

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

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

ფონი-სურათი: ხაზი-გრადიენტი (ზემოდან, rgba (89,106,114, 0.6), rgba (206,220,23, 0.4)), url (fog.jpg);

დანარჩენი ორი რიცხვი – 0,6/0,4 – არეგულირებს გრადიენტის ხილვადობის ხარისხს; ამ რიცხვების გარეშე, სურათები არ გაუმჯობესდებოდა, არამედ ერთი სრული გრადიენტი.

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

სიმაღლე: 95vh;

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

კლიპის გზა: პოლიგონი(0 0, 100% 0, 100% 70%, 0 100%);

ტექსტის პოზიცია

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

Header_box (
პოზიცია: აბსოლუტური;
ზედა: 35%;
მარცხენა: 50%;
transform: translate(-50%, -50%);
ტექსტის გასწორება: ცენტრში;
}

გრადიენტების გამოყენება

https://cssgradient.io
https://webkul.github.io/coolhue/
https://www.grabient.com/

შეგიძლიათ დააკოპიროთ ფერის კოდი და ჩასვათ მასში Photoshopან ისევე როგორც შენი CSSკოდი.

სტატისტიკის ახსნა:

1. — CSS ძალა, რომელიც გარკვეულ მნიშვნელობას იძენს. სიმძლავრე (ფონი: ხაზოვანი გრადიენტი (ზემოდან თეთრი 20%, წითელი 50%, შავი 30%) განსაზღვრავს გრადიენტს ქვემოდან ზევით გადასასვლელად. ფერები არეალის მიხედვით იყოფა ასე: 20% - თეთრი, 50% - წითელი, 30% - შავი.
2. — CSS სიმძლავრე, რომელიც ემსახურება რადიალური გრადიენტის შექმნას. უამრავ მნიშვნელობას აგროვებს. ჩაწერეთ ფონი: რადიალური გრადიენტი (წრე 65% 15%, აკვა, მუქი ლურჯი) ლურჯი-ლურჯი ფერის შესაქმნელად.
3. @keyFrame არის საკვანძო სიტყვა, რომელიც გამოიყენება გარკვეული ელემენტების სტილისთვის, ყველაზე ხშირად ანიმაციისთვის.
4. - Power, რომელიც ნიშნავს ანიმაციას. ეს მნიშვნელობები მიუთითებს ხანგრძლივობაზე (წამებში), ფუნქციებზე და გამეორებების რაოდენობაზე.

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

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

Სინტაქსი

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

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

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

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

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

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

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

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

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

ჩანაწერი (ფონი: ხაზოვანი-გრადიენტი (ზემოდან, #fff 20%, #cccc, #000)) ნიშნავს, რომ თეთრი ფერი დაიკავებს ფართობის პირველ 20%-ს.

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

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

• პირველი, რაც მნიშვნელოვანია, არის რადიალური გრადიენტური ბრძანება - ფორმა. ეს შეიძლება გამოითქვას მარტივი სიტყვებით - წრე, ელიფსი და სხვა. რეცხვისთვის არის 2 ღირებულების ღირებულება.
• სხვა მნიშვნელობა, გარდა ხაზოვანი გრადიენტისა, ადგენს ცენტრის პოზიციას. რისთვისაც დაყენებულია იგივე საკვანძო სიტყვები, მცირე ცვლილებებით: პრეფიქსი შეიცვალა at.
• უფრო ზუსტი მნიშვნელობებისთვის შეგიძლიათ დააყენოთ გრადიენტის სიგანე და სიმაღლე. ერთი მნიშვნელობა ნიშნავს სიგანეს, ხოლო მეორე ნიშნავს სიმაღლეს. სიგანის შესაცვლელად შესაფერისია შემდეგი ზომები: %, rem და em.

ვიკორისტანური გრადიენტის კონდახი. HTML და CSS

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

მოწინავე გენერატორი ხაზოვანი გრადიენტების შესაქმნელად - CSS Gradient Generator, გამოქვეყნებული ვებსაიტზე Flatonika.ru. ასევე მარტივი და მარტივია CSS გრადიენტების შექმნა ონლაინ.

ფონის ანიმაცია გრადიენტების გამოყენებით. CSS

სხეული ( სიგანე: 100wh; სიმაღლე: 90vh; ფერი: #fff; ფონი: ხაზოვანი გრადიენტი (-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); ფონის ზომა: 400% 400%; -webkit-ანიმაცია : Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;ანიმაცია: Gradient 15s ease Infinite;

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

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

@keyframes გრადიენტი (0% (ფონის პოზიცია: 0% 50%) 50% (ფონის პოზიცია: 100% 50%) 100% (ფონის პოზიცია: 0% 50%)

ასევე აუცილებელია ტეგისთვის ანიმაციის საათის დაყენება დამატებითი ანიმაციის სიმძლავრის გამოყენებით . ანიმაციის ხანგრძლივობა 15 წამია.

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

ანიმაციური გრადიენტის შექმნა ტექსტზე. CSS