01/04
CSS3 ilə Cross-Browser Linear Gradientlərin yaradılması
Lineer Qradientlər
Görəcək ən geniş yayılmış gradient növü iki rəngli xətti bir gradientdir. Bu, gradienti bu xətt boyunca birinci rəngdən ikinciyə qədər tədricən dəyişən düz xəttdə hərəkət edəcək deməkdir. Bu səhifənin görünüşü, #FF99 (ağ) üçün # 999 (qara-boz) sadə bir soldan düzəldilən gradienti göstərir.
Xətti gradientlər brauzerlərdə müəyyənləşdirmək üçün ən asan və ən çox dəstəkdir. CSS3 linear gradientlər Android 2.3 +, Chrome 1+, Firefox 3.6 +, Opera 11.1 + və Safari 4 + də dəstəklənir. Internet Explorer filtrdən istifadə edərək gradients əlavə edə bilər və onları IE 5.5-ə geri qaytarır. Bu CSS3 deyil, lakin cross-browser uyğunluğu üçün bir seçimdir.
Bir gradient müəyyən zaman bir neçə müxtəlif şeyləri müəyyən etmək lazımdır:
- Qradientin hansı növü - linear və ya radialdır
- Cədvəlin başlaması harada
- Cədvəlin dayandığı yer
- Hansı rənglər gradientdədir və harada başlamaq və dayandırmaq lazımdır?
CSS3-dən istifadə edən xətti gradientləri müəyyən etmək üçün yaz:
lineer-gradient ( açı və ya yan və ya künc , rəng dayanması , rəng dayandırılması )
- Əvvəlcə gradient adını xətti- gradient ilə təyin edin.
- Sonra, gradientin başlanğıc və dayandırmaq nöqtələrini iki yoldan birində təyin edərsiniz: xəttin 0-dən 359-a qədər dərəcəsi, 0 dərəcə düz bir şəkildə işarə edir. Və ya sol, sağ, alt və üst kimi "yan və ya künc" funksiyası ilə. Bunlar növbəti səhifədə daha ətraflı izah ediləcək. Bunu tərk edərsəniz, gradient üstdən elementin altına axacaq.
- Sonra rəngi dayandırır müəyyən edir. Rəngi rəng kodunu və isteğe bağlı faizlə durur. Yüzdə xəttdə bu rənglə başlamaq və ya bitmək üçün brauzerə məlumat verir. Sifariş, rəngləri xətt boyunca bərabər şəkildə yerləşdirməkdir. Rənglərin dayanması haqqında daha çox məlumatı 3-cü səhifədə tapa bilərsiniz.
Beləliklə, yuxarıda göstərilən gradienti CSS3 ilə müəyyən etmək üçün yaz:
lineer-gradient (sol, # 999999 0%, #ffffff% 100);
Bunu bir DIV fonunda yazmaq üçün:
div {
background-image: linear-gradient (sol, # 999999 0%, #ffffff 100%;
}
CSS3 Lineer Gradient üçün Browser Extensions
Çapraz brauzer işləməyiniz üçün gradient əldə etmək üçün brauzerinizin genişləndirmələrini və İnternet Explorer 9 və daha aşağı (əslində 2 filtr) üçün ən çox brauzerlər üçün bir filtre istifadə etməlisiniz. Bütün bunlar sizin gradientinizi müəyyən etmək üçün eyni elementləri götürür (yalnız İE-də 2 rəngli gradientlər təyin edə bilərsiniz).
Microsoft Filtreleri ve Uzantısı- Internet Explorer, desteklemek üçün ən çətindir, çünki müxtəlif brauzer versiyalarını dəstəkləmək üçün üç fərqli xətaya ehtiyacınız var. Yuxarıdakı bozları ağ gradientə almaq üçün yazacaqsınız:
/ * IE 5.5-7 * /
filter: prod.: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filtr: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (sol, # 999999 0%, #ffffff% 100);
Mozilla Extension -The -moz- uzadılması, yalnız -moz-uzadılması ilə CSS3 xüsusiyyətləri kimi işləyir. Firefox üçün yuxarıdakı gradienti almaq üçün yaz:
-moz-lineer-gradient (sol, # 999999 0%, #ffffff% 100);
Opera Extension -The -o-uzantısı Opera 11.1 + -ə işarə edir. Yuxarıdakı gradienti almaq üçün yaz:
-o-lineer-gradient (sol, # 999999 0%, #ffffff% 100);
Webkit Extension -Webkit-uzadılması CSS3 xüsusiyyətinə bənzəyir. Safari 5.1 + və ya Chrome 10 + üçün yuxarıda göstərilən gradienti müəyyən etmək üçün yaz:
-webkit-linear-gradient (sol, # 999999 0%, #ffffff% 100);
Chrome 2 + və Safari 4 + ilə işləyən Webkit uzadılmasının köhnə versiyası da var. Burada siz qiymət adını əmlakın adından çox dəyər kimi təyin edirsiniz. Bu uzantı ilə bozdan ağ gradienti almaq üçün yaz:
-webkit-gradient (lineer, sol üst, sağ üst, rəng-stop (0%, # 999999), color-stop (100%, # ffffff));
Tam CSS3 Lineer Gradient CSS Kodu
Gri üstü gradienti almaq üçün tam cross-brauzer dəstəyi üçün ilk növbədə gradientləri dəstəkləyən brauzerlər üçün geri qayıtmıĢ bir rəng əlavə etməlisiniz və sonuncu maddə tamamilə uyğun olan brauzerlər üçün CSS3 üslubu olmalıdır. Beləliklə, yaz:
fon: # 999999;
fon: -moz-linear-gradient (sol, # 999999 0%, #ffffff% 100);
background: -webkit-gradient (lineer, sol üst, sağ üst, rəng-stop (0%, # 999999), color-stop (100%, # ffffff));
fon: -webkit-linear-gradient (sol, # 999999 0%, #ffffff% 100);
fon: -o-linear-gradient (sol, # 999999 0%, #ffffff% 100);
fon: -ms-linear-gradient (sol, # 999999 0%, #ffffff% 100);
filter: prod.: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filtri: prod.: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
fon: lineer-gradient (sol, # 999999 0%, #ffffff% 100);
Bu təlimatdakı növbəti səhifələrdə daha çox detalın bir hissəsini izah edir və son səhifə avtomatik olaraq CSS3 gradientləri yaratmaq üçün əla bir vasitədir.
Yalnız CSS istifadə edərək, bu xətti gradienti baxın.
02/04
Çapraz qradientlərin yaradılması - Qədimanın açısı
Başlanğıc və dayandırma nöqtələri gradient açısını müəyyən edir. Ən xətti gradient yuxarıdan aşağıya və ya sola doğru. Ancaq bir diaqonal xətt üzərində hərəkət edən bir gradient qurmaq mümkündür. Bu səhifənin görünüşü sağdan sola doğru 45 dəqiqəlik bir açıda hərəkət edən sadə gradienti göstərir.
Qradient xəttini müəyyən etmək üçün açılar
Bucaq elementin mərkəzində xəyali dairədə bir xəttdir. 0deg yuxarı, 90deg sağda, 180deg aşağıda, solda isə 270deg bal. 0 dən 359 dərəcə hər hansı bir açı təyin edə bilərsiniz.
Bir meydanda, 45 dərəcəlik bir yuxarı sol küncdən sağa doğru hərəkət edəcəyini, lakin düzbucaqda başlanğıc və bitmə nöqtələrində şəkildəki kimi göründüyü kimi bir az kənar şəklindədir.
Bir diaqonal gradient müəyyən etmək üçün daha geniş yayılmış bir yol yuxarı sağ kimi bir künc müəyyən etmək və gradient ki, küncdən qarşı küncündə hərəkət edəcək. Başlanğıc postunu aşağıdakı açar sözlər ilə təyin edə bilərsiniz:
- üst
- sağ olun
- alt
- sola çıxdı
- Mərkəz
Və onlar birləşdirilə bilər kimi daha dəqiq, belə:
- üst sağ
- üst sol
- üst mərkəz
- alt sağ
- alt sol
- alt mərkəzi
- sağ mərkəz
- sol mərkəz
Burada yuxarı sağ küncdən aşağıya sola hərəkət edən, qırmızı rəngli birinə bənzər gradient üçün CSS:
fon: ## 901A1C;
background-image: -moz-linear-gradient (sağ üst, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (lineer, sağ üst, sol alt, rəng stop (0, # 901A1C), color-stop (1, #FFFFFF));
fon: -webkit-linear-gradient (sağ üst, # 901A1C 0%, #ffffff 100%);
fon: -o-linear-gradient (sağ üst, # 901A1C 0%, #ffffff 100%);
fon: -ms-linear-gradient (sağ üst, # 901A1C 0%, #ffffff 100%);
fon: lineer-gradient (sağ üst, # 901A1C 0%, #ffffff 100%);
Bu nümunədə IE filtreleri olmadığını fark etmiş ola bilərsiniz. Çünki IE yalnız iki növ filtrə imkan verir: yuxarıdan aşağıya (default) və soldan sağa (GradientType = 1 keçid ilə).
Yalnız CSS istifadə edərək, bu diaqonal linear gradienti fəaliyyətə baxın.
03 04
Rəng durur
CSS3 doğrusal gradientləri ilə, hətta daha xəyali təsiri yaratmaq üçün gradientinizə bir çox rəng əlavə edə bilərsiniz. Bu rəngləri əlavə etmək üçün, əmlakınızın sonuna vergül əlavə edərək əlavə rənglər əlavə edin. Rənglərin başlamalı və ya bitməsi lazım olan yerə daxil edilməlidir.
İnternet Explorer filtrləri yalnız iki rəng dayanacağına dəstək verirlər, beləliklə, bu gradienti yaratdığınızda, göstərmək istədiyiniz ilk və ikinci rəngləri daxil etməlisiniz.
Burada yuxarıdakı 3 rəngli gradient üçün CSS:
fon: #ffffff;
fon: -moz-linear-gradient (sol, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-gradient (lineer, sol üst, sağ üst, rəngli stop (0%, # ffffff), color-stop (51%, # 901A1C), color stop (100%, # ffffff));
fon: -webkit-linear-gradient (sol, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fon: -o-lineer-gradient (sol, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
fon: -ms-linear-gradient (sol, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: prodid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
fon: lineer-gradient (sol, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Yalnız bu CSS-lərdən istifadə edərək, üç rəngli dayanma ilə bu xətti gradientə baxın.
04 04
Bina Gradientləri asanlaşdırın
Cədvəl yaratmaqda sizə kömək etdiyim iki sayt var, hər birinə faydaları və çatışmazlıqları var, hələ də hər şeyi edən bir şifrəli qurucu tapmadım.
Ultimate CSS Gradient Generator
Photoshop kimi proqramlarda gradient qurucularına bənzər şəkildə çıxış etdiyindən, bu gradient generator çox populyardır. Mən də bunu sevirəm, çünki Webkit və Mozilla deyil, bütün CSS uzantıları verir. Bu generatorla problem yalnız üfüqi və şaquli qradientləri dəstəkləyir. Diaqonalı gradientlər etmək istəyirsinizsə, tövsiyə etdiyim digər generatora getməlisiniz.
CSS3 Gradient Generator
Bu generator birincidən daha yaxşı başa düşmək üçün mənə bir az daha uzun sürdü, lakin istiqamətini diaqonal olaraq dəyişməyə kömək edir.
Digər CSS Gradient Generator-dan daha yaxşı bildiyinizə görə, bizə bildirin .