Saznajte kako upotrebljavati CSS kako biste stvorili fantastične početne kape za svoje odlomke. Postoji čak i jednostavna tehnika zamjene slike za korištenje grafičke slike za početnu kapu.
Osnovni stilovi početnih kapa
Postoje tri osnovna stila početnih kapa u dokumentima:
- uzdignut - najčešći, gdje je prvo slovo veće i na istoj liniji kao i tekući tekst.
- pao - također prilično uobičajena, gdje je prvo slovo veće i spušteno ispod prvog retka teksta. Sljedeći se tekst zatim lebdi oko nje.
- susjedan - gdje je prvo slovo u jednom stupcu pored ostatka teksta. To je uobičajeno u tisku od web dizajna.
Početni kapci ili kapljice su vrlo poznati. Oni su odličan način da se oblačimo na drugačije dugo i dosadno područje tekstova. A sa svojstvom CSS-a: prvo slovo, lako možete definirati kako izraditi prvo slovo.
Izradite jednostavnu početnu kapu
Sve što trebate učiniti da biste stvorili jednostavnu podignutu početnu kapu je da prvo slovo vašeg odlomka bude veće u veličini s pseudo-elementom prvog slova:
p: prvo slovo {font-size: 3em; }
No, mnogi preglednici vide da je prvo slovo veće od ostatka teksta na liniji, pa vode jednako onome što bi imalo smisla za prvo slovo, a ne ostatak retka. Srećom, to je lako popraviti s prvoklasnim pseudo-elementom i svojstvom linije visine:
p: prvo slovo {font-size: 3em; }
p: prvi redak {line-height: 1em; }
Igrajte uz visinu retka unutar dokumenta dok ne pronađete pravu veličinu teksta.
Igrajte s početnim kapom
Jednom kada shvatite kako stvoriti početnu kapu, možete ga obući u fancy odjeću kako bi ga stand out. Igrajte se sa bojama, bojama pozadine, granicama ili što god štrajkate. Prilično jednostavan stil je preokrenuti boje vašeg fonta i boja pozadine samo za prvo slovo:
p: prvo slovo {
veličina slova: 300%;
boja pozadine: # 000;
boja: #fff;
}
p: prvi redak {line-height: 100%; }
Još jedan trik je usredotočiti prvu liniju. To može biti lukav sa CSS, jer se sredina tekstualne linije može razlikovati ako je vaš izgled fleksibilan. Ali s nekim koji se igraju s vrijednostima, možete dovoljno prvo dovršiti prvu liniju da bi se prvo slovo pojavilo u sredini. Samo se igrajte s postotkom na tekstualnoj duljini odlomka dok ne izgleda dobro:
p: prvo slovo {
veličina slova: 300%;
boja pozadine: # 000;
boja: #fff;
}
p: prvi redak {line-height: 100%; }
Susjedne početne kape teško su uz CSS
Uskočni početni kapci mogu biti teški kod CSS-a jer različiti preglednici različito prikazuju fontove. Ideja iza stvaranja susjedne kape u CSS-u jest upotreba alata tekstualnog alata na prvom retku kako bi ga ugasili (slijeva) negativnu vrijednost. Također ćete morati promijeniti lijevu marginu tog stavka za neki iznos. Igrajte se tim brojevima sve dok odlomak ne izgleda dobro.
p {
tekst-uvod: -2.5em;
margina-lijevo: 3em;
}
p: prvo slovo {font-size: 3em; }
p: prvi redak {line-height: 100%; }
Dobivanje stvarno zabavnih početnih kapa
Najbolji način za stvaranje fancy početne kape je promjena fontova na više ukrasne obitelji fontova. Ako upotrebljavate niz fontova, a slijedite ih genericnim fontom, pomoći će vam da se vaša početna kapica prikazuje tako da vaši klijenti mogu vidjeti, a da ne dobivaju probleme s dostupnosti i upotrebljivosti.
p: prvo slovo {
veličina slova: 3em;
font-family: "Edwardian Script ITC", "Četkica Script MT", kurziv;
}
p: prvi redak {line-height: 100%; }
I, kao i obično, sve ove prijedloge možete staviti zajedno kako biste stvorili početnu kapu koja oglasi stoje na svoj stavak.
Korištenje grafičke početne kape
Ako, nakon svega toga, i dalje vam se ne sviđa kako početne kape izgledaju na stranici, možete se pozvati na grafiku kako biste dobili točan učinak koji tražite. Ali prije nego što se odlučite kretati ravno u grafiku, trebali biste biti svjesni nedostataka ove metode:
- Kupci bez slika neće vidjeti početnu kapu, a možda neće vidjeti skriveni tekst koji zamjenjuje slika. To može stavku učiniti nedostupnim, ili u najboljem slučaju teško čitati.
- Slike uvijek dodaju vrijeme preuzimanja stranice. Ako imate puno početnih kapica, možete značajno povećati vrijeme preuzimanja za ono što bi mnogi ljudi mislili da je beznačajan.
- Neki će preglednici prikazivati skrivene prvo slovo i sliku koja može učiniti tekst odlomka neobično.
- Vrlo je teško automatizirati ovu opciju, jer morate točno znati što je prvo slovo tako da koristite ispravan grafički prikaz. Dakle, svaki put kada se stavka uređuje, možda ćete morati stvoriti novu grafikon.
Prvo, morate stvoriti grafički prikaz prvog slova. Upotrijebili smo Photoshop da stvorimo slovo L s fontom "Edwardian Script ITC". Izradili smo ga ogromnim - veličine 300pt. Zatim smo smanjili sliku do najnižeg minimuma oko slova i zabilježili širinu i visinu slike.
Tada smo stvorili klasu "capL" za naš stav. Ovdje definiramo sliku koju trebamo koristiti, vodeći (visina linije) i tako dalje.
Morate upotrijebiti širinu slike i visinu za postavljanje odlomka teksta u tekstu i gornjeg ispuna. Za našu L sliku trebali smo 95px uvlačenje i 72px padding.
p.capL {
visina linije: 1em;
pozadina: url (capL.gif);
pozadina ponoviti: ne-ponoviti;
tekst-uvlačenje: 95px;
padding-top: 72 piksela;
}
Ali to nije sve. Ako ga ostavite tamo, prvo slovo bit će umnoženo u stavku, prvo s grafičkom, a zatim u tekstu. Zato smo dodali raspon tog prvog elementa s klasom "početni" i rekli pregledniku da ne prikazuje to slovo:
span.initial {display: none; }
A grafika se ispravno prikazuje. Možete se igrati s tekstom uvučenom na odlomak da biste dohvatili tekst do slova, no želite ga prikazati.
