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 ::before, ::after
Devamını Oku

::before, ::after Kullanımı

CSS: before ve: after özellikleri, sözde öğeler olarak da bilinen özelliklerdir. Bir elemanın içeriğinden önce veya sonra bir şey eklemek için kullanılırlar. Detaylar için yazımı inceleyebilirsiniz.

Devamını Oku