Leer hoe te gebruiken CSS makenluxe hoofdletters voor uw alinea's. Er is zelfs een eenvoudige techniek voor het vervangen van afbeeldingen om een grafische afbeelding te gebruiken voor uw initiële dop.
Basisstijlen van beginletters
Er zijn drie basisstijlen van hoofdletters in documenten:
- verhoogd - de meest voorkomende, waarbij de eerste letter groter is en op dezelfde regel staat als de huidige tekst.
- Liet vallen - komt ook vrij vaak voor, waarbij de eerste letter groter is en onder de eerste regel tekst valt. De volgende tekst zweeft er dan omheen.
- Aangrenzend - waarbij de eerste letter in een kolom naast de rest van de tekst staat. Dit komt vaker voor bij print dan bij webdesign.
Initial caps of drop-caps zijn heel bekend. Ze zijn een geweldige manier om anders lange en saaie stukken tekst aan te kleden. En met de CSS-eigenschap: eerste letter kunt u eenvoudig definiëren hoe u uw eerste letters mooier kunt maken.
Maak een eenvoudige beginkap
Het enige dat u hoeft te doen om een eenvoudige verhoogde beginkap te maken, is door de eerste letter van uw alinea groter te maken met het pseudo-element van de eerste letter:
p: eerste letter { font-size: 3em; }
Maar veel browsers zie dat de eerste letter groter is dan de rest van de tekst op de regel, zodat de voorloop gelijk is aan wat logisch zou zijn voor die eerste letter, niet de rest van de regel. Gelukkig is dit eenvoudig op te lossen met het pseudo-element van de eerste regel en de eigenschap line-height:
p: eerste letter { font-size: 3em; }
p: eerste regel { regelhoogte: 1em; }
Speel met de regelhoogte in je document totdat je de juiste maat voor je tekst hebt gevonden.
Speel met je initiële dop
Als je eenmaal begrijpt hoe je een eerste pet moet maken, kun je hem in mooie kleding kleden om hem te laten opvallen. Speel met kleuren, achtergrondkleuren, randen of wat je maar wilt. Een vrij eenvoudige stijl is om de kleuren van je lettertype en achtergrondkleur alleen voor de eerste letter om te draaien:
p: eerste letter {
lettergrootte: 300%;
achtergrondkleur: #000;
kleur: #fff;
}
p: eerste regel { regelhoogte: 100%; }
Een andere truc is om de eerste regel te centreren. Dit kan lastig zijn met CSS, omdat het midden van de tekstregel anders kan zijn als je lay-out flexibel is. Maar met wat spelen met de waarden, kun je je eerste regel voldoende laten inspringen om de eerste letter in het midden te laten lijken. Speel gewoon met het percentage op de tekst-inspringing van de alinea totdat het er goed uitziet:
p: eerste letter {
lettergrootte: 300%;
achtergrondkleur: #000;
kleur: #fff;
}
p: eerste regel { regelhoogte: 100%; }
p { tekst-inspringing: 45%; }
Aangrenzende beginletters zijn moeilijk met CSS
Aangrenzende hoofdletters kunnen moeilijk zijn met CSS omdat de verschillende browsers de lettertypen anders weergeven. Het idee achter het maken van een aangrenzende dop in CSS is om de eigenschap text-indent op de eerste regel te gebruiken om een negatieve waarde naar buiten (naar links) te duwen. U moet ook de linkermarge van die alinea enigszins wijzigen. Speel met deze getallen totdat de alinea er goed uitziet.
p {
tekst-inspringing: -2.5em;
marge-links: 3em;
}
p: eerste letter { font-size: 3em; }
p: eerste regel { regelhoogte: 100%; }
Echt mooie initialen krijgen
De beste manier om een mooie initiële dop te maken, is door het lettertype te wijzigen in een meer decoratieve lettertypefamilie. Als u een reeks lettertypen gevolgd door een generiek lettertype, helpt het te garanderen dat uw initiële limiet goed wordt weergegeven, zodat uw klanten deze kunnen zien, zonder in toegankelijkheids- en bruikbaarheidsproblemen te komen.
p: eerste letter {
lettergrootte: 3em;
font-familie: "Edwardian Script ITC", "Brush Script MT", cursief;
}
p: eerste regel { regelhoogte: 100%; }
En, zoals gewoonlijk, kun je al deze suggesties samenvoegen om een eerste cap te creëren die stijl toevoegt aan je alinea.
Een grafische beginkap gebruiken
Als je na dit alles nog steeds niet tevreden bent over hoe je hoofdletters op de pagina eruitzien, kun je grafische afbeeldingen gebruiken om het exacte effect te krijgen dat je zoekt. Maar voordat u besluit om rechtstreeks naar afbeeldingen over te gaan, moet u zich bewust zijn van de nadelen van deze methode:
- Klanten zonder afbeeldingen zien de initiële dop niet en zien mogelijk niet de verborgen tekst die de afbeelding vervangt. Dit kan de paragraaf ontoegankelijk maken, of op zijn best moeilijk leesbaar maken.
- Afbeeldingen dragen altijd bij aan de downloadtijd van een pagina. Als je veel initiële limieten hebt, kun je de downloadtijd aanzienlijk verhogen voor iets dat volgens veel mensen onbeduidend is.
- Sommige browsers geven zowel de verborgen eerste letter als de afbeelding weer, waardoor de alineatekst er vreemd uitziet.
- Het is erg moeilijk om deze optie te automatiseren, omdat je precies moet weten wat de eerste letter is, zodat je de juiste afbeelding kunt gebruiken. Dus elke keer dat de alinea wordt bewerkt, moet u mogelijk een nieuwe afbeelding maken.
Eerst moet u de afbeelding van de eerste letter maken. We hebben Photoshop gebruikt om de letter L te maken met het lettertype 'Edwardian Script ITC'. We hebben het enorm gemaakt - 300 pt groot. Vervolgens hebben we de afbeelding bijgesneden tot het absolute minimum rond de letter en hebben we de breedte en hoogte van de afbeelding genoteerd.
Vervolgens hebben we een klasse "capL" gemaakt voor onze paragraaf. Hier definiëren we welke afbeelding moet worden gebruikt, de regelafstand (lijnhoogte), enzovoort.
U moet de breedte en hoogte van de afbeelding gebruiken om de tekst-inspringing en opvulling van de alinea in te stellen. Voor onze L-afbeelding hadden we 95px inspringing en 72px opvulling nodig.
p.capL {
lijnhoogte: 1em;
achtergrondafbeelding: url (capL.gif);
achtergrondherhaling: geen herhaling;
tekst-inspringing: 95px;
opvulling-top: 72px;
}
Maar dat is niet alles. Als u het daar laat, wordt de eerste letter gedupliceerd in de alinea, eerst met de afbeelding en vervolgens in de tekst. Dus we voegden een span rond dat eerste element toe met de klasse "initial" en vertelden de browser om die letter niet weer te geven:
span.initial { display: geen; }
De afbeelding wordt dan correct weergegeven. Je kunt spelen met de tekst-inspringing in de alinea om de tekst precies op de letter te krijgen, hoe je hem ook wilt weergeven.