Css Ders 4 – Gelişmiş Özellikler (Properties)

Konumlandırma (Positioning)

static: Varsayılan konumlandırma türüdür. Öğeler normal akışta yer alır.
relative: Öğeyi normal konumundan göreceli olarak kaydırır. top, right, bottom, ve left özellikleri ile kaydırma miktarı belirtilir. Diğer öğelerin akışını etkilemez.
absolute: Öğeyi, en yakın üst öğesine (positioned ancestor) göre konumlandırır. Üst öğe relative, absolute, fixed, veya sticky ise bu rolü oynar. top, right, bottom, ve left özellikleri ile konum belirtilir. Diğer öğelerin akışını etkiler.
fixed: Öğeyi, tarayıcı penceresine göre sabitler. Sayfa kaydırıldığında bile aynı yerde kalır. top, right, bottom, ve left özellikleri ile konum belirtilir. Diğer öğelerin akışını etkiler.
sticky: Öğenin normal akışta yer aldığı, ancak belirli bir kaydırma noktasına ulaştığında fixed gibi davranmaya başladığı bir konumlandırma türüdür. top, right, bottom, ve left özellikleri ile kaydırma noktası belirtilir.
z-index: Üst üste binen öğelerin katmanlarını belirler. Daha yüksek z-index değerine sahip öğeler, daha düşük değere sahip olanların önünde görünür.

Ekran Özellikleri (Display Properties)

block: Öğenin tamamını kaplayan, aşağıda yeni bir satıra geçen bir blok öğe oluşturur. <div>, <p>, <h1> gibi etiketler varsayılan olarak blok öğelerdir.
inline: Öğenin içeriği kadar genişlikte, aynı satırda diğer öğelerle yan yana duran bir iç satır öğe oluşturur. <span>, <a> gibi etiketler varsayılan olarak iç satır öğeleridir.
inline-block: İç satır öğelerin blok öğeler gibi genişlik ve yükseklik belirleme özelliğine sahip olmasını sağlar. Aynı satırda dururken, genişlik ve yüksekliği kontrol edilebilir.
none: Öğeyi sayfadan tamamen kaldırır. Öğenin içeriği ve boşluğu da ortadan kalkar.

Dönüşümler (Transforms)

transform özelliği ile öğelerin görünümünü değiştirebilirsiniz:

rotate(açı): Öğeyi belirtilen açıda döndürür.
scale(oran): Öğenin boyutunu belirtilen oranda büyütür veya küçültür.
translate(x, y): Öğeyi x ve y eksenlerinde belirtilen piksel sayısı kadar kaydırır.
skew(x-açısı, y-açısı): Öğeyi x ve y eksenlerinde belirtilen açılarda eğriltir.

Geçişler (Transitions)

transition özelliği ile CSS özelliklerinin değerlerinin değişimi sırasında yumuşak animasyonlar oluşturulabilir.

transition-property: Hangi özelliğin geçiş yapacağını belirtir (örnek: background-color, transform).

transition-duration: Geçişin ne kadar süreceğini belirtir.

transition-timing-function: Geçişin hızını kontrol eder (örnek: ease, linear, ease-in, ease-out).

transition-delay: Geçişin başlaması için gecikme süresini belirtir.