Gradyan - seçilen alanı aralarında yumuşak geçişler olan bir dizi renk tonuyla doldurma. Gradyan görüntülemek için kullanılır yumuşak bir geçiş iki veya daha fazla belirtilen renk tonu arasında. Gradyan örneği:
Daha önce, degrade efekti oluşturmak için arka plan görüntüleri kullanılıyordu. Artık bir degrade arka planı oluşturmak için CSS3'ü kullanabilirsiniz. CSS3 gradyanlı öğeler, yakınlaştırıldıklarında takılabilir arka plan görüntüsü benzerlerinden daha iyi görünür çünkü gradyan tarayıcı tarafından belirtilen alanın hemen altında oluşturulur.
CSS gradyanının bir arka plan rengi değil, tarayıcı tarafından oluşturulan bir arka plan görüntüsü olduğunu ve bu nedenle arka plan görüntüsü özelliğinin değeri olarak tanımlandığını unutmayın. Bu, degradenin yalnızca background-image özelliğinin değeri olarak değil, aynı zamanda yapıştırabileceğiniz herhangi bir yerde de belirtilebileceği anlamına gelir. arka plan görüntüsü, örneğin liste-tarzı-görüntü ve arka planda.
CSS3, iki tür degrade tanımlar:
- doğrusal gradyan (Doğrusal Gradyan) - düz bir çizgide renkten renge yumuşak geçiş.
- radyal gradyan(Radyal Gradyan) - bir noktadan her yöne renkten renge yumuşak geçiş.
doğrusal gradyan
Doğrusal bir degrade düz bir çizgide yayılır ve bir renk tonundan diğerine yumuşak bir geçiş gösterir. Doğrusal gradyan() işlevi kullanılarak doğrusal bir gradyan oluşturulur. İşlev, belirtilen renk tonları arasında doğrusal bir gradyan olan bir görüntü oluşturur. Gradyanın boyutu, uygulandığı öğenin boyutuna karşılık gelir.
Lineer-gradient() işlevi, aşağıdaki virgülle ayrılmış bağımsız değişkenleri alır:
- İlk argüman, gradyan çizgisinin yönünün açısını tanımlayan açının derecesi veya anahtar kelimelerdir. İsteğe bağlı argüman.
- İki veya daha fazla rengin virgülle ayrılmış listesi, her birinin ardından bir durma konumu gelebilir.
En basit doğrusal gradyan, başlangıç ve bitiş renklerini belirten yalnızca iki bağımsız değişken gerektirir:
Div ( arka plan görüntüsü: doğrusal gradyan(siyah, beyaz); genişlik: 200 piksel; yükseklik: 200 piksel; ) Deneyin »
İşleve iki bağımsız değişken iletmek, başlangıç noktası en üstte olacak şekilde dikey bir gradyan ayarlar.
Gradyan çizgisinin yönü iki şekilde tanımlanabilir:
Dereceleri kullanma İlk argüman olarak, degradenin yönünü belirleyen degrade çizgisinin köşesinin derecesini iletebilirsiniz, örneğin, 0deg açısı (derece İngilizce derece - derece kısaltmasıdır) elemanın alt sınırı üste, 90 derecelik açı, soldan sağa vb. gradyan çizgisini tanımlar. Basitçe söylemek gerekirse, pozitif açılar saat yönünde bir dönüşü temsil eder, negatif sırasıyla saat yönünün tersine. Anahtar sözcükleri kullanma "yukarıya", "sağa", "aşağıya" veya "sola" anahtar sözcükleri de ilk argüman olarak iletilebilir, bunlar "0deg" "90deg" "180deg" " degrade çizgilerinin açılarını temsil eder. 270 derece" sırasıyla.
Açı, örneğin, iki anahtar sözcük kullanılarak da belirtilebilir. sağ üst- degrade çizgisi sağ üst köşeye yönlendirilir.
Farklı yönlerde verilen bir gradyan örneği:
Div ( kenar boşluğu: 10 piksel; genişlik: 200 piksel; yükseklik: 200 piksel; kayan nokta: sol; ) # bir ( arka plan görüntüsü: doğrusal gradyan(sola, siyah, kırmızı); ) # iki ( arka plan görüntüsü: doğrusal gradyan( ile Sol üst, siyah kırmızı); ) #üç ( arka plan görüntüsü: doğrusal gradyan(65 derece, siyah, sarı); ) Deneyin »
Daha önce de belirtildiği gibi, doğrusal bir gradyan ikiden fazla renkten oluşan virgülle ayrılmış bir liste içerebilir, tarayıcı bunları mevcut alanın tamamına eşit olarak dağıtır:
Div ( kenar boşluğu: 10 piksel; genişlik: 200 piksel; yükseklik: 200 piksel; kayan nokta: sol; ) # bir ( arka plan görüntüsü: doğrusal gradyan (sağa, kırmızı, mavi, sarı); ) # iki ( arka plan görüntüsü: doğrusal- degrade(sol üstte, mavi, beyaz, mavi); ) Deneyin »
Renkten sonra, degradenin başlangıç ve bitiş noktalarına göre rengin konumunu (bir rengin diğerine geçmeye başladığı yer) belirleyen bir durma konumu belirlemesine izin verilir. Durma konumu, CSS'de desteklenen birimler veya yüzdeler kullanılarak belirtilir. Yüzdeleri kullanırken, durma konumunun konumu, eğim çizgisinin uzunluğuna bağlı olarak hesaplanır. %0 değeri degradenin başlangıç noktası, %100 ise bitiş noktasıdır.
Div ( kenar boşluğu: 10 piksel; genişlik: 200 piksel; yükseklik: 200 piksel; kayan nokta: sol; ) #bir ( arka plan resmi: doğrusal gradyan(sağ üstte, mavi, beyaz %70, mavi); ) #two ( arka plan resmi : doğrusal degrade(sağ alta, sarı %10, beyaz, kırmızı, siyah %90);) #üç (arka plan görüntüsü: doğrusal degrade(sağa, siyah %10, sarı, siyah %90); ) Deneyin »
Renk değeri belirtilebilir Farklı yollar, örneğin: bir renk adı belirtin, RGB (RGBA) veya HSL (HSLA) sözdizimini kullanarak onaltılık değerler (HEX) kullanın. Örneğin, saydamlık içeren bir degrade kullanmak, ilginç görsel efektler oluşturmak için bir arka plan rengiyle veya degradenin altındaki bir görüntüyle birlikte kullanılabilir:
Div ( kenar boşluğu: 10 piksel; genişlik: 300 piksel; yükseklik: 100 piksel; arka plan rengi: yeşil; ) #bir ( arka plan: doğrusal gradyan(sola, rgb(255,255,0)), rgba(255,255,0,0)); ) #two ( arka plan: doğrusal gradyan(rgb(255,255,255), rgba(255,255,255,0)); )
- Tercüme
Singlediv.com projesi hakkında çeviri yapmak, bazı CSS araçlarının eskiden düşündüğümden daha geniş bir uygulamaya sahip olduğunu gösterdi. Ancak bu uygulamayı bulabilmek için mülkün özelliklerini net bir şekilde anlamak gerekiyor. Çarpıcı bir örnek, Lynn Fisher'ın çalışmalarında ustaca kullandığı lineer gradyandır.
Web sitenizde sevimli bir gradyan arka planı yapmak ister misiniz? arka plan görüntüsü: doğrusal gradyan(kırmızı, mavi); hazır! Evet, biraz sıkıcı. Yani daha fazlasını istiyorsanız bu css ve MDN sayfasını tavsiye ederim. Şimdi burada mısın? Ardından, lineer gradyanların gerçekte nasıl çalıştığına dair bazı noktalara bakalım. Öncelikle lineer gradyan fonksiyonunda kullanılabilecek söz dizimini hatırlayalım:
lineer-gradyan([dan<угла>| önceki<стороны-или-угла>]?,
İşlev, bir ölçü birimi (derece, yarıçap, derece, devir) veya bir anahtar sözcük (yan veya açı) olarak ifade edilebilen eğim açısını belirten isteğe bağlı bir ilk argüman alır.
İşlev daha sonra bir renk listesi alır.
gradyan kutusu
Gradyan görüntüsünün boyutu yoktur, diğer arka plan görüntülerinden farklı olarak sonsuzdur. Görünür boyutlar bir gradyan alanı verilir, yani. görüntülendiği alan.Tipik olarak, bir DOM öğesine doğrusal bir degrade arka plan görüntüsü uyguladığınızda, bu alan öğenin kenarlıklar kutusudur (bu, arka plan renginin görüntülendiği alanla aynıdır).
Ancak, arka plan boyutu CSS özelliğini de kullanırsanız ve onu örneğin 200px * 200px olarak ayarlarsanız, degrade kutusu bu boyuta sahip olacak ve varsayılan olarak DOM öğesinin sol üst köşesine yerleştirilecektir. ayrıca arka plan konumunu da (arka plan konumu) ayarlarsınız.
Dolayısıyla, aşağıdaki bölümleri okurken, degrade kutusunun her zaman degradeyi uyguladığınız DOM öğesiyle aynı şekilde konumlandırılmadığını ve boyutlandırılmadığını unutmayın.
gradyan çizgisi
Degrade kutusunda, merkezden geçen ve renklerin dağıtıldığı çizgiye degrade çizgisi denir. Bu çizgi, eğim açısının açıklanması sırasında daha basit bir şekilde açıklanabilir, bu yüzden bir sonraki bölümde daha fazlası.gradyan açısı
Açıkça, doğrusal bir eğim açısı, eğimin hangi yöne gideceğini belirlemek için kullanılır. Ancak bu yönü daha ayrıntılı olarak ele alalım.Gradyan alanının merkez noktası C ise, A, arasındaki açıdır. dikey çizgi, C'den geçen ve C'den de geçen ve degradenin durma renklerinin dağıtıldığı bir degrade çizgisi.
Bu açı iki şekilde belirlenebilir:
Anahtar kelimelerden birini kullanarak: yukarı (yukarı), aşağı (aşağı), sola (sol), sağa (sağ), sağ üste (sağ yukarı), sol üste (sol yukarı), sağ alta ( sağ aşağı), için sol alt(sol aşağı);
Veya 45deg (45 derece), 1turn (1 tur) gibi bir sayı ve ölçü birimi ile bir açı tanımlayarak;
Açı belirtilmemişse, varsayılan olarak aşağı iner (yani, 180 derece veya 0,5 turdur):
Bu ve sonraki resimlerde, degrade kutusu bir dikdörtgenle sınırlandırılmıştır ve degrade çizgisi, renklerin göründüğü, merkezden geçen kalın gri bir çizgidir.
Yukarıdaki örnekte, açı belirtilmemiştir, bu nedenle beyazdan kırmızıya gradyan aşağıda gösterildiği gibi yukarıdan aşağıya doğru hareket eder, bu da aşağıda gösterildiği gibi alt anahtar kelimeye karşılık gelir:
Ve aşağıdaki 2 resimde gösterildiği gibi, tepeye (yukarıya) sıfır derecelik bir açıya karşılık gelir:
Bir diğer önemli nokta, hangi açı anahtar kelimelerini kullanırken göz önünde bulundurmaya değer - ne sağ üstte (sağda), örneğin, (veya başka herhangi bir anahtar kelime açısı) degrade kutusunun boyutuna bağlıdır.
Mantık, bir öğenin sağ üst köşesine doğru kırmızıdan maviye bir degrade yapmak istiyorsanız, o öğenin sağ üst köşesinde tam olarak mavi olması ve degradenin ortasındaki mor rengin etrafında oluşması gerekir. sol üst köşeden sağ alt köşeye uzanan çizgi. İşte resimde nasıl göründüğü:
Bu nedenle, sağ üste (sağ yukarı), gradyan çizgisinin sağdan geçtiği anlamına gelmez. üst köşe, ve bu, eğim açısının 45 derece olduğu anlamına bile gelmez!
Aşağıdaki animasyonla açı değiştikçe degrade çizgisinin nasıl hareket ettiğini görelim:
Bu animasyonda açı, 10 derecelik artışlarla 0'dan 360 dereceye kadar eğilir. GIF'in düşük çözünürlüğü, farklı renklerin her zaman degrade çizgisine dik olan "çizgiler" olarak nasıl oluşturulduğunu görmeyi bile kolaylaştırır.
Degrade köşeler hakkında bildiklerimizi özetleyelim:
Açı, degrade çizgisi ile degrade kutusunun ortasından başlayan ve yukarı doğru hareket eden çizgi arasında ölçülür.
Yani 0 derece yukarı demektir.
Standart değer açı, belirtilmemişse, 180 dereceye eşit olan aşağıdır.
Açı anahtar sözcükleri, degrade kutusunun boyutlarına bağlıdır.
Degrade çizgi uzunluğu
Renklerin gradyan çizgisi boyunca nasıl dağıldığını görmeden önce bir noktayı açıklamamız gerekiyor. Önceki animasyonda renklerin bazen degrade kutusunun dışına yerleştirildiğini fark etmiş olabilirsiniz, bu ilk bakışta biraz garip gelebilir, ancak nedenini biliyorsanız mantıklıdır.Bir örneğe bakın:
45 derecelik bir açıyla kırmızıdan maviye bir degradeye ihtiyacımız var ve degrade kutusunun en boy oranı nedeniyle, degrade çizgisi sağ üst köşeden geçemez.
Ancak tarayıcı, sağ üst köşeyi saf mavi yapmak istiyor (yani, özellikler onu zorluyor). Gradyan çizgisini alanın kenarlarında başlayıp bitecek olursak, o zaman Mavi renk alınmış çoğu alanlar ve degrade çok bulanık olmazdı.
Bunu yapabilmek için degrade çizgisinin bazen degrade kutusunun dışına çıkması gerekir. Nerede başladığını ve nerede bittiğini bilmek oldukça kolaydır. Basitçe en yakın köşeden geçen ve eğim çizgisine dik olan bir çizgi çizin. Bu çizginin eğim çizgisiyle kesiştiği nokta başlangıç/bitiş noktasıdır.
Aslında, W degrade kutusunun genişliğini, H yüksekliğini ve degradenin açısını belirtirseniz, degrade çizgisinin uzunluğu şu olur:
Mutlak(W * günah(A)) + abs(H * cos(A))
Renkler
Renkler, her bir elemanın tanımlanabileceği virgülle ayrılmış bir listedir. Aşağıdaki şekilde:<цвет> [<процентное соотношение> | <длина>]?
Bu nedenle, degrade çizgisi üzerinde renklerin nereye yerleştirilmesi gerektiğini belirtmek gerekli değildir. Örneğin:
Renklerin hiçbirinin kendi konumu yoktur, bu nedenle tarayıcının kendisi konumlarını belirler.
Aslında basit örnek Yalnızca 2 renkle, 1. renk %0'a (degrade çizgisinin başlangıcına) ve 2. renk %100'e (degrade çizgisinin sonuna) yerleştirilecektir.
Ardından, üçüncü bir renk eklerseniz, %0'da renk 1'e, %50'de renk 2'ye ve %100'de renk 3'e sahip olmaya devam edeceksiniz.
Yukarıdaki örnekte 5 durak rengi belirtilmiş ve tarayıcı bunların göreli konumlarını %0, %25, %50, %75, %100 olarak hesaplamıştır. Bunun nedeni üniforma dağıtımı gradyan alanı boyunca.
Bir rengin konumu şu şekilde ifade edilebilir: yüzde(gradyan çizgisinin boyutuna göre) veya css uzunlukları(herhangi bir birimin geçerli olduğu CSS boyutları).
İşte bir örnek:
Gördüğünüz gibi, 5 durak renginin her birinin piksel cinsinden verilen kendi konumu vardır. Bu konumlar, gradyan çizgisinin başından itibaren hesaplanır.
Bu tür pozisyonları kullanarak birkaç tane alabilirsiniz. ilginç efektler. Örneğin, kendi başına bir degrade çizmemek için bir degrade kullanabilirsiniz, ancak birkaç renk bırakabilirsiniz:
Yukarıdaki resimde 7 renk vardır ve bunlar, bir sonraki rengin sonuncuyla tam olarak aynı konumda başlayacağı şekilde ayarlanmıştır; bu, tarayıcının iki durak rengi arasındaki boşluğu bir degrade ile doldurması gerekmediği anlamına gelir.
Elbette, hepsi sevimli ve eğlenceli, ancak konumlandırılmış renkleri konumlanmamış olanlarla karıştırırsanız ne olur? Ardından tarayıcıyı daha çok çalıştırır ve konum belirtmediğiniz renkleri otomatik olarak dağıtmasını istersiniz:
Bu basit örnekte, ikinci rengin (turuncu) konumu yoktur, bu nedenle tarayıcı bunu belirler ve önceki ayar ile sonraki renk arasında uygun bir yer bulur. Burada bu çok basittir, çünkü ikinci rengin yakın komşuları kendi konumlarına sahiptir, ancak yalnızca bazı renklerin konumları varsa veya önceki veya sonraki renklerin konumu yoksa, işler daha karmaşık hale gelir.
Birkaç örneğe bakalım:
Yukarıdaki örnekte, yalnızca üçüncü renk (sarı) %30 olarak konumlandırılmıştır. Diğerlerini daha iyi dağıtmak için, ilki %0'a, sonuncusu %100'e yerleştirilir ve geri kalan renkler aralarına dağıtılır (böylece turuncu doğrudan %0 ile %30 arasında ve kırmızı arasında ise kırmızı biter. %30 ve %100) .
Yukarıdaki örnekte, ilk ve son renkler konumlandırılmıştır, böylece geri kalanlar ikisi arasında eşit olarak dağıtılmıştır.
Tabii ki %0 ve %100 aşılamayacak zor limitler olsaydı çok kolay olurdu. Ancak önceki örnekte görebileceğiniz gibi, son renk %120'de bulunur ve bu nedenle diğer tüm renkler bu konuma göre uygun şekilde dağıtılmalıdır (bu durumda varsayılan başlangıç noktası %0 olarak kalır).
Ve tarayıcınızın daha fazla çalışmasını istiyorsanız, neden konum sırasını belirtmiyorsunuz?
Aslında, renkler sırayla olmalıdır, ancak hiçbir şey sizi bunu yapmamaktan alıkoyamaz ve yapmazsanız korkunç bir şey olmaz. Tarayıcınız aşağıda gösterildiği gibi her şeyi düzeltecektir:
%30'da bulunan ilk renkle (kırmızı) başlayalım. Ayrıca, ikinci renk %10'da yer almaktadır, bu zaten yanlıştır, çünkü yukarıda belirtildiği gibi renkler artan konumda belirtilmelidir. Yani burada tarayıcı ikinci rengin konumunu düzeltir ve onu önceki renkle aynı konuma ayarlar (%30). Ardından, %60'ta bulunan üçüncü renk (sarı) gelir, ki bu doğrudur, ancak bunu %40 ile dördüncü (mavi) takip eder. Yine konum ayarlanır ve önceki konumlanan renkle aynı değere ayarlanır.
Sonunda, yukarıdaki örnekte gösterildiği gibi, son renk (mavi) yanlış konumlandırılır ve tarayıcı onu önceki renkle aynı konuma getirir; bu durum ne hemen komşusu (sarı) ne de önündeki rengin komşusu (turuncu), bu yüzden ilk renge (kırmızı) geri dönmelidir. Böylece kırmızı ve mavi arasındaki tüm renkler %30'a ayarlanmıştır ve bu nedenle görünmezdir.
Aletler
Bu makaledeki tüm ekran görüntüleri, lineer bir gradyan işlevi girmenize ve öğenin üstünde gradyan kutusu, gradyan çizgisi, açı ve renk bilgilerini görmenize izin veren codepen'de yaptığım basit bir araçtan alınmıştır.Araçta her türlü hata ve sınırlama vardır (javascript yorumlarına bakın), bu yüzden ondan çok fazla bir şey beklemeyin.
Etiketler:
- css
- doğrusal gradyan
CSS gradyanları, birinden diğerine sorunsuz geçiş yapan iki veya daha fazla renkten oluşan bir arka plan oluşturmanıza olanak tanır. Uzun süredir bizimle birlikteler ve oldukça iyi tarayıcı desteğine sahipler. Çoğunluk modern tarayıcılar bunları önek olmadan anlar, IE9 ve daha eski sürümler için Gradient Filter vardır, ayrıca IE9 için SVG kullanabilirsiniz.
Gradyanlar, görüntülerin kullanıldığı her yerde kullanılabilir: arka planlarda, liste madde işaretleri olarak, content veya border-image içinde belirtilebilirler.
Doğrusal-gradyan
Doğrusal gradyanların kullanımı oldukça kolaydır. En temel gradyan için başlangıç ve bitiş renklerini ayarlamak yeterlidir:
Arka plan: doğrusal gradyan(turuncu, altın);
Çiçekler ikiden fazla herhangi bir sayı olabilir. Ayrıca degradenin yönünü ve renklerin kenarlıklarını (duraklarını) kontrol edebilirsiniz.
Yön, derece veya anahtar sözcüklerle belirtilebilir.
Anahtar kelimeler: yukarı = 0deg ; sağa = 90 derece; alta = 180deg - varsayılan değer; sola = 270 derece.
Anahtar kelimeler, örneğin sol üst köşede olduğu gibi çapraz bir gradyan oluşturmak için birleştirilebilir.
Aşağıda, leylaktan sarıya uzanan farklı yönlerin nasıl çalıştığını görebilirsiniz:
İşte ilk karenin kodu, örneğin:
Sol üst ( arka plan: doğrusal gradyan (sol üste, mor, kıpkırmızı, turuncu kırmızı, altın); )
Sağ üst köşenin 45deg ile aynı olmadığını unutmayın. Degradenin renkleri, degradenin yön çizgisine diktir. Sağ üst ile, çizgi sol alttan sağ üst köşeye, 45 derece ile gider - şeklin boyutundan bağımsız olarak kesinlikle bu açıda bulunur.
Fark, dikdörtgen şekillerde açıkça görülebilir:
Degradenin renkleri için de kesme noktaları ayarlayabilirsiniz, değerler birim veya yüzde olarak ayarlanır ve %100'den büyük ve %0'dan küçük olabilir.
% , em cinsinden ve öğenin sınırlarını aşan değerlerde ayar değerlerine örnekler:
Komşu renklerin durma noktaları ne kadar yakınsa, aralarındaki sınır o kadar net olacaktır. Bu şekilde kolayca çizgili arka planlar yapabilirsiniz:
Böylece, örneğin, bir yan sütun için ana öğenin tüm yüksekliğine kadar uzanan bir arka plan yapabilirsiniz:
Kenar çubuğunun arka planındaki şeritler, alternatif tam şeffaflık ve Beyaz renk%30 şeffaflık ile. Yarı saydam renklere sahip gradyanlar, herhangi bir arka plan rengi üzerine uygulanabildikleri için uygundur.
Örnekteki gradyan, zor bir uzun kodda ayarlanmıştır, çünkü şeritler yalnızca kenar çubuğu için arka planın üzerinde olmalıdır. Her şeyi bir blok için arka plan yapmaya çalışmazsanız, sorunu bir sözde eleman kullanarak çözebilirsiniz.
Kısıtlamaların olmaması durumunda, kod çok daha kısa olabilir:
Açık ( arka plan: şeftalipuff doğrusal gradyan(90deg, rgba(255, 255, 255, 0) %50, rgba(255, 255, 255, .4) %50) merkez merkez / 2em; ) .dark ( arka plan: çelik mavisi lineer-gradyan(rgba(0, 0, 0, 0) %50, rgba(0, 0, 0, .2) %50) merkez merkez / %100 1em; )
İlk satırda, elemanın arka plan rengini, türünü ve yönünü (renk ve yön atlanabilir), ikincisinde - degradenin renklerini ve aralarındaki sınırı tanımlarız, üçüncü - biz ortaya çıkan görüntünün konumunu ve boyutunu ayarlayın. en Ana bölüm- boyut. Varsayılan olarak, arka plan tekrarlanır, bu nedenle ortaya çıkan desen, öğenin arka planını dolduracaktır. Çok kolay ve anlaşılır :)
Tüm giriş bir satırda yapılabilir, ancak okunabilirlik için özellikle karmaşık degradeler için birkaç satır yazmak daha uygundur.
Saydam anahtar sözcüğünün saydam beyaz değil, saydam siyah anlamına geldiğini bilmek de önemlidir, bu nedenle onu Firefox'ta kullanmak başınızı aşağıdaki gibi belaya sokabilir:
Bunu önlemek için tam şeffaf renkler istenen gölge, örneğin beyaz: rgba(255, 255, 255, 0) veya siyah rgba(0, 0, 0, 0) . profesyonel Farklı yollar set renkleri okunabilir.
rgb notasyonunu öğrenmek belirli renk, kullanabilirsiniz CSS.koloratum, Lea Verou'dan bir enstrüman .
Her zamanki lineer-gradyan'a ek olarak, yinelenen-doğrusal-gradyan - yinelenen bir gradyan yapabilirsiniz.
Basit kod:
Arka plan: yinelenen-doğrusal-gradyan(yeşil, yeşil .5em, şeffaf .5em, şeffaf 1em);
Ne yazık ki, yinelenen degradeler iyi çalışmaz ve yalnızca kesinliği umursamayan desenler için iyidir. Düzgünlük gerekiyorsa, lineer-gradyan'ı background-size ve background-repeat ile birlikte kullanın.
Degradeler, kutu gölgesiyle aynı sınırlamaya sahiptir: ayrı renkler veya yönler verilemez. Bu, kod çoğaltmaya ve karmaşık gradyanlar oluşturma durumunda önişlemcilerin kullanılmasına acil bir ihtiyaç duyulmasına yol açar.
Başka bir sınırlama, degradelerin canlandırılmamasıdır, ancak bu, bir dereceye kadar üzerinde çalışılabilir.
İçin hızlı oluşturmaçok sayıda çapraz tarayıcı geçişi var kullanışlı araç: colorzilla.com/gradient-editor/. Modern tarayıcılar için kodun yanı sıra, 9. için eski IE ve SVG için kod sunacak.
Temel yönetim yetenekleriyle birleştirildi arka plan resimleri gradyanlar verir en geniş olanaklar tamamen görüntü kullanmadan değişen derecelerde karmaşıklıkta arka planlar oluşturmak için. Gradyanlar karmaşık ve ilginç desenler oluşturabilir, ancak bu başka bir konudur.
Son güncelleme: 21/04/2016
Degradeler, bir renkten diğerine yumuşak bir geçişi temsil eder. CSS3, bir öğenin arka planını oluşturmak için kullanılabilecek bir dizi yerleşik degradeye sahiptir.
CSS'deki gradyanlar herhangi bir özel özelliği temsil etmez. Yalnızca arka plan görüntüsü özelliğine atanan bir değer oluştururlar.
Doğrusal bir gradyan, bir öğenin bir ucundan diğerine düz bir çizgide uzanır ve bir renkten diğerine yumuşak bir geçiş sağlar.
Bir degrade oluşturmak için başlangıcını ve birkaç rengini belirtmeniz gerekir, örneğin:
arka plan görüntüsü: doğrusal gradyan (sol, siyah, beyaz);
Bu durumda, degradenin başlangıcı, sol değeri ile gösterilen öğenin sol kenarı olacaktır. Degrade renkler: siyah (siyah) ve beyaz (beyaz). Yani elemanın sol kenarından sağa doğru siyahtan beyaza yumuşak bir geçiş olacaktır.
Degradeleri kullanmanın bir dezavantajı vardır - tarayıcıların çeşitliliği sizi satıcı önekini kullanmaya zorlar:
webkit- /* için Google Chrome, Safari, Microsoft Kenarı, Opera sürüm 15 üstü */ -moz- /* Mozilla Firefox için */ -o- /* Opera için sürüm 15 üstü (Opera 12) */
Böylece, degradenin tam kullanımı şöyle görünecektir:
Doğrusal siyah beyaz degrade
Degradenin başlangıcını ayarlamak için şu değerleri kullanabilirsiniz: sol (soldan sağa), sağdan (sağdan sola), üstten (yukarıdan aşağıya) veya alttan (aşağıdan yukarıya). Örneğin, dikey bir gradyan şöyle görünür:
arka plan görüntüsü: doğrusal gradyan (alt, siyah, beyaz);
Çapraz yönü de iki değerle ayarlayabilirsiniz:
Arka plan görüntüsü: doğrusal gradyan (sol üst, siyah, beyaz);
Üst veya sol gibi belirli değerlere ek olarak, degradenin yönünü belirleyecek olan 0 ile 360 arasında bir açı da belirleyebilirsiniz:
arka plan görüntüsü: doğrusal gradyan (30 derece, siyah, beyaz);
Açıların büyüklüğünden sonra derece kelimesi belirtilir.
Örneğin, 0deg, degradenin sol taraftan başlayıp şu yöne doğru hareket ettiği anlamına gelir. Sağ Taraf, 45 derece belirtirken sol alt köşeden başlar ve sağ üst köşeye 45° açıyla hareket eder.
Degradenin başlangıcını tanımladıktan sonra, uygulanan renkleri veya bağlantı noktalarını belirleyebilirsiniz. Çiçeklerin iki olması gerekmez, daha fazlası olabilir:
Arka plan görüntüsü: doğrusal gradyan(üst, kırmızı, #ccc, mavi);
Uygulanan tüm renkler eşit olarak dağıtılır. Ancak, renk noktaları için belirli arka plan konumları da belirtebilirsiniz. Bunu yapmak için, renkten sonra noktanın konumunu belirleyen ikinci bir değer eklenir.
Arka plan görüntüsü: doğrusal gradyan(sol, #ccc, kırmızı %20, kırmızı %80, #ccc);
yinelenen gradyan
Yinelenen doğrusal gradyan ile yinelenen doğrusal gradyanlar oluşturabilirsiniz. Örneğin:
Arka plan görüntüsü: yinelenen-doğrusal-gradyan(sol, #ccc 20px, kırmızı 30px, rgba(0, 0, 126, .5) 40px); arka plan görüntüsü: -moz-yinelenen-doğrusal-gradyan(sol, #ccc 20px, kırmızı 30px, rgba(0, 0, 126, .5) 40px); arka plan görüntüsü: -webkit-yinelenen-doğrusal-gradyan(sol, #ccc 20px, kırmızı 30px, rgba(0, 0, 126, .5) 40px);
Bu durumda, gradyan bir şerit ile elemanın sol kenarından başlar. gri renk(#ccc) 20 piksel genişliğinde, 30 piksele kadar kırmızıya döner, sonra 40 piksele kadar açık maviye döner (rgba(0, 0, 126, .5)). Tarayıcı daha sonra öğenin tüm yüzeyini doldurana kadar degradeyi tekrarlar.
Altın Numaralar Güzel bir telefon numarası nasıl satılır
Kripto para madenciliği: basit kelimelerle nedir
En iyi dizüstü bilgisayar işletim sistemi: Eksiksiz inceleme
Sınıf arkadaşlarından müzik indirmek için programlar Sosyal ağ sınıf arkadaşlarından üzücü bir şarkı indirin
Yandex tarayıcısının mobil versiyonu