Css Border Image Kullanımı

Bu yazımızda Css’te border image özelliği nedir?, nasıl kullanabiliriz? onu öğreneceğiz. Border image özelliği ile bir Html etiketinin kenarlıklarına resim yerleştirebiliriz. Bu özelliği kullanırken sırasıyla şu değerleri verebiliyoruz;

      ► border-image-source : Kullanmak istediğimiz resmin url’ini veriyoruz.

      ► border-image-slice : Kullanmak istediğimiz resmin hangi boyutlarda parçalara ayrılacağını ve bu parçaların köşelere ve kenarlara nasıl yerleştirileceğini belirleriz. 

      ► border-image-repeat : Etiketin kenarlarına uygulanacak parçaların tekrarlanması veya uzatılması gibi durumları belirleriz. Round, repeat veya stretch değerlerinden birini verebiliriz.

Örneklerimizde kenarlık olarak bu resmi kullanacağız.

css-dersleri-border-image-kullanimi

Border image’in çalışma mantığı şu şekilde;

Öncelikle resmimizin 9 eşit parçaya ayrıldığını düşünelim. 4 köşede bulunan yuvarlak parçaları, yerleştirmek istediğimiz etiketin köşelerine yerleştirir. Diğer arada kalan parçaları ise yazacağımız koda göre yerleştirecektir.

Örneğin aradaki parçaları tekrar ettirebilir veya uzatabiliriz.

 Önemli  border-image özelliğini kullanırken border özelliği ile birlikte kullanmalıyız. Çünkü border-style özelliğinin varsayılan değeri none olduğu için, kullanmadığımız zaman border-image resmi görünmeyecektir.

Örneğin 5 adet div etiketi oluşturalım.

border-image özelliği ile div’lerin kenarlıklarına resim yerleştirelim. Bu değerler üzerinde değişiklikler yaparak, tarayıcıdaki durumlarını incelerseniz daha iyi anlayabilirsiniz. 

CSS BORDER İMAGE ÖZELLİĞİ TARAYICI DESTEĞİ

Özellik Chrome IE Firefox Safari Opera
border-image

16.0

4.0 -webkit-

11.0

15.0

3.5 -moz-

6.0

3.1 -webkit-

15.0

11.0 -o-

Bu tabloda tarayıcıların border-image özelliğini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link