Etiket: image

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”)
Posted on by Samed GÖZÜTOK 0

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
Posted on by Samed GÖZÜTOK 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
Posted on by Samed GÖZÜTOK 1

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
Posted on by Samed GÖZÜTOK 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
Posted on by Samed GÖZÜTOK 1

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
Posted on by Samed GÖZÜTOK 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
Posted on by Samed GÖZÜTOK 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
Posted on by Samed GÖZÜTOK 0