jQuery :image Seçicisi

:image Seçicisi;

image seçicisi type=image giriş elementleri seçmek için kullanılır.

Örnek

$(":image").css("background-color", "yellow");

Codepen Ön izleme

Kullanım şekilleri;

$(“:image”)

CSS list-style-image

list-style-image :

Bu list style özelliği ile liste işaretini bir görüntü ile değiştirebiliriz.

Not: Her zaman list-style-type özelliğini belirtin.

Örnek

ul{
  list-style-image: url('http://www.w3tr.com/file/list.jpg');
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiçbir özellik almaz.
url Liste işaretinin yerine gösterilecek görüntünün yolunu belirtir.
İnital
İnherit

Tarayıcı Desteği

1.0 1.0 4.0 1.0 7.0

CSS border-image-slice

border-image-slice

border-image-slice özelliği, border ‘ ın belirtilen boyutlar içinde tekrarlanmasını sağlar.

Örnek

border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(http://w3tr.com/file/border.png) round; /* Safari 3.1-5 */
    -o-border-image: url(http://w3tr.com/file/border.png) round; /* Opera 11-12.1 */
    border-image: url(http://w3tr.com/file/border.png) round;
    border-image-slice: 20%;

Codepen Ön izleme

 

Css Sözdizimi

 

Değer Açıklama Örnek
stretch Varsayılan değer. Görüntü alanını kaplayacak şekilde genişletilir.
repeat Görüntü alanını sınırlanan bölge kadar tekrar eder.
round Görüntünün iki noktası arasındaki bölgesi tekrarlanmasını sağlar.
initial
inherit

CSS border-image-width

border-image-width :

border-image-width özelliği, border ‘ a verilen resmin genişliğini belirtmek için kullanılır.

Örnek

#borderimage{
  border-image:url(http://w3tr.com/file/border.png) 50 round;
    border-image-width: 5px; 
   padding: 10px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
number 4 kenar içinde width verilecek kenarın hangi kenar olduğunu belirtir.
auto Genişliği otomatik ayarlar.
% Yüzdeli değerler ile genişlik verir.
İnital
İnherit

Tarayıcı Desteği

15.0 15.0 11.0 6.0 15.0

CSS border-image-source

border-image-source : 

border-image-source özelliği, border ‘ a verilen resmi değiştirmek için kullanılır.

örnek

#borderimage {
  border-image-source: url(http://w3tr.com/file/border2.png);
  border-image-slice: 100;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Varsayılan değer. Kullanılacak görüntü yok.
image Görüntün yolunu belirtir.
İnital
İnherit

Tarayıcı Desteği

15.0 15.0 11.0 6.0 15.0

CSS border-image-repeat

border-image-repeat :

border-image-repeat özelliği, border ‘ ın belirtilen boyutlar içinde tekrarlanmasını sağlar.

Örnek

#borderimage{
    -webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
    -o-border-image: url(http://w3tr.com/file/border.png) 50 round; 
    border-image: url(http://w3tr.com/file/border.png) 50 round;
    border-image-repeat: repeat;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
stretch Varsayılan değer. Görüntü alanını kaplayacak şekilde genişletilir.
repeat Görüntü alanını sınırlanan bölge kadar tekrar eder.
round Görüntünün iki noktası arasındaki bölgesi tekrarlanmasını sağlar.
İnital
İnherit

Tarayıcı Desteği

15.0 15.0 11.0 6.0 15.0

CSS border-image-outset

border-image-outset :

border-image-outset özelliği, border ‘ ın belirtilen boyuttan ne kadar dışarı taşacağını beliritir.

Örnek

#borderimage{
        -webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
    -o-border-image: url(http://w3tr.com/file/border.png) 50 round; 
    border-image: url(http://w3tr.com/file/border.png) 50 round;;
      border-image-outset: 10px;}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
length Ne kadar taşacağını belirler. Varsayılan değer 0 ‘ dır.
number Borderların sıralamasına göre uzaklık atamamızı sağlar.
İnital
İnherit

Tarayıcı Desteği

15.0 15.0 11.0 6.0 15.0

CSS border-image

border-image :

Border-image özelliği bir elementin borderlarına resim ataması özelliğini kullanmamızı sağlar.

Not: border-color özelliğinden önce border-style özelliğinin tanımlanmış olması gerekir.

Örnek

#borderimage1{
   -webkit-border-image: url(http://w3tr.com/file/border.png) 50 round;
    -o-border-image: url(http://w3tr.com/file/border.png) 50 round; 
    border-image: url(http://w3tr.com/file/border.png) 50 round;
}
#borderimage2{
  -webkit-border-image: url(http://w3tr.com/file/border2.png) 50 round;
   -o-border-image: url(http://w3tr.com/file/border2.png) 50 round; 
   border-image: url(http://w3tr.com/file/border2.png) 50 round;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
border-image-source Görüntünün yolunu belirtmek için kullanılır.
border-image-slice border bölümlerinin sınırlarını gösterir.
border-image-width border a verilen resmi genişliğini belirlememize olanak sağlar.
border-image-outset Belirlenen sınırın dışına, ötesine uzamasını sağlar.
border-image-repeat Verilen görüntünün kapladığı miktar boyunca tekrar etmesini sağlar.
İnital
İnherit

Tarayıcı Desteği

16.0
4.0-webkit
15.0
3.5-moz
11.0 6.0
3.1-webkit
15.0
11.0 -o