CSS ile Kenarlığa Renk Geçişi Verme

Merhabalar,

Bu yazımda CSS ile bir öğeye verdiğimiz kenarlık (border) değerini, nasıl renk geçişli bir şekilde ayarlayabileceğimizi göstereceğim.

Bu işlemde kullanacağımız temel CSS özelliği border-image olacaktır. Normalde bu özellik url() ile görsel eklemek için kullanılır, fakat biz bu kez geçişli renk ile kullanacağız.

CSS’te geçişli renk kullanmak için linear-gradient ifadesini kullanırız. Bu özelliği border-image ile birlikte yazdığımızda oldukça şık kenarlıklar elde edebiliriz.

Ben bu tür geçişleri oluşturmak için genellikle cssgradient.io sitesini kullanıyorum. Renk, yön, opaklık gibi birçok detayı seçip hemen altındaki kodu alabilirsiniz.

Şimdi örnek bir kullanım gösterelim:

HTML Yapısı:

<div class="kutu asagi"></div>
<div class="kutu saga"></div>

Biri aşağıya, biri sağa doğru geçişli iki kutu oluşturduk.

CSS Kodları:

.kutu {
  width: 250px;
  height: 250px;
  margin: 10px;
  border: 20px solid transparent; /* ihtiyaca göre özelleştirilebilir */
}

.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 sınıflarını farklı geçiş yönleri göstermek için kullandım. Siz geçiş yönünü linear-gradient içinde belirleyebilirsiniz.

Dikkat Edilmesi Gereken: linear-gradient tanımının sonundaki 1 değeri, border-image-slice içindir. Görsel değil renk kullandığımız için bu değeri 1 olarak yazmalıyız, aksi takdirde kenarlık düzgün görünmeyebilir.

Bu şekilde kutularınıza geçişli kenarlık efektleri verebilirsiniz.

Canlı örnek: CodePen – CSS Renk Geçişli Border

Mutlu Kodlamalar! :)