Lär dig hur du använder CSS att skapafint initiala tak för dina stycken. Det finns till och med en enkel bildersättningsteknik för att använda en grafisk bild för ditt ursprungliga lock.
Grundläggande stilar av initiala kepsar
Det finns tre grundläggande stilar för initiala lock i dokument:
- Uppfostrad - den vanligaste, där den första bokstaven är större och på samma rad som den aktuella texten.
- Tappade - också ganska vanligt, där första bokstaven är större och faller ner under första textraden. Följande text flyter sedan runt den.
- Intilliggande - där den första bokstaven finns i en kolumn bredvid resten av texten. Detta är vanligare i tryck än webbdesign.
Inledande lock eller dropplock är mycket bekanta. De är ett utmärkt sätt att klä upp sig annars långa och tråkiga textomfattningar. Och med CSS-egenskapen: första bokstaven kan du enkelt definiera hur du ska göra dina första bokstäver snyggare.
Skapa en enkel initial cap
Allt du behöver göra för att skapa en enkel upphöjd initial cap är att göra den första bokstaven i ditt stycke större i storlek med pseudoelementet i första bokstaven:
p: första bokstaven {font-size: 3em; }
Men många webbläsare se att den första bokstaven är större än resten av texten på raden, så de gör ledningen lika med vad som skulle vara meningsfullt för den första bokstaven, inte resten av raden. Lyckligtvis är det enkelt att fixa det med första linjens pseudoelement och egenskapen linjehöjd:
p: första bokstaven {font-size: 3em; }
p: första raden {line-height: 1em; }
Spela med radhöjden i ditt dokument tills du hittar rätt storlek för din text.
Spela med ditt ursprungliga lock
När du förstår hur du skapar en initial keps kan du klä upp den i snygga kläder för att få den att sticka ut. Spela med färger, bakgrundsfärger, ramar eller vad som helst som slår dig. En ganska enkel stil är att vända färgerna på ditt teckensnitt och bakgrundsfärg bara för första bokstaven:
p: första bokstaven {
teckenstorlek: 300%;
bakgrundsfärg: # 000;
färg: #fff;
}
p: första raden {linjehöjd: 100%; }
Ett annat knep är att centrera första raden. Detta kan vara knepigt med CSS, eftersom mitten av textraden kan vara annorlunda om din layout är flexibel. Men med vissa som leker med värdena kan du dra in din första rad så att den första bokstaven verkar vara i mitten. Spela bara med procentsatsen i avsnittets textindrag tills det ser rätt ut:
p: första bokstaven {
teckenstorlek: 300%;
bakgrundsfärg: # 000;
färg: #fff;
}
p: första raden {linjehöjd: 100%; }
p {textindrag: 45%; }
Intilliggande initiala lock är hårda med CSS
Intilliggande initialcaps kan vara svårt med CSS eftersom de olika webbläsarna visar teckensnitt på olika sätt. Tanken bakom att skapa ett intilliggande tak i CSS är att använda textindragningsegenskapen på första raden för att skjuta ut det (till vänster) ett negativt värde. Du måste också ändra den vänstra marginalen för det stycket med något belopp. Spela med dessa siffror tills stycket ser bra ut.
p {
textindrag: -2.5em;
marginal till vänster: 3em;
}
p: första bokstaven {font-size: 3em; }
p: första raden {linjehöjd: 100%; }
Få riktigt snygga initiala kepsar
Det bästa sättet att skapa en snygg initial cap är att byta teckensnitt till en mer dekorativ teckensnittsfamilj. Om du använder en serie teckensnitt följt av en generiskt typsnitt, det hjälper till att garantera att ditt ursprungliga tak visas bra så att dina kunder kan se det utan att komma in på tillgänglighets- och användbarhetsproblem.
p: första bokstaven {
font-storlek: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", kursiv;
}
p: första raden {linjehöjd: 100%; }
Och som vanligt kan du sätta ihop alla dessa förslag för att skapa ett initialt tak som annonserar stil till ditt stycke.
Använda en grafisk initialkapsel
Om du trots allt fortfarande inte gillar hur dina initiala kepsar ser ut på sidan, kan du använda grafik för att få den exakta effekt du letar efter. Men innan du bestämmer dig för att gå direkt till grafik bör du vara medveten om nackdelarna med denna metod:
- Kunder utan bilder ser inte det ursprungliga locket och kanske inte ser den dolda texten som bilden ersätter. Detta kan göra stycket otillgängligt eller i bästa fall svårläst.
- Bilder lägger alltid till nedladdningstiden för en sida. Om du har många initiala kepsar kan du öka nedladdningstiden avsevärt för något som många tycker är obetydligt.
- Vissa webbläsare visar både den dolda första bokstaven och bilden som kan få stycketexten att se udda ut.
- Det är väldigt svårt att automatisera det här alternativet, eftersom du måste veta exakt vad första bokstaven är så att du använder rätt grafik. Så varje gång stycket redigeras kan du behöva skapa en ny grafik.
Först måste du skapa grafiken för den första bokstaven. Vi använde Photoshop för att skapa bokstaven L med teckensnittet "Edwardian Script ITC." Vi gjorde det enormt - 300pt i storlek. Vi klippte sedan ner bilden till det minsta minimum runt bokstaven och noterade bildens bredd och höjd.
Sedan skapade vi en klass "capL" för vårt avsnitt. Det är här vi definierar vilken bild som ska användas, den ledande (linjehöjd) och så vidare.
Du måste använda bildens bredd och höjd för att ställa in styckets textindrag och vadderingstopp. För vår L-bild behövde vi 95px-indrag och 72px-stoppning.
p.capL {
linjehöjd: 1 em;
bakgrundsbild: url (capL.gif);
bakgrundsupprepning: ingen upprepning;
textindrag: 95px;
padding-top: 72px;
}
Men det är inte allt. Om du lämnar den där kommer den första bokstaven att kopieras i stycket, först med bilden och sedan i texten. Så vi lade till ett intervall runt det första elementet med klassen "initial" och ber webbläsaren att inte visa den bokstaven:
span.initial {display: none; }
Grafiken visas sedan korrekt. Du kan spela med textindraget i stycket för att få texten snuggled ända fram till bokstaven, men du vill att den ska visas.