Etiket: css

CSS3 animation-delay

animation-delay :

Animasyonun yapılacağı süreyi belirler. Gecikme süreside denilebilir.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    -webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
    animation-delay: 3s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
time İsteğe bağlı. Önce beklenecek süre tanımlanır. Varsayılan değer 0 dır. Negatif değerlere izin verilir.
İnital
İnherit

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

CSS3 animation

animation :

Elementlere animasyonlar eklemek için kullanılır.

Örnek

div {
    width: 100px;
    height: 100px;
    background: green;
     color: white;
      position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
animation-name Animasyon ismini belirlemek için kullanılır. Her @keyframes animasyon için bir isim belirlemek gerekir.
animation-duration Animasyon döngüsünün süresini belirler.
animation-timing-function Animasyonda bir hız eğrisi belirler.
animation-delay Animasyonun yapılacağı süreyi belirler. Gecikme süresi de denilebilir.
animation-iteration-count Bir animasyonun oynama (tekrar) sayısını belirler.
animation-direction Bir animasyonun yön özelliğidir. Ters yönde veya alternatif yönde oynamasını belirler.
animation-fill-mode Animasyon tamamlandığında veya gecikme olduğunda obje için bir stil (konum, basamak) belirler.
animation-play-state Animasyonu çalışıp durdurmanızı sağlar.
İnital
İnherit

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

CSS all

all :

Verilen tüm özellikleri sıfırlamak için kullanılır.

Örnek

p {
  background: red;
  width: 300px;
  height: 300px;
  color: white;
  font-size: 20px;
  all: initial;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
initial Tüm özelikleri sıfırlar.
inherit
unset

Tarayıcı Desteği
37.0 27.0 Desteklenmiyor. Desteklenmiyor. 24.0
Posted on by Samed GÖZÜTOK 0

CSS z-index

z-index :

Z-index genellikle tasarımlarda üst üste gelecek kutularda sıralandırma yaparak istediğimiz görüntünün ortaya çıkmasını sağlamak amacıyla kullanılır. Z-index değeri en yüksek olan kutu her zaman için en üstte yer almaktadır.

Örnek

div {
  position relative;
  width: 100px;
  height: 100px;
}
div img {
  position: absolute;
  left:0;
  top:0;
  z-index: -1;
}
div p {
  font-size: 50px;
  color: red;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
auto Elementleri eklenme sırasına göre sıralar.
number Verdiğimiz numaraya göre sıralamayı yapar.
İnital
İnherit

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

CSS3 word-wrap

word-wrap :

Çerçeveye sığmayan yazıları kesip alt satıra atmak için kullanılır.

Örnek

p {
  width: 300px;
  border :1px solid red;
  word-wrap: break-word;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
normal Hiç bir değişiklik yapmadan normal bir şekilde kullanımı sağlar.
break-word Break word ise normal kullanımın tam aksine divimizin sınırlarından dışarıya çıkmasını engeller.
İnital
İnherit

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

CSS word-spacing

word-spacing :

Kelimeler arasındaki boşluk değerini belirlemek için kullanılır.

Not: Negatif değer alabilmektedir.

Örnek

p {
  word-spacing: 50px;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
normal Sözcükler arasındaki boşluğu normal olarak ayarlar.
length Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

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

CSS width

width :

Elementlerin genişliğini ayarlamak için kullanılır.

Örnek

div {
     background :red;
     color: white;
     width: 300px;
     height: 300px;
     text-align:center;
}

Codepen Ön izleme

 

Değer Açıklama
auto Genişlik tarayıcı genişliğine göre otomatik ayarlanır.
length Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
İnital
İnherit

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

CSS white-space

white-space :

Beyaz boşluk tanımlaması için kullanılır.

Örnek

p {
   white-space: nowrap;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
normal Birden fazla olan boşlukları tek boşluk gibi sayar.
nowrap etiketi hariç alt satıra geçişe izin vermez.
pre Birden fazla boşluğu birleştirmez.
Pre-line
Pre-wrap
İnital
İnherit

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

CSS visibility

visibility :

Visibility özelliği, iki farklı işleve sahiptir. Bir tablonun satırları ve sütunları gizler ve aynı zamanda diğer HTML elemanların görünür olup olmadığını belirler. Bu görünmezliği, elementin kendisini görünmez yaparken, web sayfa üzerinde kapladığı alanı boş alan olarak göstererek gerçekleştirir.

Örnek

.visibility {
  visibility: visible;
}
.hidden {
  visibility: hidden;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
visible Nesne normal olarak gösterilir.
hidden Nesne görünmez olur. Fakat döküman üzerinde kapladığı alanda değişlik olmaz. Kapladığı alan boş olarak gösterilir.
collapse Tablonun tüm satır veya sütunu ekrandan kaldırılmasına neden olur. Bu değer satır, satır grubu, sütun ve sütun grubu elemanları için kullanılır
İnital
İnherit

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

CSS vertical-align

vertical-align :

Metnin yatay olarak nasıl hizalanacağını belirler. Bir elementin içeriğinin dikey hizalaması için kullanılır.

Örnek

p {
             font-size: 30px;
}
   img.top {
             vertical-align: text-top;
}
   img.bottom {
             vertical-align: text-bottom;
}

Codepen Ön izleme

Css Sözdizimi

Değer Açıklama
baseline Çerçevenin taban çizgisi ile ebeveyn çerçevenin taban çizgisi hizalanır. Eğer çerçevelerin taban çizgileri yoksa çerçevelerin alt sınırları hizalanır
length Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir.
sub Çerçevenin taban çizgisi, ebeveyn çerçevenin alt indisi için uygun yüksekliğe düşürülür. (Bu değerin elemanın yazı tipi yüksekliği üzerinde bir etkisi yoktur.)
super Çerçevenin taban çizgisi, ebeveyn çerçevenin üst indisi için uygun yüksekliğe yükseltilir. (Bu değerin elemanın yazıtipi yüksekliği üzerinde bir etkisi yoktur.)
top Çerçevenin tepesi ile satır çerçevesinin tepesi hizalanır.
text-top Çerçevenin tepesi ile ebeveyn elemanın yazı tipinin tepesi hizalanır.
bottom Çerçevenin altı ile satır çerçevesinin altı hizalanır.
text-bottom Çerçevenin altı ile ebeveyn elemanın yazı tipinin altı hizalanır.
middle Çerçevenin düşeyde orta noktası ebeveyn çerçevenin taban çizgisinin yarım x-yüksekliği yukarısına hizalanır.
İnital
İnherit

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