Paragraflarınız için süslü başlangıç kapaklarını oluşturmak için CSS'yi nasıl kullanacağınızı öğrenin. İlk başı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
Belgelerdeki ilk temel başlıkların üç temel stili vardır:
- kalkık - En yaygın olanı, ilk harfin daha büyük ve mevcut metinle aynı çizgide.
- bırakılan - İlk harfin daha büyük olduğu ve metnin ilk satırının altına düştüğü oldukça yaygındır. Aşağıdaki metin daha sonra etrafında yüzer.
- bitişik - İlk harfin metnin geri kalanında bir sütunda olduğu yer. Bu, baskıda Web tasarımından daha yaygındır.
İlk kapaklar veya açılan kapaklar çok tanıdık. Aksi halde uzun ve sıkıcı metinler giymenin harika bir yoludur. Ve CSS özelliğiyle: ilk harfle, ilk harfleri meraklıların nasıl yapılacağını kolayca tanımlayabilirsiniz.
Basit İlk Kapak Oluşturun
Basit yükseltilmiş bir ilk başlık oluşturmak için yapmanız gereken tek şey, paragrafınızın ilk harfini, büyük harfli ilk harfli sözde öğeyle 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üyor, bu yüzden satırın geri kalanı değil, ilk harf için neyin mantıklı olacağını öne sürüyorlar. Neyse ki, bu birinci satır sözde öğe ve çizgi 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 çizgi yüksekliğiyle oynayın.
İlk Cap ile Oynat
İlk kapağı nasıl yarattığınızı anladıktan sonra, onu öne çıkarmak için süslü kıyafetler giydirebilirsiniz. Renklerle, arka plan renkleriyle, kenarlıklarla veya fanteziinize ne olursa olsun oynayın. Oldukça basit bir stil, sadece ilk harf için yazı tipinizin ve arka plan renginin 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 hile 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 oynayarak, ilk harfinizi ortada görünmesini sağlamak için ilk satırınızı girebilirsiniz. Sadece sağa bakana kadar paragrafın metin girintisindeki yüzdeyle 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; }
Bitişik İlk Kapaklar CSS ile Zor
Farklı tarayıcılar yazı tiplerini farklı gösterdiğinden, bitişik başlangıçtaki başlıklar CSS ile zor olabilir. CSS'de bitişik bir kapak oluşturmanın ardındaki fikir, ilk satırdaki metin girintisi özelliğini (sola) negatif bir değere doğru itmek için kullanmaktır. Ayrıca, bu 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;
kenar boşluğu: 3em;
}
p: ilk harf {font-size: 3em; }
p: ilk satır {satır yüksekliği:% 100; }
Gerçekten Fantezi İlk Kapakları Başlarken
Süslü bir başlangıç kapağı oluşturmanın en iyi yolu, yazı tipini daha dekoratif yazı tipi ailesine dönüştürmektir. Bir dizi yazı tipini ve ardından genel bir yazı tipini kullanırsanız, ilk başınızın, müşterilerinizin erişebileceği ve erişilebilirlik ve kullanılabilirlik sorunları yaşamadan görebilmesini garanti eder.
p: ilk harf {
yazı tipi boyutu: 3em;
font-aile: "Edward Script ITC", "Fırça Script MT", el yazısı;
}
p: ilk satır {satır yüksekliği:% 100; }
Ve her zamanki gibi, tüm bu önerileri bir araya getirerek, paragrafınıza reklam stili veren bir başlangıç başlığı oluşturabilirsiniz.
Grafiksel İlk Başlığı Kullanma
Tüm bunlardan sonra, hala ilk harflerin sayfanın nasıl görüneceğini beğenmiyorsanız, tam olarak aradığınız etkiyi elde etmek için grafiklere başvurabilirsiniz. Ancak, doğrudan grafiğe gitmeye karar vermeden önce, bu yöntemin sakıncalarının farkında olmanız gerekir:
- Resimler olmayan müşteriler ilk kapağı görmez ve görüntünün değiştirildiği gizli metni göremeyebilir. Bu paragrafı erişilemez hale getirebilir veya en zor okunabilir.
- Görüntüler her zaman bir sayfanın indirme süresine eklenir. Çok fazla başlangıç sınırınız varsa, pek çok kişinin önemsiz hissedeceğ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österebilen görüntüyü görüntüler.
- Bu seçeneği otomatikleştirmek çok zordur, çünkü ilk harfin ne olduğunu tam olarak bilmeniz gerekir, böylece doğru grafiği kullanırsınız. Yani, paragraf her düzenlendiğinde, yeni bir grafik oluşturmanız gerekebilir.
İlk olarak, ilk harfin grafiğini oluşturmalısınız. "Edwardian Script ITC" yazı tipiyle L harfi oluşturmak için Photoshop kullandık. Biz büyük - 300pt boyutta yaptık. Ardından, resmi, mektubun etrafındaki çıplak minimum seviyeye kadar kırptık ve görüntü genişliğini ve yüksekliğini kaydettik.
Daha sonra paragrafımız için bir "capL" sınıfı oluşturduk. Bu, hangi görüntünün kullanılacağını, öndeki (çizgi yüksekliği) vb.
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 indent ve 72px dolguya ihtiyacımız vardı.
p.capL {
çizgi yüksekliği: 1em;
arkaplan-görüntü: url (capL.gif);
arka plan tekrarı: tekrar etmeyin;
metin girintisi: 95px;
dolgu malzemesi: 72px;
}
Ama hepsi bu değil. Eğer orada bırakırsanız, ilk harf paragrafta, önce grafikle, sonra metinde kopyalanacaktır. Bu yüzden, "ilk" sınıfıyla bu ilk elemanın etrafında bir açıklık ekledik ve tarayıcıya o harfi göstermemesini söyledik:
span.initial {display: yok; }
Ve grafik doğru görüntüler. Metni, metne sığdırmak için paragraftaki metin girintisiyle oynatabilirsiniz, ancak görüntülenmesini istersiniz.
