Lær hvordan du bruker CSS å lagefancy innledende grenser for avsnittene dine. Det er til og med en enkel teknikk for erstatning av bilder for å bruke et grafisk bilde for den opprinnelige hetten.
Grunnleggende stiler av innledende Caps
Det er tre grunnleggende stiler for innledende hetter i dokumenter:
- Oppvokst - den vanligste, der første bokstav er større og på samme linje som gjeldende tekst.
- Falt - også ganske vanlig, der første bokstav er større og falt under første tekstlinje. Den følgende teksten flyter deretter rundt den.
- Ved siden av - der første bokstav er i en kolonne ved siden av resten av teksten. Dette er mer vanlig på trykk enn nettdesign.
Initial caps eller drop caps er veldig kjent. De er en fin måte å kle på seg ellers lange og kjedelige tekstspenner. Og med CSS-egenskapen: første bokstav, kan du enkelt definere hvordan du skal gjøre de første bokstavene dine bedre.
Lag en enkel initial cap
Alt du trenger å gjøre for å lage en enkel hevet initial cap er å gjøre første bokstav i avsnittet ditt større i størrelse med pseudo-elementet i første bokstav:
p: første bokstav {font-size: 3em; }
Men mange nettlesere se at første bokstav er større enn resten av teksten på linjen, så de gjør ledelsen lik det som er fornuftig for den første bokstaven, ikke resten av linjen. Heldigvis er dette enkelt å fikse med førstelinjens pseudo-element og egenskapen for linjehøyde:
p: første bokstav {font-size: 3em; }
p: førstelinje {linjehøyde: 1 em; }
Spill med linjehøyden i dokumentet til du finner riktig størrelse på teksten.
Spill med din første hette
Når du forstår hvordan du lager en innledende hette, kan du kle den opp i fancy klær for å få den til å skille seg ut. Lek med farger, bakgrunnsfarger, rammer eller hva som helst som passer deg. En ganske enkel stil er å reversere fargene på skrift og bakgrunnsfarge bare for første bokstav:
p: første bokstav {
skriftstørrelse: 300%;
bakgrunnsfarge: # 000;
farge: #fff;
}
p: førstelinje {linjehøyde: 100%; }
Et annet triks er å sentrere første linje. Dette kan være vanskelig med CSS, da midten av tekstlinjen kan være annerledes hvis oppsettet ditt er fleksibelt. Men med noen som leker med verdiene, kan du rykke inn den første linjen din nok til at første bokstav ser ut til å være i midten. Bare spill med prosentandelen på avsnittets tekstinnrykk til den ser riktig ut:
p: første bokstav {
skriftstørrelse: 300%;
bakgrunnsfarge: # 000;
farge: #fff;
}
p: førstelinje {linjehøyde: 100%; }
p {tekstinnrykk: 45%; }
Tilstøtende innledende caps er vanskelig med CSS
Tilstøtende innledende caps kan være vanskelig med CSS fordi de forskjellige nettleserne viser skriftene forskjellig. Ideen bak å lage en tilstøtende hette i CSS er å bruke tekstinnrykkegenskapen på første linje for å skyve den ut (til venstre) en negativ verdi. Du må også endre venstre marg i dette avsnittet med noe beløp. Spill med disse tallene til avsnittet ser bra ut.
p {
tekstinnrykk: -2,5 em;
margin-venstre: 3em;
}
p: første bokstav {font-size: 3em; }
p: førstelinje {linjehøyde: 100%; }
Få virkelig fancy initialcaps
Den beste måten å lage en fancy initial cap på er å endre skrift til en mer dekorativ fontfamilie. Hvis du bruker en serie skrifter etterfulgt av en generisk font, vil det bidra til å garantere at den opprinnelige grensen din viser godt slik at kundene dine kan se den, uten å komme inn på tilgjengelighets- og brukervennlighetsproblemer.
p: første bokstav {
skriftstørrelse: 3 em;
font-family: "Edwardian Script ITC", "Brush Script MT", kursiv;
}
p: førstelinje {linjehøyde: 100%; }
Og som vanlig kan du sette alle disse forslagene sammen for å lage et innledende tak som annonserer stil til avsnittet ditt.
Bruke en grafisk startkapsel
Hvis du tross alt fremdeles ikke liker hvordan de første kappene dine ser ut på siden, kan du ty til grafikk for å få den nøyaktige effekten du leter etter. Men før du bestemmer deg for å gå rett til grafikk, bør du være oppmerksom på ulempene med denne metoden:
- Kunder uten bilder ser ikke den opprinnelige hetten og ser kanskje ikke den skjulte teksten som bildet erstatter. Dette kan gjøre avsnittet utilgjengelig, eller i beste fall vanskelig å lese.
- Bilder legger alltid til nedlastingstiden for en side. Hvis du har mange innledende caps, kan du øke nedlastingstiden betydelig for noe mange mennesker synes er ubetydelig.
- Noen nettlesere vil vise både den skjulte første bokstaven og bildet som kan gjøre avsnittsteksten ser rart ut.
- Det er veldig vanskelig å automatisere dette alternativet, da du må vite nøyaktig hva første bokstav er, slik at du bruker riktig grafikk. Så hver gang avsnittet redigeres, må du kanskje lage en ny grafikk.
Først må du lage grafikken til første bokstav. Vi brukte Photoshop til å lage bokstaven L med skriften "Edwardian Script ITC." Vi gjorde det stort - 300pt i størrelse. Vi beskjærte deretter bildet til det minste minimum rundt bokstaven og la merke til bildets bredde og høyde.
Så opprettet vi en klasse "capL" for avsnittet vårt. Det er her vi definerer hvilket bilde vi skal bruke, ledende (linjehøyde) og så videre.
Du må bruke bildebredden og høyden for å angi avsnittets tekstinnrykk og polstringstopp. For vårt L-bilde trengte vi 95px innrykk og 72px polstring.
p.capL {
linjehøyde: 1 em;
bakgrunnsbilde: url (capL.gif);
bakgrunn-gjenta: nei-gjenta;
tekstinnrykk: 95px;
polstring-topp: 72px;
}
Men det er ikke alt. Hvis du lar den være der, blir den første bokstaven duplisert i avsnittet, først med grafikken, deretter i teksten. Så vi la til et spenn rundt det første elementet med klassen "initial" og ba nettleseren om ikke å vise bokstaven:
span.initial {display: none; }
Grafikken vises deretter riktig. Du kan leke med tekstinnrykk i avsnittet for å få teksten til å kose seg helt opp til bokstaven, men du vil at den skal vises.