CSS ve Görseller Kullanarak Fantezi İlk Kapaklar Nasıl Oluşturulur?
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:
- yükseltilmiş - en yaygın olanı, ilk harfin daha büyük olduğu ve mevcut metinle aynı satırda olduğu.
- İlk mektubun daha büyük olduğu ve metnin ilk satırının altına düştüğü de oldukça yaygındı. Aşağıdaki metin daha sonra etrafında yüzer.
- bitişik - metnin kalan kısmında ilk harfin 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: birinci 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 {font-size: 300%; arka plan rengi: # 000; renk: #fff; } p: ilk satır {satır-yükseklik:% 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 {font-size: 300%; arka plan rengi: # 000; renk: #fff; } p: ilk satır {satır-yükseklik:% 100; } p {text-girinti: % 45 ; }Bitişik İlk Başlıklar CSS ile Serttir
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 {text-girinti: -2.5em; kenar boşluğu: 3em; } p: ilk harf {font-size: 3em; } p: ilk satır {satır-yükseklik:% 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 {font-size: 3em; font-aile: "Edward Script ITC", "Fırça Script MT", el yazısı; } p: ilk satır {satır-yükseklik:% 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 resmi gösterir - paragraf metnini tuhaf gösterebilir.
- 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'u kullandım. Büyük yaptım - büyüklükte 300pt. Daha sonra görüntüyü mektubun etrafındaki en küçük düzeye kadar kırptım ve görüntü genişliğini ve yüksekliğini kaydettim.
Sonra paragraf için bir sınıf "capL" oluşturdum. Bu, hangi görüntünün kullanılacağını, öndeki (satır yüksekliğini) vb. Tanımladığım 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 resmim için 95px indent ve 72px dolguya ihtiyacım vardı.
p.capL {satır 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 çoğaltılacaktır - önce grafikle, sonra metinde. Bu yüzden, "ilk" sınıfıyla ilk öğe etrafında bir açıklık ekledim ve tarayıcıya bu harfi göstermemesini söyledim:
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.