Naučite kako koristiti CSS stvoritifensi početne kape za vaše odlomke. Postoji čak i jednostavna tehnika zamjene slike koja koristi grafičku sliku za početnu granicu.
Osnovni stilovi početnih slova
U dokumentima postoje tri osnovna stila početnih ograničenja:
- Podignuta - najčešći, gdje je prvo slovo veće i u istom je retku kao i trenutni tekst.
- Ispao - također prilično često, kada je prvo slovo veće i spušta se ispod prvog retka teksta. Sljedeći tekst zatim pluta oko njega.
- Susjedni - gdje je prvo slovo u jednom stupcu pored ostatka teksta. To je češće u tisku nego u web dizajnu.
Početne ili kapice su vrlo poznate. Oni su sjajan način oblačenja inače dugih i dosadnih raspona teksta. A sa svojstvom CSS: prvo slovo, lako možete definirati kako svoja prva slova učiniti ljepšima.
Stvorite jednostavnu početnu kapu
Sve što trebate učiniti da biste stvorili jednostavno podignuto početno ograničenje je da prvo slovo vašeg odlomka bude veće pseudo-elementom prvog slova:
p: prvo slovo {font-size: 3em; }
Ali mnogi preglednicima uvidite da je prvo slovo veće od ostatka teksta na retku, tako da vodeći čine jednakim onome što bi imalo smisla za to prvo slovo, a ne ostatak retka. Srećom, ovo je lako popraviti pseudo-elementom prvog retka i svojstvom line-height:
p: prvo slovo {font-size: 3em; }
p: prvi red {line-height: 1em; }
Igrajte se s visinom crte u dokumentu dok ne pronađete pravu veličinu teksta.
Igrajte se s početnom kapom
Jednom kad shvatite kako stvoriti početnu kapu, možete je odjenuti u otmjenu odjeću kako bi se istaknula. Poigrajte se bojama, bojama pozadine, obrubima ili bilo čime drugim što vam se sviđa. Prilično jednostavan stil je preokrenuti boje fonta i boje pozadine samo za prvo slovo:
p: prvo slovo {
veličina slova: 300%;
boja pozadine: # 000;
boja: #fff;
}
p: prvi red {visina linije: 100%; }
Drugi je trik centriranje prve crte. To može biti nezgodno s CSS-om, jer sredina retka teksta može biti drugačija ako je vaš raspored fleksibilan. No, ako se neki poigraju vrijednostima, možete uvući prvi redak dovoljno da se čini da je prvo slovo u sredini. Samo se igrajte s postotkom na uvlačenju teksta u odlomku dok ne izgleda ispravno:
p: prvo slovo {
veličina slova: 300%;
boja pozadine: # 000;
boja: #fff;
}
p: prvi red {visina linije: 100%; }
p {uvlaka teksta: 45%; }
Susjedne početne kapice teško su sa CSS-om
Susjedna početna ograničenja mogu biti teška s CSS-om jer različiti preglednici fontove prikazuju drugačije. Ideja stvaranja susjednog ograničenja u CSS-u je koristiti svojstvo uvlačenja teksta u prvom retku kako bi se istisnula (lijevo) negativna vrijednost. Također ćete morati promijeniti lijevu marginu tog odlomka za neki iznos. Igrajte se s tim brojevima dok odlomak ne izgleda dobro.
p {
uvlaka teksta: -2,5em;
margina-lijevo: 3em;
}
p: prvo slovo {font-size: 3em; }
p: prvi red {visina linije: 100%; }
Dobivanje stvarno fancy početnih kapa
Najbolji način za stvaranje otmjene početne kapice je promjena fonta u ukrasniju obitelj fontova. Ako koristite a niz fontova nakon čega slijedi a generički font, to će vam garantirati da se početna granica dobro prikazuje kako bi je vaši kupci mogli vidjeti, bez upadanja u probleme pristupačnosti i upotrebljivosti.
p: prvo slovo {
veličina slova: 3em;
obitelj fontova: "Edwardian Script ITC", "Brush Script MT", kurziv;
}
p: prvi red {visina linije: 100%; }
I, kao i obično, možete sve ove prijedloge sastaviti kako biste stvorili početno ograničenje koje će oblikovati oglase za vaš odlomak.
Korištenje grafičkog početnog ograničenja
Ako vam se, nakon svega toga, i dalje ne sviđa kako izgledaju početni slovi na stranici, možete posegnuti za grafikom kako biste postigli točan efekt koji tražite. No prije nego što se odlučite prijeći ravno na grafiku, trebali biste biti svjesni nedostataka ove metode:
- Kupci bez slika neće vidjeti početno ograničenje i možda neće vidjeti skriveni tekst koji slika zamjenjuje. To može učiniti odlomak nepristupačnim ili ga je u najboljem slučaju teško pročitati.
- Slike se uvijek dodaju vremenu preuzimanja stranice. Ako imate puno početnih ograničenja, možete znatno povećati vrijeme preuzimanja za nešto što bi mnogi ljudi smatrali beznačajnim.
- Neki će preglednici prikazivati i skriveno prvo slovo i sliku zbog koje tekst odlomka može izgledati neobično.
- Teško je automatizirati ovu opciju jer morate točno znati što je prvo slovo kako biste koristili ispravnu grafiku. Dakle, svaki put kad se odlomak uređuje, možda ćete trebati stvoriti novu grafiku.
Prvo, morate stvoriti grafiku prvog slova. Photoshop smo koristili za stvaranje slova L s fontom "Edwardian Script ITC". Napravili smo ga ogromnim - veličinom od 300 pt. Zatim smo sliku obrezali na najmanji minimum oko slova i zabilježili širinu i visinu slike.
Tada smo stvorili klasu "capL" za naš odlomak. Tu definiramo koju ćemo sliku koristiti, vodeću (visina crte) i tako dalje.
Morate upotrijebiti širinu i visinu slike da biste postavili uvlačenje teksta i padding-top odlomka. Za našu L sliku trebali smo uvlaku od 95 piksela i 72 piksela.
p.capL {
visina crte: 1em;
pozadinska slika: url (capL.gif);
pozadina-ponavljanje: bez ponavljanja;
uvlaka teksta: 95 piksela;
obloga: 72px;
}
Ali to nije sve. Ako ga ostavite tamo, prvo slovo bit će duplicirano u odlomku, prvo s grafikom, a zatim u tekstu. Tako smo dodali raspon oko tog prvog elementa s klasom "početno" i rekli pregledniku da ne prikazuje to slovo:
span.initial {prikaz: nema; }
Zatim se grafika prikazuje ispravno. Možete se igrati uvlakom teksta na odlomku kako biste tekst privili točno do slova, no kako biste željeli da se prikaže.