Leer hoe u CSS kunt gebruiken om fraaie initiële caps voor uw alinea's te maken. Er is zelfs een eenvoudige techniek om afbeeldingen te vervangen om een grafische afbeelding voor uw initiële dop te gebruiken.
Basisstijlen van initiële caps
Er zijn drie basisstijlen van initiële doppen in documenten:
- verheven - de meest voorkomende, waarbij de eerste letter groter is en op dezelfde regel staat als de huidige tekst.
- Liet vallen - ook redelijk gebruikelijk, waarbij de eerste letter groter is en onder de eerste regel tekst valt. De volgende tekst zweeft er vervolgens omheen.
- Aangrenzend - waarbij de eerste letter in één kolom naast de rest van de tekst staat. Dit komt vaker voor bij afdrukken dan bij webontwerp.
Initiële caps of drop caps zijn zeer bekend. Ze zijn een geweldige manier om anders lange en saaie reeksen tekst aan te kleden. En met de CSS-eigenschap: eerste letter, kunt u eenvoudig definiëren hoe u uw eerste letters als melker kunt maken.
Maak een eenvoudige initiële cap
Het enige wat u hoeft te doen om een eenvoudige verhoogde initiële dop te maken, is door de eerste letter van uw alinea groter te maken met het pseudo-element uit de eerste letter:
p: eerste letter {font-size: 3em; }
Maar veel browsers zien dat de eerste letter groter is dan de rest van de tekst op de regel, dus maken ze de voorloop gelijk aan wat logisch zou zijn voor die eerste letter, niet voor de rest van de regel. Gelukkig is dit eenvoudig te repareren met het eerstelijns pseudo-element en de eigenschap line-height:
p: eerste letter {font-size: 3em; }
p: eerstelijns {line-height: 1em; }
Speel met de lijnhoogte in uw document tot u de juiste maat voor uw tekst vindt.
Speel met je initiële cap
Als je eenmaal begrijpt hoe je een initiële pet kunt maken, kun je het in mooie kleding aankleden om het op te laten vallen. 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 keren:
p: eerste letter {
tekengrootte: 300%;
achtergrondkleur: # 000;
kleur: #fff;
}
p: eerstelijns {line-height: 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 uw lay-out flexibel is. Maar met sommige die rond spelen met de waarden, kun je je eerste regel voldoende 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 {
tekengrootte: 300%;
achtergrondkleur: # 000;
kleur: #fff;
}
p: eerstelijns {line-height: 100%; }
Aangrenzende initiële caps zijn moeilijk met CSS
Aangrenzende initiële caps kunnen moeilijk zijn met CSS omdat de verschillende browsers de lettertypen anders weergeven. Het idee achter het maken van een aangrenzende cap in CSS is om de eigenschap text-indent op de eerste regel te gebruiken om deze uit te schakelen (naar links) een negatieve waarde. U moet ook de linkermarge van die alinea met een bepaald bedrag wijzigen. Speel met deze nummers tot de alinea er goed uitziet.
p {
tekst-inspringing: -2.5em;
marge links: 3em;
}
p: eerste letter {font-size: 3em; }
p: eerstelijns {line-height: 100%; }
Krijgt echt Fancy Initial Caps
De beste manier om een mooie initiële dop te maken, is om het lettertype te veranderen in een meer decoratieve lettertypefamilie. Als u een reeks lettertypen gebruikt, gevolgd door een algemeen lettertype, kan dit helpen garanderen dat uw initiële cap goed wordt weergegeven, zodat uw klanten deze kunnen zien, zonder te raken aan de toegankelijkheid en bruikbaarheidsproblemen.
p: eerste letter {
lettergrootte: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", cursief;
}
p: eerstelijns {line-height: 100%; }
En zoals gewoonlijk kunt u al deze suggesties samenvoegen om een initiële cap te maken die de stijl van uw alinea stijl geeft.
Een grafische beginkap gebruiken
Als je toch niet leuk vindt hoe je initiële caps op de pagina lijken, kun je een beroep doen op grafische afbeeldingen om precies het effect te krijgen dat je zoekt. Maar voordat u besluit om rechtstreeks naar afbeeldingen te gaan, moet u rekening houden met de nadelen van deze methode:
- Klanten zonder afbeeldingen zien de initiële cap niet en zien mogelijk de verborgen tekst niet die de afbeelding aan het vervangen is. Hierdoor kan de alinea ontoegankelijk of in het beste geval moeilijk te lezen zijn.
- Afbeeldingen voegen altijd toe aan de downloadtijd van een pagina. Als u veel initiële caps heeft, kunt u de downloadtijd aanzienlijk verkorten voor iets waarvan veel mensen vinden dat het onbeduidend is.
- Sommige browsers geven zowel de verborgen eerste letter als de afbeelding weer, waardoor de alineatekst er vreemd uit kan zien.
- Het is heel moeilijk om deze optie te automatiseren, omdat je precies moet weten wat de eerste letter is, zodat je de juiste afbeelding gebruikt. 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 gebruikten Photoshop om de letter L te maken met het lettertype "Edwardian Script ITC." We hebben het enorm gemaakt - 300pt groot. Vervolgens hebben we de afbeelding tot het absolute minimum rond de letter bijgesneden en de breedte en hoogte van de afbeelding genoteerd.
Vervolgens hebben we een klasse "capL" voor onze paragraaf gemaakt. Dit is waar we definiëren welk beeld te gebruiken, de leidende (lijnhoogte), enzovoort.
U moet de breedte en hoogte van de afbeelding gebruiken om de tekst-inspringing en opvulkop van de alinea in te stellen. Voor ons L-beeld hadden we 95px indent en 72px padding nodig.
p.capL {
regelhoogte: 1em;
background-image: url (capL.gif);
achtergrondherhaling: geen herhaling;
tekstindruk: 95px;
padding-top: 72px;
}
Maar dat is niet alles. Als u het daar laat, wordt de eerste letter in de alinea gedupliceerd, eerst met de afbeelding en vervolgens in de tekst. Dus we voegden een span toe rond dat eerste element met de klasse "initiaal" en vertelden de browser om die brief niet weer te geven:
span.initial {display: none; }
En de afbeelding wordt vervolgens correct weergegeven. U kunt met de tekst-inspringing op de alinea spelen om de tekst tot aan de letter strak te krijgen, maar u wilt deze wel weergeven.
