CSS: arka plan için doğrusal gradyan. Doğrusal gradyan (): arka planda doğrusal gradyan
Degrade - Seçilen alanı, aralarında pürüzsüz geçişlerle bir dizi renk tonuyla doldurma. Degrade, iki veya daha fazla belirlenmiş renk tonları arasında pürüzsüz bir geçiş görüntülemek için kullanılır. Bir degrade örneği:
Önceden, arka plan görüntüleri degrade bir etki oluşturmak için kullanıldı. Şimdi degrade bir arka plan oluşturmak için CSS3 kullanabilirsiniz. CSS3 gradyanları olan elemanlar, analoglar - bağlı arka plan görüntülerinden daha iyi görünmek için daha iyi görünmek daha iyidir, çünkü degrade doğrudan belirtilen alanın altındaki bir tarayıcı tarafından üretilir.
Lütfen, CSS gradyanının tarayıcı tarafından oluşturulan bir arka plan görüntüsü olduğunu ve arka plan rengini değil, arka plan görüntüsü özelliğinin değeri olarak tanımlanır. Bu, degradenin sadece arka plan görüntü özelliğinin değeri olarak değil, arka plan görüntüsünü, örneğin liste tarzı görüntü ve arka planda ekleyebileceğiniz her yerde belirtilebileceği anlamına gelir.
CSS3, iki tür degradeyi tanımlar:
- Lineer gradyan (Doğrusal gradyan) - renkten renge düz bir çizgide yumuşak bir geçiş.
- Radyal gradyan (Radyal gradyan) - renkten rengine her yöne bir noktadan pürüzsüz bir geçiş.
Lineer gradyan
Doğrusal bir gradyan düz bir çizgide yayılır ve bir renkten diğerine pürüzsüz bir geçiş göstermiştir. Doğrusal gradyan () işlevi kullanılarak doğrusal bir gradyan oluşturulur. İşlev, belirtilen renkler arasında doğrusal bir gradyan olan bir görüntü oluşturur. Degradenin boyutu, uygulandığı öğenin boyutuna karşılık gelir.
Doğrusal-gradyan () işlevi aşağıdaki noktalı virgülleri, argümanları alır:
- İlk argüman olarak, degrade hat yönünün yönünü belirleyen bir açı veya anahtar kelimeler vardır. İsteğe bağlı argüman.
- Her biri için iki veya daha fazla renkten oluşan liste paylaşımlı listesi durma konumunu izleyebilir.
En basit doğrusal gradyan, ilk ve son rengi tanımlayan iki argüman gerektirir:
Div (siyah, beyaz); genişlik: 200px; yükseklik: 200px;) Deneyin »
İki argümanın işlevi iletildiğinde, yukarıdan bir başlangıç \u200b\u200bnoktasıyla dikey bir gradyan takılır.
Degrade çizgisinin yönü iki şekilde belirlenebilir:
İlk argüman olarak derecelerin kullanılması, degradenin yönünü belirleyen, örneğin, 0deg (İngiltere Derecesi Derecesi'nden Degrid Derecesi) açısı, gradyan hattını belirler. Elemanın üst kısmına alt tarafı, 90deg açısı, gradyan çizgisini sağa sola ve vb. belirler. Basitçe söylemek gerekirse, olumlu açılar saat yönünde döndürülür, sırasıyla saate karşı olumsuzdur. İlk argüman olarak anahtar kelimeleri kullanarak ayrıca anahtar kelimeleri "yukarıdan", "sağdan", "alttan" veya "sola" iletebilir, "0deg" "90deg" "180deg" "" 270deg ", gradyanların çizgilerinin açılarıdır. sırasıyla.
Ayrıca açıyı iki anahtar kelimeyi kullanarak da ayarlayabilirsiniz, örneğin sağ üstte - degrade çizgisi sağ üst köşeye yönlendirilir.
Farklı yönlerde belirtilen bir gradyan örneği:
Div (kenar boşluğu: 10px; genişlik: 200px; yükseklik: 200px; şamandıra: sol;) # (sola, siyah, kırmızı);) #two (arka plan-görüntü: doğrusal gradyan (sol üst, siyah, kırmızı) ;) #THREE (arka plan-resim: doğrusal gradyan (65deg, siyah, sarı);) deneyin "
Daha önce de belirtildiği gibi, doğrusal bir gradyan, virgülle ayrılan ikiden fazla renkten bir listeyi içerebilir, tarayıcı bunları mevcut alan boyunca eşit bir şekilde dağıtacaktır:
Div (marj: 10px; genişlik: 200px; yükseklik: 200px; şamandıra: sol;) #one (arka plan-resim: doğrusal gradyan (sağ, kırmızı, mavi, sarı);) #two (arka plan-resim: doğrusal- Gradyan (sol üst, mavi, beyaz, mavi);) deneyin »
Renkten sonra, oyunun durma konumunu belirlemeye izin verilir, bu, gradyanın başlangıç \u200b\u200bve bitiş noktasına göre rengin konumunu (bir rengin başka bir yerde hareket etmeye başlar) belirler. Durma konumu, CSS'de veya yüzde oranında desteklenen ölçüm birimleri kullanılarak belirtilir. Faiz kullanırken, durma pozisyonunun yeri degrade çizgisinin uzunluğuna bağlı olarak hesaplanır. % 0 değeri degradenin ilk noktaları,% 100 - sonuncusu.
Div (marj: 10px; genişlik: 200px; yükseklik: 200px; şamandıra: sol;) #one (arka plan-resim: doğrusal gradyan (sağ üst, mavi, beyaz% 70, mavi);) #two (arka plan-görüntü : doğrusal gradyan (sağ alt, sarı% 10, beyaz, kırmızı, siyah% 90);) #three (sağa doğru, siyah% 10, sarı, siyah% 90);) deneyin "
Renk değeri belirtilebilir farklı yollarÖrneğin: Renk adını belirtin, RGB (RGBA) veya HSL (HSA) sözdizimini kullanarak onaltılık değerleri (HEX) kullanın. Örneğin, bir gradyanın şeffaflık ile kullanılması, arka plan rengiyle birlikte kullanılabilir veya ilginç görsel efektler oluşturmak için bir gradyan altında bulunan bir görüntü:
Div (marj: 10px; genişlik: 300px; yükseklik: 100px; arka plan-renk: yeşil;) # (arka plan: doğrusal gradyan (sol, RGB (255,255,0), RGBA (255,255,0,0,0) );) #two (arka plan: doğrusal gradyan (RGB (255,255,255), RGBA (255,255,255,0));)
Vlad Merzehevich
Degrade, bir renkten diğerine pürüzsüz bir geçiş denir ve bunlar arasında birkaç renk ve geçiş yapılabilir. Degradeler yardımı ile, web tasarımının en tuhaf etkileri, sözde boyut, parlama, arka plan, vb. Gibi de bir degrade ile oluşturulur, elemanlar bir fotondan daha güzel görünüyor.
Bir gradyan eklemek için ayrı bir özellik yoktur, çünkü bir arka plan görüntüsü olarak kabul edilir, bu nedenle Örnek 1'de gösterildiği gibi arka plan görüntüsü özelliğini veya arkaplanın evrensel özelliğini eklenir.
Örnek 1. Degrade
Burada, çevresindeki deyim geleneksel olarak Prosaic bir görüntü için başlar, ancak dil oyunu aktif diyalog anlayışına yol açmaz.
Sonuç bu örnek Şekil l'de gösterilmiştir. bir.
İncir. 1. Paragraf için doğrusal gradyan
En basit durumda, Örnek 1'de gösterilen iki renkte gösterilen konum, ilk önce degradenin başlayacağı, sonra ilk ve son renge yazılır.
Pozisyon yazmak için, ilk olarak yazılır ve ardından anahtar kelimeler üst, alt ve sol, sağ, bunların yanı sıra kombinasyonları eklenir. Kelimelerin sırası önemli değil, sol üste veya soldan sola yazabilirsiniz. Sekmesinde. Şekil 1, # 000 ve #FFF renkleri için elde edilen farklı pozisyonları ve gradyan türünü, siyahtan beyaza farklıdır.
| Durum | Açıklama | Görünüm | |
|---|---|---|---|
| en üste | 0deg | Aşağı. | |
| sola. | 270deg | Sağdan sola doğru. | |
| tabanına | 180deg | Yukarıdan aşağıya. | |
| sağa | 90deg | Soldan sağa. | |
| soldan sola. | Sağ alt köşeden sol üste. | ||
| sağa doğru | Sol sol köşeden sağa doğru. | ||
| sol alttan. | Sağ üst açıdan aşağıya doğru. | ||
| sağ alt | Sol üst köşeden sağ alttan. |
Bir anahtar kelime yerine, degradenin yönünü gösteren degrade çizgisinin eğim açısını ayarlamasına izin verilir. Başlangıçta, pozitif veya negatif bir açı değeri yazılır, daha sonra DEG eklenir.
Sıfır derece (veya 360º), alt kısımdaki gradyana karşılık gelir, daha sonra geri sayım saat yönünde gerçekleştirilir. Degrade hattının eğim açısının geri sayımı aşağıda gösterilmiştir.
Sol üst değeri için ve iki çapraz olarak zıt açısal noktaları bağlamak için elemanın boyutuna bağlı olarak, gradyan hattının eğim açısına benzer.
İki renkteki karmaşık gradyanlar oluşturmak için yeterli olmayacak, sözdizimi sınırsız miktarlarını eklemenizi, renkleri virgül içinden kaldırmanıza izin verir. Şeffaf bir renk (anahtar kelime şeffaf), yarı saydam olarak kullanabilirsiniz. rgba formatıÖrnek 2'de gösterildiği gibi.
Örnek 2. Yarı saydam renkler
HTML5 CSS3 IE 9 IE 10 CR OP SA FX
Bu örneğin sonucu Şekil 2'de gösterilmiştir. 2.
İncir. 2. Yarı saydam çiçekler ile degrade
Renkleri degradede doğru bir şekilde konumlandırmak için, renk değeri yüzde, piksel veya diğer birimlerin konumunu gösterir. Örneğin, yazma kırmızı% 0, Turuncu% 50, Sarı 100% Bu, degradenin kırmızı ile başladığında, daha sonra% 50'si turuncuya geçtiği ve ardından Sarı'yı \u200b\u200bsonuna kadar. Basitlik için,% 0 ve% 100 gibi aşırı birimler yazılamaz, varsayılan olarak kastedilmektedir. Örnek 3'te, ikinci rengin üçten gelen konumunun% 36 olarak ayarlandığı bir degrade düğmesi oluşturduğu gösterilmiştir.
Örnek 3. Degrade düğmesi
HTML5 CSS3 IE 9 IE 10 CR OP SA FX
Bu örneğin sonucu Şekil 2'de gösterilmiştir. 3.
İncir. 3. Degrade düğmesi
Renk pozisyonunun görevi nedeniyle, sonuçta bir dizi tek renkli şerit veren renkler arasında keskin geçişler elde edebilirsiniz. Bu nedenle, iki renk için dört renk belirtmek için gereklidir, ilk iki renk aynıdır ve% 0'dan% 50'ye başlar, kalan renkler de birbirleriyle aynıdır ve% 50'den% 100'e kadar devam eder. Örneğin, 4 şerit bir Web sayfası arka planı olarak eklenir. Aşırı değerlerin otomatik olarak ikame edildiği gerçeğinden dolayı, onları belirtemezsiniz, bu yüzden sadece iki renk yazmak yeterlidir.
Örnek 4. Monoton şeritler
HTML5 CSS3 IE 9 IE 10 CR OP SA FX
Tipik Avrupa burjuvazitesi ve bütünlüğü, resmi dil tarafından zarif bir şekilde gösterilmektedir.
Bu örneğin sonucu Şekil 2'de gösterilmiştir. 4. Degradenin renklerinden birinin saydam olduğuna dikkat edin, bu nedenle web sayfasının renginde dolaylı olarak değişir.
İncir. 4. Yatay çizgilerin arka planı
Degradeler web tasarımcıları arasında oldukça popülerdir, ancak ekleri her tarayıcı için farklı özelliklerle karmaşık ve renk kümesini belirtir. Degradeler oluşturmanızı ve kodlara eklemeniz için kolaylaştırmak için, gradyanları yapılandırmanın kolay olduğu ve hemen istediğiniz kodu almanız kolay olan www.colorzilla.com/gradient-Dititor web sitesini öneririm. Hazır şablonlar (önizleme), renk konfigürasyonu (ayarlamalar), yani filtreler aracılığıyla destekleyen bitiş kodunu (CSS) vardır. Photoshop veya başka bir grafik düzenleyicide çalışanlar için, gradyanların oluşturulması bir yüz gibi görünecek, geri kalanının hızlı bir şekilde anlamak zor olmayacak. Genel olarak, her şekilde tavsiye ederim.
CSS gradyanları, bir diğerine sorunsuz bir şekilde hareket eden, iki veya daha fazla renk bir arka plan yapmanıza olanak sağlar. Uzun zamandır bizimle birlikteler ve tarayıcılara oldukça iyi bir destek var. Çoğu modern tarayıcılar önek olmadan onları anlar, IE9 ve yaşlı için degrade bir filtre var, ayrıca IE9 için SVG kullanabilirsiniz.
Degradeler, resimlerin kullanıldığı her yerde kullanılabilir: Arka planlarda, listelerin bültenleri olarak, içerik veya kenarlık görüntülerinde belirtilebilirler.
Doğrusal gradyan.
Doğrusal gradyanların kullanımı oldukça kolaydır. İlköğretim gradyanı için, ilk ve son renkleri ayarlamak yeterlidir:
Arka plan: doğrusal gradyan (orangered, altın);
Renkler ikiden fazla miktarda olabilir. Ayrıca, gradyanın yönünü ve sınırların (durma noktalarını) kontrol edebilirsiniz.
Yönler derece veya anahtar kelimeler ayarlanabilir.
Anahtar Kelimeler: üstüne \u003d 0deg; sağa \u003d 90deg; alt \u003d 180deg - varsayılan değer; sola \u003d 270deg.
Anahtar kelimeler Örneğin soldan sola bir çapraz gradyan elde etmek için birbirleriyle birleştirilebilir.
Aşağıda lila'dan sarıya doğru uzanırken farklı yönler olarak görülebilir:
İşte ilk kare kodu, örneğin:
Sol üst (arka plan: doğrusal gradyan (sol üst, mor, koyu kırmızı, orangered, altın);)
Sağ üst üste 45deg ile aynı olmadığı unutulmamalıdır. Degrade renkleri degrade yön çizgilerine diktir. Sağa ne zaman sağa, çizgi sol alttan sağ üstten sağ üstten gelir, 45deg'de, şeklin boyutundan bağımsız olarak kesinlikle bu açı altında bulunur.
Fark dikdörtgen şekillerde açıkça görülebilir:
Degrade renkleri için durma noktalarını da ayarlayabilirsiniz, değerler birimlerde veya yüzde olarak ayarlanır ve% 100'den fazla ve% 0'dan az olabilir.
EM'de, EM'de ve öğelerin sınırlarının ötesine geçen değerlerin ayar değerlerinin örnekleri:
Yaklaşık, komşu renkleri durdurmanın puanları vardır, daha net, aralarındaki sınır olacaktır. Böylece, çizgili arka planlar kolayca yapabilirsiniz:
Bu, örneğin, yan sütun altındaki bir arka plan, ebeveyn elemanının tüm yüksekliğine uzanır:
SageBar'ın arka tarafındaki şeritler - alternatif tam saydamlıktan oluşan bir başka degrade ve beyaz renk % 30 saydamlığı ile. Yarı saydam renklere sahip gradyanlar uygundur, çünkü herhangi bir rengin arka planının üstüne uygulanabilirler.
Örnekte degrade, karmaşık bir uzun kodla ayarlanır, çünkü şeritler yalnızca yandan arkaplanın üzerine yerleştirilmelidir. Bir blok için bir arka plana sahip her şeyi yapmaya çalışmazsanız, görevi bir sözde eleman kullanarak çözmek mümkün olacaktır.
Kısıtlamaların yokluğunda, kod çok daha kısa olabilir:
Işık (arka plan: Peachpuff doğrusal gradyan (90deg, rgba (255, 255, 255, 0)% 50, RGBA (255, 255, 255, .4) 50%) Merkez Merkezi / 2EM;) .Dark (arka plan: steelblue Doğrusal gradyan (RGBA (0, 0, 0, 0)% 50, RGBA (0, 0, 0, 0,2)% 50) Merkez Merkezi /% 100 1EM;)
İlk satırda, elemanın arka plan rengini, tip ve yönün (renk ve yönün yapılması), ikincisinde - gradyanın renklerini ve aralarındaki sınırları, üçüncü olarak belirler - pozisyonu belirtiriz - ve ortaya çıkan görüntünün büyüklüğü. En önemli kısım boyuttur. Varsayılan olarak, arka plan tekrarlanır, böylece ortaya çıkan desen öğenin arka planını doldurur. Çok kolay ve anlaşılabilir :)
Tüm giriş bir satırda yapılabilir, ancak okunabilirlik için, özellikle karmaşık gradyanlar için, birkaçında yazmak daha uygundur.
Şeffaf anahtar kelimenin şeffaf siyah anlamına geldiğini ve şeffaf beyaz olmadığını, yani Firefox'ta kullanırken, bu tür bir sorunu alabilirsiniz:
Bunu önlemek için, istenen gölgenin tamamen şeffaf renklerini kullanın, örneğin beyaz: RGBA (255, 255, 255, 0) veya siyah RGBA (0, 0, 0, 0). Profesyonel farklı yöntemler Renkler ayarlanabilir.
Belirli bir rengin RGB notunu öğrenmek için kullanabilirsiniz Css.coloratum, lea verou aracı.
Her zamanki doğrusal gradyanına ek olarak, tekrarlanan doğrusal gradyan yapabilirsiniz - tekrarlanan bir degrade
Basit kod:
Arka plan: Yinelenen doğrusal gradyan (yeşil, yeşil .5EM, şeffaf .5EM, şeffaf 1EM);
Ne yazık ki, yinelenen gradyanlar hem düştü hem de önemli olmayan kalıplar için uygundur. Doğruluğa ihtiyacınız olursa, arka plan boyutu ve arka plan ile kombinasyon halinde doğrusal gradyan kullanın.
Gradyanlar kutu-gölge olarak aynı sınırlamaya sahiptir: ayrı olarak renk veya yön ayarlayamazlar. Bu, kodun çoğaltılmasına neden olur ve akut, karmaşık gradyanların oluşturulması durumunda ön işlemlerden yararlanmaya ihtiyaç duyar.
Başka bir sınırlama, gradyanların canlandırılmamasıdır, ancak, bir dereceye kadar dolaşmak mümkündür.
Çapraz tarayıcı gradyanları oluşturmak için çok uygun bir araç var: colorzilla.com/gradient-deitor/. Modern tarayıcıların koduna ek olarak, 9. için eski IE ve SVG için kod sunacak.
Arka plan yönetiminin temel yetenekleri ile birlikte, gradyanlar verir kısa fırsatlar Görüntülerin kullanımı olmadan tamamen farklı derecede karmaşıklık derecelerinin arka planlarını oluşturmak için. Gradyanlar karmaşık ve ilginç desenler yapabilir, ancak bu tamamen farklı bir konudur.
- Aktar
Singlediv.com projesi ile ilgili çeviriye ilişkin çalışmalar, bazı CSS araçlarının düşündüğümden daha geniş bir kullanım olduğunu göstermiştir. Ancak bu uygulamayı bulabilmek için, mülkün özelliklerini açıkça anlamak gerekir. Doğrusal gradyan, Lynn Fisher Virtuoso'nun eserlerinde kullandığı parlak bir örnek haline geldi.
Sitenizde oldukça degrade bir arka plan yapmak ister misiniz? Arka plan-resim: lineer gradyan (kırmızı, mavi); Hazır! Evet, biraz sıkıcı. Bu nedenle, daha fazla bir şey istiyorsanız, bunu CSS ve MDN sayfasındaki ipuçlarıyla tavsiye ederim. Burada mısın? Öyleyse, bazı anlara bakalım, doğrusal gradyanlar aslında çalışıyor. Başlamak için, doğrusal bir gradyan fonksiyonunda kullanılabilecek sözdizimini hatırlayalım:
Doğrusal gradyan ([dan<угла> | önce<стороны-или-угла>]?,
İşlev, degradenin açısını belirleyen ve bir ölçüm (derece, yarıçap, derece, ciro) veya bir anahtar kelime (yan veya açı) olarak ifade edilebilecek isteğe bağlı bir ilk argümanı alır.
Bundan sonra, işlev bir renk listesi alır.
Gradyan alanı
Degrade görüntüsünün boyutları yoktur, diğer arka plan görüntülerinden farklı olarak sonsuzdur. Görünür boyutları, bir degrade alanını verir, yani. Görüntülendiği alan.Kural olarak, bir arka plan görüntüsünü DOM elemanına doğrusal bir degrade biçiminde uyguladığınızda, bu alan, eleman sınırlarının çerçevesidir (arka plan renginin görüntülendiği alandır).
Bu durumda, CSS özelliği arka plan boyutunu (arka plan boyutunu) kullanırsanız ve kurun, 200px * 200px'te, degrade alanının bu boyuta sahip olacak ve varsayılan olarak sol üst köşeye yerleştirilecektir. Arka plan konumunu da kurmadığınız sürece, DOM öğesinin.
Bu nedenle, aşağıdaki bölümleri okurken, degrade alanının her zaman olduğu gibi, bu degradeyi kullandığınız DOM elemanı ile aynı boyutlarda bulunmadığını unutmayın.
Çizgi gradyan
Degrade alanında, merkezden geçen ve renklerin dağıtıldığı çizginin degrade çizgisi olarak adlandırılır. Bu çizgi, degradenin açısının açıklanması sırasında daha kolay tarif edilebilir, böylece bir sonraki bölümde daha ayrıntılı olarak.Köşe gradyanı
Degradenin hangi yöne gideceğini belirlemek için doğrusal bir gradyan açısının kullanıldığı oldukça açıktır. Ama bu yönü daha fazla düşünelim.C, degrade alanının merkezi bir noktasıysa, A, birlikte geçen dikey çizgi arasındaki açıdır ve ayrıca C'den geçen ve degradenin durdurma renginin dağıtıldığı degrade hattı arasındaki açıdır.
Bu açı iki şekilde tanımlanabilir:
Anahtar kelimelerden birini kullanarak: yukarıdan (yukarı), alt, sola (solda), sağa, sağa doğru (sağa yukarı), sola sola (sola yukarı), sağa (sağdan aşağı), aşağıya doğru Sol (soldan aşağı);
Veya bir sayı ve ölçüm birimi ile bir açıyı belirleyerek, örneğin 45deg (45 derece), 1TURN (1 tur);
Eğer açı belirtilmezse, varsayılan olarak aşağı yönlendirilir (yani, 180 derece veya 0,5 dönüş):
Bunda ve aşağıdaki görüntülerde, degrade alan bir dikdörtgenle sınırlıdır ve degrade çizgisi, merkezden geçen ve renklerin görüntülendiği yağ gri bir çizgidir.
Yukarıdaki örnekte, açı belirtilmemiştir, böylece beyazdan kırmızıdan kırmızıdan kırmızıdan yukarıdan aşağıya doğru hareket eder, bu da aşağıda gösterildiği gibi anahtar kelimesine (aşağı) karşılık gelir:
Ve aşağıdaki iki görüntüde gösterildiği gibi, üst (yukarı) sıfır derecede köşeye karşılık gelir:
Bir diğeri Önemli anAçının anahtar kelimelerini kullanmayı, örneğin (veya başka bir anahtar kelime açısı), degrade alanının boyutuna bağlıdır.
Mantık, bir gradyandan kırmızıdan maviden, elemanın üst dik açısı doğrultusunda bir gradyan yapmak istiyorsanız, böyle bir öğe, sağ üst köşede mavi olmalı ve degradenin ortasındaki mor renk olmalıdır. sağ alt köşeden sol üstten geçen çizginin etrafında oluşur. Bu resimde böyle görünüyor:
Bu nedenle, sağ üstte (sağa), degrade çizgisinin sağ üst açıda geçeceği anlamına gelmez ve degradenin açısının 45 derece olduğu anlamına gelmez!
Aşağıdaki animasyonu kullanarak açı değiştirildiğinde degrade çizgisinin nasıl geçtiğine bakalım:
Bu animasyonda, açı 10 derece artışlarla 0 ila 360 derece eğilir. Düşük çözünürlüklü GIF hatta, her zaman degrade hattına dik olan "satırlar" şeklinde farklı renklerin nasıl görüntüleneceğini daha iyi düşünmenizi sağlar.
Degradenin köşeleri hakkında bildiğimizi hatırlayalım:
Açı, degrade hattı ile degrade alanın ortasından çıkan çizgi arasında ölçülür ve yukarı doğru hareket eder.
Bu nedenle, 0 derece artmaktadır.
Açının standart değeri, belirtilmemişse, 180 derece olan aşağı doğrudur.
Açının anahtar kelimeleri degrade alanının boyutuna bağlıdır.
Degrade çizgisinin uzunluğu
Degrade çizgisinin içindeki renklerin nasıl dağıtıldığını görmeden önce, bir noktayı açıklamamız gerekiyor. Önceki animasyonda, renklerin bazen degrade alanının dışına yerleştirilebileceğini, bu da ilk bakışta biraz garip görünebilecek, ancak nedeni biliyorsanız mantıklı.Örneğe bakınız:
45 derecelik bir açıyla kırmızıdan maviden bir degrade ihtiyacımız var ve degrade alanının en boy oranı göz önüne alındığında, degrade çizgisi sağ üst açıda geçemez.
Ancak tarayıcı (yani, şartname zorludur) sağ üst köşeyi saf mavi kılmak istiyor. Eğer yapıldıysak, degrade çizgisinin alanın kenarlarına başladığı ve bitmesi için, mavi renk alanın çoğunu alır ve degrade kırılmayacaktı.
Bu nedenle, bunu yapmak için, degrade çizgisi bazen degrade alanının ötesine geçebilir. Aynı zamanda, nerede başladığını ve nerede bittiğini bulmak oldukça kolaydır. Sadece en yakın açıdan geçen ve degrade çizgisine dik olan bir çizgi çizin. Bu çizginin degrade çizgisini geçtiği nokta ve başlangıç \u200b\u200b/ bitiş sitesidir.
Aslında, Degrade W'nin genişliğini, H yüksekliğini ve degradenin açısını belirlerseniz, degrade hattının uzunluğu:
ABS (W * SIN (A)) + ABS (H * COS (A))
Renkler
Renkler, her bir elemanın aşağıdaki şekilde tanımlanabileceği virgüllerle bölünmüş bir listedir:<цвет> [<процентное соотношение> | <длина>]?
Bu nedenle, renklerin degrade hattına yerleştirilmesi gerektiğini belirtmek gerekli değildir. Örneğin:
Renklerin hiçbirinin kendi pozisyonuna sahip değil, bu nedenle tarayıcının kendisi konumlarını belirledi.
Çok basit örnek Sadece 2 renkte, renk 1% 0 (degrade çizgisinin başlangıcında) olarak yerleştirilecektir ve renk 2% 100'dür (degrade çizgisinin sonunda).
Ardından, üçüncü bir renk eklerseniz, Renk 1'i hala% 0 kalacaksınız, renk 2% 50 olacak ve renk% 100% 100, vb.
Yukarıdaki örnekte, 5 yüz renk belirtildi ve tarayıcı, göreceli konumlarını% 0,% 25,% 50,% 75,% 100 olarak hesapladı. Bunun nedeni, degrade alanında düzgün bir dağılımdır.
Rengin konumu, yüzde oranı (degrade çizgisinin boyutuna göre) veya CSS uzunluğu biçiminde (herhangi bir ünite geçerli olduğu durumlarda) olarak ifade edilebilir. cSS Ölçümleri).
İşte bir örnek:
Gördüğünüz gibi, 5 hala rengin her biri piksellerde belirtilen kendi pozisyonuna sahiptir. Bu hükümler degrade çizgisinin başlangıcından itibaren hesaplanır.
Bu pozisyonları kullanarak, bazı ilginç efektler elde edebilirsiniz. Örneğin, bir degrade'i böyle bir şekilde çizmemek için bir degrade kullanabilirsiniz, ancak birkaç renk bırakın:
7 rengin üzerindeki resimde ve bir sonraki rengin ikincisi ile aynı pozisyonda başlaması böyle bir şekilde kurulurlar, bu, tarayıcının iki durdurma çiçek gradyanı arasındaki boşluğu doldurması gerektiği anlamına gelir.
Tabii ki, hepsi sevimli ve komik, ama yerleştirilmiş renkleri indirgenemez şekilde karıştırırsanız ne olur? Ardından, tarayıcıyı daha fazla çalışmaya zorlayacaksınız ve konumunu belirtmediğiniz renkleri otomatik olarak dağıtmasını isteyin:
Bu basit örnekte, ikinci renk (turuncu) bir konuma sahip değildir, bu nedenle tarayıcının kendisi onu belirler ve önceden tanımlanmış ve bir sonraki renk arasında uygun bir yer bulur. Burada, ikinci rengin yakın komşuları olduğu için çok basittir, çünkü sadece bazı renklerde pozisyonlar varsa veya bir önceki veya aşağıdaki renklerin konumu olmazsa, her şey karmaşık olur.
Birkaç örneğe bakalım:
Yukarıdaki örnekte sadece üçüncü renk (sarı)% 30 olarak konumlandırılmıştır. Bu nedenle, tüm gerisini daha iyi bir şekilde dağıtmak için, birincisi% 0 olarak yerleştirilir, ikincisi% 100'dür ve kalan renkler boşluğa dağıtılır (böylece turuncu doğrudan% 0 ile% 30 arasında biter) -% 30 ile% 100 arasında).
Bu, ilk ve son rengin üzerindeki örneğidir, böylece diğerleri bu ikisi arasında eşit şekilde dağıtılır.
Tabii ki,% 0 ve% 100 çıkamayacağınız sert bir çerçeve ise çok kolay olurdu. Ancak önceki örnekten görülebileceği gibi, son renk% 120'dir ve bu nedenle tüm diğer renkler bu pozisyona göre dağıtılmalıdır (bu durumda varsayılanın başlangıç \u200b\u200bnoktası% 0 olmaya devam eder).
Ve tarayıcınızı daha da fazla çalıştırmak istiyorsanız, neden pozisyon sırasını belirtmiyorsunuz?
Aslında, renk siparişi olmalı, ancak hiçbir şey yapmamayı yasakladı ve yoksa korkunç bir şey olmaz. Tarayıcınız, aşağıda gösterildiği gibi basitçe düzeltecektir:
% 30'luk birinci renk (kırmızı) ile başlayalım. Daha sonra, ikinci renk, zaten yanlış olan, yukarıda belirtildiği gibi, renkler pozisyon kadar erken belirtilmelidir. Bu nedenle, tarayıcı, ikinci rengin konumunu düzeltir ve önceki rengin (% 30) ile aynı konuma getirir. Daha sonra,% 60, doğru olan üçüncü renk (sarı) gelir, ancak dördüncü (mavi)% 40 oranında takip eder. Yine, pozisyon ayarlanır ve önceki konumlandırılmış renkle aynı değere ayarlanır.
Sonuçta, yukarıdaki örnekte gösterildiği gibi, son rengin (mavi) yanlış yerleştirilmiş ve tarayıcı, bu durumda ne ani komşusu (sarı), ne de komşu rengi olan önceki rengiyle aynı şekilde konumunu oluşturur. ondan önce (turuncu), ilk renge geri dönmesi gerekir (kırmızı). Böylece, kırmızı ve mavi arasındaki tüm renkler% 30 olarak ayarlanır ve bu nedenle görünmezdir.
Alet
Bu makaledeki tüm ekran görüntüleri, codepen'de yaptığım basit bir araçtan alınmış ve doğrusal bir gradyan fonksiyonunu girmenize ve degrade alanını, degrade çizgisini, bir açının yanı sıra renklerle ilgili bilgileri görmenizi sağlayan basit bir araçtan alınır. eleman.Cihazda her türlü hata ve kısıtlama vardır (JavaScript ile ilgili yorumlara bakın), bu yüzden ondan fazla beklemeyin.
Etiketler:
- CSS.
- doğrusal gradyan.
kENDİ! Degrade, manipülasyon rengi için mükemmel bir araçtır. CSS3.. Görüntüyü kullanmak yerine, bir web sayfasında bir degrade efekti oluşturmak yerine, faydalanacak CSS3 gradyani Ve böylece siteyi "kolaylaştırmak". Kullanıcının arka plan görüntüsünün indirilmesinde zaman ve trafik harcaması gerekmediğinden. İki ana derece degrade türü vardır: radyal ve doğrusal. Bugünün görevi onlar hakkında olacak.
Lineer gradyan
Sınıflandırmada dedikleri gibi, cSS3'teki gradyanlar görüntüler. Onlar için özel bir özellik yoktur. Ve reklamlar için arka plan görüntüsünün özelliğini kullanın.
Genel durumda, gradyanın (doğrusal) sözdizimi şöyle görünür:
1 | div ( |
Peki, hadi her şeyi sırayla gidelim.
Her şeyden önce, doğrusal gradyan () işlevi bildirilir. İşlevin üç ana değeri vardır. İlk değer başlangıç \u200b\u200bpozisyonunu belirler. Örneğin üst t.e. Yukarıdaki kaynak pozisyonu. Ayrıca alt, sol ve sağ da kullanabilirsiniz;
Eğer açı negatifse, pozisyon sol alt köşeden soldan sola değiştirilir.
İşlevin ikinci değeri, başlangıç \u200b\u200brengi ve durma konumu, yüzde belirtilendir. Bu pozisyonun duyurulması gerekli değildir, varsayılan tarayıcı% 0'lık ilk renk değerini uygun olacaktır.
Son değer ikinci renk ve durma pozisyonudur. Varsayılan olarak% 100 değeri alır. Bu aşırı değerler ve ilk rengin hemen ikinciye geçmeye başladığını ima eder. Ancak,% 50'nin ilk rengini kurarsak, yalnızca erişilebilir yüksekliğin ortasından ikinciye geçmeye başlayacaktır. Kodun nasıl göründüğü gibi
Aynı şeridi irtifa alırız. Net bir sınırla, renk geçişi yapmaz. Nasıl çalıştığını daha iyi anlamak için, değerlerle deneyin.
Radyal gradyanın yanı sıra doğrusal, yalnızca zaten radyal gradyan () işlevi bildirilir. Ayrıca ana değerler vardır: Bu, bir radyal gradyanın (daire - bir daire veya elips - elips), ilk ve son rengedir. Sözdizimi aşağıdaki gibidir:
div ( |
Formu belirtmezseniz, elips varsayılan olarak kurulacaktır.
Ayrıca, varsayılan, degradenin merkezi konumudur, değiştirilebilir. Konum Komutlarını (üst, alt, sol, sağ ve merkez), bunların yanı sıra kombinasyonlarını ayarlayabilirsiniz veya yüzde veya piksel olarak belirtebilirsiniz.
Takım kombinasyonları:
- Üstüne ortalanmış - üst -% 50% 0;
- Sol üst köşede - sol üst -% 0% 0;
- Sağ üst köşede - sağ üst -% 100% 0;
- Merkez - Merkez -% 50% 50;
- Merkezde kaldı - sol merkez -% 0% 50;
- Tam merkezde - sağ merkez -% 100% 50;
- Aşağıdaki merkezde - alt -% 50% 100;
- Sol alt köşede - sol alt -% 0% 100;
- Sağ alt köşede - sağ alt -% 100% 100.
İşte yüzdeleri ile bir örnek:
div ( |
Eksen boyunca ilk değer H. ikinci W..
Ayrıca, radyal degrade boyutunu ayarlayabilir. Boyut, gradyan şeklinden sonra boşluktan gösterilir. Varsayılan uygulanan en uzak köşe. (Uzak köşeye). Hesaplama, degradenin merkezi noktasından aşağıdakilere yapılır:
Örnekte dikkate almak için daha iyi olduğunu düşünün. Beyaz ilk ve nihai mavi ile eliptik gradyan:
div ( |
Boyut, en yakın taraflara olan mesafeden hesaplanır, eksen boyunca üst kısım olduğu açıktır. Y. ve sol eksen X..
Ve şimdi uzak taraflara:
div ( |
Sonuç, yüzünde söyledikleri gibi. Boyut, uzak taraflara olan mesafeden hesaplanır.
Radyada renk için doğrusal bir gradyanda olduğu gibi, durma konumu uygulanabilir. Ayrıca, renklerin şeffaflığını elde etmeniz gerekirse, RGBA'yı kullanın.
div ( |
Alfa Kanalı, son ve 0,2'ye eşit olan, sadece% 20'den% 20'den kullanıldığını gösterir.
Her iki tipte de CSS3 gradyani İki değil, birkaç renk kullanabilirsiniz.
div ( |
Her iki tür için, renklerin tekrarı kullanabilirsiniz. Yani, bu değerlerden bir döngü oluşturulur. Tekrarlayan bir degrade, tekrarlayan-linear gradyan () - Radyal için doğrusal ve yinelenen radyal-gradyan () için fonksiyonlar.
div ( |
% 0, # ffae00% 100); / * Firefox için * /
arka plan görüntüsü: -MS-lineer gradyan (üst, # ff5a00 0, # ffae00% 100); / * IE 10+ * /
arka plan-resim: -O-linear gradyan (üst, # ff5a00% 0, # ffae00% 100); / * Opera için * /
arka plan-resim: Doğrusal gradyan (üst, # ff5a00 0%, # ffae00% 100); / * Standart Sözdizimi * /
}
div (
filtre: ProgID: DximageTransform.Microsoft .Gradient (StartColorstr \u003d # 33FFF5A00, EndColorstr \u003d # 33FFA00);
}
Lattice'den hemen sonra 33., bu renk doygunluğunun yüzdesidir.
Umarım makalenin sizin için faydalı olduğu ortaya çıktığını ve ele alınan konu tamamen açıklanmıştır.
Taze makaleler ve dersler ile güncel kalmak için
