CSS Google Fonts (Google Yazı Tipleri)
Google Fonts HTML’deki standart yazı tiplerinden herhangi birini kullanmak istemiyorsanız Google Fonts’u kullanabilirsiniz. Google Fonts’un kullanımı ücretsizdir ve aralarından seçim yapabileceğiniz 1000’den fazla yazı tipi vardır. Google Yazı Tipleri Nasıl Kullanılır? <head> bölümüne özel bir stil sayfası bağlantısı eklemeniz ve ardından CSS’deki yazı tipine başvurmanız yeterlidir. Burada Google Fonts’tan “Sofia” isimli bir font kullanmak istiyoruz:…
CSS Arka Plan (Background)
CSS arka plan özellikleri, öğelere arka plan efektleri eklemek için kullanılır. Bu bölümlerde aşağıdaki CSS arka plan özelliklerini öğreneceğiz. CSS background-color background-color özelliği, bir öğenin arka plan rengini belirtir. CSS’de bir renk çoğunlukla şu şekilde belirtilir: Herhangi bir HTML öğesinin arka plan rengini ayarlayabilirsiniz: Burada <h1>,<p> ve <div> öğeleri farklı arka plan renklerine sahip olacaktır:…
CSS Outline (Anahat)
Anahat, öğenin sınırının dışına çizilen bir çizgidir. CSS Outline Anahat, öğenin “öne çıkmasını” sağlamak için öğelerin etrafına, sınırların DIŞINA çizilen bir çizgidir. CSS aşağıdaki anahat özelliklerine sahiptir: Not: Anahat kenarlıklardan farklıdır! Kenarlığın aksine, ana hat öğenin kenarlığının dışına çizilir ve diğer içerikle örtüşebilir. Ayrıca dış hat, öğenin boyutlarının bir parçası DEĞİLDİR; öğenin toplam genişliği ve…
CSS Yazı Tipi Eşleştirme
Yazı tipi eşleştirmeleri yapacağınız tasarımın kalitesi için çok önemlidir. Yazı Tipi Eşleştirme Kuralları Yazı tipi eşleştirmeleri oluşturmak için bazı temel kurallar şunlardır: Tamamlayıcı Birbirini tamamlayan yazı tipi eşleşmelerini bulmak her zaman güvenlidir. Harika bir yazı tipi kombinasyonu, çok benzer veya çok farklı olmadan uyumlu olmalıdır. Süper Font Ailelerini Kullanın Yazı tipi ailesi, birlikte iyi çalışacak…
CSS Arka Plan Resmi (Background Image)
arka plan resmi özelliği, bir öğenin arka planı olarak kullanılacak resmi belirtir. Varsayılan olarak görüntü, öğenin tamamını kaplayacak şekilde tekrarlanır. Arka plan resmi belirlerken, sayfa üzerindeki metinlerin okunabilir olduğundan emin olmanızda fayda var. Arka plan resmi ayrıca <p> öğesi gibi belirli öğeler için de ayarlanabilir:
CSS Outline Width (Anahat Genişliği)
Outline-width özelliği, anahattın genişliğini belirtir ve aşağıdaki değerlerden birine sahip olabilir: Aşağıdaki örnekte farklı genişliklere sahip bazı ana hatlar gösterilmektedir:
CSS Font Property (Yazı Tipi Özelliği)
Kodu kısaltmak için, tüm ayrı yazı tipi özelliklerini tek bir özellikte belirlemek de mümkündür. Font özelliği aşağıdakiler için kısa bir özelliktir: Not: font-size ve font-family değerleri gereklidir. Diğer değerlerden biri eksikse varsayılan değerler kullanılır. Tüm CSS Yazı Tipi Özellikleri Özellik Açıklama font Tüm yazı tipi özelliklerini tek bir satırda ayarlar font-family Metin için yazı tipi…
CSS Görsel Tekrarı (Background Image Repeat)
Varsayılan olarak, arka plan görüntüsü özelliği görüntüyü hem yatay hem de dikey olarak tekrarlar. Bazı görsellerin yalnızca yatay veya dikey olarak tekrarlanması gerekir, aksi takdirde aşağıdaki gibi tuhaf görünebilirler: Yukarıdaki görüntü yalnızca yatay olarak tekrarlanırsa (background-repeat: repeat-x;), arka plan daha iyi görünecektir: Açık mavi yerine beyaz renk olsaydı daha güzel görünecekti 🙂 İpucu: Bir görüntüyü…
CSS Outline Color (Anahat Rengi)
Outline-color özelliği anahattın rengini ayarlamak için kullanılır. Renk şu şekilde ayarlanabilir: Aşağıdaki örnekte farklı renklere sahip bazı farklı ana hatlar gösterilmektedir. Ayrıca bu öğelerin dış hat içinde ince siyah bir kenarlığa sahip olduğuna da dikkat edin: HEX Değerleri Anahat rengi onaltılık bir değer (HEX) kullanılarak da belirtilebilir: RGB Values Veya RGB değerlerini kullanarak: HSL Değerleri…
CSS Icon (Simgeler)
Simgeler, bir simge kitaplığı kullanılarak HTML sayfanıza kolayca eklenebilir. Simgeler Nasıl Eklenir? HTML sayfanıza simge eklemenin en basit yolu Font Awesome gibi bir simge kitaplığı kullanmaktır. Belirtilen simge sınıfının adını herhangi bir satır içi HTML öğesine ekleyin (<i> veya <span> gibi). Aşağıdaki simge kitaplıklarındaki tüm simgeler, CSS ile özelleştirilebilen ölçeklenebilir vektörlerdir (boyut, renk, gölge vb.)…