Opi käyttämään CSS luodafancy kappaleiden alkukorkit. Graafisen kuvan käyttämiseen alkuperäiseen korkkiisi on jopa yksinkertainen kuvanvaihtotekniikka.
Alkuperäisten korkkien perusmallit
Asiakirjoissa on kolme perusmallia:
- Kasvatettu - yleisin, jossa ensimmäinen kirjain on suurempi ja samalla rivillä kuin nykyinen teksti.
- Putosi - myös melko yleinen, jossa ensimmäinen kirjain on suurempi ja pudotetaan ensimmäisen tekstirivin alle. Seuraava teksti kelluu sen ympärillä.
- Vieressä - jossa ensimmäinen kirjain on yhdessä sarakkeessa muun tekstin vieressä. Tämä on yleisempää painetussa muodossa kuin verkkosuunnittelussa.
Alkukorkit tai pudotuskorkit ovat hyvin tuttuja. Ne ovat loistava tapa pukeutua muuten pitkiä ja tylsiä tekstiä. Ja CSS-ominaisuuden: ensikirjain avulla voit helposti määrittää, kuinka tehdä ensimmäisistä kirjaimista miellyttävämpi.
Luo yksinkertainen alkukorkki
Ainoa, mitä sinun tarvitsee tehdä yksinkertaisen korotetun alkukannen luomiseksi, on tehdä kappaleen ensimmäisestä kirjaimesta suurempi ensimmäisen kirjaimen pseudoelementillä:
p: ensimmäinen kirjain {font-size: 3em; }
Mutta monet selaimet nähdä, että ensimmäinen kirjain on suurempi kuin muu teksti rivillä, joten ne tekevät johdon yhtä suureksi kuin mikä olisi järkevää tälle ensimmäiselle kirjaimelle, ei muulle riville. Onneksi tämä on helppo korjata ensimmäisen rivin pseudoelementillä ja line-height -ominaisuudella:
p: ensimmäinen kirjain {font-size: 3em; }
p: ensimmäinen rivi {line-height: 1em; }
Pelaa asiakirjan viivan korkeudella, kunnes löydät tekstillesi oikean koon.
Pelaa alkuperäisellä korkillasi
Kun ymmärrät alkuperäisen korkin luomisen, voit pukeutua siihen hienoihin vaatteisiin, jotta se erottuu. Pelaa väreillä, taustaväreillä, reunoilla tai kaikella muulla mielikuvituksellasi. Melko yksinkertainen tyyli on kääntää fontin ja taustavärin värit vain ensimmäiselle kirjaimelle:
p: ensimmäinen kirjain {
kirjasinkoko: 300%;
taustaväri: # 000;
väri: #fff;
}
p: ensimmäinen rivi {viivan korkeus: 100%; }
Toinen temppu on keskittää ensimmäinen rivi. Tämä voi olla hankalaa CSS: n kanssa, koska tekstirivin keskiosa voi olla erilainen, jos asettelu on joustava. Mutta kun jotkut leikkivät arvojen kanssa, voit sisenyttää ensimmäisen rivisi tarpeeksi, jotta ensimmäinen kirjain näyttää olevan keskellä. Pelaa vain kappaleen teksti-luetelmakohdan prosenttiosuudella, kunnes se näyttää oikealta:
p: ensimmäinen kirjain {
kirjasinkoko: 300%;
taustaväri: # 000;
väri: #fff;
}
p: ensimmäinen rivi {viivan korkeus: 100%; }
p {teksti-luetelmakohta: 45%; }
Vierekkäiset alkukorkit ovat vaikeita CSS: n kanssa
Vierekkäiset alkukirjaimet voivat olla vaikeita CSS: n kanssa, koska eri selaimet näyttävät kirjasimet eri tavalla. Ajatus viereisen ylärajan luomisesta CSS: ään on käyttää ensimmäisen rivin teksti-sisennysominaisuutta työntämään negatiivinen arvo (vasemmalle). Sinun on myös muutettava kyseisen kappaleen vasen marginaali jollakin määrällä. Pelaa näillä numeroilla, kunnes kappale näyttää hyvältä.
p {
teksti-luetelmakohta: -2,5em;
marginaali vasemmalla: 3em;
}
p: ensimmäinen kirjain {font-size: 3em; }
p: ensimmäinen rivi {viivan korkeus: 100%; }
Saada todella hienoja alkuperäisiä korkkeja
Paras tapa luoda hieno alkukorkki on muuttaa fontti koristeellisemmaksi kirjasinperheeksi. Jos käytät a fonttien sarja jota seuraa a yleinen fontti, se auttaa takaamaan, että alkuperäinen korkosi näkyy hyvin, jotta asiakkaasi näkevät sen ilman, että he joutuvat esteettömyys- ja käytettävyysongelmiin.
p: ensimmäinen kirjain {
kirjasinkoko: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", kursiivinen;
}
p: ensimmäinen rivi {viivan korkeus: 100%; }
Ja kuten tavallista, voit liittää kaikki nämä ehdotukset yhteen luodaksesi aloitusrajan, joka mainostaa kappalettasi.
Graafisen alkukannen käyttö
Jos loppujen lopuksi et vieläkään pidä siitä, kuinka alkuperäiset korkit näyttävät sivulta, voit turvautua grafiikkaan saadaksesi tarkan vaikutuksen. Mutta ennen kuin päätät siirtyä suoraan grafiikkaan, sinun tulisi olla tietoinen tämän menetelmän haitoista:
- Asiakkaat, joilla ei ole kuvaa, eivät näe alkuperäistä yläosaa eivätkä ehkä näe piilotettua tekstiä, jota kuva korvaa. Tämä voi tehdä kappaleesta käsiksi tai parhaimmillaan vaikea lukea.
- Kuvat lisäävät aina sivun latausaikaa. Jos sinulla on paljon alkuperäisiä ylärajoja, voit lisätä huomattavasti latausaikaa sellaiselle, mitä monet ihmiset tuntevat olevan merkityksetön.
- Jotkin selaimet näyttävät sekä piilotetun ensimmäisen kirjaimen että kuvan, mikä voi tehdä kappaletekstistä outoa.
- Tämän vaihtoehdon automatisointi on erittäin vaikeaa, koska sinun on tiedettävä tarkalleen mikä ensimmäinen kirjain on, jotta käytät oikeaa kuvaa. Joten joka kerta kun kappaletta muokataan, sinun on ehkä luotava uusi kuva.
Ensin sinun on luotava ensimmäisen kirjaimen kuva. Luomme L-kirjaimen fontilla "Edwardian Script ITC" Photoshopin avulla. Teimme siitä valtavan - 300pt kooltaan. Sitten rajaimme kuvan alas minimiin kirjaimen ympärille ja huomasimme kuvan leveyden ja korkeuden.
Sitten loimme luokan "capL" kappaleellemme. Tässä määritellään käytettävä kuva, etukuva (viivan korkeus) ja niin edelleen.
Sinun on käytettävä kuvan leveyttä ja korkeutta kappaleen tekstin sisennyksen ja pehmusteen yläosan asettamiseen. L-kuvallemme tarvitsimme 95 kuvapisteen sisennyksen ja 72 kuvapisteen täytteen.
p.capL {
viivan korkeus: 1em;
taustakuva: url (capL.gif);
tausta-toisto: ei-toista;
teksti-luetelmakohta: 95 kuvapistettä;
toppaus: 72 kuvapistettä;
}
Mutta se ei ole kaikki. Jos jätät sen sinne, ensimmäinen kirjain kopioidaan kappaleessa, ensin graafisella, sitten tekstillä. Joten lisäsimme span ensimmäisen elementin ympärille luokassa "initial" ja käskimme selainta olemaan näyttämättä kyseistä kirjainta:
span.initial {näyttö: ei mitään; }
Grafiikka näkyy sitten oikein. Voit leikkiä kappaleen tekstin sisennyksellä saadaksesi tekstin mukaasi kirjaimeen asti, vaikka haluat sen näkyvän.