Opi luomaan Fancy Initial Caps CSS: n ja kuvien avulla
Opi käyttämään CSS : ää luomaan mielikuvituksellisia alkukartioita kappaleistasi. Sinulla on jopa yksinkertainen kuvankorjaus tekniikka käyttää graafista kuvaa alkuperäisen korkki.
Alkuperäisten lippujen perustyylit
Asiakirjoissa on kolme perustyyppistä alkuperäiskappaletta:
- nousee - yleisin, jossa ensimmäinen kirjain on suurempi ja samalla linjalla kuin nykyinen teksti.
- pudonnut - myös melko yleinen, jossa ensimmäinen kirjain on suurempi ja laskenut ensimmäisen tekstirivin alle. Seuraava teksti sitten kelluu sen ympärille.
- vieressä - jossa ensimmäinen kirjain on sarakkeen vieressä muunkin tekstin vieressä. Tämä on yleisempi kuin Web-suunnittelussa.
Alkuperäiset korkit tai pudotuspäät ovat hyvin tuttuja. Ne ovat erinomainen tapa pukea muutoin pitkiä ja tylsiä tekstiä. CSS-ominaisuuden avulla: ensimmäisen kirjaimen avulla voit helposti määrittää, kuinka voit tehdä ensimmäiset kirjaimet paremmin.
Luo yksinkertainen aloituskappale
Sinun tarvitsee vain luoda yksinkertainen korotettu aloituskappale, että kappaleen ensimmäinen kirjain on suurempi kuin ensimmäisen kirjaimen pseudo-elementti:
p: ensimmäinen kirjain {font-size: 3em; }Mutta monet selaimet näkevät, että ensimmäinen kirjain on suurempi kuin muilla tekstillä rivillä, joten ne johtavat johtavan yhtä paljon kuin olisi järkevää, että ensimmäinen kirjain, ei loppu rivillä. Onneksi tämä on helppo korjata ensimmäisen rivin pseudo-elementin ja rivin korkeuden ominaisuuden kanssa:
p: ensimmäinen kirjain {font-size: 3em; } p: ensimmäinen rivi {linjan korkeus: 1em; }Toista tekstin viivan korkeudella, kunnes löydät oikean koon tekstille.
Pelaa alkuperäisellä korkilla
Kun ymmärrät, miten luodaan alkuperäinen korkki, voit pukea se fancy-vaatteisiin, jotta se erottuu. Pelaa väreillä, taustaväreillä, rajoilla tai mitä tahansa iskuillasi. Melko yksinkertainen tyyli on kääntää fontin värejä ja taustaväriä vain ensimmäiselle kirjaimelle:
p: ensimmäinen kirjain {font-size: 300%; taustaväri: # 000; väri: #fff; } p: ensimmäinen rivi {linjan korkeus: 100%; }Toinen temppu on keskittää ensimmäinen rivi. Tämä voi olla hankalaa CSS: n kanssa, sillä tekstirivin keskiosa voi olla erilainen, jos ulkoasu on joustava. Mutta jotkut pelaavat arvojen ympärillä, voit sijoita ensimmäinen rivi niin, että ensimmäinen kirjain näyttää olevan keskellä. Pelata vain prosenttiosuus kappaleen teksti-luetelmakohdasta, kunnes se näyttää oikealta:
p: ensimmäinen kirjain {font-size: 300%; taustaväri: # 000; väri: #fff; } p: ensimmäinen rivi {linjan korkeus: 100%; } p {teksti-indentti: 45% ; }Läheiset alkukannat ovat vaikeita CSS: llä
Lähellä olevat aloituskorkit voivat olla vaikeita CSS: n kanssa, koska eri selaimet näyttävät fontit eri tavoin. Viereisen CSS: n luomisen ajatus on käyttää ensimmäisen rivin teksti-indent-ominaisuutta työntämään sitä (vasemmalle) negatiiviseksi arvoksi. Sinun on myös muutettava kyseisen kappaleen vasen marginaali jonkin verran. Toista nämä numerot, kunnes kohta näyttää hyvältä.
p {teksti-indent: -2.5em; marginaali-vasen: 3em; } p: ensimmäinen kirjain {font-size: 3em; } p: ensimmäinen rivi {linjan korkeus: 100%; }Getting todella fancy aloituslippikset
Paras tapa luoda fancy-aloituskorkki on vaihtaa fontti koristeellisempaan fonttiperheeseen. Jos käytät kirjasarjaa, jota seuraa yleinen kirjasintyyppi , se auttaa takaamaan, että aloituskorkosi näkyy hyvin, jotta asiakkaasi näkevät sen pääsemättä esteettömyyteen ja käytettävyyteen.
p: ensimmäinen kirjain {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", kursivoiva; } p: ensimmäinen rivi {linjan korkeus: 100%; }Ja tavalliseen tapaan voit laittaa kaikki nämä ehdotukset yhteen luomalla aloituskorkin, jonka mukaan mainokset tyylistäsi kohtaan.
Graafisen alustan avulla
Jos et vieläkään pidä siitä, miten alkuperäiset korkkiesi näyttävät sivulle, voit turvautua grafiikkaan saadaksesi tarkan haun, jota etsit. Mutta ennen kuin päätät siirtyä suoraan grafiikkaan, sinun on tiedostettava tämän menetelmän haitat:
- Asiakkaat, joilla ei ole kuvia, eivät näe alkuperäistä korkkia, eivätkä he saa nähdä piilotettua tekstiä, jota kuva korvaa. Tämä voi tehdä kappaleen saavuttamattomaksi, tai parhaimmillaan on vaikea lukea.
- Kuvat lisätään aina sivun latausaikaan. Jos sinulla on paljon alkukantoja, voit lisätä huomattavasti latausaikaa monille ihmisille, jotka tuntevat olevan merkityksetöntä.
- Jotkin selaimet näyttävät sekä piilotetun ensimmäisen kirjaimen että kuvan - mikä voi tehdä kappaleen tekstin näyttävän outoa.
- On erittäin vaikea automatisoida tätä vaihtoehtoa, koska sinun on tiedettävä tarkalleen, mitä ensimmäinen kirjain on, jotta käytät oikeaa graafiaa. Joten aina, kun kappale on muokattu, saatat joutua luomaan uuden graafin.
Ensin sinun on luotava ensimmäisen kirjaimen graafinen esitys. Käytin Photoshopia luomaan kirjain L fontilla "Edwardian Script ITC". Tein sen valtavaksi - 300pt kooltaan. Sitten leikattiin kuva alaspäin minimiin kirjaimen ympärille ja huomasin kuvan leveyden ja korkeuden.
Sitten luin luokan "capl" kappaleeni kohdalle. Tässä määritän, mitä kuvaa käytetään, johtava (rivin korkeus) ja niin edelleen.
Sinun on käytettävä kuvan leveyttä ja korkeutta asettaaksesi kappaleen teksti-sisennyksen ja pehmuste-yläosan. Minun L-kuvani tarvitsin 95px sisennyksen ja 72px-tyynyn.
p.capL {line-height: 1em; taustakuva: url (capL.gif); tausta-toisto: ei-toista; teksti-indentti: 95px; pehmuste-top: 72px; }Mutta se ei ole kaikki. Jos jätät sen siellä, ensimmäinen kirjain kopioidaan kappaleessa - ensin graafilla, sitten tekstissä. Niinpä lisäsin span ensimmäisen elementin ympärille, jossa oli luokka "alku" - ja kertoi selaimelle, ettei näyttänyt sitä kirjainta:
span.initial {display: none; }Ja grafiikka näkyy sitten oikein. Voit leikata kappaleen teksti-sisennyksen avulla saadaksesi tekstin tasaiseksi kirjaimelle asti, mutta haluat sen näyttävän.