Nasıl kullanıldığını öğren CSS yaratmakfantezi paragraflarınız için ilk büyük harfler. İlk sınırınız için grafik bir görüntü kullanmak için basit bir görüntü değiştirme tekniği bile var.
İlk Büyük Harflerin Temel Stilleri
Belgelerde üç temel ilk büyük harf stili vardır:
- yükseltilmiş - en yaygın olanı, ilk harfin daha büyük olduğu ve mevcut metinle aynı satırda olduğu.
- düştü - ayrıca, ilk harfin daha büyük olduğu ve metnin ilk satırının altına düştüğü durumlarda oldukça yaygındır. Aşağıdaki metin daha sonra etrafında yüzer.
- bitişik - ilk harfin metnin geri kalanının yanında bir sütunda olduğu yer. Bu, baskıda web tasarımından daha yaygındır.
İlk büyük harfler veya büyük harfler çok tanıdık. Aksi takdirde uzun ve sıkıcı metinleri giydirmenin harika bir yoludur. Ve CSS özelliğiyle: ilk harf, ilk harflerinizi nasıl daha gösterişli hale getireceğinizi kolayca tanımlayabilirsiniz.
Basit Bir İlk Başlık Oluşturun
Basit bir yükseltilmiş başlangıç başlığı oluşturmak için yapmanız gereken tek şey, paragrafınızın ilk harfini, birinci harf sözde öğesiyle daha büyük hale getirmektir:
p: ilk harf { yazı tipi boyutu: 3em; }
Ama birçok tarayıcılar ilk harfin satırdaki metnin geri kalanından daha büyük olduğuna bakın, bu nedenle satır aralığını satırın geri kalanı için değil, o ilk harf için anlamlı olana eşit yaparlar. Neyse ki, birinci satır sözde öğesi ve satır yüksekliği özelliği ile bunu düzeltmek kolaydır:
p: ilk harf { yazı tipi boyutu: 3em; }
p: ilk satır { satır yüksekliği: 1em; }
Metniniz için doğru boyutu bulana kadar belgenizdeki satır yüksekliğiyle oynayın.
İlk Şapkanızla Oynayın
İlk şapkayı nasıl oluşturacağınızı anladıktan sonra, onu öne çıkarmak için süslü giysilerle giydirebilirsiniz. Renkler, arka plan renkleri, kenarlıklar veya hoşunuza giden her şeyle oynayın. Oldukça basit bir stil, yalnızca ilk harf için yazı tipinizin ve arka plan renginizin renklerini tersine çevirmektir:
p: ilk harf {
yazı tipi boyutu: %300;
arka plan rengi: #000;
renk: #fff;
}
p: ilk satır { satır yüksekliği: %100; }
Başka bir numara da ilk satırı ortalamaktır. Mizanpajınız esnekse metin satırının ortası farklı olabileceğinden, bu CSS ile zor olabilir. Ancak, değerlerle biraz oynayarak, ilk satırınızı, ilk harfi ortada gösterecek kadar girintili yapabilirsiniz. Doğru görünene kadar paragrafın metin girintisindeki yüzdeyle oynamanız yeterlidir:
p: ilk harf {
yazı tipi boyutu: %300;
arka plan rengi: #000;
renk: #fff;
}
p: ilk satır { satır yüksekliği: %100; }
p { metin girintisi: %45; }
Bitişik İlk Büyük Harfler CSS ile Zordur
Farklı tarayıcılar yazı tiplerini farklı görüntülediğinden, bitişik ilk büyük harfler CSS ile zor olabilir. CSS'de bitişik bir başlık oluşturmanın ardındaki fikir, ilk satırdaki text-indent özelliğini negatif bir değer dışarı (sola) itmek için kullanmaktır. Ayrıca o paragrafın sol kenar boşluğunu bir miktar değiştirmeniz gerekecektir. Paragraf iyi görünene kadar bu sayılarla oynayın.
p {
metin girintisi: -2.5em;
sol kenar boşluğu: 3em;
}
p: ilk harf { yazı tipi boyutu: 3em; }
p: ilk satır { satır yüksekliği: %100; }
Gerçekten Süslü İlk Büyük Harfler Almak
Süslü bir başlangıç başlığı oluşturmanın en iyi yolu, yazı tipini daha dekoratif bir yazı tipi ailesiyle değiştirmektir. Eğer bir yazı tipi serisi ardından bir genel yazı tipi, müşterilerinizin erişilebilirlik ve kullanılabilirlik sorunlarına girmeden görebilmesi için ilk sınırınızın iyi görünmesini garanti etmeye yardımcı olur.
p: ilk harf {
yazı tipi boyutu: 3em;
yazı tipi ailesi: "Edward Script ITC", "Brush Script MT", el yazısı;
}
p: ilk satır { satır yüksekliği: %100; }
Ve her zaman olduğu gibi, tüm bu önerileri bir araya getirerek reklamların paragrafınıza göre şekillendirdiği bir başlangıç başlığı oluşturabilirsiniz.
Grafik İlk Başlığı Kullanma
Tüm bunlardan sonra, ilk büyük harfinizin sayfada nasıl göründüğünden hala hoşlanmıyorsanız, tam olarak aradığınız efekti elde etmek için grafiklere başvurabilirsiniz. Ancak doğrudan grafiklere geçmeye karar vermeden önce, bu yöntemin dezavantajlarından haberdar olmalısınız:
- Görseli olmayan müşteriler ilk sınırı görmez ve görselin değiştirdiği gizli metni göremeyebilir. Bu, paragrafı erişilemez hale getirebilir veya en iyi ihtimalle okunmasını zorlaştırabilir.
- Görüntüler her zaman bir sayfanın indirme süresine eklenir. Çok sayıda ilk sınırınız varsa, birçok insanın önemsiz olduğunu düşüneceği bir şey için indirme süresini önemli ölçüde artırabilirsiniz.
- Bazı tarayıcılar hem gizli ilk harfi hem de paragraf metnini tuhaf gösterebilecek resmi görüntüler.
- Doğru grafiği kullanabilmek için ilk harfi tam olarak bilmeniz gerektiğinden, bu seçeneği otomatikleştirmek çok zordur. Bu nedenle, paragraf her düzenlendiğinde yeni bir grafik oluşturmanız gerekebilir.
İlk önce, ilk harfin grafiğini oluşturmanız gerekir. "Edwardian Script ITC" yazı tipiyle L harfini oluşturmak için Photoshop'u kullandık. Büyük yaptık - 300pt boyutunda. Daha sonra resmi harfin çevresinde minimuma indirdik ve resmin genişliğini ve yüksekliğini not ettik.
Daha sonra paragrafımız için bir "capL" sınıfı oluşturduk. Hangi görüntünün kullanılacağını, baştaki (çizgi yüksekliği) vb. tanımladığımız yer burasıdır.
Paragrafın metin girintisini ve dolgu üstünü ayarlamak için görüntü genişliğini ve yüksekliğini kullanmanız gerekir. L resmimiz için 95px girinti ve 72px dolguya ihtiyacımız vardı.
p.capL {
satır yüksekliği: 1em;
arka plan resmi: url (capL.gif);
arka plan tekrarı: tekrar yok;
metin girintisi: 95 piksel;
üst dolgu: 72 piksel;
}
Ama hepsi bu değil. Orada bırakırsanız, ilk harf paragrafta, önce grafikle, sonra metinde çoğaltılacaktır. Bu yüzden, "initial" sınıfıyla ilk öğenin etrafına bir yayılma ekledik ve tarayıcıya bu harfi göstermemesini söyledik:
span.initial { görüntü: yok; }
Grafik daha sonra doğru şekilde görüntülenir. Metnin tam harfe kadar oturmasını sağlamak için paragraftaki metin girintisiyle oynayabilirsiniz, ancak istediğiniz şekilde görüntülenmesini sağlayabilirsiniz.