İçerik
- CSS ve görüntüleri kullanarak süslü ilk büyük harfler nasıl oluşturulur?
- İlk Kapakların Temel Stilleri
- Basit Bir Başlangıç Sınırı Oluşturma
- İlk Başlığınızla Oynayın
- Bitişik Başlangıç Kapakları CSS ile Zor
- Gerçekten Süslü İlk Başlıklar
- Grafik Bir Başlangıç Başlığı Kullanma
CSS ve görüntüleri kullanarak süslü ilk büyük harfler nasıl oluşturulur?
Paragraflarınız için süslü ilk büyük harfler oluşturmak için CSS'yi nasıl kullanacağınızı öğrenin. İlk başlığınız için grafik bir görüntü kullanmak için basit bir görüntü değiştirme tekniği bile vardır.
İlk Kapakların Temel Stilleri
Belgelerde üç temel ilk kapak stili vardır:
- kalkık - en yaygın olan, ilk harfin daha büyük ve geçerli metnin aynı satırında olması.
- bırakılan - ilk harfin daha büyük olduğu ve metnin ilk satırının altına düştüğü de oldukça yaygındır. Aşağıdaki metin daha sonra onun etrafında yüzer.
- bitişik - burada ilk harf metnin geri kalanının yanında bir sütunda bulunur. Bu baskıda web tasarımından daha yaygındır.
İlk kapaklar veya damla kapakları çok tanıdıktır. Aksi takdirde uzun ve sıkıcı metin aralıklarını giymek için harika bir yoldur. Ve CSS özelliği ile: ilk harf, ilk harflerinizi nasıl daha meraklı hale getireceğinizi kolayca tanımlayabilirsiniz.
Basit Bir Başlangıç Sınırı Oluşturma
Basit bir yükseltilmiş ilk kapak oluşturmak için yapmanız gereken tek şey, paragrafınızın ilk harfini ilk harf sahte öğesiyle daha büyük yapmaktır:
p: ilk harf {font-size: 3em; }
Ancak birçok tarayıcı, ilk harfin satırdaki metnin geri kalanından daha büyük olduğunu görür, bu nedenle satır aralığını, satırın geri kalanına değil, ilk harf için anlamlı olana eşit yapar. Neyse ki, bu ilk satır sözde elemanı ve satır yüksekliği özelliği ile düzeltmek kolaydır:
p: ilk harf {font-size: 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 Başlığınızla Oynayın
İlk kapağın nasıl oluşturulacağını anladıktan sonra, onu süslemek için süslü kıyafetlerle giydirebilirsiniz. Renklerle, arka plan renkleriyle, kenarlıklarla veya süslemenize ne olursa olsun oynayın. Oldukça basit bir stil, sadece 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 ilk satırı ortalamaktır. Düzeniniz esnekse metin satırının ortası farklı olabileceğinden, bu CSS ile zor olabilir. Ancak bazı değerlerle oynamak, ilk satırın ortada görünmesini sağlayacak kadar ilk satırınızı girintili yapabilirsiniz. Doğru görünene kadar paragrafın metin girintisinde yüzde ile oynayın:
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 Başlangıç Kapakları CSS ile Zor
Bitişik ilk büyük harfler CSS ile zor olabilir, çünkü farklı tarayıcılar yazı tiplerini farklı görüntüler. CSS'de bitişik bir kapak oluşturmanın arkasındaki fikir, ilk satırdaki metin girintisi özelliğini negatif bir değer (sola doğru) itmek için kullanmaktır. Ayrıca, bu paragrafın sol kenar boşluğunu bir miktar değiştirmeniz gerekir. 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 {font-size: 3em; }
p: ilk satır {satır yüksekliği:% 100; }
Gerçekten Süslü İlk Başlıklar
Süslü bir başlangıç sınırı oluşturmanın en iyi yolu, yazı tipini daha dekoratif bir yazı tipi ailesine dönüştürmektir. Bir dizi yazı tipi ve ardından genel bir yazı tipi kullanırsanız, müşterilerinizin erişilebilirlik ve kullanılabilirlik sorunlarına girmeden bunu görebilmeleri için ilk başlığınızın iyi görünmesini sağlamanıza yardımcı olur.
p: ilk harf {
yazı tipi boyutu: 3em;
font-family: "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 stil kazandığı bir başlangıç sınırı oluşturun.
Grafik Bir Başlangıç Başlığı Kullanma
Tüm bunlardan sonra, ilk büyük harflerinizin 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ının farkında olmalısınız:
- Görüntüsüz müşteriler ilk kapağı görmez ve görüntünün değiştirdiği gizli metni görmeyebilir. Bu, paragrafa erişilemez veya en iyi şekilde okunmasını zorlaştırabilir.
- Görüntüler her zaman sayfanın indirme süresine eklenir. Çok fazla başlangıç sınırınız varsa, birçok kişinin önemsiz olduğunu düşündüğü bir şey için indirme süresini önemli ölçüde artırabilirsiniz.
- Bazı tarayıcılarda hem gizli ilk harf hem de paragraf metninin garip görünmesine neden olabilecek resim görüntülenir.
- Doğru grafiği kullanmak için ilk harfin tam olarak ne olduğunu 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 olarak, ilk harfin grafiğini oluşturmanız gerekir. Photoshop'u "Edward Script ITC" yazı tipiyle L harfi oluşturmak için kullandık. Büyük yaptık - 300pt boyutunda. Daha sonra görüntüyü harf etrafında çıplak minimum seviyeye indirdik ve görüntü genişliği ve yüksekliğini not ettik.
Sonra paragrafımız için bir "capL" sınıfı oluşturduk. Burası hangi görüntüyü kullanacağımızı, satır aralığı (satır yüksekliği) vb. Tanımladığımız yerdir.
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 95 piksel girinti ve 72 piksel dolguya ihtiyacımız vardı.
p.capL {
satır yüksekliği: 1em;
arka plan resmi: url (capL.webp);
arkaplan tekrarlama: tekrarlama yok;
metin girintisi: 95 piksel;
dolgu üstü: 72 piksel;
}
Ama hepsi bu değil. Orada bırakırsanız, ilk harf paragrafta, önce grafikle, sonra metinde çoğaltılır. Bu nedenle, ilk öğenin etrafına "baş harf" sınıfıyla bir aralık ekledik ve tarayıcıya bu harfi göstermemesini söyledik:
span.initial {display: yok; }
Grafik daha sonra doğru şekilde görüntülenir. Metnin harfi harfine kadar tam olarak sığdırmasını sağlamak için paragraftaki metin girintisiyle oynayabilirsiniz, ancak görüntülenmesini istersiniz.
