Naučte se používat CSS vytvořitozdobný počáteční limity pro vaše odstavce. K dispozici je dokonce i jednoduchá technika nahrazení obrázku, která umožňuje použít grafický obrázek pro počáteční limit.
Základní styly počátečních čepic
V dokumentech existují tři základní styly počátečních písmen:
- Zvednutý - nejběžnější, kde je první písmeno větší a na stejném řádku jako aktuální text.
- Upustil - také docela běžné, kde je první písmeno větší a kleslo pod první řádek textu. Následující text se pak vznáší kolem něj.
- Přilehlý - kde je první písmeno v jednom sloupci vedle zbytku textu. To je častější v tisku než webdesign.
Počáteční čepice nebo čepice jsou velmi známé. Jsou skvělým způsobem, jak obléknout jinak dlouhé a nudné rozpětí textu. A s vlastností CSS: first-letter, můžete snadno definovat, jak udělat vaše první písmena lepší.
Vytvořte jednoduchý počáteční víčko
Vše, co musíte udělat, abyste vytvořili jednoduchý zvýšený počáteční limit, je zvětšit velikost prvního písmene odstavce pomocí pseudoprvku prvního písmene:
p: první písmeno {font-size: 3em; }
Ale mnoho prohlížeče vidět, že první písmeno je větší než zbytek textu na řádku, takže se úvodní rovná tomu, co by dávalo smysl pro toto první písmeno, ne zbytek řádku. Naštěstí je to snadné opravit pomocí pseudoprvku první linie a vlastnosti výšky řádku:
p: první písmeno {font-size: 3em; }
p: první řádek {výška řádku: 1em; }
Hrajte s výškou čáry v dokumentu, dokud nenajdete správnou velikost textu.
Hrajte s počátečním víčkem
Jakmile pochopíte, jak vytvořit počáteční čepici, můžete ji obléknout do efektního oblečení, aby vynikla. Hrajte s barvami, barvami pozadí, ohraničením nebo čímkoli, co vás zaujme. Poměrně jednoduchý styl je obrátit barvy písma a barvy pozadí pouze pro první písmeno:
p: první písmeno {
velikost písma: 300%;
barva pozadí: # 000;
barva: #fff;
}
p: první řádek {výška řádku: 100%; }
Dalším trikem je vycentrování prvního řádku. S CSS to může být složité, protože střed textového řádku se může lišit, pokud je vaše rozložení flexibilní. Ale když si hrajete s hodnotami, můžete svůj první řádek odsadit natolik, aby se první písmeno zdálo uprostřed. Hrajte s procentem na odsazení textu odstavce, dokud nevypadá dobře:
p: první písmeno {
velikost písma: 300%;
barva pozadí: # 000;
barva: #fff;
}
p: první řádek {výška řádku: 100%; }
p {text-indent: 45%; }
Sousední počáteční uzávěry jsou s CSS tvrdé
Sousední počáteční velká písmena mohou být s CSS obtížná, protože různé prohlížeče zobrazují písma odlišně. Myšlenkou vytvoření sousedního víčka v CSS je použití vlastnosti odsazení textu na prvním řádku k jejímu vytlačení (nalevo) záporné hodnoty. Budete také muset změnit levý okraj daného odstavce o určitou částku. Hrajte s těmito čísly, dokud odstavec nevypadá dobře.
p {
odsazení textu: -2,5em;
levý okraj: 3em;
}
p: první písmeno {font-size: 3em; }
p: první řádek {výška řádku: 100%; }
Skutečně fantastické počáteční víčka
Nejlepším způsobem, jak vytvořit efektní počáteční víčko, je změnit písmo na dekorativní rodinu písem. Pokud používáte série písem následuje a obecné písmo, pomůže vám zaručit, že se vaše počáteční víčko bude dobře zobrazovat, aby ho vaši zákazníci mohli vidět, aniž by se dostali do problémů s přístupností a použitelností.
p: první písmeno {
velikost písma: 3em;
rodina fontů: "Edwardian Script ITC", "Brush Script MT", kurzíva;
}
p: první řádek {výška řádku: 100%; }
A jako obvykle můžete všechny tyto návrhy spojit a vytvořit počáteční limit, který styl reklam přizpůsobí vašemu odstavci.
Použití grafického počátečního víčka
Pokud se vám po tom všem nelíbí, jak vypadají vaše počáteční čepice na stránce, můžete se uchýlit k grafice, abyste získali přesný efekt, který hledáte. Ale než se rozhodnete přejít přímo na grafiku, měli byste si být vědomi nevýhod této metody:
- Zákazníci bez obrázků neuvidí počáteční víčko a nemusí vidět skrytý text, který obrázek nahrazuje. Díky tomu může být odstavec nepřístupný nebo v nejlepším případě obtížně čitelný.
- Obrázky vždy zvyšují dobu stahování stránky. Pokud máte mnoho počátečních omezení, můžete výrazně prodloužit dobu stahování pro něco, co by mnoho lidí považovalo za nevýznamné.
- Některé prohlížeče zobrazí skryté první písmeno i obrázek, díky čemuž může text odstavce vypadat divně.
- Je velmi obtížné tuto možnost automatizovat, protože musíte přesně vědět, jaké je první písmeno, abyste mohli použít správnou grafiku. Takže při každé úpravě odstavce budete možná muset vytvořit novou grafiku.
Nejprve musíte vytvořit grafiku prvního písmene. Pomocí Photoshopu jsme vytvořili písmeno L s písmem „Edwardian Script ITC“. Udělali jsme to obrovské - 300pt ve velikosti. Poté jsme obrázek ořízli na minimum kolem písmene a zaznamenali jsme šířku a výšku obrázku.
Poté jsme pro náš odstavec vytvořili třídu „capL“. Zde definujeme, jaký obrázek se má použít, úvodní (výška čáry) atd.
K nastavení odsazení textu a odsazení nahoře odstavce musíte použít šířku a výšku obrázku. Pro náš L obrázek jsme potřebovali 95px odsazení a 72px odsazení.
p.capL {
výška řádku: 1em;
background-image: url (capL.gif);
background-repeat: no-repeat;
odsazení textu: 95px;
výplň: 72px;
}
Ale to není vše. Pokud to tam necháte, bude první písmeno duplikováno v odstavci, nejprve s grafikou, pak v textu. Přidali jsme tedy rozpětí kolem prvního prvku s třídou „initial“ a řekli jsme prohlížeči, aby toto písmeno nezobrazoval:
span.initial {display: none; }
Grafika se poté zobrazí správně. Můžete si hrát s odsazením textu odstavce, aby se text přitulil až k písmenu, ale chcete ho zobrazit.