Даведайцеся, як стварыць Fancy пачатковых загалоўных Выкарыстанне CSS і малюнкі
Даведайцеся , як выкарыстоўваць CSS для стварэння фантазіі пачатковых каўпачкоў для абзацаў. Існуе нават просты метад замены малюнка выкарыстоўваць графічнае малюнак для пачатковага каўпачка.
Асноўныя стылі Initial Caps
Ёсць тры асноўных стылю пачатковых загалоўных ў дакументах:
- падняты - самы распаўсюджаны, дзе першая літара больш і на той жа лініі, што і цяперашні зьмест.
- зваліўся - таксама даволі часта, дзе першая літара больш і ўпаў ніжэй першага радка тэксту. Затым наступны тэкст плавае вакол яго.
- сумежна - дзе першая літара ў адной калонцы побач з астатняй часткай тэксту. Гэта часцей сустракаецца ў друку, чым вэб-дызайн.
Пачатковыя каўпачкі або падзенне вечка вельмі добра знаёмыя. Яны ўяўляюць сабой выдатны спосаб апранацца інакш доўгія і нудныя пралёты тэксту. І з уласцівасцю CSS: першай літарай, вы можаце лёгка вызначыць, як зрабіць вашыя першыя літары аматара.
Стварэнне простага Initial Cap
Усё, што вам трэба зрабіць, каб стварыць просты падняты першапачатковы каўпачок, каб зрабіць першую літару вашага пункта большага памеру з першымі літарамі псеўда-элементам:
р: першы літары {памер шрыфта: 3em; }Але многія браўзэры бачаць , што першая літара больш , чым астатні тэкст на лініі, так што яны робяць вядучы роўна , што будзе мець сэнс для гэтай першай літары, а ня астатняй часткай лініі. На шчасце, гэта лёгка выправіць з першым радком псеўда-элементам і уласцівасцю лініі па вышыні:
р: першы літары {памер шрыфта: 3em; } Р: першая лінія {вышыня радкі: 1em; }Гуляць з вышыні радка ў дакуменце, пакуль вы не знойдзеце правільны памер для вашага тэксту.
Гуляць з вашай пачатковай Cap
Як толькі вы зразумееце, як стварыць першапачатковы каўпачок, вы можаце апрануць яго ў моднай вопратцы, каб зрабіць яго вылучыцца. Гуляць з кветкамі, колеру фону, мяжы, ці нешта дзівіць ваша ўяўленне. Даволі просты стыль, каб інвертаваць колеры вашага шрыфта і колер фону толькі для першай літары:
р: першы літары {памер шрыфта: 300%; колер фону: # 000; колер: #fff; } Р: першая лінія {вышыня радкі: 100%; }Яшчэ адна хітрасць заключаецца ў цэнтр першай лініі. Гэта можа быць складана з дапамогай CSS, так як сярэдзіна тэкставай радкі можа быць рознай, калі ваш макет з'яўляецца гнуткім. Але з некаторымі гуляючы са значэннямі, вы можаце водступ першага радка дастаткова, каб зрабіць першую літару, як уяўляецца, у сярэдзіне. Проста гуляць з адсоткам на тэкст водступу абзаца, пакуль ён не выглядае правільна:
р: першы літары {памер шрыфта: 300%; колер фону: # 000; колер: #fff; } Р: першая лінія {вышыня радкі: 100%; } Р {тэкст-водступаў: 45%; }Прылеглыя Пачатковыя Каўпачкі з'яўляюцца Hard з дапамогай CSS
Прылеглыя першапачатковыя вечка можа быць цяжка з дапамогай CSS, так як розныя браўзэры адлюстроўваюць шрыфты па-рознаму. Ідэя стварэння прылеглай капялюшыкі ў CSS з'яўляецца выкарыстанне тэкставага водступу нерухомасці на першую лінію, каб выпхнуць (злева) адмоўнае значэнне. Вам таксама неабходна змяніць левае поле гэтага пункта на некаторую велічыню. Гуляць з гэтымі лікамі, пакуль гэты пункт не будзе выглядаць добра.
р {тэкст-водступаў: -2.5em; Левае поле: 3em; } Р: першы літары {памер шрыфта: 3em; } Р: першая лінія {вышыня радкі: 100%; }Атрыманне Really Fancy пачатковых загалоўных
Лепшы спосаб стварыць фантазіі першапачатковага каўпачка, каб змяніць шрыфт на больш дэкаратыўным сямейства шрыфтоў. Калі вы выкарыстоўваеце шэраг шрыфтоў , за якімі варта агульнаму шрыфт , гэта дапаможа гарантаваць , што ваш першапачатковы каўпачок добра паказвае , так што вашыя кліенты могуць бачыць, не ўдаючыся ў праблемы даступнасці і зручнасці выкарыстання.
р: першы літары {памер шрыфта: 3em; сямейства шрыфтоў: "Edwardian Script ITC", "Brush Script MT", хуткапіс; } Р: першая лінія {вышыня радкі: 100%; }І, як звычайна, вы можаце змясціць усе гэтыя прапановы разам, каб стварыць першапачатковы каўпачок, аб'яву стылю для вашага пункта.
Выкарыстанне графічнага Initial Cap
Калі, у рэшце рэшт, што вы да гэтага часу не падабаецеся, як вашыя першапачатковыя шапкі выглядаюць на старонцы, вы можаце звярнуцца да графіку, каб атрымаць дакладны эфект, які вы шукаеце. Але перш чым вы вырашыце перайсці прама да графіку, вы павінны быць дасведчаныя аб недахопах гэтага метаду:
- Кліенты без малюнкаў не ўбачаць першапачатковы каўпачок, і не могуць бачыць схаваны тэкст, якое замяняе малюнак. Гэта можа зрабіць пункт недаступны, ці ў лепшым выпадку цяжка чытаць.
- Выявы заўсёды дадаюць да часу загрузкі старонкі. Калі ў вас ёсць шмат пачатковых загалоўныя, вы можаце значна павялічыць час загрузкі чагосьці многія людзі адчувалі б сябе нікчэмна.
- Некаторыя браўзэры будуць адлюстроўвацца як прыхаваная першай літарай і малюнкі - што можа зрабіць тэкст абзаца выглядаць дзіўна.
- Гэта вельмі цяжка аўтаматызаваць гэты варыянт, так як вы павінны дакладна ведаць, што першая літара так, што вы карыстаецеся правільны малюнак. Такім чынам, кожны раз, калі пункт адрэдагаваны, магчыма, спатрэбіцца стварыць новы малюнак.
Па-першае, вам неабходна стварыць графічнае выява першай літары. Я выкарыстаў Photoshop для стварэння літары L са шрыфтам «Edwardian Script ITC». Я зрабіў гэта велізарным - 300ПТ ў памеры. Затым я абрэзанай выява ўніз да мінімуму вакол літары і адзначыць шырыню і вышыню малюнка.
Затым я стварыў клас «capL» для майго пункта. Тут я вызначыць, якое малюнак выкарыстоўваць, вядучы (вышыню радка), і гэтак далей.
Вы павінны выкарыстоўваць шырыню і вышыню малюнка, каб усталяваць абзац тэкст водступ і абіўку-топ. Для майго L малюнка, мне трэба 95px водступу і 72px водступы.
p.capL {вышыня радкі: 1em; Фонавы малюнак: URL (capL.gif); фон-паўтарыць: не паўтараць; Тэкст-водступаў: 95px; абіўка-топ: 72px; }Але гэта яшчэ не ўсё. Калі пакінуць яго там, то першая літара будзе дублявацца ў пункце - першая з графікай, то ў тэксце. Такім чынам, я дадаў прамежак вакол гэтага першага элемента з класам «пачатковага» - і сказаў браўзэр не паказваць гэты ліст:
span.initial {дысплей: не; }А графічны затым адлюстроўваецца правільна. Вы можаце гуляць з тэкстам водступам на пункце, каб атрымаць тэкст ўкруціць аж да літары, але вы хацелі б, каб гэта адлюстраваць.