Skip to content

CSS3’te Doğrusal Degradeler Nasıl Oluşturulur

17 de Nisan de 2021

Herhangi bir web sayfasında göreceğiniz en yaygın renk geçişi türü, iki renkten oluşan doğrusal bir renk geçişidir. Bu, degradenin bu çizgi boyunca ilk renkten ikinciye kademeli olarak değişen düz bir çizgide hareket edeceği anlamına gelir.

CSS3 ile Çapraz Tarayıcı Doğrusal Degradeler Oluşturma

Soldan sağa # 999 (koyu gri) ile #fff (beyaz) arasında basit bir doğrusal gradyan.
J Kyrnin

Yukarıdaki görüntü, soldan sağa # 999 (koyu gri) ile #fff (beyaz) arasındaki basit bir gradyan göstermektedir. Doğrusal degradeler, tarayıcılarda tanımlanması en kolay ve en çok desteğe sahip olanlardır. CSS3 doğrusal gradyanları Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ ve Safari 4+ sürümlerinde desteklenir. Bir renk geçişi tanımladığınızda, türünü tanımlayın—doğrusal veya radyal—Ve degradenin nerede durması ve başlaması gerektiği. Degradenin renklerini ve bu renklerin ayrı ayrı başlayıp bittiği yerleri de ekleyin. CSS3 kullanarak doğrusal degradeleri tanımlamak için şunu yazın: doğrusal gradyan (açı veya yan veya köşe, renk durağı, renk durağı)

Önce adıyla degradenin türünü tanımlarsınız Daha sonra, degradenin başlangıç ​​ve bitiş noktalarını iki yoldan biriyle tanımlarsınız: 0 derece yukarı bakacak şekilde 0 ila 359 derece arasındaki çizginin açısı. Veya “yan veya köşe” işlevleriyle. Bunları dışarıda bırakırsanız, gradyan öğenin üstünden altına doğru akacaktır. Ardından renk duraklarını tanımlarsınız. Renk duraklarını renk kodu ve isteğe bağlı bir yüzde ile tanımlarsınız. Yüzde, tarayıcıya o renkle satırın neresinde başlayıp biteceğini söyler. Varsayılan, renkleri çizgi boyunca eşit olarak yerleştirmektir. Sayfa 3’te renk durakları hakkında daha fazla bilgi edineceksiniz. Dolayısıyla, yukarıdaki gradyanı CSS3 ile tanımlamak için şunu yazarsınız: doğrusal gradyan (sol, # 999999% 0, #ffffff% 100);

Ve bunu bir DIV yazısının arka planı olarak ayarlamak için: div {
arka plan resmi: doğrusal gradyan (sol, # 999999% 0, #ffffff% 100;
}

CSS3 Doğrusal Degradeler için Tarayıcı Uzantıları

Gradyanınızın tarayıcılar arası çalışmasını sağlamak için, çoğu tarayıcı için tarayıcı uzantılarını ve bir filtre Internet Explorer 9 ve altı için (aslında 2 filtre). Bunların tümü, degradenizi tanımlamak için aynı öğeleri alır (yalnızca IE’de 2 renkli degradeleri tanımlayabilmeniz dışında).

Microsoft Filtreleri ve Uzantıları—Internet Explorer, desteklemesi en zor olanıdır, çünkü farklı tarayıcı sürümlerini desteklemek için üç farklı satıra ihtiyacınız vardır. Yukarıdaki griden beyaza gradyanı elde etmek için şunu yazarsınız: / * IE 5.5–7 * /
filtre: 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 * /
-ms-doğrusal gradyan (sol, # 999999% 0, #ffffff% 100);

Mozilla Uzantısı-The -moz- uzantısı CSS3 özelliği gibi çalışır, yalnızca uzantıyla birlikte. Firefox için yukarıdaki gradyanı elde etmek için şunu yazın: -moz-linear-gradient (sol, # 999999 0%, #ffffff 100%);

Opera Uzantısı-The -Ö- uzantısı Opera 11.1+ sürümüne degradeler ekler. Yukarıdaki gradyanı elde etmek için şunu yazın: -o-lineer-gradyan (sol, # 999999% 0, #ffffff% 100);

Webkit Uzantısı-The -webkit– uzantı CSS3 özelliği gibi çalışır. Safari 5.1+ veya Chrome 10+ için yukarıdaki gradyanı tanımlamak için şunu yazın: -webkit-linear-gradient (sol, # 999999% 0, #ffffff% 100);

Webkit uzantısının Chrome 2+ ve Safari 4+ ile çalışan eski bir sürümü de vardır. Burada, özellik adı yerine degrade türünü bir değer olarak tanımlarsınız. Bu uzantı ile griden beyaza gradyan elde etmek için şunu yazın: -webkit-gradient (doğrusal, sol üst, sağ üst, renk durdurma (% 0, # 999999), renk durdurma (% 100, # ffffff));

Tam CSS3 Doğrusal Degrade CSS Kodu

Üstteki griden beyaza degradeyi elde etmek üzere tam çapraz tarayıcı desteği için, önce degradeleri desteklemeyen tarayıcılar için bir yedek düz renk eklemelisiniz ve son öğe, tamamen uyumlu tarayıcılar için CSS3 stili olmalıdır. Yani, şunu yazarsınız: background: # 999999;
arkaplan: -moz-doğrusal gradyan (sol, # 999999% 0, #ffffff% 100);
arka plan: -webkit-gradyan (doğrusal, sol üst, sağ üst, renkli durdurma (% 0, # 999999), renk durdurma (% 100, # ffffff));
arkaplan: -webkit-doğrusal gradyan (sol, # 999999% 0, #ffffff% 100);
arka plan: -o-doğrusal-gradyan (sol, # 999999% 0, #ffffff% 100);
arkaplan: -ms-doğrusal-gradyan (sol, # 999999% 0, #ffffff% 100);
filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = “# 999999”, endColorstr = “# ffffff”, GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = “# 999999”, endColorstr = “# ffffff”, GradientType = 1);
arka plan: doğrusal gradyan (sol, # 999999% 0, #ffffff% 100);

Çapraz Degradeler Oluşturma — Degradenin Açısı

45 derecelik açıyla bir gradyan

45 derecelik açıda bir gradyan.
J Kyrnin

Başlangıç ​​ve bitiş noktaları degradenin açısını belirler. Doğrusal renk geçişlerinin çoğu yukarıdan aşağıya veya soldan sağa doğrudur. Ancak çapraz bir çizgi üzerinde hareket eden bir gradyan oluşturmak mümkündür. Bu sayfadaki görüntü, görüntü boyunca sağdan sola 45 derecelik bir açıyla hareket eden basit bir degradeyi gösterir.

Degrade Çizgisini Tanımlamak için Açılar

Açı, elemanın merkezindeki hayali bir daire üzerindeki bir çizgidir. Bir ölçüsü 0deg puan yukarı 90 derece doğru puan, 180 derece aşağı işaret ediyor ve 270 derece puan kaldı. Herhangi bir açı ölçüsü kullanın. Bir karede 45 derecelik bir açı, sol üst köşeden sağ alt köşeye doğru hareket eder, ancak bir dikdörtgende başlangıç ​​ve bitiş noktaları şeklin biraz dışındadır. Çapraz degradeyi tanımlamanın daha yaygın yolu, aşağıdaki gibi bir köşe tanımlamaktır. sağ üst ve degrade bu köşeden karşı köşeye hareket eder. Başlangıç ​​konumunu aşağıdaki anahtar kelimelerle tanımlayın:

  • üst
  • sağ
  • alt
  • ayrıldı
  • merkez

Ve daha spesifik olacak şekilde birleştirilebilirler, örneğin:

  • sağ üst
  • Sol üst
  • üst merkez
  • sağ alt
  • sol alt
  • alt merkez
  • sağ merkez
  • sol merkez

Sağ üst köşeden sol alt köşeye doğru kırmızıdan beyaza hareket eden resimdekine benzer bir gradyan için CSS şu şekildedir: background: ## 901A1C;
arka plan görüntüsü: -moz-doğrusal gradyan (sağ üst, # 901A1C% 0, # FFFFFF% 100);
arka plan görüntüsü: -webkit-gradyan (doğrusal, sağ üst, sol alt, renk durağı (0, # 901A1C), renk durağı (1, #FFFFFF));
arkaplan: -webkit-doğrusal gradyan (sağ üst, # 901A1C% 0, #ffffff% 100);
arka plan: -o-doğrusal-gradyan (sağ üst, # 901A1C% 0, #ffffff% 100);
arkaplan: -ms-doğrusal-gradyan (sağ üst, # 901A1C% 0, #ffffff% 100);
arka plan: doğrusal gradyan (sağ üst, # 901A1C% 0, #ffffff% 100);

Bu örnekte IE filtrelerinin olmadığını fark etmiş olabilirsiniz. Bunun nedeni, IE’nin yalnızca iki tür filtreye izin vermesidir: yukarıdan aşağıya (varsayılan) ve soldan sağa ( GradientType = 1 değiştirmek).

Renk Durakları

Üç renk durağına sahip bir gradyan

Üç renk duraklı bir gradyan.
J Kyrnin

CSS3 doğrusal degradelerle, daha da ilginç efektler oluşturmak için degradenize birkaç renk ekleyin. Bu renkleri eklemek için mülkünüzün sonuna virgülle ayırarak ek renkler ekleyin. Renklerin satırın neresinde başlayıp bitmesi gerektiğini de eklemelisiniz. Internet Explorer filtreleri yalnızca iki renk durağını destekler, bu nedenle bu degradeyi oluşturduğunuzda, yalnızca görüntülemek istediğiniz birinci ve ikinci renkleri eklemelisiniz. İşte yukarıdaki üç renkli gradyan için CSS: background: #ffffff;
arka plan: -moz-doğrusal gradyan (sol, #ffffff% 0, # 901A1C% 51, #ffffff% 100);
arkaplan: -webkit-gradyan (doğrusal, sol üst, sağ üst, renkli durdurma (% 0, # ffffff), renk durdurma (% 51, # 901A1C), renk durdurma (% 100, # ffffff));
arkaplan: -webkit-doğrusal gradyan (sol, #ffffff% 0, # 901A1C% 51, # ffffff% 100);
arka plan: -o-doğrusal-gradyan (sol, #ffffff% 0, # 901A1C% 51, # ffffff% 100);
arkaplan: -ms-lineer gradyan (sol, #ffffff% 0, # 901A1C% 51, # ffffff% 100);
filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = “# ffffff”, endColorstr = “# ffffff”, GradientType = 1);
arka plan: doğrusal gradyan (sol, #ffffff% 0, # 901A1C% 51, # ffffff% 100);

Yalnızca CSS kullanarak üç renk durağına sahip bu doğrusal renk geçişini iş başında görün.