CSS3 Gradient(renk geçişi) Kullanımı

CSS3 Gradient, belirtilen iki veya daha fazla renk arasında yumuşak bir geçiş göstermenizi sağlar. Önceden, bu etkileri elde etmek için resimleri kullanmak zorundaydınız. Ancak, CSS3 gradientleri kullanarak indirme süresini ve geniş bant kullanımını azaltabilirsiniz. Ek olarak, gradyan efektinin elemanları yakınlaştırıldığında daha iyi görünür çünkü gradyan tarayıcı tarafından oluşturulur.

CSS gradient, belirtilen iki veya daha fazla renk arasındaki yumuşak geçişleri görüntülemenizi sağlar.

CSS üç gradient tanımlar:

• Doğrusal gradient (aşağı / yukarı / sola / sağa / çapraz olarak gider)
• Radyal gradient (merkezleri tarafından tanımlanır)
• Konik gradient

Ayrıca repeating-linear-gradient() ve repeating-radial-gradient() fonksiyonlarla yinelenen degradeler oluşturabilirsiniz .

Gradient, arka planlar gibi bir <image> kullanacağınız her yerde kullanılabilir. Gradient dinamik olarak oluşturulduğundan, geleneksel olarak benzer efektler elde etmek için kullanılan raster görüntü dosyalarına duyulan ihtiyacı reddedebilirler. Ayrıca, gradyanlar tarayıcı tarafından oluşturulduğundan, yakınlaştırıldığında raster görüntülerden daha iyi görünürler ve anında yeniden boyutlandırılabilirler.

CSS Doğrusal Gradient

---

Doğrusal bir gradient oluşturmak için en az iki renk düğümü tanımlamanız gerekir. Renk düğümü, yumuşak bir geçiş sunmak istediğiniz renktir. Aynı zamanda bir başlangıç ​​noktası ve bir yön (veya bir açı) belirleyebilirsiniz.

Sözdizimi:

Doğrusal Degrade - Yukarıdan Aşağıya (bu varsayılandır)

Bu örnekte, doğrusal bir gradyan bir tepeden başlar ve geçişler aşağıya iner. Direction anahtar sözcüğü kullanılmaz, bu yüzden tarayıcı varsayılanı kullanır. Kırmızı renkte başlar ve Sarıya geçerek devam eder.

CSS:

#grad {
  background-image: linear-gradient(red, yellow);
}

ÇIKTI:

Doğrusal Degrade - Soldan Sağa

Aşağıdaki örnek soldan başlayan doğrusal bir gradient göstermektedir. Kırmızı renkte başlar ve Sarıya geçerek devam eder.

CSS:

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

ÇIKTI:

Doğrusal Gradient - Çapraz

Hem yatay hem de dikey başlangıç ​​konumlarını belirleyerek bir gradient oluşturabilirsiniz.

Aşağıdaki örnek, sol üstte başlayan (ve alt sağa doğru giden) doğrusal bir gradient gösterir. Kırmızı renkte başlar ve Sarıya geçerek devam eder.

CSS:

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

ÇIKTI:

Açıları Kullanma

---

gradient yönü üzerinde daha fazla kontrol istiyorsanız, önceden tanımlanmış yön yerine (yukarıdan aşağıya, yukarıdan sağa, sola, sağdan aşağı vb.)bir açı tanımlayabilirsiniz .

Sözdizimi:

Bir açı kullanırken, 0 derece aşağıdan yukarıya doğru uzanan dikey bir gradient 90 derece soldan sağa doğru çalışan yatay bir gradient oluşturur ve böylece saat yönünde çalışır. Negatif açılar saatin tersi yönde ilerler.

CSS:

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

ÇIKTI:

Birden çok renk düğümü kullan

Daha önce belirtildiği gibi, gradyanları kullanarak bir web sitesi arka planı oluşturmak için istediğiniz kadar renk düğümü belirleyebilirsiniz. Tabii ki, en az iki tane tarif etmelisin.

Bu örnekte, üç düğümlü bir doğrusal gradyan (yukarıdan aşağıya varsayılan yön) gösterilmiştir:

CSS:

#grad {
  background-image: linear-gradient(#5155A6, #66B1F2, #F2C49B);
}

ÇIKTI:

Aşağıdaki örnek, gökkuşağının rengiyle ve bazı metinlerle doğrusal bir gradient (soldan sağa) oluşturmayı gösterir:

CSS:

#grad {
  background-image: 
  linear-gradient(to right, #010440,#0455BF,#049DD9,#04C9D9,#F2C12E,#F2A922,#D96704); 
}

ÇIKTI:

Aşağıdaki örnek, aynı renk düğümü değerine sahip bitişik renkler ile çizgili bir etki yaratan çok konumlu renk düğümleri kullanır.

body {
  width: 100vw;
  height: 100vh;
  }

body {
  background: 
  linear-gradient(to right, 
     red 20%, orange 20% 40%, yellow 40% 60%, DarkCyan 60% 80%, blue 80%);

ÇIKTI:

Saydamlığı Kullanma

CSS gradientleri, solma efektleri oluşturmak için kullanılabilecek saydamlığı da destekler.

Saydamlık eklemek için renk düğümlerini tanımlamak için rgba() fonksiyonu kullanırız. Rgba() fonksiyonunda ki son parametre "0" ile "1" arasında bir değer olabilir; bu, rengin saydamlığını tanımlar: tam saydamlık için "0" değeri verilir ve tam rengi göstermek için "1" değeri verilir (saydamlığı yok).

Aşağıdaki örnek soldan başlayan doğrusal bir gradient göstermektedir. Tamamen saydam başlar, tam kırmızı renge geçiş yapar:

CSS:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

ÇIKTI:

Kesintisiz çizgi oluşturma

---

İki renk arasında sert bir çizgi oluşturmak, aşamalı geçiş yerine bir şerit oluşturmak için bitişik renk düğümleri aynı konuma ayarlanabilir. Bu örnekte, renkler 50%, gradyanın yarısına işarette renk düğümü paylaşır :

.grad{ 
   background: linear-gradient(to bottom left, #366FD6 50%, #F2E527 50%); 
}

ÇIKTI:

Doğrusal degradeyi tekrarlama

---

Bazen bir sayfanın köşesinden diğerine uzanmak için gradient web sitenizin arka planına ihtiyaç duyarsınız. Ancak, bazı durumlarda, web sitesinin tamamını doldurmak için gradyan bildiri bilgilerinizi birkaç kez tekrarlamanız gerekebilir. repeating-linear-gradient() Özellik sadece bunu yapar!

Örnekte, gradyan düzenimizi tekrar ediyoruz:

#grad {
  background: repeating-linear-gradient(#3A90DE, #F2E527 15%, #F2A428 25%); 
}

ÇIKTI:

CSS Radyal Gradient

---

Radyal gradyan, merkezi tarafından belirtilir. CSS radyal gradient kullanarak bir web sitesi arka planı oluşturmak için ayrıca birden fazla renk düğümü belirtmeniz gerekir. Aşağıdaki örnekler radyal gradient CSS arka planının nasıl oluşturulacağını gösterecektir.

Sözdizimi:

Varsayılan olarak, şekil elips, boyut en uzak köşede ve konum merkezdedir.

Radyal Gradient - Eşit Aralıklı Renk Düğümleri (bu varsayılandır)

Kaç tane renk değerine isim vereceğiniz önemli değil, varsayılan olarak eşit aralıklarla yerleştirilecektir.

Bu örnekte, radyal bir gradyan gösterilmiştir. Renk düğümleri eşit aralıklarla yerleştirilmiş:

#grad {
  background: radial-gradient(#F2A428, #F2E527, #3A90DE); 
}

ÇIKTI:

Radyal Degrade - Eşit Aralıklı Renk Düğümleri (Varsayılan)

Renk göstergemize yüzde değeri (%) ekleyerek, her birinin ne kadar yer kaplaması gerektiğini tanımlayabiliriz.

Aşağıdaki örnek, farklı aralıklı renk düğümleri sahip bir radyal degrade göstermektedir:

#grad {
  background-image: radial-gradient(#F2A428  5%, #F2E527 15%, #3A90DE 60%);
}

ÇIKTI:

Şekil ayarla

---

Shape parametresi, radyal gradient CSS arka planımızın nasıl oluşturulması gerektiğini belirtir. Değer elips veya circle olabilir . Elips varsayılandır.

Bu örnekte, radyal bir gradyan gösterilmiştir. Şekil bir dairedir:

#grad {
  background: radial-gradient(circle, #F2A428, #F2E527, #3A90DE ); 
}

ÇIKTI:

Farklı Boyutlu Anahtar Kelimelerin Kullanımı

---

Aynı şekilde, doğrusal bir arka planla olduğu gibi, istediğinizi değiştirebiliyorsanız daha profesyonel arka planlar oluşturabileceksiniz. Radyal gradientlerle neler yapabileceğinize bir göz atalım.

Size parametresi gradient boyutunu belirtir. İşte dört değeri:

• En yakın-taraf
• en uzak tarafı
• En yakın-köşe
• en uzak köşe

Farklı boyutta anahtar kelimelere sahip bir radyal gradient:

#grad {
  background: radial-gradient(closest-side at 65% 50%, #F2A428, #F2E527, #3A90DE ); 
}

ÇIKTI:

Radyal Gradient Tekrarı

---

Radyal gradient tekrarı, lineer olanla yaptığımız gibi tekrarlamak için aynı tekniği kullanıyoruz. Sadece bir fark var. repeating-linear-gradient Bunun yerine başlama beyanı repeating-radial-gradient kullanırız. Sonra kalan değerleri normal olarak tanımlarız.

Örnekte, repeating-radial-gradient() özellik kullanılmıştır:

#grad {
  background: repeating-radial-gradient(#EBA431, #EBBF7A 15%, #3A90DE 25%); 
}	

ÇIKTI:

Resimlerde Gradient

Ağaç resmi yükleyelim üsten açık mavi gradient verelim.

HTML:

<div class="test"></div>

CSS:

div {
  width: 610px;
  height: 340px;
}
.test{background: linear-gradient(#487fde,transparent),
      url("agac.jpg");
}

Div elemana yükseklik ve genişlik değerlerini resim boyutunda verin.

ÇIKTI:

4919

Gönder