CSS Geçiş

Yavaşlama arka planı

CSS soluk, belirtilen iki veya daha fazla renk arasında düzgün geçiş yapmanızı sağlar.

CSS iki tür soluk türü tanımlar:

  • Lineer SolukAşağıya/Yukarıya/Sağya/Sola/Diagonal olarak)
  • Dairesel SolukMerkezinden tanımlanır)

CSS Lineer Soluk

Lineer soluk oluşturmak için en az iki renk noktası tanımlamanız gerekir. Renk noktaları, düzgün geçiş yapacağınız renklerdir. Ayrıca, başlangıç noktası ve yönelim (veya açı) ile soluk etkisini ayarlayabilirsiniz.

Sözdizimi

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear soluk - Üstten Aşağıya (varsayılan)

Örnekte, yukarıdan başlayan lineer soluk gösterilir. Kırmızıdan başlayarak sarıya geçiş yapar:

Üstten aşağıya (varsayılan)}

Örnek

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

Kişisel Olarak Deneyin

Yavaşlama - Soldan sağa

Aşağıdaki örnek, soldan başlayan yavaşlama nasıl oluşturulacağını gösterir. Kırmızıdan başlayarak, sarıya geçiş yapar:

Soldan sağa

Örnek

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

Kişisel Olarak Deneyin

Yavaşlama - Köşe çizgisi

Köşe yavaşlamalarını gerçekleştirmek için yatay ve dikey başlangıç konumlarını belirtebilirsiniz.

Aşağıdaki örnek, soldan sağa (sağdan sola) başlayan yavaşlama nasıl oluşturulacağını gösterir. Kırmızıdan başlayarak, sarıya geçiş yapar:

Sol üstten sağa alt

Örnek

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

Kişisel Olarak Deneyin

Açı kullanımı

Eğer yavaşlama açısını daha fazla kontrol etmek istiyorsanız, önceden tanımlanmış yönlere (aşağı, yukarı, sağa, sola, sağa aşağı vb.) yerleştirilmiş bir açı tanımlayabilirsiniz. 0deg değeri yukarıya (to top) eşittir. 90deg değeri sağa (to right) eşittir. 180deg değeri aşağıya (to bottom) eşittir.

180deg

Sözdizimi

background-image: linear-gradient(angle, color-stop1, color-stop2);

Bu açı, yatay hattın ve yavaşlama çizgisinin arasındaki açıyı belirtir.

Aşağıdaki örnek, yavaşlama üzerinde nasıl bir açı kullanılacağını gösterir:

Örnek

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

Kişisel Olarak Deneyin

Birden fazla renk noktası kullanımı

Aşağıdaki örnek, birden fazla renk noktası içeren yavaşlama (yukarıdan aşağıya) gösterir:

Örnek

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

Kişisel Olarak Deneyin

Aşağıdaki örnek, nasıl bir yavaşlama oluşturulacağını (soldan sağa) gösterir: renklerle ve metinle.

Yavaşlama arka planı

Örnek

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

Kişisel Olarak Deneyin

Şeffaflık kullanımı

CSS yavaşlama, şeffaflığı da destekler ve yavaşlama etkisi oluşturmak için kullanılabilir.

Şeffaflık eklemek için rgba() fonksiyonunu kullanırız. rgba() fonksiyonundaki son parametre 0 ila 1 arasında bir değer olabilir ve rengin şeffaflığını tanımlar: 0 tam şeffaflık, 1 tam renk (şeffaflık olmayan).

Aşağıdaki örnek, soldan başlayan Doğrusal Gradyan'ı gösterir. Tamamen şeffaftan tamamen kırmızıya geçiş yapar:

Örnek

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

Kişisel Olarak Deneyin

Tekrarlanan Doğrusal Gradyan

repeating-linear-gradient() Tekrarlanan Doğrusal Gradyan için kullanılan fonksiyon:

Örnek

Tekrarlanan Doğrusal Gradyan:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Kişisel Olarak Deneyin