Sass, CSS’i daha okunaklı, yeniden kullanılabilir ve yönetilebilir hale getirmek için bir dizi özellik sunar. Bu özellikler sayesinde, CSS kodlarını daha az yazarak daha fazla işlem yapabiliriz. Ayrıca, Sass, değişkenler, fonksiyonlar, modüller ve daha pek çok özellikle CSS’nin yönetimini ve bakımını kolaylaştırır. Aşağıdaki kod blokları, Sass kullanarak 4 farklı renkte stil oluşturulmasına ilişkin bir örnek …
Flexbox, CSS’deki en şaşırtıcı özelliklerden biridir. Aslında flexbox, esnek kutuların kontrol edilmesini sağlar. Bu kutuları kontrol etmek için, bizim gibi insanların gözünün gördüğü sayfaların düzeni hakkında daha güçlü bir his kazanmamız gerekiyor. Flexbox’un yapısı, bu kutuların boyutunu, sıralamasını ve hizalamasını değiştirerek, tam olarak istediğimiz düzeni sağlamamıza izin verir. Aşağıdaki kod blokları, Flexbox kullanarak 3 kutuya …
Media Query’ler, web sayfalarının farklı çözünürlüklerdeki cihazlarda nasıl görüntüleneceğini ve davranışını kontrol etmek için kullanılır. Bu özellik sayesinde, web sayfalarının farklı boyutlu cihazlarda uygun bir şekilde görüntülenmesi sağlanır. Responsive Web Tasarımı, Media Query’ler kullanarak farklı cihazlara yönelik uygun tasarımlar oluşturmayı hedefleyen bir tekniktir. Bu teknik, web sayfasının içeriğinin ve düzeninin, ekran boyutuna göre otomatik olarak …
CSS Animasyonları, web sayfalarında kullanılan HTML etiketleri için hareketli animasyonlar, geçişler ve diğer görsel efektler oluşturmak için kullanılır. Bu özellik sayesinde, sayfa tasarımlarına daha fazla canlılık ve dinamizm katılabilir. Keyframes özelliği, bir animasyonun nasıl gerçekleşeceğini belirtir. Animation-name özelliği, animasyonun adını belirler. Animation-duration özelliği, animasyonun süresini belirler. Animation-timing-function özelliği, animasyonun hızlılık ve yavaşlığı gibi zamanlama özelliklerini …
Daire ve Çizgi Stilleri özelliği, web sayfalarında kullanılan HTML etiketleri için daireler, kareler, çizgiler gibi şekiller oluşturmak için kullanılır. Bu özellik sayesinde, sayfa tasarımlarına daha fazla estetik katılabilir. Border-radius özelliği, elementin köşelerini yuvarlar ve daire veya oval şekilli elementler oluşturur. Border-style özelliği, elementin kenarlık stilini belirler. Border-width özelliği, elementin kenarlık kalınlığını ayarlar. Border-color özelliği, elementin …
Renkler ve Arka Planlar özelliği, web sayfalarında kullanılan HTML etiketleri için arka plan rengi veya metin rengi gibi birçok seçenek sunar. Bu özellik sayesinde, metinler ve arka planlar daha estetik ve okunaklı hale getirilebilir. Color özelliği, metnin rengini ayarlar. Background-color özelliği, arka plan rengini ayarlar. Opacity özelliği, elementin opaklığını ayarlar. Gradientler ile birden fazla renk …
Typography özelliği, web sayfalarında kullanılan yazıların stil, boyut, renk, satır aralığı, yazı tipi vb. özelliklerini belirlememizi sağlar. Bu özellik sayesinde, metinler daha okunaklı, güzel ve dikkat çekici hale getirilebilir. Font-size özelliği, metin boyutunu ayarlar. Font-family özelliği, metnin yazı tipini belirler. Color özelliği, metne bir renk atar. Line-height özelliği, metnin satır aralığını kontrol eder. Text-align özelliği, …
Positioning özelliği, elementlerin belirli bir konumda görüntülenebilmesini sağlar. Bu özellik sayesinde elementler dört farklı pozisyonda tutulabilir: static, relative, absolute ve fixed. Static position (statik konum), elementin varsayılan pozisyonudur ve elementler sayfanın normal akışında görüntülenir. Relative position (relatif konum), elemanın orijinal pozisyonuna göre konumunu ayarlar. Absolute position (mutlak konum), elemanın belirli bir konuma sabitlenmesini sağlar ve …
Display özelliği, elementlerin nasıl görüntüleneceğini belirleyen bir CSS özelliğidir. Bu özellik sayesinde elementler blok, inline veya inline-block olarak görüntülenebilirler.
CSS Box Model, bir HTML elementinin boyutunu ve konumunu belirlerken kullanılan bir modeldir. Bu model, her elementin iç içe geçmiş bir dizi kutudan oluştuğunu varsayar.
