Saznajte kako stvoriti Fancy Initial Caps pomoću CSS-a i slika
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:
- podignuta - najčešća, gdje je prvo slovo veće i na istoj liniji kao i tekući tekst.
- pao je - također prilično uobičajen, gdje je prvo slovo veće i spušteno ispod prvog retka teksta. Sljedeći se tekst zatim lebdi oko nje.
- susjedno - 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četnom 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 {font-size: 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 {font-size: 300%; boja pozadine: # 000; boja: #fff; } p: prvi redak {line-height: 100%; } p {text-indent: 45% ; }Susjedne početne kape su teške s CSS-om
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 {text-indent: -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 {font-size: 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 prikazati i skrivene prvo slovo i sliku - što može učiniti da tekst odlomka izgleda čudno.
- 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. Koristio sam Photoshop za stvaranje slova L s fontom "Edwardian Script ITC". Napravio sam ga ogromnim - 300pt veličine. Zatim sam obrezao sliku na goli minimum oko slova i zabilježio širinu slike i visinu.
Tada sam stvorio klasu "capl" za moj stav. Ovo je mjesto gdje definirati sliku koju treba koristiti, vodeći (visina linije) i tako dalje.
Morate upotrijebiti širinu slike i visinu za postavljanje odlomka teksta u tekstu i gornjeg ispuna. Za moju L sliku, trebalo sam 95px uvlačenje i 72px padding.
p.capL {line-height: 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 će slovo biti duplicirano u stavku - prvo s grafičkom, a zatim u tekstu. Dakle, dodao sam raspon tog prvog elementa s klasom "početni" - i rekao 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.