CSS ile bildiğiniz üzere çeşitli özelleştirmeler, renklendirmeler ve animasyonlar uygulamaktayız. Bu yazımızda da renk özelleştirmelerinden birisi olan renk geçişleri özelliğine göz atacağız.
CSS Renk geçişleri, adından da anlaşılacağı gibi bir veyahut birden fazla rengin birbiri arasında olan geçiş aralığını ifade etmektedir. Web sitelerinin arka plan özelleştirmelerinde, div bloklarının özelleştirilmesinde en doğru tercihlerden birisi renk geçişlerini kullanmaktır. Renk geçişlerini tasarlarken HTML Renk kodlarından faydalanmaktayız. Renk kodlarını hex kodları, html kodları veya rgb kodlarıyla yapmaktayız.
İçindekiler
Doğrusal renk geçişi
Doğrusal renk geçişlerinde, renkler çizgisel şekilde geçişlidir. Yukarıdan aşağıya, soldan sağa veya sağdan sola şekilde olabilir.
Yukarıdan aşağıya renk geçişi
1 2 3 4 | .renkgecisi { background: linear-gradient(lime , green); } |
Sağdan sola renk geçişi
1 2 3 4 | .renkgecisi { background: linear-gradient(to right , lime , green); } |
Soldan sağa renk geçişi
1 2 3 4 | .renkgecisi { background: linear-gradient(to left , lime , green); } |
Radyal renk geçişi
Radyal renk geçişleri, dairesel şekilde renk değişimi şeklindedir.
1 2 3 4 | .renkgecisi { background: radial-gradient(yellow,black); } |
1 2 3 4 | .renkgecisi { background: radial-gradient(white,red,black); } |
Birden fazla renk geçişi
Renk geçişleri yaparken iki renk haricinde birden fazla renk ayarlaması da yapabiliriz.
1 2 3 4 | .renkgecisi { background: linear-gradient(purple, cyan, brown); } |
1 2 3 4 | .renkgecisi { background: linear-gradient(to right, red, blue, green,yellow); } |
1 2 3 4 | .renkgecisi { background: radial-gradient(yellow,blue,yellow,blue,yellow); } |
1 2 3 4 | .renkgecisi { background: radial-gradient(red, white, white); } |
Web siteniz için kullanabileceğiniz renk geçişleri
1 2 3 4 | .renkgecisi { background: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); } |
1 2 3 4 | .renkgecisi { background: linear-gradient(to right bottom, #6e0202, #8a0033, #950c69, #863ba2, #4562d4); } |
1 2 3 4 | .renkgecisi { background: linear-gradient(to left top, #1dbb2d, #6d9f00, #8b8100, #996300, #994506); } |
1 2 3 4 | .renkgecisi { background: linear-gradient(to right top, #1d63bb, #007dc5, #008ea2, #009761, #4f9906); } |
