CSS (Cascading Style Sheet)‘in bize verdiği nimetler sınırsızdır. Şu anda programlanabilir ve geliştirilebilir aşamada. Fakat yıllarca CSS yazmış bir insan evladı bile, bazı konularda sorun yaşayabiliyor çünkü bazı konular, gerçekten karmaşık görünüyor. Bu yazıda, o insan evladının içinden çıkamadığı sorunsallardan ikisi olan, tek başlık altında birleşen CSS Border Gradient ve CSS Border Image konularını kapsamlı bir şekilde ele alacağım.

CSS Border Gradient

// Sözdizimi
border-image: <gradient türü>(<özellikleri>);
}

İnsanlar StackOverflow‘da şu soruyu soruyorlar: “Böyle yaptım ama görünmedi”. Görünmemesinin sebebi, bize anlatılmayan küçücük bir detaydır. O detayın adı: border-image-slice

css border image slice, uygulayacağımız gradyan’ın/degrade’nin/görselin, görünmesini/yayılmasını sağlayan bir özelliktir. Değerini 1 yaparsanız görünür, 0 yaparsanız görünmez.

#selector {
border-image: url("image.png");
border-image: linear-gradient(#ffffff, #000000);
border-slice-image: 1; // Dilerseniz yüzde olarak da belirtebilirsiniz
}

Peki CSS Border İçerisinde Gradyan/Degrade’yi Nasıl Yayacağım?

Diye sorarsanız eğer, onun da bir cevabı var. Gradyan kendisini default olarak yayar çünkü renkler bulunduğu kabın şeklini alırlar. Yukarıdaki sözdizimine örnek olarak birkaç değer ekleyelim.

/* Bu arada gradyan'ın sadece linear tarzı yok. Radyal gradient de mevcut.
*/
border-image: linear-gradient(45deg, #BF4C75 10%, #8348B5 90%);

Sırasıyla tüm değerlerin ne anlama geldiğini belirteyim(hiç bilmeyen insanlara da öğretir gibi olsun):

  • 45deg: Gradyan’ın kaç derecelik açıya sahip olduğunu belirtir. Bildiğiniz üzere, en son 360 derece vardır. 😄
  • #BF4C75: İlk renk kodumuzdur kendisi.
  • 10%: Bu da yayılma yüzdesidir. Diğer renk kodunun/kodlarının yayılma yüzdesine göre bu değerleri paylaştırabilirsiniz. Biri 10% iken diğeri 90% gibi yani 100%’e tamamlamaya özen gösterin.
  • #8348B5: İkinci renk kodumuz.
  • 90%: İkinci renk koduna ait yayılma yüzdesi.

Burada bir detay var ki o çok önemlidir. İlk renk kodumuzu yayılma yüzdesiyle beraber yazdık. Sonrasında ikinci bir renk kodu girmek için, ilk kodun yayılma yüzdesinden sonra bir adet virgül(,) bırakmanız gerek. Bölüm bölüm ayırıyormuş gibi düşünün.

Tarayıcı Uyumluluğu(linear-gradient)

Tasarımcıların, geliştiricilerin CSS ile uğraşan herkesin mutlaka bilmesi gereken bazı bilgiler vardır. HER TARAYICI HER KODU DESTEKLEMEZ. Tarayıcıların aynı prensipte çalışmadığını üzülerek söylemek istiyorum. Biri eskidir diğeri yenidir, biri destekler diğeri desteklemez. Ancak, belirli sürümlerde her tarayıcı, aşağıdaki görselde de görebileceğiniz gibi gradient özelliğini desteklemektedir. Görseli tam olarak göremiyorsanız buraya tıklayın.

caniuse.com; CSS, HTML ve Javascript içerisinde bulunan özelliklerin/fonksiyonların/metodların tarayıcı uyumluluğunu kontrol etmenize imkan tanıyan çok tatlı bir sitedir. Ayrıca daha önce adını bile duymadığınız tarayıcıların bilgisini de içerisinde barındırmaktadır. QQ Browser‘ı veya Baidu Browser‘ı hiç duydunuz mu?

Şimdi gelelim linear-gradient’i nasıl uydururuz (Uydu mu uymadı mı?). CSS geliştiricileri bize tarayıcı uyumluluğu için bazı prefix’ler hazırlamış sağ olsunlar. Bunlar [-webkit-], [-ms-], [-moz-], [-o-] önekleridir. Bir de Internet Explorer için ayrı bir olay var onun detayını ayrıca yazacağım.

border-image: -webkit-linear-gradient(45deg, #BF4C75, #8348B5);
border-image: -moz-linear-gradient(45deg, #BF4C75, #8348B5);
border-image: linear-gradient(45deg, #BF4C75, #8348B5);
-ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#BF4C75", endColorStr="#8348B5", GradientType=1)';

Neymiş efendim? Prefix’miş. Gördüğünüz gibi, linear-gradient kelimesinin başına -webkit- gibi (-) karakteriyle ayrılmış bazı önekler getirilmiş.

  • -webkit-: Chrome, Safari, Android ve iOS için
  • -moz-: Firefox için
  • -ms-: Internet Explorer için
  • -o-: Opera için
  • -ms-filter: Bu aslında Internet Explorer için yazılan bir önektir. Ancak Mozilla’nın sitesinde de belirtildiği gibi ‘non-standard’tır yani eski ve pek kullanılmayan, Microsoft eklentisi bir önektir fakat hala bazı tarayıcılarda çalışmaktadır. Aşağıdaki açıklayıcı kodu inceleyiniz.
-ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="<buraya ilk renk kodu", endColorStr="buraya da ikinci renk kodu", GradientType=1)';

Aşağıdaki örnekte border-image: linear-gradient’in uygulamalı halini inceleyebilirsiniz.

CSS Border Image

Border Image’i yukarıdaki örneklerde kullandık ama, nedir bu css border image?

border-image, border’a gradyan ve görsel uygulayabilmenizi sağlar. Normal şartlarda uygulamak istediğimi gradyan ve görseli aşağıdaki şekilde verebilmemiz gerekirdi:

border: 10px solid linear-gradient(#ffffff, #000000);

Hani border’ın büyüklüğünü ve tipini belirttikten sonra bir de renk belirlememiz gerekir ya, işte oraya sadece normal renkleri girebiliyorsunuz. Yukarıdaki gibi görsel, linear-gradient veyahut radial-gradient’i direkt olarak kullanamıyorsunuz zira böyle çalışmıyor. İşte border-image bunun için var.

Aradaki farkı daha net bir şekilde şurada açıklayalım:

  • css border: <genişlik değeri> <çerçeve tipi> <sadece #ffffff gibi renk kodları>
  • css border image: url('image-path.png') linear-gradient() veya radial-gradient()

İki adet sorunsalın akıllardaki sorularını cevaplandırdığımı düşünüyorum. Hala sorunuz varsa aşağıya yazarsanız zevkle cevaplayabilirim.

console.log("Sass kullanmayı ihmal etmeyin, kodlama ile kalın :)");