Etiket: style

CSS3 transform-style

transform-style :

İç içe geçmiş elementleri  nasıl duracağını belirler 3D alanda işlenir.

Örnek

#bir {
    position: relative;
    height: 300px;
    width: 300px;
    margin: 50px;
    padding: 20px;
    border: 1px solid red;
}

#iki {
    padding: 60px;
    position: absolute;
    background-color: green;
    -webkit-transform: rotateY(30deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(30deg);
    transform-style: preserve-3d;
}

#uc {
    padding: 50px;
    position: absolute;
    background-color: red;
    -webkit-transform: rotateY(-30deg); /* Chrome, Safari, Opera */
    transform: rotateY(-30deg);

}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
flat Metni sola hizalar.
Preserve-3D Metni sağa hizalar.
İnital
İnherit

Tarayıcı Desteği
36.0
12.0-webkit		 16.0
10.0-moz		 10.0 9.0
4.0-webkit		 23.0
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS text-decoration-style

text-decoration-style :

Eklenecek çizginin stilini belirlemek için kullanılır.

Örnek

p{
    -moz-text-decoration-style: dashed; /*Firefox */
    text-decoration: overline;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
solid Çizgi tek bir satır şeklinde görünür.
double Kalın tek bir çizgi görünür.
dotted Çizgi noktalı bir şekilde görünür.
wavy Çizgi dalgalı bir şekilde görünür.
dashed izgi kesik çizgili şeklinde görünür.
İnital
İnherit

Tarayıcı Desteği
Desteklenmiyor 6.0-moz Desteklenmiyor Desteklenmiyor Desteklenmiyor
Posted on by Samed GÖZÜTOK 0

CSS outline-style

outline-style :

Bir element sınırları ile outline çizgisinin stilini ayarlamak için kullanılır.

Örnek

div {
   outline-style: dashed;
   outline-color: green;
  width: 300px;
  padding: 20px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Outline çizgisini kaldırır.
hidden Outline çizgisini gizler.
dotted Noktalı outline çizgisini çizer.
dashed Kesik çizgili outline çizgisini çizer.
solid Düz outline çizgisini çizer.
double Çift outline çizgisini çizer.
groove 3D grooved(Yivli) outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
ridge 3D ridge(Çıkıntılı) outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
inset 3D inset outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
outset 3D outset outline çizgisini çizer. Efekt renge göre değişkenlik gösterir.
İnital
İnherit

Tarayıcı Desteği
1.0 1.5 8.0 1.2 7.0
Posted on by Samed GÖZÜTOK 0

CSS list-style-type

list-style-type :

Liste işaretinin  türünü belirlemek için kullanılır.

Örnek

ul{
 list-style-type: circle;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
disc İşaretçi içi dolu bir daire şeklini alır.
armenian Ermeni numaralandırması yapılır.
circle İşaretçi içi boş bir daire şeklini alır.
Cjk-ideographic İşaretçi düz ideolojik sayılara dönüşür.
decimal İşaretçi bir sayıya dönüşür.
Decimal-leading-zero İşaretçi bir sayıya dönüşür. Fakat başına 0 değeri alır. (01, 02, 03, … gibi)
georgian İşaretçi geleneksel gürcü numaralandırmasına dönüşür.
hebrew İşaretçi İbranice numaralandırmaya dönüşür.
hiragana İşaretçi geleneksel hiragana numaralandırmasına dönüşür.
Hiragana-iroha İşaretçi geleneksel hiragana iroha numaralandırmasına dönüşür.
katakana İşaretçi geleneksel katakana numaralandırmasına dönüşür.
katakana-iroha İşaretçi geleneksel katakana iroha numaralandırmasına dönüşür.
Lower-alpha İşaretçi (a, b, c, d, … gibi) değere dönüşür.
Lower-greek İşaretçi yunan harflerine dönüşür.
Lower-latin İşaretçi latin harflerine dönüşür.
Lower-roman İşaretçi roman harflerine dönüşür.
none İşaretleyici değer almaz.
square İşaretçi bir kareye dönüşür.
Upper-alpha İşaretçi (A, B, C, D… gibi) değerlere dönüşür.
Upper-latin İşaretçi büyük latin harflerine dönüşür.
Upper-roman İşaretçi roman rakamlarına dönüşür.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 3.5
Posted on by Samed GÖZÜTOK 0

CSS list-style-position

list-style-position :

Liste işaretinin liste akışında mı yoksa dışında mı görüneceğini ayarlamak için kullanılır.

Örnek

ul {
  list-style-position: outside;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
inside İşaretçi liste akışı içinde görünür.
outside İşaretçi liste akışı dışında görünür.
İ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 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 list-style

list-style :

Tek özellikle bütün liste özelliklerini ayarlamamızı sağlar. Eksik olan Property için varsayılan değer alınır.

Örnek

ul {
    list-style: square;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
list-style-type Liste işaretinin türünü belirler.
list-style-position Liste işaretinin konumunu ayarlar.
list-style-image Liste işaretinin türünü belirler. Resim atamanızı da sağlar.
İ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 font-style

font-style :

Metnin yazı tipi stilini belirler.

Örnek

.font {
  font-style: italic;
  font-size: 50px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
normal Yazı stilini normal olarak ayarlamak için kullanılır.
İtalic Yazı stilini italik olarak ayarlamak için kullanılır.
ablique Tarayıcı eğik bir yazı stili görüntüler.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 4.0 1.0 7.0
Posted on by Samed GÖZÜTOK 0

CSS3 column-rule-style

Column-rule-style :

Stunlar arasındaki kesmenin stilini ayarlar.

Örnek

.column {
      /* Chrome, Safari, Opera */
    -webkit-column-count: 5;
    -webkit-column-gap: 60px;
    -webkit-column-rule-style: dashed;

    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 60px;
    -moz-column-rule-style: dashed;

    column-count: 5;
    column-gap: 60px;
    column-rule-style: dashed;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none sütun çizgisini kaldırır.
hidden sütun çizgisini gizler.
dotted Noktalı bir sütun çizgisi çizer.
dashed Kesik bir sütun çizgisi çizer.
solid Düz bir sütun çizgisi çizer.
double ikili bir sütun çizgisi çizer.
groove 3D grooved(Yivli) sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir.
ridge 3D ridge(Çıkıntılı) sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir.
inset 3D inset sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir.
outset 3D outset sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir.
İnital
İnherit

Tarayıcı Desteği
4.0-webkit 2.0-moz 10.0 3.1-webkit 11.1
15.0-webkit
Posted on by Samed GÖZÜTOK 0

CSS border-top-style

Border-top-style :

Elementin üst kenarlık stilini  ayarlamak  için kullanılır.

Örnek

#borderTop{
    border-style: dashed;
    border-top-style: dotted;
    padding: 10px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Kenarlık stilinin olmadığını belirtir.
hidden Kenarlığı gizlemek için kullanılır.
dotted Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
dashed kesik çizgili bir kenarlık olduğunu belirtir.
double çift kenarlıklı bir kenarlık olduğunu belirtir.
solid düz bir kenarlık olduğunu belirtir.
groove düz kenarlıklı bir kenarlık olduğunu belirtir.
inset 3D gömme kenar tanımlar. Efekt border-color değerine bağlıdır.
ridge 3D oluklu kenar tanımlar. Efekt border-color değerine bağlıdır.
outset 3D outset kenar tanımlar. Efekt border-color değerine bağlıdır.
İnital
İnherit

Tarayıcı Desteği
1.0 1.0 5.5 1.0 9.2
Posted on by Samed GÖZÜTOK 1