Inhoud
- Hoe u mooie initiële hoofdletters kunt maken met CSS en afbeeldingen
- Basisstijlen van initiële hoofdletters
- Maak een eenvoudige initiële dop
- Speel met je initiële cap
- Aangrenzende initiële hoofdletters zijn moeilijk met CSS
- Echt mooie initiële caps krijgen
- Een grafische beginkap gebruiken
Hoe u mooie initiële hoofdletters kunt maken met CSS en afbeeldingen
Leer hoe u CSS kunt gebruiken om mooie beginletters voor uw alinea's te maken. Er is zelfs een eenvoudige techniek voor het vervangen van afbeeldingen om een grafische afbeelding te gebruiken voor uw initiële pet.
Basisstijlen van initiële hoofdletters
Er zijn drie basisstijlen van beginletters 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 tekstregel valt. De volgende tekst zweeft er vervolgens omheen.
- Aangrenzend - waar 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 erg bekend. Ze zijn een geweldige manier om verder lange en saaie stukken tekst te verkleden. En met de CSS-eigenschap: eerste letter, kunt u eenvoudig definiëren hoe u uw eerste letters liefhebber maakt.
Maak een eenvoudige initiële dop
Het enige dat u hoeft te doen om een eenvoudige verhoogde initiaal 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 de rest van de regel. Gelukkig is dit eenvoudig op te lossen met het eerstelijns pseudo-element en de eigenschap line-height:
p: eerste letter {font-size: 3em; }
p: eerste regel {regelhoogte: 1em; }
Speel met de lijnhoogte in uw document totdat u de juiste maat voor uw tekst heeft gevonden.
Speel met je initiële cap
Als je eenmaal begrijpt hoe je een initiële pet kunt maken, kun je deze 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 uw lettertype en achtergrondkleur om te keren, alleen voor de eerste letter:
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 uw lay-out flexibel is. Maar met wat spelen met de waarden, kunt u uw eerste regel voldoende laten inspringen om de eerste letter in het midden te laten lijken. Speel gewoon met het percentage op de tekstinspringing van de alinea totdat het er goed uitziet:
p: eerste letter {
lettergrootte: 300%;
achtergrondkleur: # 000;
kleur: #fff;
}
p: eerste regel {regelhoogte: 100%; }
p {text-indent: 45%; }
Aangrenzende initiële hoofdletters zijn moeilijk met CSS
Aangrenzende initiële hoofdletters 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 tekstinspringing op de eerste regel te gebruiken om deze naar buiten (naar links) een negatieve waarde te geven. U moet ook de linkermarge van die alinea met een bepaald bedrag wijzigen. Speel met deze nummers totdat de alinea er goed uitziet.
p {
text-indent: -2.5em;
marge-links: 3em;
}
p: eerste letter {font-size: 3em; }
p: eerste regel {regelhoogte: 100%; }
Echt mooie initiële caps 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 gebruikt, gevolgd door een generiek lettertype, helpt dit te garanderen dat uw initiële limiet goed wordt weergegeven, zodat uw klanten deze kunnen zien, zonder in te gaan op toegankelijkheids- en bruikbaarheidsproblemen.
p: eerste letter {
lettergrootte: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", cursief;
}
p: eerste regel {regelhoogte: 100%; }
En, zoals gewoonlijk, kunt u al deze suggesties samenvoegen om een eerste limiet te creëren die stijl voor uw alinea adverteren.
Een grafische beginkap gebruiken
Als je na dat alles nog steeds niet bevalt hoe je initiële caps er op de pagina uitzien, kun je je toevlucht nemen tot afbeeldingen om het exacte effect te krijgen dat je zoekt. Maar voordat u besluit om direct naar afbeeldingen 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 alinea ontoegankelijk maken of op zijn best moeilijk te lezen zijn.
- Afbeeldingen voegen altijd toe aan de downloadtijd van een pagina. Als u veel initiële limieten heeft, kunt u de downloadtijd aanzienlijk verlengen 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 uit kan zien.
- Het is erg 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 je 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 - 300 pt groot. Vervolgens hebben we de afbeelding bijgesneden tot het absolute minimum rond de letter en de breedte en hoogte van de afbeelding genoteerd.
Vervolgens hebben we een klasse "capL" gemaakt voor onze paragraaf. Hier definiëren we welk beeld moet worden gebruikt, de voorloop (regelhoogte), enzovoort.
U moet de breedte en hoogte van de afbeelding gebruiken om de alinea-tekstinspringing en opvulling bovenaan in te stellen. Voor onze L-afbeelding hadden we 95px-inspringing en 72px-opvulling nodig.
p.capL {
regelhoogte: 1em;
achtergrondafbeelding: url (capL.webp);
achtergrondherhaling: geen herhaling;
text-indent: 95px;
padding-top: 72px;
}
Maar dat is niet alles. Als je het daar laat staan, wordt de eerste letter gedupliceerd in de alinea, eerst met de afbeelding en vervolgens in de tekst. Dus we voegden een span toe rond dat eerste element 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. U kunt met de tekstinspringing in de alinea spelen om de tekst precies op de letter te krijgen, hoe u hem ook wilt weergeven.
