Lærðu hvernig á að búa til ímynda upphaflegu húfur með því að nota CSS og myndir
Lærðu hvernig á að nota CSS til að búa til fínt upphafshettur fyrir málsgreinar þínar. Það er jafnvel einfalt ímyndarskiptatækni til að nota myndræna mynd fyrir upphafshettuna þína.
Grunneinkenni upphaflegra hylkja
Það eru þrjár grunnstafir af upphafshettum í skjölum:
- upplýst - algengasta, þar sem fyrsti stafurinn er stærri og á sömu línu og núverandi texti.
- lækkað - einnig nokkuð algengt, þar sem fyrstu stafurinn er stærri og lækkaður niður fyrir neðan fyrstu línu textans. Eftirfarandi texti flýgur um það.
- aðliggjandi - þar sem fyrsta stafurinn er í einum dálki við hliðina á restinni af textanum. Þetta er algengara í prentun en Vefhönnun.
Upphafshettir eða dropapokar eru mjög kunnuglegar. Þeir eru frábær leið til að klæða sig upp annars lengi og leiðinlegt úrval textans. Og með CSS eigninni: Fyrsti stafurinn getur þú auðveldlega skilgreint hvernig á að búa til fyrstu bréfin þín.
Búðu til einfaldan upphafshettu
Allt sem þú þarft að gera til að búa til einfaldan upphleyptan upphafshettu er að gera fyrstu stafinn í málsgreininni stærri í stærð við fyrsta stafstafann gerviþáttinn:
p: fyrsta stafurinn {leturstærð: 3em; }En margir vafrar sjá að fyrsti stafurinn er stærri en restin af textanum á línunni, þannig að þeir gera leiðandi jafnt hvað myndi gera skilning á því fyrstu bréfi, ekki afganginn af línunni. Til allrar hamingju er þetta auðvelt að festa með fyrstu línu gervi-einingunni og línuhæðinni:
p: fyrsta stafurinn {leturstærð: 3em; } p: fyrsta lína {lína-hæð: 1em; }Spilaðu með línuhæðinni innan skjalsins þangað til þú finnur rétta stærð fyrir texta þína.
Spila með upphaflegu lokinu þínu
Þegar þú hefur skilið hvernig á að búa til upphafshettu getur þú klætt það í fínt föt til að gera það standa út. Leika með litum, bakgrunnslitum, landamærum eða hvað sem finnst ímynda þér. Réttlátur einföld stíll er að snúa við litum leturs og bakgrunnslit bara fyrir fyrstu stafinn:
p: fyrsta stafurinn {leturstærð: 300%; bakgrunnslit: # 000; litur: #fff; } p: fyrsta lína {lína-hæð: 100%; }Annar bragð er að miðja fyrstu línu. Þetta getur verið erfiður með CSS, því miðjan textalína getur verið öðruvísi ef útlitið er sveigjanlegt. En með sumum leika í kringum gildin geturðu dregið inn fyrstu línu þína nóg til að gera fyrstu stafinn virðast vera í miðjunni. Bara spilaðu með hundraðshluta á texta-undirlið málsins þar til það lítur út:
p: fyrsta stafurinn {leturstærð: 300%; bakgrunnslit: # 000; litur: #fff; } p: fyrsta lína {lína-hæð: 100%; } p {texti-innskot: 45% ; }Aðliggjandi upphafshettir eru harðir með CSS
Aðliggjandi upphafshettir geta verið erfiðar með CSS því mismunandi vafrar sýna leturin öðruvísi. Hugmyndin að baki að búa til aðliggjandi loki í CSS er að nota eiginleiki textareikningsins á fyrstu línunni til að ýta því út (til vinstri) neikvætt gildi. Þú þarft einnig að breyta vinstri brún þess máls með einhverri upphæð. Spilaðu með þessum tölum þar til liðið lítur vel út.
p {texti-innskot: -2.5em; framlegð-vinstri: 3em; } p: fyrsta stafurinn {leturstærð: 3em; } p: fyrsta lína {lína-hæð: 100%; }Getting raunverulega ímynda upphaflegu húfur
Besta leiðin til að búa til ímyndaða upphafshettu er að breyta leturgerðinni í fleiri skreytingar leturgerð. Ef þú notar margar leturgerðir og síðan með almennu letri , mun það hjálpa til við að tryggja að upphafshettan þín sýni vel þannig að viðskiptavinir þínir geti séð það án þess að komast í aðgengi og nothæfi.
p: fyrsta stafurinn {leturstærð: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", bendiefni; } p: fyrsta lína {lína-hæð: 100%; }Og eins og venjulega er hægt að setja allar þessar uppástungur saman til að búa til upphafshettu sem auglýsir stíl við lið þitt.
Notkun myndarafrita
Ef þú ert enn ekki eins og hvernig upphafshetturnar þínar líta út á síðunni geturðu gripið til grafík til að fá nákvæmlega áhrifin sem þú ert að leita að. En áður en þú ákveður að fara beint í grafík ættir þú að vera meðvitaður um galla þessa aðferð:
- Viðskiptavinir án mynda sjá ekki upphafshettuna og mega ekki sjá falinn texta sem myndin er að skipta um. Þetta getur gert málið óaðgengilegt eða í besta falli erfitt að lesa.
- Myndir bæta alltaf við niðurhalstíma síðu. Ef þú ert með mikið af upphafshettum geturðu aukið niðurhals tímann fyrir eitthvað sem margir myndu líða er óverulegt.
- Sumir vöfrar munu sýna bæði falinn fyrstu stafinn og myndina - sem getur gert textaritið að líta skrýtið.
- Það er mjög erfitt að gera sjálfvirkan þennan möguleika, þar sem þú þarft að vita nákvæmlega hvað fyrsta stafurinn er þannig að þú notar rétta myndina. Svo, í hvert skipti sem málsgreinin er breytt, gætir þú þurft að búa til nýja mynd.
Fyrst þarftu að búa til grafík fyrstu bókstafsins. Ég notaði Photoshop til að búa til stafinn L með letri "Edwardian Script ITC". Ég gerði það mikið - 300pt í stærð. Ég uppskera þá myndina niður að berum lágmarki um bréfið og benti á myndbreidd og hæð.
Þá bjó ég til bekkjar "CapL" fyrir málsgrein mína. Þetta er þar sem ég skilgreini hvaða mynd sem á að nota, leiðandi (línahæð) og svo framvegis.
Þú þarft að nota myndbreiddina og hæðina til að setja textaritun og málsskjal málsins. Fyrir L myndina mína, þurfti ég 95 punkta innslátt og 72 px púði.
p.capL {lína-hæð: 1em; bakgrunnsmynd: url (capL.gif); bakgrunnur-endurtaka: ekki-endurtaka; texti-innsláttur: 95px; púði-toppur: 72px; }En það er ekki allt. Ef þú skilur það þar, þá verður fyrsti stafurinn afritaður í málsgreininni - fyrst með myndinni, þá í textanum. Svo bætti ég við um það fyrsta frumefni með bekknum "upphaflega" - og sagði vafranum að ekki birti þessi bréf:
span.initial {sýna: none; }Og grafíkin birtir þá rétt. Þú getur spilað með textarituninni á málsgreininni til að fá textann snugged fram að bréfi, þó þú vilt að hún birtist.