CSS3 border-image (Kenar Resimler) Kullanımı

CSS3 ile gelen yeni özelliklerden birisi border verdiğimiz HTML öğelerine etrafına resim verebileceğimiz border-image özelliği gelmiştir.

CSS border-image özelliği, bir öğenin etrafındaki normal kenarlık yerine kullanılacak bir görüntü belirlemenizi sağlar. Border-image Herhangi bir elemana dekoratif kenarlıklar eklemek için bir yöntem sağlar. border-image özelliklerle, çok küçük dosya boyutunda veya hatta degradeli görüntülerle, basit yuvarlak köşelerin ötesinde, öğeler için dekoratif kenarlıklar oluşturabilirsiniz.

Özellik üç bölümden oluşur.

• Kenarlık olarak kullanılacak görüntü
• Resmin nerden dilimleneceği
• Orta bölümün tekrarlanıp, tekrarlanmayacağını belirtin.

Border-image Özellikler

• CSS border image özelliği, Bir HTML elemanın border özelliğinde resim görünmesini sağlar.
• border-image shorthand(kısa yol) özelliği çok kullanışlıdır çünkü diğer birçok fonksiyonun kullanımını tek bir kod satırında birleştirir.
• CSS border-image CSS3'te tanıtıldı.

Resimlerden bir border oluşturmak için, birkaç bireysel stillendirme özelliğine veya bir kısa yol border-image özelliğine ihtiyacımız var. CSS kenarlık görüntüsünün nasıl stillendiğini anlamak için aşağıdaki özelliğine bakın:

• border-image : Tüm Border-Image-* özelliklerini ayarlamak için bir kısaltma özelliği.
• border-image-source : Border olarak kullanılacak görüntünün yolunu açıklar.
• border-image-slice : Border görüntüsünün nasıl dilimlenmesi gerektiğini belirtir.
• border-image-width : Border görüntüsünün ne kadar geniş olması gerektiğini belirtir.
• border-image-outset : Border görüntüsünün, sınırın ötesinde ne kadar genişlemesine izin verildiğini belirtir.
• border-image-repeat :Border görüntüsünün uzatılmasının, yuvarlanmasının mı yoksa tekrarlanacak mı olduğunu belirtir.

CSS Border image: Shorthand Özellik

CSS3 border-image özelliği, bir öğenin kenarlığı olarak kullanılan bir görüntüyü ayarlamanıza izin verir. Bu kestirme özellik şu parametreleri birleştirir:

• border-image-source : Border olarak kullanılacak görüntünün yolu
• border-image-slice : Border resmi nasıl dilimlenir.
• border-image-repeat :Border görüntüsünün tekrarlanması, yuvarlatılması veya uzatılması gerekip gerekmediği

Aşağıdaki resmi örneklerde kullanacağız.

Şimdi bir CSS border resmi ayarlama işleminin nasıl çalıştığını görelim.

• border-image Mülkiyet verdiğimiz dosya yolunu kullanarak görüntümüzü yükler.
• Daha sonra dokuz bölüme ayrılır, ayrı köşeler ve kenar, kenarlık görüntüleri elde ederiz.
• Sonra kenarlık köşelerinde görüntü köşeleri yerleştirilir.
• Köşeler arasındaki bölümler daha sonra bir köşeden diğerine uzatılır.

border-image-source

Border-Image-Source özelliği, kenarlık için kullanılacak görüntünün konumunu belirtir.

div{	
border: 10px solid transparent;
padding:15px;
border-image: url(border.png) round 30;
}
	

border-image-slice

border-image-slice: border-image-slice özelliği, kenarlık resmi olarak kullanılacak resmi 9 parçaya bölmek için kullanılır: dört köşe, dört kenar ve bir merkez parçası.

Dokuz parçanın büyüklüğü, elemanın kenarlarından içe doğru kaymış dört offset çizginin üst, sağ, alt ve sol kaymalarına göre belirlenir. Ofsetler, mutlak "sayı" değer veya "yüzde" değer kullanılarak belirlenebilir. Dört ofset, eşit olmak zorunda değildir.

Sınır görüntüsü olarak kullanılacak görüntünün dokuz parçası. Görüntüyü parçalar halinde kesen dört çizgi, üst, sağ, alt ve sol ofsetlerle içe doğru kaydırılır.

Border-image-slice özelliği dört, üç, iki veya bir ofset değeri alabilir.

Dört değer belirtildiğinde, ofsetleri üst, sağ, alt ve sol taraflara o sırayla saat yönünde ayarlanır. Üç değer belirtilirse, ilki üst ofseti, ikincisi sağ ve sol ofsetleri, üçüncüsü alt ofseti belirtir. İki değer belirtilirse, birincisi üst ve alt ofsetleri ve ikincisi sağ ve sol ofsetleri belirtir. Bir değer belirtilirse, dört ofsetin tümünü belirtir.

Fill image anahtar kelimesi border-image-slice özelliğinde mevcut değilse, orta resim kısmı atılır (tamamen saydam olarak kabul edilir). Fill anahtar sözcüğü varsa, sınır görüntüsünün orta kısmı, öğeye arka plan görüntüsü olarak kullanılır. Fill anahtar kelimesi border-image-slice özelliğinin bildiriminde herhangi bir yere yerleştirilebilir (önce, sonra, hatta diğer değerler arasında).

Sınır görüntü dilimi değerleri tarafından belirtilen bölgeler üst üste binebilir. Bununla birlikte, eğer sağ ve sol genişliklerin toplamı görüntünün genişliğine eşit veya ondan daha büyükse, üst ve alt kenar ve orta bölüm için görüntüler boş olup, saydam olmayan bir görüntünün olduğu gibi aynı etkiye sahiptir. bu parçalar için belirtilmiştir. Aynısı üst ve alt değerler için uygulanır.

number: Raster görüntüler için piksel cinsinden kenar ofsetini ve vektör görüntüler için koordinatları temsil eder . Vektör görüntüleri için, sayı, kaynak görüntünün boyutuna göre değil, öğenin boyutuna göredir, bu nedenle, bu durumlarda yüzdeler genellikle tercih edilir.

percentega : Kaynak görüntünün boyutunun yüzdesi olarak bir kenar ofsetini gösterir: yatay ofsetler için görüntünün genişliği, dikey ofsetler için yükseklik.

fill : Ortadaki görüntü bölgesini korur ve arka plan görüntüsü gibi gösterir, ancak asıl üst üste istiflenir background. Genişliği ve yüksekliği sırasıyla üst ve sol görüntü bölgelerine uyacak şekilde boyutlandırılmıştır.

div{	
/* All sides */
border-image-slice: 30%;

/* vertical | horizontal */
border-image-slice: 10% 30%;

/* top | horizontal | bottom */
border-image-slice: 30 30% 45;

/* top | right | bottom | left */
border-image-slice: 7 12 14 5; 

/* Using the 'fill' keyword */
border-image-slice: 10% fill 7 12;

/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

}	

Farklı dilim değerleri, kenarlığın görünümünü tamamen değiştirir:

ÖRNEK:

div{ border: 10px solid transparent;
     padding: 15px;
     border-image: url(border.png) round;
     border-image-slice: 10%;
   }
	

ÇIKTI:

div{border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) round;
    border-image-slice: 20%;
   }

ÇIKTI:

div{border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) round;
    border-image-slice: 30%;
}

ÇIKTI:

border-image-width

border-image-width Nitelik bir elemanın sınır görüntünün genişliğini belirtir.

#div1 {
    border-image-width: 10px;
}
#div2 {
    border-image-width: 20px;
}	
	

ÇIKTI:

fill: Görüntünün orta kısmının görüntülenmesine neden olur.

fill Anahtar kelime border-image-slice özellikte bulunmadıkça, ortadaki resim kısmı atılır (tamamen saydam olarak kabul edilir) . Eğer fill anahtar kelime mevcutsa, sınır görüntünün orta parça elemana bir arka plan görüntüsü olarak kullanılır. fill Anahtar kelime beyanında herhangi bir yere yerleştirilebilir border-image-slice(ilk, sonra veya hatta diğer değerler arasında) özelliği.

 
 div {
  border: 15px solid transparent;
  padding: 15px;    
  border-image: url(border.png);
  border-image-slice:30% fill;
  border-image-repeat: round;
}	
 
 

ÇIKTI:

border-image-repeat

border-image-repeatMülkiyet sınır görüntü, tekrarlanan yuvarlak veya gergin olması gerekip gerekmediğini belirtir.

Sözdizimi:

stretch : Varsayılan değer. Görüntü alanı doldurmak için gerilir

repeat : Görüntü alanı doldurmak için döşenir (tekrarlanır)

round : Görüntü alanı doldurmak için döşenir (tekrarlanır). Alanı çok sayıda döşemeyle doldurmazsa, görüntü yeniden boyutlandırılır,

div{border: 10px solid transparent;
    padding: 15px;
    border-image: url(/images/border.png) 30;
    border-image-repeat: stretch;
    }	
	

ÇIKTI:

border-image-outset

border-image-outset Özelliği sınır görüntü alanı sınır kutusunun arkasına kadar uzanan tarafından miktarını belirtir.

div { 
   border: 10px solid transparent;
   padding: 15px;
   margin: 40px 10px;
   background-color: lightblue;
   border-image: url(/images/border.png) 30 round;
}

.outset { 
    border-image-outset: 20px;
}	
	

ÇIKTI:

border-image

border-image Özelliği, tek bildiriminde bütün sınır görüntü özelliklerini ayarlayan bir kısaltmadır.

div{border: 10px solid transparent;
    padding: 15px;
    border-image: url(images/border.png) 30 round;
 }	

ÇIKTI: