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.

Border-image Özellikler

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:

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:

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

css, css3 border-image

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

Not: border-image düzgün çalışabilmesi için, öğenin Border özelliğinin ayarlanması da gerekir!

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;
}
	
Bu div öğesinin kenarlık resmi var.

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ı.

css, css3 border-image

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.

border-image-slice: [<number> | < percentega >] fill | initial | inherit;
Not: border-image-slice özellik olarak bir ile dört değerleri alabilir. Dördüncü değer belirtilmezse, ikincisi ile aynıdır. Üçüncüsü de atlanırsa, birincisiyle aynıdır. İkincisi de atlanırsa, ilk ile aynıdı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:

border-image-slice: 10%;

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

ÇIKTI:

border-image-slice: 20%;

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

ÇIKTI:

border-image-slice: 30%;

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:

Bu div öğesinin kenarlık görüntüsü genişliği vardır: 10px;


Bu div öğesinin kenarlık resmi genişliği var: 20 piksel;

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:

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

border-image-repeat

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

Sözdizimi:

border-image-repeat: stretch | repeat | round | initial | inherit;
Not: Bu özellik, kenarlık görüntüsünün kenarlarındaki ve orta bölümündeki görüntülerin nasıl ölçekleneceğini ve döşeneceğini belirtir. Yani burada iki değer belirtebilirsiniz. İkinci değer belirtilmezse, ilk değer ile aynı olduğu varsayılır.

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:

Bu eleman sınır görüntü çıktısına sahiptir: 0; (0 varsayılandır)


Bu eleman sınır görüntü çıktısına sahiptir: 20 piksel;


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:

Burada görüntü karolarını doldurmak için döşeme yapar. Döşemelerin bölünmesini önlemek için gerektiğinde görüntü yeniden ölçeklendirilir.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

3898

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML RESME LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.