Naučte sa, ako používať CSS tvoriťvymyslený počiatočné limity pre vaše odseky. Existuje dokonca aj jednoduchá technika nahradenia obrázka, pomocou ktorej je možné použiť grafický obrázok ako úvodnú čiapočku.
Základné štýly počiatočných čiapočiek
V dokumentoch existujú tri základné štýly začiatočných písmen:
- Zvýšený - najbežnejšie, keď je prvé písmeno väčšie a na rovnakom riadku ako aktuálny text.
- Spadol - tiež pomerne bežné, keď je prvé písmeno väčšie a je umiestnené pod prvým riadkom textu. Nasledujúci text sa potom vznáša okolo neho.
- Priľahlé - kde je prvé písmeno v jednom stĺpci vedľa zvyšku textu. Toto je bežnejšie v tlači ako webdizajn.
Počiatočné viečka alebo kvapky sú veľmi známe. Sú skvelým spôsobom, ako obliecť inak dlhé a nudné rozpätia textu. A s vlastnosťou CSS: first-letter, môžete ľahko definovať, ako urobiť svoje prvé písmená obľúbenejšími.
Vytvorte jednoduchý počiatočný uzáver
Všetko, čo musíte urobiť, aby ste vytvorili jednoduchú zvýšenú začiatočnú čiapočku, je zväčšiť prvé písmeno odseku pomocou pseudoprvku prvého písmena:
p: prvé písmeno {font-size: 3em; }
Ale veľa prehľadávače vidieť, že prvé písmeno je väčšie ako zvyšok textu v riadku, takže sa úvodná časť rovná tomu, čo by malo zmysel pre toto prvé písmeno, nie pre zvyšok riadku. Našťastie sa to dá ľahko opraviť pomocou pseudoprvku prvého riadku a vlastnosti výšky riadku:
p: prvé písmeno {font-size: 3em; }
p: prvý riadok {výška riadku: 1em; }
Hrajte sa s výškou riadku v dokumente, kým nenájdete správnu veľkosť textu.
Hrajte s počiatočným vekom
Keď pochopíte, ako vytvoriť počiatočnú čiapku, môžete ju obliecť do efektného oblečenia, aby vynikla. Hrajte s farbami, farbami pozadia, okrajmi alebo s čímkoľvek, čo vás zaujme. Pomerne jednoduchým štýlom je obrátenie farieb písma a farby pozadia iba pre prvé písmeno:
p: prvé písmeno {
veľkosť písma: 300%;
farba pozadia: # 000;
farba: #fff;
}
p: prvý riadok {výška riadku: 100%; }
Ďalším trikom je centrovanie prvého riadku. To môže byť pri CSS zložité, pretože stred textového riadku sa môže líšiť, ak je vaše rozloženie flexibilné. Ale pri niektorých pohrávaní sa s hodnotami môžete prvý riadok dostatočne odsadiť, aby sa prvé písmeno javilo ako v strede. Len sa pohrajte s percentom na zarážke textu odseku, až kým nevyzerá dobre:
p: prvé písmeno {
veľkosť písma: 300%;
farba pozadia: # 000;
farba: #fff;
}
p: prvý riadok {výška riadku: 100%; }
p {zarážka textu: 45%; }
Susedné počiatočné čiapky sú s CSS tvrdé
Susedné počiatočné veľké písmená môžu byť s CSS náročné, pretože rôzne prehliadače zobrazujú písma odlišne. Myšlienkou vytvorenia susedného uzáveru v CSS je použitie vlastnosti odsadenia textu v prvom riadku na jeho vytlačenie (doľava) záporná hodnota. Bude tiež potrebné zmeniť ľavý okraj tohto odseku o určitú hodnotu. Hrajte sa s týmito číslami, až kým odsek nebude vyzerať dobre.
p {
zarážka textu: -2,5em;
okraj vľavo: 3em;
}
p: prvé písmeno {font-size: 3em; }
p: prvý riadok {výška riadku: 100%; }
Skutočne efektné počiatočné čiapky
Najlepším spôsobom, ako vytvoriť efektnú počiatočnú čiapočku, je zmena písma na dekoratívnejšiu rodinu písma. Ak použijete a rad písiem nasledované a druhové písmo, Pomôže vám to zaručiť, že sa váš počiatočný limit ukáže dobre, aby ho vaši zákazníci videli, bez toho aby sa dostali do problémov s prístupnosťou a použiteľnosťou.
p: prvé písmeno {
veľkosť písma: 3em;
rodina fontov: "Edwardian Script ITC", "Brush Script MT", kurzívou;
}
p: prvý riadok {výška riadku: 100%; }
A ako obvykle môžete všetky tieto návrhy spojiť a vytvoriť počiatočný limit, ktorý prispôsobí váš odsek odseku.
Používanie počiatočného grafického uzáveru
Ak sa vám aj po tom všetkom nepáči, ako vyzerajú vaše počiatočné čiapky na stránke, môžete sa uchýliť k grafike, aby ste dosiahli presný efekt, ktorý hľadáte. Ale skôr ako sa rozhodnete prejsť priamo na grafiku, mali by ste si uvedomiť nevýhody tejto metódy:
- Zákazníci bez obrázkov neuvidia počiatočný limit a nemusí sa im zobraziť skrytý text, ktorý nahradzuje obrázok. Takto môže byť odsek neprístupný alebo prinajlepšom ťažko čitateľný.
- Obrázky sa vždy zvyšujú o čas načítania stránky. Ak máte veľa počiatočných obmedzení, môžete výrazne predĺžiť čas sťahovania pre niečo, čo by mnoho ľudí považovalo za bezvýznamných.
- Niektoré prehliadače zobrazia skryté prvé písmeno aj obrázok, vďaka čomu bude text v odseku vyzerať čudne.
- Je veľmi ťažké túto možnosť automatizovať, pretože musíte presne vedieť, aké je prvé písmeno, aby ste mohli použiť správnu grafiku. Takže pri každej úprave odseku bude možno potrebné vytvoriť novú grafiku.
Najskôr musíte vytvoriť grafiku prvého písmena. Pomocou aplikácie Photoshop sme vytvorili písmeno L s písmom „Edwardian Script ITC“. Urobili sme to obrovské - veľkosť 300 pt. Potom sme obrázok orezali na nevyhnutné minimum okolo písmena a všimli sme si šírku a výšku obrázka.
Potom sme pre náš odsek vytvorili triedu „capL“. Toto je miesto, kde definujeme, aký obrázok sa má použiť, úvodný (výška riadka) atď.
Na nastavenie odsadenia textu a odsadenia odseku musíte použiť šírku a výšku obrázka. Pre náš L obrázok sme potrebovali odsadenie 95px a 72px polstrovanie.
p.capL {
výška riadku: 1em;
background-image: url (capL.gif);
background-repeat: no-repeat;
odsadenie textu: 95px;
výplň: 72 pixelov;
}
Ale to nie je všetko. Ak to necháte tam, potom sa prvé písmeno duplikuje v odseku, najskôr s grafikou, potom s textom. Takže sme okolo prvého prvku pridali rozpätie s triedou „initial“ a povedali sme prehliadaču, aby toto písmeno nezobrazoval:
span.initial {display: none; }
Grafika sa potom zobrazí správne. Môžete sa pohrať s odsadením textu v odseku, aby sa text pritlačil až k písmenu, avšak chcete, aby sa zobrazoval.