Renk Geçişli Kenarlık (border-image)

CSS Renk Geçişli Kenarlık (border-image)
CSS Renk Geçişli Kenarlık (border-image)
Bu yazımda Css ile bir öğeye verdiğimiz kenarlık (border) değerini nasıl renk geçişli olarak ayalarız konusundan bahsettim. Detaylı olarak incelemek için yazımın devamını okuyabilirsiniz.

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.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”OJWEvMv” default_tab=”css,result” user=”furkangiray_com”]See the Pen CSS Renk Geçişli Kenarlık (border-image) by furkangiray.com (@furkangiray_com) on CodePen.[/codepen_embed]

Umarım anlaşılır olmuştur.

Mutlu Kodlamalar 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Bu yazımda css 'de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim.
Devamını Oku

scroll-behavior Özelliği

Bu yazımda css 'de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim. Sitenize eklemek isterseniz yazımın devamını okuyabilirsiniz.

Devamını Oku

Css ile Yazıya Arka Plan Vermek
Devamını Oku

Yazıya Arka Plan Verme

Bu yazımda çok popüler olmayan ama kullanışlı olduğunu düşündüğüm Yazıya Arka Plan verme özelliğinden bahsettim. Nasıl yapıldığına göz atmak için yazının devamını okuyabilirsiniz.

Devamını Oku