Lugege, kuidas luua esmapilgul esinevaid kaarte kasutades CSS-i ja pilte
Lugege, kuidas kasutada CSS-i, et luua lõikude jaoks esialgseid esialgseid mügimeetodeid. Teie esialgse korki graafilise kuju kasutamiseks on olemas isegi lihtne pildi asendamise tehnika.
Esialgsete kaante põhilised stiilid
Dokumentides on esialgsete kapslite kolm peamist stiili:
- tõstatatud - kõige levinum, kus esimene täht on suurem ja praeguse tekstiga samal joonel.
- kukkus - ka üsna levinud, kus esimene täht on suurem ja langenud alla esimese rea teksti. Seejärel ujub see ümber järgmine tekst.
- kõrvuti - kus esimene täht on ühes veerus teksti ülejäänud osas. See on tavapärasem kui veebidisain.
Esialgsed kapslid või tilgad on väga tuttavad. Need on suurepärane viis riietuda muidu pikkade ja igavate teksti pikkadeks. Ja CSS-i vara puhul: esimene täht, saate hõlpsasti määratleda, kuidas oma esimesi tähte panna.
Loo lihtne esialgne kate
Kõik, mida peate tegema, et luua lihtsat esimest kapslit, on muuta esimese lõigu esimene täht esimese kirjaga pseudoelemendiga suuremaks:
p: esimene täht {font-size: 3em; }Kuid paljud brauserid näevad, et esimene täht on suurem kui ülejäänud teksti joonel, nii et nad teevad juhtimise võrdseks selle, mis oleks mõttekas selle esimese tähe, mitte ülejäänud rea jaoks. Õnneks on seda esimese rea pseudoelemendi ja rea kõrguse omadusega lihtne parandada:
p: esimene täht {font-size: 3em; } p: esimene line {line-height: 1em; }Mängi dokumendi rea kõrgusel, kuni leiate teksti oma õige suuruse.
Mängi oma esialgse korkiga
Kui olete mõelnud, kuidas luua esialgse korki, saate seda kleit üles väljamõeldud riidesse, et see välja paistma. Mängi värvidega, taustavärvidega, piiridega või muu, mis teie väljamõeldud näeb. Suhteliselt lihtne stiil on muuta oma fondi ja taustavärvi värvid ainult esimese tähe jaoks:
p: esimene täht (font-size: 300%; taustavärv: # 000; värv: #fff; } p: esimene line {line-kõrgus: 100%; }Teine trikk on esimese rea keskpunktis. CSS-i puhul võib see olla keeruline, kuna tekstiline võib olla erinev, kui teie paigutus on paindlik. Kuid mõned väärtustega mängivad, võite esimese rea taande teha, et esimene kiri tunduks olevat keskel. Lihtsalt esitage lõigu teksti taande protsentuaalselt, kuni see on õige:
p: esimene täht (font-size: 300%; taustavärv: # 000; värv: #fff; } p: esimene line {line-kõrgus: 100%; } p {teksti-taane: 45% ; }Järgnevad algkapslid on CSS-iga rasked
CSS-iga võivad olla rasked külgnevad esmased kapslid, sest erinevad brauserid näitavad fonte erinevalt. CSS-i külgneva korki loomise idee on kasutada esimese rea tekstiväli vara, et seda välja tõmmata (vasakule) negatiivne väärtus. Samuti peate muutma selle lõike vasakpoolset marginaali mõne summa võrra. Mängi nende numbritega, kuni lõige tundub hea.
p {text-indent: -2.5em; margin-vasak: 3em; } p: esimene täht {font-size: 3em; } p: esimene line {line-kõrgus: 100%; }Tõeliselt väljamõeldud esialgsete kaartide saamine
Ideaalne esialgse korki loomise parim viis on muuta fonti dekoratiivsele fontide perekonnale. Kui kasutate fontide seeriat, millele järgneb üldine font , aitab see tagada, et teie esialgne kate näitab hästi, nii et teie kliendid saavad seda näha, ilma juurdepääsemata ja kasutatavuse probleemideta.
p: esimene täht {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursive; } p: esimene line {line-kõrgus: 100%; }Ja nagu tavaliselt, võite kõik need soovitused kokku panna, et luua esialgne kate, mille reklaamid teie reale stiiliksid.
Graafilise esialgse korki kasutamine
Kui aga sulle ikkagi ei meeldi, kuidas teie esialgsed mütsid lehel leiavad, võite pöörduda graafika poole, et saada täpset mõju, mida otsite. Kuid enne kui otsustate otse graafika juurde minna, peaksite olema teadlik selle meetodi puudustest:
- Piltideta pilte ei näe esialgse korki ega näe varjatud teksti, mida pilt asendab. See võib muuta lõigu kättesaamatuks või parimal juhul raskesti loetavaks.
- Kujutised lisatakse alati lehe allalaadimisajale. Kui teil on palju esialgseid mütsid, saate märkimisväärselt suurendada allalaadimisaega, mida paljud inimesed tunnevad, ebaoluline.
- Mõned brauserid näitavad nii peidetud esimest tähte kui ka pilti - mis muudab lõigu teksti paarituks.
- Selle valiku automatiseerimine on väga raske, kuna peate täpselt teada, milline on esimene täht, et saaksite kasutada õiget graafikat. Niisiis, igal lõigu redigeerimisel peate võib-olla uue graafika loomiseks vajalikuks osutuma.
Esiteks peate looma esimese tähe graafika. Ma kasutasin Photoshop'i, et luua täht L koos fondi "Edwardian Script ITC". Ma tegin selle tohutult suurusega 300 pikslit. Seejärel kärpis maha kujutise allapoole tühja minimaalse kirja ümber ja märkis kujutise laiuse ja kõrguse.
Siis lõikasin oma lõigu jaoks klassi "capL". See on koht, kus ma määratlen, millist kujutist kasutada, juhtivat (rida-kõrgus) ja nii edasi.
Lõike teksti taandariba ja polsterduse ülaosa määramiseks peate kasutama kujutise laiust ja kõrgust. Minu L-i pildi jaoks vajaksin 95px taanet ja 72 pikslit.
p.capL {line-kõrgus: 1em; taustavärv: url (capL.gif); taust-korrata: no-repeat; teksti taane: 95px; padding-top: 72px; }Kuid see pole veel kõik. Kui jätate selle sinna, siis esimeses tähestikus esitatakse lõik - esimene graafika, seejärel tekst. Niisiis lisasin selle esimese elemendi klassi "esialgne" ümber ja rääkisin, et brauser ei näita seda tähte:
span.initial {display: none; }Seejärel kuvatakse graafika õigesti. Võite mängida lõigu teksti taandega, et tekst oleks hõlpsasti tähega täidetud, kuid soovite seda kuvada.