Dairesel css gradyanı. Radyal-gradyan (): Radyal gradyan. Birden çok renk durağı kullanma

CSS işlevleri

Tanım ve uygulama

Radyal-gradyan () CSS işlevi, yarıçapı boyunca çalışır, öğenin merkezinden dışarı doğru dairesel veya eliptik bir biçimde uzanır ve degrade renkler öğenin alanı boyunca eşit olarak dağıtılır.

Radyal degradeler oluşturma ilkesi, doğrusal degradeler (doğrusal-gradyan ()) oluşturmaya benzer, bunun için sadece başlangıç ​​rengini belirtmeniz gerekir - bu, degradenin ortasında ve yerleştirilecek olan son renk olacaktır. gradyanın sonunda.

Degradelerle çalışma hakkında daha fazla ayrıntı "" ve "" makalelerinde bulunabilir. Makalelerin eski tarayıcılarla çalışmanın nüanslarını vurguladığı ve çok sayıda örnek sunduğu gerçeğine dikkatinizi çekiyorum.

tarayıcı desteği

İşlev			Opera		IExplorer	Köşe
radyal gradyan ()	26.0 10.0 -webkit-	16.0 3.6 -moz-	12.1 11.1 -Ö-	6.1 5.1 -webkit-	10.0	12.0

CSS sözdizimi:

arka plan görüntüsü / arka plan: radyal gradyan ([anahtar kelime formu (veya boyutu)] x ekseni y ekseni konumunda, renk 1 - durak 1, . . . , renk n - n'yi durdur);

form

eliptik şekil varsayılan (belirtmeye gerek yoktur) olan elipsin değeri ile belirlenir ve dairesel şekil, dairenin değeri ile belirlenir.

anahtar kelime

Gradyan, mesafeye göre hesaplanır. yakın / uzak taraf veya en yakın / uzak köşeöğe.

Anlam	Açıklama
en yakın taraf	Gradyan, dairesel gradyanlar için elemanın merkezinden en yakın kenarına olan mesafeye göre hesaplanır ( x ekseni veya y ekseni) ve en yakın taraflara ( x ekseni ve y ekseni) gradyan eliptik ise. arka plan görüntüsü: radyal gradyan (en yakın tarafı %60 %60 oranında daire içine alın, erik, siyah, turuncu); arka plan görüntüsü: radyal gradyan (elipsin en yakın tarafı %60 %60, erik, siyah, turuncu);
en yakın köşe	Gradyan, elemanın merkeze en yakın köşesinden geçecek şekilde gerilir (boyut, elemanın en yakın köşesine olan mesafeye göre hesaplanır). arka plan görüntüsü: radyal gradyan (en yakın köşeyi %60 %50 oranında daire içine alın, erik, siyah, turuncu); arka plan görüntüsü: radyal gradyan (%60 %50'de elips en yakın köşe, erik, siyah, turuncu);
en uzak taraf	Gradyan, dairesel gradyanlar için elemanın merkezinden uzak kenarına olan uzaklığa göre hesaplanır ( x ekseni veya y ekseni) ve en yakın taraflara ( x ekseni ve y ekseni) gradyan eliptik ise. arka plan görüntüsü: radyal gradyan (%100 %50 en uzaktaki daire, erik, siyah, turuncu); arka plan görüntüsü: radyal gradyan (%100 %50'de elipsin en uzak tarafı, erik, siyah, turuncu);
en uzak köşe	Gradyan, elemanın merkez köşelerinden en uzak noktalardan geçecek şekilde gerilir (boyut, elemanın uzak köşesine olan mesafeye bağlı olarak hesaplanır). Bu varsayılandır. arka plan görüntüsü: radyal gradyan (%60 %60 en uzak köşeyi daire içine alın, erik, siyah, turuncu); arka plan görüntüsü: radyal gradyan (elips en uzak köşe %60 %60, erik, siyah, turuncu);

Boyut

Degrade şeklinin boyutunu belirtir. Daire veya elips değerlerini belirtmenize gerek yoktur, boyut belirtilmişse anahtar kelimelerin kullanılması yasaktır... belirtirseniz tek anlam, o zaman tarayıcı tarafından şu şekilde yorumlanacaktır: ... belirtirseniz iki anlam, sonra ilk değer tarayıcı tarafından şu şekilde yorumlanacak yatay yarıçap, a ikinci anlam nasıl eliptik bir eleman için dikey yarıçap .

dikkatinizi çekiyorum ki yalnızca bir değer belirtirseniz yüzde değerlerinin kullanılması yasaktır(yuvarlak eleman için yarıçap), kullanırken iki değer(eliptik gradyan için) bu değerlerin yüzde olarak belirtilmesine izin verilir.

Konum

Radyal degradenin başlangıç ​​konumu, - merkez anahtar sözcüğüyle belirtilir, ancak kullanılarak değiştirilebilir. uzunluk birimleri(Örneğin: piksel veya em), yüzde değerleri ve anahtar kelimeler CSS arka plan konumu özelliğinde kullanılan, arka plan görüntüsünün konumundan (konumundan) sorumludur.

Anlam	Açıklama
sol üst sol merkez sol alt sağ üst sağ merkez sağ alt orta üst merkez merkez orta alt	Resmin konumunu belirtir. İlk değer yatay konumdur ve ikinci değer dikeydir. Yalnızca bir anahtar kelime belirtirseniz, diğer değer "merkez" olacaktır.
x% y%	0% 0% (bu varsayılan). Sağ alt köşede 100% 100%. Yalnızca bir değer belirtilirse, diğer değer 50%.
x y	Resmin konumunu belirtir. İlk değer yatay konumdur ve ikinci değer dikeydir. Sol üst köşede var 0 0. Değerler piksel veya diğer CSS birimlerinde olabilir. Yalnızca bir değer belirtilirse, diğer değer 50%. Paylaşabilirsin faiz ve birimler.

Renk

Yalnızca "Önceden tanımlanmış renkler" değil, aynı zamanda herhangi bir "" - kullanılmasına izin verilir. onaltılık (HEX), RGB / -A ve HSL / -A renk değerleri .

Durmak

Değerler kesme noktaları (renk durur ) verilir uzunluk birimleri(Örneğin - piksel veya em) ve yüzde değerleri... Kesme noktası, tarayıcıya radyal degradenin belirtilen renge belirtilen değere ulaşması ve varsa bir sonraki renge sorunsuz geçiş yapması gerektiğini söyler.

kullanım örneği

Dairesel ve eliptik şekillerin radyal gradyanlarına bir göz atalım, farklarının ne olduğunu aşağıdaki pratik örnekte göreceğiz:

Bu örnekte, dört blok oluşturduk ve onlara radyal gradyanlar verdik. üst bloklarda var eliptik şekil ve alt bloklar yuvarlak biçimde.

Bir radyal gradyanı konumlandırma örneğine bakalım.

Bu örnekte oluşturduğumuz altı blok farklı gradyan şekilleriyle (dairesel ve eliptik) ve gradyanı her blok için kendi yolunda konumlandırarak, içindeki değerleri gösterir. piksel, yüzde ve kullanarak anahtar kelimeler.

Varsayılan radyal gradyan ortalanmışsa ve eleman kare ise, dairesel gradyan ile eliptik gradyan arasındaki farkı görmeyeceğinizi unutmayın.

Radyal degrade kesme noktalarının kullanımına ilişkin bir örnek düşünün:

Bu örnekte oluşturduğumuz altı blok: üç üst blok farklı üç alt Sadece tarafından gradyan şekli, kilit noktalar aynı:

• Birinci ve dördüncü blok – iki renkli gradyan kırmızı renk hangi sorunsuz dönüşür Yeşil Bu, elemanın geri kalanını kaplar.
• İkinci ve beşinci blok – üç renkli gradyan, merkezin %10'u kırmızı renk hangi sorunsuz dönüşür Yeşil, %50'lik bir durma noktası ile, sırayla, sorunsuz bir şekilde girer Mavi bu öğenin geri kalanını alır.
• Üçüncü ve altıncı blok – üç renkli gradyan, merkezin %50'si burada kırmızı renk hangi sorunsuz dönüşür Yeşil, % 85'lik bir durma noktası ile, sırayla, sorunsuz bir şekilde Mavi bu, elemanın geri kalan küçük kısmını kaplar.

Şimdi CSS'de bir radyal degradenin boyutunun nasıl kontrol edileceğine bir göz atalım.

Bu örnekte üç blok oluşturduk:

İlk blok- belirttik tek anlam Tarayıcı tarafından şu şekilde yorumlanan 50 piksel yuvarlak bir eğim için yarıçap... Gradyan için sivri 7 renk. En dıştaki rengin alanın geri kalanını doldurduğunu unutmayın.

ikinci blok- belirttik iki anlam yüzde olarak: ilk değer - yatay yarıçap, a ikinci anlam - dikey yarıçap eliptik bir gradyan için. Gradyan için sivri 8 renk. Alanın geri kalanını dolduran aşırı rengi beyaza ayarladığımızı lütfen unutmayın.(bir seçenek yalnızca degrade şeklini bırakmaktır).

üçüncü blok- belirttik iki anlam uzunluk birimlerinde (piksel ve em): ilk değer - yatay yarıçap, a ikinci anlam - dikey yarıçap eliptik bir eleman için Gradyan için sivri 7 renk.

CSS, doğrusal gradyanlarla sınırlı değildir. Ayrıca, karşılık gelen radyal-gradyan () işlevi tarafından ayarlanan bir radyal gradyan da emrinizdedir.

Gradyan fonksiyonlarının sözdizimi hakkında önceki derslerde yeterince yer verdiğimiz için, artık üzerinde durmamıza gerek yok - buradaki parametreler radyal-gradyan () ile benzerdir, sadece fonksiyonun adını değiştirirsiniz.

Arka plan görüntüsü: radyal gradyan (# 5b4ffc, # df02cd);

konumlandırma

Radyal gradyan vektörünün orijini, eliptik şeklin merkezindedir (sırasıyla, varsayılan olarak stilize edilmiş öğenin merkezinde ortalanır), gradyanın daireler halinde yayıldığı yerden. Merkez, arka plan konumunun aldığı aynı değerler kullanılarak dengelenebilir. Bir konum belirtmeden önce at önekini kullanın:

Arka plan görüntüsü: radyal gradyan (sol üstte, # 5b4ffc, # df0253);

Şekil ve yarıçap

Radyal gradyan şekli dairesel veya eliptik olabilir. Yarıçapı veya anahtar kelimelerden birini belirterek şekli tanımlayabilirsiniz:

• elips - eliptik şekil gradyanı (varsayılan);
• daire - yuvarlak bir şeklin gradyanı.

arka plan görüntüsü: radyal gradyan (daire, # 5b4ffc, # df0253);

Yarıçap değeri, mevcut herhangi bir CSS biriminde belirtilebilir. Bir değer belirtirseniz, dairenin yarıçapı olarak alınacaktır. İki değer, eksen boyunca elipsin yarıçapı olarak yorumlanır. x ve eksen boyunca yarıçap Y... Varsayılan olarak, radyal gradyan, öğenin arka planını tamamen doldurur.

Arka plan görüntüsü: radyal gradyan (elips 180px 90px, # a09af1, # 000038);

Boyut

Radyal degradenin boyutunu kontrol etmek için birkaç anahtar sözcük vardır. Her birine daha yakından bakalım:

Bağlantı noktaları

Tıpkı doğrusal bir degradede olduğu gibi, çok renkli bir radyal degrade oluşturmak için belirli bir mesafeye sahip birden çok renk bağlantı noktası ekleyebilirsiniz:

Arka plan görüntüsü: radyal gradyan (# 144bf1 %30, # 3ee9ca %60, # 0a38e5);

tarayıcı desteği

Doğrusal gradyan ()'a benzer şekilde, radyal gradyan () işlevini projenizde uygulayacaksanız, CSS kodunu satıcı öneklerinden bahseden bildirimlerle tamamlamaya ve daha eski IE tarayıcıları için bir geri dönüş rengi sağlamaya değer.

Eğiticinin devamı: yinelenen-radyal-gradyan () - yinelenen bir radyal gradyan.

gradyan arka plan

CSS Degradeleri, belirtilen iki veya daha fazla renk arasında yumuşak geçişler görüntülemenize olanak tanır.

CSS iki tür degrade tanımlar:

• Doğrusal gradyanlar (aşağı / yukarı / sola / sağa / çapraz)
• Radyal gradyanlar (merkezleriyle tanımlanır)

CSS doğrusal gradyanları

Doğrusal bir degrade oluşturmak için en az iki renk durağı tanımlamanız gerekir. Renk durakları, aralarında karıştırmak istediğiniz renklerdir. Degrade efektiyle birlikte başlangıç ​​noktasını ve yönü (veya açıyı) da ayarlayabilirsiniz.

Sözdizimi

arka plan: doğrusal gradyan ( yön, renk-stop1, renk-stop2, ...);

Doğrusal Degrade-Yukarıdan Aşağıya (varsayılan)

Aşağıdaki örnek, üstten başlayan doğrusal bir gradyanı göstermektedir. Kırmızı başlıyor, sarı gidiyor:

Örnek

#grad (
arka plan: doğrusal gradyan (kırmızı, sarı);
}

Doğrusal Gradyan-Soldan Sağa

Aşağıdaki örnek, soldan başlayan doğrusal bir gradyanı göstermektedir. Kırmızı başlıyor, sarı gidiyor:

Örnek

#grad (
arka plan: doğrusal gradyan (sağa, kırmızı, sarı);
}

Lineer Gradyan-Çapraz

Hem yatay hem de dikey başlangıç ​​konumlarını belirterek çapraz olarak bir degrade oluşturabilirsiniz.

Aşağıdaki örnek, sol üst köşeden başlayan (ve sağ alt köşeye giden) doğrusal bir gradyanı göstermektedir. Kırmızı başlıyor, sarı gidiyor:

Örnek

#grad (
arka plan: doğrusal gradyan (sağ altta, kırmızı, sarı);
}

açıları kullanma

Degradenin yönü üzerinde daha fazla kontrole ihtiyacınız varsa, önceden tanımlanmış yönler (alt, üst, sağ, sol, sağ alt vb.) yerine bir açı tanımlayabilirsiniz.

Sözdizimi

arka plan: doğrusal gradyan ( açı, renk-stop1, renk-stop2);

Açı, yatay çizgi ile gradyan çizgisi arasındaki açı olarak belirtilir.

Aşağıdaki örnek, doğrusal degradelerde köşelerin nasıl kullanılacağını gösterir:

Örnek

#grad (
arka plan: doğrusal gradyan (-90 derece, kırmızı, sarı);
}

Birden çok renk durağı kullanma

Aşağıdaki örnek, birden çok renk durağına sahip doğrusal bir gradyan (yukarıdan aşağıya) göstermektedir:

Örnek

#grad (
arka plan: doğrusal gradyan (kırmızı, sarı, yeşil);
}

Aşağıdaki örnek, bir gökkuşağı rengi ve biraz metin içeren doğrusal bir degradenin (soldan sağa) nasıl oluşturulacağını gösterir:

gradyan arka plan

Örnek

#grad (
arka plan: doğrusal gradyan (sağa, kırmızı, turuncu, sarı, yeşil, mavi, çivit mavisi, menekşe);
}

Not: Internet Explorer 9 ve önceki sürümleri degradeleri desteklemez.

"/> Demoyu düzenleyicide görüntüleyin

Şeffaflığı kullanma

CSS Gradyanları, solma efektleri oluşturmak için kullanılabilen şeffaflığı da destekler.

Saydamlık eklemek için renk duraklarını tanımlamak için RGBA () işlevini kullanırız. RGBA () işlevindeki son parametre 0 ile 1 arasında bir değer olabilir ve rengin şeffaflığını belirtir: 0 tam şeffaflığı, 1 tam rengi (saydamlık yok) belirtir.

Aşağıdaki örnek, soldan başlayan doğrusal bir gradyanı göstermektedir. Tamamen şeffaf bir şekilde başlayıp tam kırmızıya iniyor:

Örnek

#grad (
arka plan: doğrusal gradyan (sağa doğru, rgba (255,0,0,0)), rgba (255,0,0,1));
}

Yinelenen doğrusal gradyan

Doğrusal tekrar gradyan işlevi (), doğrusal gradyanları tekrarlamak için kullanılır:

Örnek

Yinelenen bir doğrusal gradyan:

#grad (
arka plan: yinelenen doğrusal gradyan (kırmızı, sarı %10, yeşil %20);
}

CSS radyal gradyanları

Radyal gradyan, merkezi tarafından tanımlanır.

Radyal degrade oluşturmak için ayrıca en az iki renk durağı tanımlamanız gerekir.

Sözdizimi

arka plan: radyal gradyan ( şekil boyutu NS konum, başlangıç ​​rengi, ..., son renk);

Varsayılan olarak şekil elipstir, boyut en uzak köşedir ve konum merkezdir.

Radyal Gradyan - Renk durakları arasındaki tekdüze mesafe (varsayılan)

Aşağıdaki örnek, tek tip renk duraklarına sahip bir radyal degradeyi göstermektedir.

Radyal degradeler, doğrusal olanlardan farklı şekilde oluşturulur. Doğrusal olanların renkleri, yönü belirleyen çizgiye dik yerleştirilmişse, radyal renkler verilen merkezden uzaklaşır ve gradyan bir daire veya elips şeklini alabilir.

En basit gradyan için renkleri ayarlamanız yeterlidir:

Arka plan: radyal gradyan (altın, turuncu kırmızı);

Varsayılan olarak, degradenin merkezi ortalanır ve degrade eliptiktir:

Renklere ek olarak, degrade şekillendirilebilir, konumlandırılabilir ve boyutlandırılabilir. Seçenekler, doğrusal gradyanlardan daha karmaşık bir şekilde birleşir ve davranır.

form(son gradyan şekli) bir daire ve bir elips olabilir. Varsayılan bir elipstir, gradyan, gerekirse gererek elemanın tüm boş alanını işgal etme eğilimindedir.

Gradyanın bir daire şekline sahip olması için, bunun açık bir şekilde çember anahtar kelimesi kullanılarak belirtilmesi gerekir.

Şekil belirtilmemiş ancak boyut belirtilmişse - bir değer dairenin yarıçapını belirler, iki değer varsa - gradyan bir elips şeklini alır. Boyutlar mevcut olduğunda degradenin şeklinin açıkça tanımlanması yoksayılır.

Konum nerede bulunacağını belirler merkez gradyan. Doğrusal gradyan için kullanılan anahtar sözcüklerin aynısı kullanılır, ancak at önekiyle birlikte: üstte, sağda, altta, solda ve merkezde varsayılandır.

Degradeyi belirli bir tarafa konumlandırmak için birbirleriyle birleştirilebilirler, örneğin: sağ üstte - sağ üst köşede.

Aşağıda farklı pozisyonların nasıl çalıştığını görebilirsiniz:

İlk kare kodu:

Arka plan: radyal gradyan (sol üstte, mor, kıpkırmızı, turuncu kırmızı, altın);

Ayrıca degradenin tam konumunu, örneğin %20 %50 veya 10 piksel 150 piksel olarak ayarlayabilirsiniz.

Boyut son gradyan şeklinin boyutlarını belirler. Eliptik gradyanlar için değerler yüzde olarak belirtilebilir, yuvarlak gradyanlar için verilemez.

Bir değer verilirse, dairesel gradyanın yarıçapı olarak kabul edilir. İki değer belirtilirse - birincisi elipsin yatay yarıçapı, ikincisi - dikey olarak kabul edilir.

Aşağıda yuvarlak ve eliptik gradyan örnekleri verilmiştir. Şeklin şekli verilen boyutlara göre belirlenir:

Anahtar kelimeleri de kullanabilirsiniz:

en yakın taraf - Degrade, degradenin merkezine en yakın öğenin sınırında sona erer. Bu bir elipsse, degrade öğenin tüm sınırlarına dokunur. en uzak taraf - Degrade, öğenin en uzak sınırında sona erer. Bu bir elipsse, degrade öğenin tüm sınırlarına dokunur. en yakın köşe - Uç şekli, öğenin degradenin merkezine en yakın köşesinden geçecek şekilde gerilir. Hedef şekil bir elips ise, degrade tüm şekli dolduracak şekilde uzar. Bu parametre ile degrade, kısmen sınırlarının ötesine geçerek tüm şekli doldurur. en uzak köşe - En yakın köşeye benzer, ancak son şeklin degradenin merkezinden en uzak köşeden geçmesi dışında. Varsayılan değer.

Kodun eylemini daha iyi görebilmeniz için bazı degradelere alt konum eklendi:

Radyal gradyan aynı zamanda tekrar ediyor olabilir - bu tekrar eden radyal gradyandır.

Basit kod:

Arka plan: yinelenen-radyal-gradyan (daire, koyu haki, koyu haki 0,5em, şeffaf 0,5em, şeffaf 1,5em);

Doğrusal gradyanda olduğu gibi, yinelenen gradyan çok düzgün bir şekilde oluşturulmaz.

Birkaç arka planı farklı parametrelerle birleştirerek harika şeyler elde edebilirsiniz:

Desenler oluştururken mutlak (px) değil de göreli birimler (em,%) kullanırsanız, elde edilen desenlerin boyutu yalnızca yazı tipi boyutunu değiştirerek kolayca ayarlanabilir.

CSS Gradyanı bir renkten diğerine geçişleri temsil eder.

Gradyanlar, lineer-gradyan () ve radyal-gradyan () işlevleri kullanılarak oluşturulur.

Arka plan, arka plan görüntüsü, kenarlık görüntüsü ve liste stili görüntü özelliklerinde bir gradyan arka planı ayarlanabilir.

CSS'de degrade nasıl yapılır

tarayıcı desteği

IE: 10.0
Firefox: 16, 3.6 -moz-
Krom: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Tarayıcı: 4.4, 4.1 -webkit-
Android için Chrome: 44

1. Doğrusal gradyan ()

Pirinç. 1. Gradyan çizgisi, başlangıç ​​ve bitiş noktaları ve eğim açısı

Doğrusal Gradyan bir yönün belirtildiği iki veya daha fazla renk kullanılarak oluşturulur veya gradyan çizgisi.

Yön belirtilmezse, varsayılan kullanılır - yukarıdan aşağıya.

Varsayılan degrade renkleri, degrade çizgisine dik bir yönde eşit olarak dağıtılır.

Arka plan: doğrusal gradyan (anahtar kelime (anahtar kelime çiftleri), birinci renk, ikinci renk vb. kullanılarak açı / yan veya eğim);

Yön gradyan iki şekilde belirtilebilir:
eğim açısını kullanma değeri, öğe içindeki çizginin eğim açısını belirleyen derece cinsinden.

Div (yükseklik: 200 piksel; arka plan: doğrusal gradyan (45 derece, #EECFBA, # C5DDE8);)

anahtar kelimeleri kullanma sırasıyla 0 derece, 90 derece, 180 derece ve 270 derece gradyan açısına karşılık gelen yukarı, sağa, aşağı, sola.

Div (yükseklik: 200 piksel; arka plan: doğrusal gradyan (sağa doğru, # F6EFD2, # CEAD78);)

Yön bir çift anahtar sözcükle belirtilirse, örneğin sol üstte, degradenin başlangıç ​​noktası ters yönde, bu durumda sağ altta olacaktır.

Div (yükseklik: 200 piksel; arka plan: doğrusal gradyan (sol üstte, toz mavisi, pembe);)

Renklerin eşit olmayan dağılımı için, her rengin başlangıç ​​konumu, degradenin durakları ile belirtilir. renk durur. kesme noktaları% olarak ayarlanır, burada %0 başlangıç ​​noktası, %100 bitiş noktasıdır, örneğin:

Div (yükseklik: 200 piksel; arka plan: doğrusal gradyan (üste, # E4AF9D %20, # E4E4D8 %50, # A19887 %80);)

Renk şeritlerinin net bir dağılımı için, sonraki her renk bir önceki rengin durma noktasından başlamalıdır:

Div (yükseklik: 200 piksel; arka plan: doğrusal gradyan (sağa, # FFDDD6 %20, # FFF9ED %20, # FFF9ED %80, #DBDBDB %80);)

2. Radyal-gradyan ()

Radyal gradyan renklerin bir noktadan (degradenin merkezi) çıkması ve bir daire veya elips şeklini çizerek dışarı doğru eşit olarak dağılması bakımından doğrusaldan farklıdır.

Arka plan: radyal gradyan (gradyan şekli / boyut / merkez konumu, birinci renk, ikinci renk vb.);

Gradyan şekli anahtar kelimeler daire veya elips tarafından tanımlanır. Şekil belirtilmemişse, varsayılan radyal gradyan eliptiktir.

Div (yükseklik: 200 piksel; arka plan: radyal gradyan (beyaz, # FFA9A1);)

Merkez konumu arka plan konumu özelliğinde kullanılan anahtar sözcükleri kullanarak ve at önekiyle birlikte ayarlayın. Merkez konumu belirtilmemişse, varsayılan merkezdedir.

Div (yükseklik: 200 piksel; arka plan: radyal gradyan (üstte, #FEFFFF, # A7CECC);)

%, em veya px uzunluk birimlerinde belirtilen bir çift değer, eliptik degradenin boyutunu kontrol eder. İlk değer elipsin genişliği, ikincisi yüksekliktir.

Div (yükseklik: 200 piksel; arka plan: radyal gradyan (%40 %50, # FAECD5, # CAE4D8);)

Gradyan boyutu anahtar kelimeler kullanılarak belirtilir. Varsayılan, en uzak köşedir (en uzak köşeye).

div (yükseklik: 200 piksel; arka plan: radyal gradyan (en uzak köşeyi 100 piksel 50 piksel, # FBF2EB, # 352A3B);)

Radyal gradyan yardımıyla top, düğme gibi gerçekçi 3D şekiller oluşturabilirsiniz.

Top

div (genişlik: 200 piksel; yükseklik: 200 piksel; kenarlık yarıçapı: %50; kenar boşluğu: 0 otomatik; arka plan: radyal-gradyan (%65'te daire, %15, su, koyu mavi);)

Buton

.wrap (yükseklik: 200 piksel; dolgu: 50 piksel 0; arka plan: #cccccc;) .button (genişlik: 100 piksel; yükseklik: 100 piksel; sınır yarıçapı: %50; kenar boşluğu: 0 otomatik; arka plan: radyal eğim (en uzak kenar) sol üstte elips, beyaz, #aaaaaa); kutu gölgesi: 5px 10px 20px rgba (0,0,0,0.3), -5px -10px 20px rgba (255,255,255,0.5);)

Posta pulu

Degradelerde saydam bir renk kullanarak aşağıdaki efektleri oluşturabilirsiniz.

">