Lär dig hur du använder CSS för att skapa fina initialkapslar för dina avsnitt. Det finns även en enkel bildbytes teknik för att använda en grafisk bild för din initiala keps.
Grundläggande stilar av inledande kepsar
Det finns tre grundläggande stilar av initialkapslar i dokument:
- Raised - Den vanligaste, där första bokstaven är större och i samma linje som den nuvarande texten.
- tappade - också ganska vanligt, där första bokstaven är större och faller ner under den första raden av text. Följande text flyter sedan runt den.
- Intilliggande - där första bokstaven ligger i en kolumn bredvid resten av texten. Detta är vanligare i tryck än webbdesign.
Initial caps eller drop caps är mycket bekanta. De är ett bra sätt att klä upp annars långa och tråkiga spänner av text. Och med CSS-egenskapen: första bokstaven kan du enkelt definiera hur du gör dina första brev mer avancerade.
Skapa en enkel inledande hatt
Allt du behöver göra för att skapa en enkel uppladdad startkåpa är att göra första bokstaven i din paragraf större i storlek med första bokstaven pseudo-elementet:
p: första bokstaven {font-size: 3em; }
Men många webbläsare ser att första bokstaven är större än resten av texten på linjen, så de gör den ledande lika med vad som skulle vara meningsfullt för det första boksteget, inte resten av raden. Lyckligtvis är det enkelt att fixa det första pseudoelementet och linjens höjdfastighet:
p: första bokstaven {font-size: 3em; }
p: första linjen {linjehöjd: 1em; }
Spela med linjens höjd i ditt dokument tills du hittar rätt storlek för din text.
Spela med din inledande hatt
När du förstår hur man skapar ett initialt lock kan du klä upp det i snygga kläder för att få det att stå ut. Spela med färger, bakgrundsfärger, gränser eller vad som helst som slår på dig. En ganska enkel stil är att vända färgerna på din typsnitt och bakgrundsfärg bara för första bokstaven:
p: första bokstaven {
typsnittstorlek: 300%;
bakgrundsfärg: # 000;
färg: #fff;
}
p: första linjen {linjens höjd: 100%; }
Ett annat knep är att centrera den första raden. Detta kan vara knepigt med CSS, eftersom mitten av textraden kan vara annorlunda om din layout är flexibel. Men med vissa att leka med värdena kan du lägga in din första raden så att första bokstaven verkar vara i mitten. Bara spela med procentandelen på stycket i texten tills det ser rätt ut:
p: första bokstaven {
typsnittstorlek: 300%;
bakgrundsfärg: # 000;
färg: #fff;
}
p: första linjen {linjens höjd: 100%; }
Angränsande initialkapslar är hårda med CSS
Angränsande initialkapslar kan vara svåra med CSS eftersom de olika webbläsarna visar teckensnitt på olika sätt. Tanken bakom att skapa en intilliggande keps i CSS är att använda egenskapen för textinmatning på första raden för att trycka ut det (till vänster) ett negativt värde. Du måste också ändra den vänstra marginalen för det stycket med lite belopp. Spela med dessa nummer tills stycket ser bra ut.
p {
textindelning: -2.5em;
marginal-vänster: 3em;
}
p: första bokstaven {font-size: 3em; }
p: första linjen {linjens höjd: 100%; }
Att få riktigt fina initiala kepsar
Det bästa sättet att skapa en fin startkapsyl är att ändra teckensnittet till en mer dekorativ typsnittfamilj. Om du använder en serie teckensnitt följt av ett generiskt teckensnitt, kommer det att garantera att ditt första lock visar bra så att dina kunder kan se det utan att komma in i tillgänglighet och användbarhetsproblem.
p: första bokstaven {
typsnittstorlek: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", cursive;
}
p: första linjen {linjens höjd: 100%; }
Och som vanligt kan du lägga samman alla dessa förslag för att skapa en initial keps som annonserna stämmer med din paragraf.
Använda en grafisk inledningslock
Om du ändå inte gillar hur dina initialkapslar ser ut på sidan, kan du tillgripa grafik för att få den exakta effekten du letar efter. Men innan du bestämmer dig för att flytta rakt till grafik, borde du vara medveten om nackdelarna med denna metod:
- Kunder utan bilder ser inte den inledande kåpan och får inte se den dolda texten som bilden ersätter. Detta kan göra stycket otillgängligt, eller i bästa fall svårt att läsa.
- Bilder lägger alltid till nedladdningstiden för en sida. Om du har många initialkapslar kan du avsevärt öka nedladdningstiden för vad många människor skulle känna är obetydliga.
- Vissa webbläsare visar både det dolda första bokstaven och bilden som kan göra stycktexten så konstig.
- Det är mycket 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 är redigerat kanske du behöver skapa en ny grafik.
Först måste du skapa grafik för första bokstaven. Vi använde Photoshop för att skapa bokstaven L med tecknet "Edwardian Script ITC." Vi gjorde det enormt - 300pt i storlek. Vi beskurde sedan bilden ner till det lägsta läget runt brevet och noterade bildbredden och höjden.
Då skapade vi en klass "capL" för vår paragraf. Här definierar vi vilken bild som ska användas, ledande (linjehöjd) och så vidare.
Du måste använda bildbredden och höjden för att ställa in styckets textinmatning och vadderingstopp. För vår L-bild behövde vi 95px indent och 72px vaddering.
p.capL {
linjehöjd: 1em;
bakgrundsbild: url (capL.gif);
background-repeat: no-repeat;
textindelning: 95px;
padding-top: 72px;
}
Men det är inte allt. Om du lämnar det där, kommer den första bokstaven att dupliceras i stycket, först med grafiken, sedan i texten. Så vi lade till en spänning kring det första elementet med klassen "initial" och berättade för webbläsaren att inte visa det brevet:
span.initial {display: none; }
Och grafiken visas då korrekt. Du kan spela med textinmatningen på stycket för att få texten snugged helt upp till brevet, men du skulle vilja att den ska visas.
