Lær hvordan du bruger CSS til at skabe fancy initial caps til dine afsnit. Der er endda en simpel billedudskiftningsteknik til at bruge et grafisk billede til din indledende hætte.
Grundlæggende stilarter af indledende hætter
Der er tre grundlæggende stilarter af indledende caps i dokumenter:
- Hævet - den mest almindelige, hvor første bogstav er større og på samme linje som den aktuelle tekst.
- faldt - Også temmelig almindeligt, hvor første bogstav er større og faldt ned under den første linje af tekst. Den følgende tekst flyder derefter rundt om den.
- Tilstødende - hvor første bogstav er i en kolonne ved siden af resten af teksten. Dette er mere almindeligt i print end webdesign.
Initial caps eller drop caps er meget velkendte. De er en god måde at klæde sig på ellers lange og kedelige spænd af tekst. Og med CSS-ejendommen: første bogstav, kan du nemt definere, hvordan du laver dine første bogstaver mere avanceret.
Opret en simpel indledende hue
Alt du skal gøre for at oprette en simpel hævet startdæksel er at gøre det første bogstav i dit afsnit større i størrelse med det første bogstav pseudo-element:
p: første bogstaver {font-size: 3em; }
Men mange browsere ser, at det første bogstav er større end resten af teksten på linjen, så de gør det ledende lig med det, der ville give mening for det første bogstav, ikke resten af linjen. Heldigvis er dette nemt at rette med det første linie pseudo-element og linjen højde egenskaben:
p: første bogstaver {font-size: 3em; }
p: første linje {linie-højde: 1em; }
Spil med linjens højde i dit dokument, indtil du finder den rigtige størrelse for din tekst.
Spil med din indledende hue
Når du først har forstået, hvordan du laver en indledende hætte, kan du klæde det op i fancy tøj for at få det til at skille sig ud. Spil med farver, baggrundsfarver, grænser eller uanset hvad du synes om. En ret simpel stil er at vende farverne på din skrifttype og baggrundsfarve bare til det første bogstav:
p: første bogstaver {
Skriftstørrelse: 300%;
baggrundsfarve: # 000;
farve: #fff;
}
p: første linje {liniehø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 spiller rundt med værdierne, kan du indrykke din første linje nok til at få det første bogstav til at ligge i midten. Bare spil med procentdelen på afsnitets tekstindtryk, indtil det ser rigtigt ud:
p: første bogstaver {
Skriftstørrelse: 300%;
baggrundsfarve: # 000;
farve: #fff;
}
p: første linje {liniehøjde: 100%; }
Tilstødende indledende hætter er hårde med CSS
Tilstødende startkapsler kan være vanskelige med CSS, fordi de forskellige browsere viser skrifterne forskelligt. Ideen bag oprettelse af en tilstødende cap i CSS er at bruge tekstindrykkets egenskab på den første linje for at skubbe den ud (til venstre) en negativ værdi. Du skal også ændre den venstre margen i det afsnit med et eller andet beløb. Spil med disse numre, indtil stykket ser godt ud.
p {
tekstindtryk: -2.5em;
margen-venstre: 3em;
}
p: første bogstaver {font-size: 3em; }
p: første linje {liniehøjde: 100%; }
Faktisk Fancy Initial Caps
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, vil det hjælpe med at sikre, at din indledende cap viser godt, så dine kunder kan se det uden at komme ind i tilgængelighed og brugbarhedsproblemer.
p: første bogstaver {
skrifttypestørrelse: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", cursive;
}
p: første linje {liniehøjde: 100%; }
Og som sædvanlig kan du sætte alle disse forslag sammen for at oprette en initial cap, der annoncerer stil til dit afsnit.
Brug af en grafisk startkapsel
Hvis du jo ikke kan lide hvordan dine indledende kapper ser på siden, kan du ty til grafik for at få den nøjagtige effekt, du leder efter. Men før du beslutter dig for at flytte direkte til grafik, skal du være opmærksom på ulemperne ved denne metode:
- Kunder uden billeder kan ikke se den indledende hætte, og muligvis ikke se den skjulte tekst, som billedet erstatter. Dette kan gøre stykket utilgængeligt, eller i bedste fald vanskeligt at læse.
- Billeder tilføjer altid til downloadtidspunktet for en side. Hvis du har mange indledende hætter, kan du øge downloadtiden væsentligt for noget, mange mennesker vil føle, er ubetydelige.
- Nogle browsere vil både vise det skjulte første bogstav og billedet, der kan gøre stykketeksten til at se underligt ud.
- Det er meget svært at automatisere denne mulighed, da du skal vide præcis, hvad det første bogstav er, så du bruger den rigtige grafik. Så hver gang stykket er redigeret, skal du muligvis oprette en ny grafik.
For det første skal du oprette grafikken for første bogstav. Vi brugte Photoshop til at oprette bogstavet L med skrifttypen "Edwardian Script ITC." Vi gjorde det stort - 300pt i størrelse. Vi beskærede derefter billedet ned til det rene minimum omkring brevet og noterede billedbredden og højden.
Så skabte vi en klasse "capL" til vores afsnit. Her definerer vi hvilket billede der skal bruges, den førende (liniehøjde) og så videre.
Du skal bruge billedbredden og højden til at indstille afsnitets tekstindtryk og polstringstoppe. Til vores L billede havde vi brug for 95px indent og 72px polstring.
p.capL {
linjehøjde: 1em;
baggrundsbillede: url (capL.gif);
background-repeat: no-repeat;
tekstindrykning: 95px;
polstring-top: 72px;
}
Men det er ikke alt. Hvis du forlader det der, bliver det første bogstav kopieret i stykket, først med grafikken, og derefter i teksten. Så vi tilføjede et spænd omkring det første element med klassen "initial" og fortalte browseren at ikke vise det pågældende brev:
span.initial {display: none; }
Og grafikken viser derefter korrekt. Du kan spille med tekstindrykket på stykket for at få teksten snugged helt op til brevet, men du vil gerne have den vist.
