Merhabalar,
Bu yazımda Css ile bir öğeye verdiğimiz kenarlık (border) değerini nasıl renk geçişli olarak ayalarız konusundan bahsedeceğim.
Bu işlem için bize yardımcı olacak Css kod parçası border-image olmaktadır. Asıl görevi url() niteliği ile kenarlığınıza resim vermektir fakat ben geçişli renk olarak ayarlama kısmına değineceğim.
Belki duymuşsunuzdur Css ile geçişli renk değeri vermek istediğimizde linear-gradient kullanırız. linear-gradient özelliğini border-image ile birlikte kullanacağız. Farklı bir detay daha olacak onu yazımın devamında göreceksiniz.
Şahsen geçişli bir renk kullanmam gereken tasarımlarda ben cssgradient.io adresini ziyaret ediyorum. Kolaylıkla istediğim renkleri renk seçici üzerinden seçip, kaç adet katman olacağını hemen altındaki bardan seçiyorum.
Hangi yöne olacağını açı ayrıntısına kadar sunmuşlar bize. Ayrıca renklerin opaklık değerini de düzenleyebiliyorsunuz. Siz bu düzenlemeleri yaparken alt kısımda eş zamanlı kodun çıktısını veriyor. Çıktıyı alıp kullanmak istediğiniz seçiciye yapıştırıyorsunuz.
Bu ayrıntıları ayarladığımıza göre aldığımız linear-gradent değerinin border-image ile kullanımına göz atalım.
<div class="kutu asagi"></div>
<div class="kutu saga"></div> Biri aşağıya, biri sağa doğru geçiş olan 2 adet div yerleştirdim.
.kutu {
width: 250px;
height: 250px;
margin: 10px;
border: 20px solid transparent;
/* bu değerleri tasarımınıza göre özelleştirebilirsiniz. */
}
.asagi {
border-image: linear-gradient(180deg, #a2214d 0%, #000 100%) 1;
}
.saga {
border-image: linear-gradient(90deg, #a2214d 0%, #000 100%) 1;
} .asagi ve .saga class içine yazdığımız border-image değerlerini direkt olarak kullanacağınız class içine yazabilirsiniz. Ben çeşitlilik olması açısından 2 farklı gösterim sunmak istedim.
Farkettiğiniz gibi sadece derece değişiyor bunu zaten cssgradient.io kendisi ayarlamaktadır.
Yukarıda da belirttiğim dikkat etmeniz gereken nokta ise linear-gradient değerinden sonra gelen “1” değeri.
Verilen değer border-image-slice içindir. Resim olarak kullanıldığında bölmek için kullanılıyor fakat biz geçişli kullanacağımız için bu konuya dikkat vermemiz gerekmiyor.
border-image ile linear-gradient veriyorsanız 1 olarak ayarlamalısınız ki tam net olarak göstersin.
Bu şekilde kenarlıklar (border) üzerinde geçişli renk kullanabilirsiniz.
Örnek olarka codepen üzerinde sizin için ekledim.
Umarım anlaşılır olmuştur.
Mutlu Kodlamalar 🙂
