Naučte se, jak vytvořit originální čepice s použitím CSS a obrázků
Naučte se, jak používat CSS, abyste vytvořili fantazijní počáteční čepice pro vaše odstavce. Existuje dokonce i jednoduchá technika výměny obrázků pro použití grafického obrazu pro počáteční čepici.
Základní styly počátečních čepic
V dokumentech jsou tři základní styly počátečních čar:
- zvednutá - nejběžnější, kde první písmeno je větší a na stejném řádku jako aktuální text.
- spadl - také docela obyčejný, kde první písmeno je větší a spadl dolů pod první řádek textu. Následující text se pak vznáší kolem něj.
- sousední - kde první písmeno je v jednom sloupci vedle zbytku textu. Toto je častější v tisku než webový design.
Počáteční čepice nebo kapky jsou velmi známé. Jsou skvělým způsobem, jak obléknout jinak dlouhé a nudné texty. A s vlastností CSS: první písmeno, můžete snadno definovat, jak vytvořit své první dopisy chovatel.
Vytvořte jednoduchou počáteční čepici
Vše, co musíte udělat, abyste vytvořili jednoduchý zvýšený počáteční čepičku, je, že první písmeno odstavce je větší s prvním písmenem pseudo-prvkem:
p: první písmeno {font-size: 3em; }}Ale mnoho prohlížečů vidí, že první písmeno je větší než zbytek textu na řádku, takže vedou rovnocenné to, co by mělo smysl pro první písmeno, nikoliv zbytek řádku. Naštěstí je to snadné vyřešit prvkem pseudo-prvku a vlastností výšky řádku:
p: první písmeno {font-size: 3em; } p: první řádek {line-height: 1em; }}Přehrajte s výškou čáry dokumentu, dokud nenajdete správnou velikost textu.
Hrajte s počáteční čepicí
Jakmile pochopíte, jak vytvořit počáteční čepici, můžete ji oblékat v luxusní oblečení, aby se vynikla. Zahrajte si s barvami, barvami pozadí, hranicemi, nebo co udělají vaše fantazie. Poměrně jednoduchý styl je obrátit barvy písma a barvy pozadí pouze pro první písmeno:
p: první písmeno {font-size: 300%; barva pozadí: # 000; barva: #fff; } p: první řádek {line-height: 100%; }}Další trik je zaměřit se na první řadu. To může být obtížné s CSS, jelikož prostřední textová čára se může lišit, pokud je rozložení flexibilní. Ale pokud někteří hrají s hodnotami, můžete odsadit první řádek dost, aby se zdálo, že první písmeno je uprostřed. Stačí hrát s procento v textu odrážka odstavce, dokud to nevypadá správně:
p: první písmeno {font-size: 300%; barva pozadí: # 000; barva: #fff; } p: první řádek {line-height: 100%; } p {text-odrážka: 45% ; }}Sousední počáteční čepice jsou těžké pomocí CSS
Přidružené počáteční čepice mohou být obtížné s CSS, protože různé prohlížeče zobrazují písma jinak. Myšlenka vytváření sousední čepice v CSS je použití vlastnosti text-indent na prvním řádku, aby se vytiskla (vlevo) záporná hodnota. Budete také muset změnit levý okraj tohoto odstavce o určitou částku. Hrajte s těmito čísly dokud odstavec nevypadá dobře.
p {text-odrážka: -2,5; margin-left: 3m; } p: první písmeno {font-size: 3em; } p: první řádek {line-height: 100%; }}Získat opravdu poprvé originální čepice
Nejlepší způsob, jak vytvořit fantastickou počáteční čepičku, je změnit písmo na více dekorativní rodinu písem. Používáte-li sérii písem, po níž následuje obecné písmo , pomůže to zaručit, že se vaše počáteční čepice zobrazuje dobře, takže si ji mohou zákazníci uvidět, aniž by se dostali do problémů s dostupností a použitelností.
p: první písmeno {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", kurzíva; } p: první řádek {line-height: 100%; }}A jako obvykle můžete všechny tyto návrhy společně vytvořit, abyste vytvořili počáteční čepici, kterou reklamy upravují do vašeho odstavce.
Použití grafického počátečního uzávěru
Pokud se po tom všem nebudete líbit, jak vypadají vaše počáteční čepice na stránce, můžete se obrátit na grafiku, abyste získali přesný efekt, který hledáte. Ale než se rozhodnete přesunout přímo do grafiky, měli byste si být vědomi nevýhod této metody:
- Zákazníci bez obrázků nebudou vidět počáteční čepici a pravděpodobně se nezobrazí skrytý text, který obrázek nahrazuje. To může činit tento odstavec nepřístupný nebo nejlépe obtížně čitelný.
- Obrázky vždy přidávají k času stahování stránky. Máte-li spoustu počátečních čepic, můžete výrazně zvýšit dobu stažení pro něco, co by mnozí lidé považovali za nevýznamné.
- Některé prohlížeče budou zobrazovat jak skryté první písmeno, tak obrázek - což může způsobit, že odstavcový text vypadá jako lichý.
- Je to velmi těžké automatizovat tuto možnost, protože musíte přesně vědět, co je první písmeno, abyste použili správnou grafiku. Takže při každém úpravě odstavce bude možná třeba vytvořit novou grafiku.
Nejprve musíte vytvořit grafiku prvního písmene. Používal jsem Photoshop k vytvoření písmena L písmenem "Edwardian Script ITC". Udělal jsem to obrovský - 300pt ve velikosti. Potom jsem nakreslil snímek na holé minimum kolem písmena a zaznamenal šířku a výšku obrázku.
Pak jsem pro svůj odstavec vytvořil třídu "capL". Zde určuji, jaký obrázek má být použit, přední (výška řádku) a tak dále.
Je třeba použít šířku a výšku obrázku, abyste nastavili odsazení textu a odsazení odsazení. Pro můj obraz L jsem potřeboval 95px indent a 72px padding.
p.capL {výška řádku: 1em; obrázek na pozadí: url (capL.gif); opakování pozadí: neopakovat; textová odrážka: 95px; polstrování: 72px; }}Ale to není všechno. Pokud je tam ponecháte, pak první písmeno bude duplikováno v odstavci - nejprve s grafikou a poté v textu. Takže jsem přidal kolem tohoto prvního elementu třídu "počáteční" - a řekl prohlížeč, aby tento dopis nezobrazoval:
span.initial {display: none; }}A grafika se pak zobrazí správně. Můžete si přehrát text s odsazením odstavce, abyste získali text přiložený až k písmenu, ale chcete, aby se zobrazil.