Saznajte kako da kreirate Fancy početne kape koristeći CSS i slike
Naučite kako koristiti CSS da biste kreirali fancy početne kapice za svoje paragrafe. Postoji čak i jednostavna tehnika zamene slike koja koristi grafičku sliku za vašu početnu kapicu.
Osnovni stilovi početnih kapa
Postoje tri osnovna načina početnih kapica u dokumentima:
- podignuta - najčešća, gde je prvo slovo veće i na istoj liniji kao i trenutni tekst.
- pao - takođe prilično često, gde je prvo slovo veće i padalo ispod prve linije teksta. Sledeći tekst zatim pluti oko njega.
- susedno - gdje je prvo slovo u jednoj koloni pored ostatka teksta. Ovo je češće u štampi od Web dizajna.
Početne kapice ili poklopci za kapanje su vrlo poznati. Oni su odličan način da obučete inače dugotrajne i dosadne raspone teksta. I sa svojstvom CSS: prvo slovo, možete jednostavno definisati kako napraviti vaša prva pisma ljubiteljima.
Kreirajte jednostavan početni poklopac
Sve što treba da učinite da biste kreirali jednostavnu podignu početnu kapicu je da prvo slovo vašeg pasusa bude veće veličine sa pseudo-elementom prvog slova:
p: prva slova {font-size: 3em; }Međutim, mnogi pretraživači vide da je prvo slovo veće od ostatka teksta na liniji, tako da vode vodeće jednako onome što bi imalo smisla za to prvo slovo, a ne ostatak linije. Srećom, ovo je lako popraviti pomoću pseudo-elementa prve linije i osobine visine linije:
p: prva slova {font-size: 3em; } p: prva linija {line-height: 1em; }Igrajte sa visinom linije unutar dokumenta dok ne pronađete odgovarajuću veličinu za vaš tekst.
Igraj sa početnom kapom
Jednom kada shvatite kako napraviti početnu kapicu, možete ga obući u modernoj odjeći kako biste ga istakli. Igrajte s bojama, bojama pozadine, granicama ili šta god da udari u vašu fancy. Prilično jednostavan stil je obrnuti boje vašeg fonta i boje pozadine samo za prvo slovo:
p: prva slova {font-veličine: 300%; pozadina: # 000; boja: #fff; } p: prva linija {line-height: 100%; }Još jedan trik je usmeravanje prve linije. Ovo može biti komplikovano sa CSS-om, jer se sredina linije teksta može razlikovati ako je vaš izgled fleksibilan. Međutim, ako se neki igraju sa vrednostima, možete da napišete svoju prvu liniju dovoljno da se pokaže prvo slovo u sredini. Samo se ulogujte sa procentom na tekstualnoj alineji paragrafa dok ne bude ispravno:
p: prva slova {font-veličine: 300%; pozadina: # 000; boja: #fff; } p: prva linija {line-height: 100%; } p {tekst-indent: 45% ; }Susedne početne kape su teške sa CSS-om
Susedne početne kapice mogu biti teške sa CSS-om, jer različiti pregledači različito prikazuju fontove. Ideja za stvaranjem susednog poklopca u CSS-u je da se na prvom redu koristi tekst property-indent da bi se gurnula (levo) negativna vrijednost. Takođe ćete morati promijeniti levu marginu tog paragrafa za neku količinu. Igrajte sa ovim brojevima sve dok pasus ne izgleda dobro.
p {tekst-indent: -2.5em; margin-left: 3em; } p: prva slova {font-size: 3em; } p: prva linija {line-height: 100%; }Dobijanje stvarno Fancy Initial Caps
Najbolji način za kreiranje fancy početne kapice je promena fonta u više dekorativne porodice fontova. Ako koristite niz fontova, a zatim generički font , to će vam pomoći da garantujete da vaša početna kapica dobro pokazuje kako bi vaše kupce mogle da ga vide, bez problema u pristupačnosti i upotrebljivosti.
p: prva slova {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", kurziv; } p: prva linija {line-height: 100%; }I, kao i obično, možete da stavite sve ove predloge zajedno da biste kreirali početnu kapicu koja reklamira stil u vašem pasusu.
Korišćenje grafičkog početnog poklopca
Ako nakon svega toga još uvek ne volite kako izgledaju vaše početne kapice na stranici, možete se pribegavati grafici da biste dobili tačan efekat koji tražite. Ali pre nego što odlučite da se krenete direktno na grafiku, trebali biste biti svjesni nedostataka ove metode:
- Korisnici bez slika neće videti početnu kapicu i možda neće videti skriveni tekst koji zamenjuje slika. To može učiniti da je stav nedostupan, ili u najboljem slučaju teško čitati.
- Slike uvek dodaju u vrijeme preuzimanja stranice. Ako imate puno početnih ograničenja, možete značajno povećati vreme preuzimanja za nešto što bi mnogi ljudi mislili da nije zanemarljiv.
- Neki pregledači će prikazati i skriveno prvo slovo i sliku - što može učiniti da tekst pasusa izgleda neobično.
- Veoma je teško automatizovati ovu opciju, jer morate tačno znati šta je prvo slovo tako da koristite tačnu grafiku. Dakle, svaki put kada se paragraf uredi, možda ćete morati kreirati novu grafiku.
Prvo, morate kreirati grafiku prvog slova. Koristio sam Photoshop da napravim slovo L sa fontom "Edwardian Script ITC". Napravio sam ga ogromnim - veličine od 300 tačaka. Zatim sam isecao sliku na najmanji minimum oko slova i primetio širinu i visinu slike.
Zatim sam stvorio klasu "capL" za moj stav. Ovde definišem koju sliku treba koristiti, vodeću (visinu linije) i tako dalje.
Morate koristiti širinu i visinu slike da biste postavili tekstualnu indentaciju pasusa i vrh stranice. Za moju L sliku, trebao sam 95px indent i pad postavki 72px.
p.capL {line-visina: 1em; background-image: url (capL.gif); background-repeat: no-repeat; tekst-indent: 95px; padding-top: 72px; }Ali to nije sve. Ako ga ostavite tamo, onda će prvo slovo biti duplirano u paragrafu - prvo grafikom, zatim u tekstu. Dakle, dodao sam razmak oko tog prvog elementa sa klasom "početni" - i rekao pregledaču da ne prikazuje to slovo:
span.initial {display: none; }A grafika se tada ispravno prikazuje. Možete igrati sa tekstualnim indentom na paragrafu da biste dobili tekst upakovan do slova, ali želite da se prikaže.