Lær hvordan du bruker CSS til å lage fancy initial caps for avsnittene dine. Det er enda en enkel bildeutskiftingsteknikk for å bruke et grafisk bilde for den innledende hetten.
Grunnleggende stiler av innledende caps
Det er tre grunnleggende stiler av innledende caps i dokumenter:
- Oppvokst - Den vanligste, hvor første bokstav er større og på samme linje som gjeldende tekst.
- droppet - Også ganske vanlig, hvor første bokstav er større og falt ned under den første linjen med tekst. Følgende tekst flyter rundt den.
- Ved siden av - der første bokstaven er i en kolonne ved siden av resten av teksten. Dette er vanlig i utskrift enn webdesign.
Initial caps eller drop caps er svært kjent. De er en fin måte å kle på ellers lange og kjedelige spenner av tekst. Og med CSS-egenskapen: første bokstav, kan du enkelt definere hvordan du gjør de første bokstavene mer avansert.
Lag en enkel startkapsel
Alt du trenger å gjøre for å lage en enkel hevet starthett er å gjøre det første bokstaven i avsnittet større i størrelse med pseudoelementet med første bokstav:
p: første bokstav {font-size: 3em; }
Men mange nettlesere ser at første bokstav er større enn resten av teksten på linjen, slik at de gjør det ledende lik det som ville gi mening for det første bokstaven, ikke resten av linjen. Heldigvis er dette enkelt å fikse med pseudo-elementet på første linje og linjehøydeegenskapen:
p: første bokstav {font-size: 3em; }
p: første linje {linjehøyde: 1em; }
Spill med linjens høyde i dokumentet til du finner riktig størrelse for teksten.
Spill med din innledende hette
Når du forstår hvordan du lager en innledende hette, kan du kle det i fancy klær for å få det til å skille seg ut. Spill med farger, bakgrunnsfarger, grenser, eller hva som helst som rammer din fancy. En ganske enkel stil er å reversere fargene på font og bakgrunnsfarge bare for første bokstav:
p: første bokstaver {
fontstørrelse: 300%;
bakgrunnsfarge: # 000;
farge: #fff;
}
p: første linje {linjehøyde: 100%; }
Et annet triks er å sentrere den første linjen. Dette kan være vanskelig med CSS, da midten av tekstlinjen kan være annerledes hvis layoutet ditt er fleksibelt. Men når noen spiller rundt med verdiene, kan du sette inn din første linje nok til å få det første bokstaven til å ligge i midten. Bare spill med prosentandelen på tekstinnsnittet i avsnittet til det ser riktig ut:
p: første bokstaver {
fontstørrelse: 300%;
bakgrunnsfarge: # 000;
farge: #fff;
}
p: første linje {linjehøyde: 100%; }
Tilgrensende Initial Caps er harde med CSS
Tilgrensende startkapsler kan være vanskelige med CSS fordi de forskjellige nettleserne viser fonter forskjellig. Ideen bak å lage en tilstøtende hette i CSS er å bruke tekstinnrykkegenskapen på første linjen for å skyve den ut (til venstre) en negativ verdi. Du må også endre venstre margin i det avsnittet med litt beløp. Spill med disse tallene til avsnittet ser bra ut.
p {
tekstinnhold: -2.5em;
margin-venstre: 3em;
}
p: første bokstav {font-size: 3em; }
p: første linje {linjehøyde: 100%; }
Faktisk Fancy Initial Caps
Den beste måten å skape en fancy opprinnelige hette på er å bytte skrift til en mer dekorativ fontfamilie. Hvis du bruker en rekke fonter etterfulgt av en generisk skrift, vil det bidra til å sikre at din innledende hette viser godt slik at kundene dine kan se det uten å komme inn i tilgjengelighet og brukbarhetsproblemer.
p: første bokstaver {
skriftstørrelse: 3em;
font-familie: "Edwardian Script ITC", "Brush Script MT", kursiv;
}
p: første linje {linjehøyde: 100%; }
Og som vanlig kan du sette alle disse forslagene sammen for å lage en innledende hette som annonserer stilen til avsnittet ditt.
Bruke en grafisk startkapsel
Hvis du likevel ikke liker hvordan dine innledende caps ser på siden, kan du ty til grafikk for å få den nøyaktige effekten du leter etter. Men før du bestemmer deg for å flytte rett til grafikk, bør du være oppmerksom på ulempene ved denne metoden:
- Kunder uten bilder ser ikke den innledende hetten, og kan ikke se den skjulte teksten som bildet erstatter. Dette kan gjøre avsnittet utilgjengelig, eller i beste fall vanskelig å lese.
- Bilder legger alltid til nedlastningstiden på en side. Hvis du har mange innledende caps, kan du øke nedlastingstiden betydelig for noe mange mennesker vil føle er ubetydelige.
- Noen nettlesere vil vise både skjult første bokstav og bildet som kan gjøre avsnittet tekst ser merkelig ut.
- Det er veldig vanskelig å automatisere dette alternativet, siden du må vite nøyaktig hva det første bokstaven er slik at du bruker riktig grafikk. Så, hver gang avsnittet er redigert, må du kanskje opprette en ny grafikk.
Først må du lage grafikken til første bokstav. Vi brukte Photoshop til å lage brevet L med skrifttypen "Edwardian Script ITC." Vi gjorde det stort - 300pt i størrelse. Vi beskjærte da bildet ned til det minste minimum rundt brevet og merket bildens bredde og høyde.
Da opprettet vi en klasse "capL" for vårt avsnitt. Dette er hvor vi definerer hvilket bilde som skal brukes, den ledende (linjehøyde) og så videre.
Du må bruke bildebredden og høyden for å angi avsnittets tekstinnhold og polstring. For vår L-bilde trengte vi 95px innrykk og 72px polstring.
p.capL {
linjehøyde: 1em;
bakgrunnsbilde: url (capL.gif);
bakgrunn-gjentak: ikke-gjenta;
tekstindeks: 95px;
polstringstopp: 72px;
}
Men det er ikke alt. Hvis du legger det der, blir det første bokstaven duplisert i avsnittet, først med grafikken, og deretter i teksten. Så vi la et spenning rundt det første elementet med klassen "initial" og fortalte nettleseren om ikke å vise det bokstaven:
span.initial {display: none; }
Og grafikken viser da riktig. Du kan spille med tekstinnrykket på avsnittet for å få teksten snugged helt opp til brevet, men du vil gjerne vise den.
