Lær hvordan du bruger CSS at skabefancy indledende grænser for dine afsnit. Der er endda en simpel billedudskiftningsteknik til at bruge et grafisk billede til din oprindelige hætte.
Grundlæggende stilarter for indledende hætter
Der er tre grundlæggende stilarter for initialkapper i dokumenter:
- Hævet - det mest almindelige, hvor det første bogstav er større og på samme linje som den aktuelle tekst.
- Faldt - også ret almindelig, hvor det første bogstav er større og falder ned under den første tekstlinje. Den følgende tekst flyder derefter rundt om den.
- Tilstødende - hvor det første bogstav er i en kolonne ved siden af resten af teksten. Dette er mere almindeligt i tryk end webdesign.
Indledende hætter eller drop hætter er meget velkendte. De er en fantastisk måde at pynte ellers lange og kedelige tekstspænd på. Og med CSS-egenskaben: første bogstav, kan du nemt definere, hvordan du får dine første bogstaver mere avancerede.
Opret en simpel starthætte
Alt hvad du skal gøre for at oprette en simpel hævet initialhætte er at gøre det første bogstav i dit afsnit større i størrelse med det første bogstavs pseudo-element:
p: første bogstav {font-size: 3em; }
Men mange browsere se, at det første bogstav er større end resten af teksten på linjen, så de gør føringen lig med hvad der ville give mening for det første bogstav, ikke resten af linjen. Heldigvis er dette let at rette med pseudo-elementet i første linje og egenskaben linjehøjde:
p: første bogstav {font-size: 3em; }
p: første linje {linjehøjde: 1 em; }
Spil med liniehøjden i dit dokument, indtil du finder den rigtige størrelse til din tekst.
Spil med din oprindelige kasket
Når du først har forstået, hvordan du opretter en indledende hætte, kan du klæde den i smarte tøj for at gøre det skiller sig ud. Spil med farver, baggrundsfarver, kanter eller alt, hvad der synes dig. En ret simpel stil er at vende om farverne på din skrifttype og baggrundsfarve bare for det første bogstav:
p: første bogstav {
skriftstørrelse: 300%;
baggrundsfarve: # 000;
farve: #fff;
}
p: første linje {linjehøjde: 100%; }
Et andet trick er at centrere den første linje. Dette kan være vanskeligt med CSS, da midten af tekstlinjen kan være anderledes, hvis dit layout er fleksibelt. Men når nogle leger med værdierne, kan du indrykke din første linje nok til, at det første bogstav ser ud til at være i midten. Spil bare med procentdelen på afsnitets tekstindryk, indtil det ser rigtigt ud:
p: første bogstav {
skriftstørrelse: 300%;
baggrundsfarve: # 000;
farve: #fff;
}
p: første linje {linjehøjde: 100%; }
p {tekstindryk: 45%; }
Tilstødende indledende hætter er hårde med CSS
Tilstødende initialcaps kan være vanskelige med CSS, fordi de forskellige browsere viser skrifttyperne forskelligt. Ideen bag at skabe et tilstødende loft i CSS er at bruge egenskaben tekstindryk på første linje til at skubbe den ud (til venstre) en negativ værdi. Du bliver også nødt til at ændre venstre margen i dette afsnit med et beløb. Spil med disse tal, indtil afsnittet ser godt ud.
p {
tekstindryk: -2,5 em;
margen til venstre: 3 em;
}
p: første bogstav {font-size: 3em; }
p: første linje {linjehøjde: 100%; }
At få rigtig flotte indledende hætter
Den bedste måde at oprette en fancy initial cap på er at ændre skrifttypen til en mere dekorativ fontfamilie. Hvis du bruger en række skrifttyper efterfulgt af en generisk skrifttype, det hjælper med at garantere, at dit oprindelige loft vises godt, så dine kunder kan se det uden at komme ind på tilgængelighed og brugervenlighed.
p: første bogstav {
skriftstørrelse: 3 em;
font-familie: "Edwardian Script ITC", "Brush Script MT", kursiv;
}
p: første linje {linjehøjde: 100%; }
Og som sædvanligt kan du lægge alle disse forslag sammen for at oprette et indledende loft, der annoncerer til dit afsnit.
Brug af en grafisk starthætte
Hvis du trods alt stadig ikke kan lide, hvordan dine oprindelige hætter ser ud på siden, kan du ty til grafik for at få den nøjagtige effekt, du leder efter. Men inden du beslutter at gå direkte til grafik, skal du være opmærksom på ulemperne ved denne metode:
- Kunder uden billeder kan ikke se det oprindelige loft og muligvis ikke den skjulte tekst, som billedet erstatter. Dette kan gøre afsnittet utilgængeligt eller i bedste fald vanskeligt at læse.
- Billeder føjes altid til en sides downloadtid. Hvis du har mange initialcaps, kan du øge downloadtiden betydeligt for noget, som mange mennesker synes er ubetydeligt.
- Nogle browsere viser både det skjulte første bogstav og billedet, som kan få afsnitsteksten til at se mærkelig ud.
- Det er meget svært at automatisere denne mulighed, da du skal vide nøjagtigt, hvad det første bogstav er, så du bruger den rigtige grafik. Så hver gang afsnittet redigeres, skal du muligvis oprette en ny grafik.
Først skal du oprette grafikken for det første bogstav. Vi brugte Photoshop til at oprette bogstavet L med skrifttypen "Edwardian Script ITC." Vi gjorde det enormt - 300pt i størrelse. Vi beskærede derefter billedet ned til det absolutte minimum omkring brevet og bemærkede billedets bredde og højde.
Derefter oprettede vi en klasse "capL" til vores afsnit. Det er her, vi definerer, hvilket billede der skal bruges, den forreste (linjehøjde) osv.
Du skal bruge billedets bredde og højde til at indstille afsnitets tekstindrykning og polstringstop. Til vores L-billede havde vi brug for 95px-indrykning og 72px-polstring.
p.capL {
linjehøjde: 1 em;
baggrundsbillede: url (capL.gif);
baggrund-gentagelse: ingen gentagelse;
tekstindryk: 95 px;
polstring-top: 72px;
}
Men det er ikke alt. Hvis du lader det være der, duplikeres det første bogstav i afsnittet, først med grafikken og derefter i teksten. Så vi tilføjede et interval omkring det første element med klassen "initial" og bad browseren om ikke at vise dette bogstav:
span.initial {display: none; }
Grafikken vises derefter korrekt. Du kan lege med tekstindrykket i afsnittet for at få teksten snugget helt op til bogstavet, men du vil gerne have, at den vises.