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

See the Pen <a href='http://codepen.io/w3tr/pen/NGeyPj/'>border-image-repeat</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

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 13 Kasım 201525 Kasım 2015 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

See the Pen <a href='http://codepen.io/w3tr/pen/KdbZGm/'>border-image-outset</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

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 13 Kasım 201525 Kasım 2015 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

See the Pen <a href="http://codepen.io/w3tr/pen/Vvqrod/">border-image</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

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 13 Kasım 20155 Mayıs 2016 by Samed GÖZÜTOK 0

CSS border-color

border-color :

Border-color özelliği bir elementin dört sınırlarının rengini ayarlar. Bu özellik bir ila dört değerlere sahip olabilir.

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

Örnek

p.tekli {
    border-style: solid;
    border-color: #0000ff;
}

p.ikili {
    border-style: solid;
    border-color: #ff0000 #0000ff;
}

p.uclu {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff;
}

p.dortlu {
    border-style: solid;
    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/QjzOVe/">border-color</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
color	Arkaplan rengini belirler varsayılan değer siyahtır.
transparent	Rengin şeffaf olması gerektiğini belirtir.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	3.5

Posted on 13 Kasım 201523 Temmuz 2016 by Samed GÖZÜTOK 0

CSS border-collapse

border-collapse :

border-collapse özelliği, table ve içindeki sutunlar için ayrı ayrı border tanımlamamızı olanak sağlar.

Örnek

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid blue;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/yYGPKL/">border-collapse</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>

Css Sözdizimi

Değer	Açıklama
separate	Değerlere boşluk ayırt etmeden border verilmesini sağlar.
collapse	Genel tabloya border verilir sadece.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	5.0	1.2	4.0

Posted on 13 Kasım 20152 Eylül 2016 by Samed GÖZÜTOK 0

CSS border-bottom-width

css border-bottom-width :

border-bottom-width özelliği, border ‘ ın genişlik boyutunu tanımlamamızı sağlar.
Not: border ‘ ın width özelliğini belirtmeden önce kesinlikle border-style özelliği verilmelidir.

Örnek

#border-bottom-width{
     border-style: solid;
    border-bottom-width: 10px;
    color: blue;
}

Codepen Ön izleme

See the Pen <a href="http://codepen.io/w3tr/pen/epbepO/">epbepO</a> by W3TR (<a href="http://codepen.io/w3tr">@w3tr</a>) on <a href="http://codepen.io">CodePen</a>.

Css Sözdizimi

Değer	Açıklama
medium	varsayılan değer.
thin	ince bir sınır sitilini vermemizi sağlar.
thick	ince bir sınır sitilini vermemizi sağlar.
length	Nokta biçiminde stil verir.
İnital
İnherit

Tarayıcı Desteği


1.0	1.0	4.0	1.0	3.5

Posted on 13 Kasım 201523 Temmuz 2016 by Samed GÖZÜTOK 1

CSS background-position

background-position :

Arka plandaki görüntünün pozisyonunu belirlemek için kullanılır.

Örnek

.position {
  height: 17px;
  background-image: url('http://www.w3tr.com/file/html5.png');
  background-repeat: no-repeat;
  background-position: center;
}

Codepen Ön izleme

See the Pen <a href='http://codepen.io/w3tr/pen/YyoPpp/'>background-position</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>.

Css Sözdizimi

Değer	Açıklama
left top left center left bottom right top right center right bottom center top center center center bottom	Eğer tek bir değer verirseniz alacağı diğer değer otomatik olarak “center” olacaktır.
x% y%	İlk değer yatay pozisyon ve ikinci değer dikey . Sol üst köşesi 0% 0 % ‘dir. Sağ alt köşede % 100 % 100’dür. Eğer tek bir değer belirtirseniz , diğer değer % 50 olacaktır . . Varsayılan değer : 0 % 0%
xpos ypos	İlk değer yatay pozisyon ve ikinci değer dikey . Sol üst köşesi 0px 0px ‘dir. Sağ alt köşede % 100 % 100’dür. Eğer tek bir değer belirtirseniz , diğer değer % 50 olacaktır.
initial
inherit

Tarayıcı Desteği


2.0	1.0	4.0	1.0	3.5

Posted on 10 Kasım 201527 Temmuz 2016 by Samed GÖZÜTOK 1

CSS align-items

align-items:

Obje içindeki nesneleri kenarlardan itibaren dikey ortalama yapar.

Örnek:

div {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

See the Pen RWyOOJ by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

Değer	Açıklama	Örnek
stretch	Öğeler ana objeye sığacak kadar uzatılır.
center	Öğeler ana objenin merkezine konumlandırılır.
flex-start	Öğeler ana objenin başında konumlandırılır.
flex-end	Öğeler ana objenin sonunda konumlandırılır.
Baseline	Öğeler ana objenin başında konumlandırılır.	.
initial	Varsayılan değerine bu özelliğini ayarlar.
inherit	Bir üst elementinin değerini alır.(Kalıtsallık)

Tarayıcı Desteği


21.0	20.0	11.0	7.0 -webkit	12.1

Posted on 29 Ekim 201529 Ağustos 2016 by Samed GÖZÜTOK 0

CSS align-content

align-content:

Ana objenin içindeki diğer objeleri dikey eksen üzerinde hizalamasını yapar.

Not: Bu özelliğin etki etmesi için ana obje içindeki nesnelerin birden fazla olması gerekmektedir.

Örnek :

div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

See the Pen CSS align-content: stretch ; by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

Değer	Açıklama	Örnek
stretch	Öğeler ana objenin içine sığacak şekilde sıralanır. İlk öğe en üst konuma bitişik başlar.
center	Öğeler ana objenin merkezine konumlandırılır.
flex-start	Öğeler ana objenin başında konumlandırılır. Hepsi ardı ardına sıralanır.
flex-end	Öğeler ana objenin sonunda konumlandırılır. Hepsi ardı ardına sıralanır.
space-between	Öğeler üst ve alt kısımlar öncelik olmak üzere konumlandırılır. Bu iki öğe için üst ve alt 3 öğe için üst alt ve orta kısımlara konumlandırılırlar.
space-around	Öğeler obje içerisinde eşit olarak dikey olarak ortalanırlar.

Tarayıcı Desteği


21.0 -webkit	28.0	11.0	9.0 7.0 -webkit	12.10

Posted on 29 Ekim 201529 Ağustos 2016 by Samed GÖZÜTOK 0

HTML, CSS

border-image-repeat :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

border-image-outset :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

border-image :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

border-color :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

border-collapse :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

css border-bottom-width :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

background-position :

Örnek

Codepen Ön izleme

Css Sözdizimi

Tarayıcı Desteği

align-items:

Örnek:

CSS Sözdizimi

Tarayıcı Desteği

align-content:

Örnek :

CSS Sözdizimi

Tarayıcı Desteği