Sužinokite, kaip naudoti CSS sukurtiišgalvotas pradinės jūsų pastraipų viršutinės ribos. Yra net paprasta vaizdo pakeitimo technika, kad pradiniam dangteliui būtų naudojamas grafinis vaizdas.
Pagrindiniai pradinių dangtelių stiliai
Dokumentuose yra trys pagrindiniai pradinių viršutinių ribų stiliai:
- Pakeltas - dažniausiai, kai pirmoji raidė yra didesnė ir yra vienoje eilutėje su dabartiniu tekstu.
- Nukrito - taip pat gana dažnas, kai pirmoji raidė yra didesnė ir nukrinta žemiau pirmosios teksto eilutės. Tada aplink jį plūduriuoja šis tekstas.
- Greta - kai pirmoji raidė yra viename stulpelyje šalia likusio teksto. Tai labiau būdinga spaudai nei interneto dizainui.
Pradiniai dangteliai arba lašai yra labai gerai žinomi. Jie yra puikus būdas pasipuošti kitaip ilgais ir nuobodžiais teksto intervalais. Naudodami CSS ypatybę: pirmosios raidės, galite lengvai apibrėžti, kaip padaryti savo pirmąsias raides geresnes.
Sukurkite paprastą pradinį dangtelį
Viskas, ką jums reikia padaryti norint sukurti paprastą pakeltą pradinį dangtelį, yra padaryti didesnę pirmosios pastraipos raidės dydį su pirmosios raidės pseudo elementu:
p: pirmoji raidė {font-size: 3em; }
Bet daugelis naršyklės pamatykite, kad pirmoji raidė yra didesnė už likusį tekstą eilutėje, todėl jos pirmauja lygią tai, kas būtų prasminga šiai pirmajai raidei, o ne likusiai eilutei. Laimei, tai lengva išspręsti naudojant pirmosios eilutės pseudo elementą ir linijos aukščio savybę:
p: pirmoji raidė {font-size: 3em; }
p: pirmoji eilutė {line-height: 1em; }
Žaiskite su linijos aukščiu dokumente, kol rasite tinkamą teksto dydį.
Žaisk su savo pradiniu dangteliu
Kai suprasite, kaip sukurti pradinį dangtelį, galite jį apsivilkti puošniais drabužiais, kad jis išsiskirtų. Žaisk spalvomis, fono spalvomis, kraštinėmis ar bet kuo kitu, kas tau patinka. Gana paprastas stilius yra pakeisti šrifto ir fono spalvas tik pirmajai raidei:
p: pirmoji raidė {
šrifto dydis: 300%;
fono spalva: # 000;
spalva: #fff;
}
p: pirmoji eilutė {line-height: 100%; }
Kitas triukas yra pirmosios eilutės centravimas. Tai gali būti keblu naudojant CSS, nes teksto eilutės vidurys gali skirtis, jei išdėstymas yra lankstus. Tačiau kai kurie žaidžia su vertybėmis, galite pakankamai įtraukti savo pirmąją eilutę, kad pirmoji raidė būtų viduryje. Tiesiog žaiskite su pastraipos teksto įtraukos procentais, kol jis atrodys tinkamas:
p: pirmoji raidė {
šrifto dydis: 300%;
fono spalva: # 000;
spalva: #fff;
}
p: pirmoji eilutė {line-height: 100%; }
p {teksto įtrauka: 45%; }
Greta esančių pradinių dangtelių sunku naudoti CSS
Greta esančių pradinių didžiųjų raidžių gali būti sunku naudoti CSS, nes skirtingos naršyklės rodo šriftus skirtingai. Gretimo CSS kūrimo idėja yra naudoti pirmosios eilutės teksto įtraukos ypatybę, kad išstumtų (į kairę) neigiamą vertę. Taip pat turėsite tam tikra suma pakeisti kairę tos pastraipos paraštę. Žaisk su šiais skaičiais, kol pastraipa atrodys gerai.
p {
teksto įtrauka: -2,5em;
kairė paraštė: 3em;
}
p: pirmoji raidė {font-size: 3em; }
p: pirmoji eilutė {line-height: 100%; }
Gauti tikrai puošnius pradinius dangtelius
Geriausias būdas sukurti puošnų pradinį dangtelį yra pakeisti šriftą į dekoratyvesnę šriftų grupę. Jei naudojate a šriftų serija po kurio seka a bendras šriftas, tai padės garantuoti, kad jūsų pradinė riba bus gerai rodoma, kad jūsų klientai galėtų ją pamatyti, nesigilindami į prieinamumo ir tinkamumo naudoti problemas.
p: pirmoji raidė {
šrifto dydis: 3em;
font-family: „Edwardian Script ITC“, „Brush Script MT“, žymeklis;
}
p: pirmoji eilutė {line-height: 100%; }
Ir, kaip įprasta, galite sujungti visus šiuos pasiūlymus, kad sukurtumėte pradinę viršutinę ribą, kuri atitiktų jūsų pastraipos skelbimų stilių.
Grafinio pradinio dangtelio naudojimas
Jei po to vis tiek jums nepatinka, kaip puslapyje atrodo jūsų pradiniai dangteliai, galite pasinaudoti grafika, kad gautumėte tikslų efektą, kurio ieškote. Tačiau prieš nuspręsdami pereiti tiesiai prie grafikos, turėtumėte žinoti apie šio metodo trūkumus:
- Klientai, neturintys vaizdų, nematys pradinio dangtelio ir gali nematyti paslėpto teksto, kurį keičia vaizdas. Dėl to pastraipa gali būti neprieinama arba geriausiu atveju sunkiai skaitoma.
- Vaizdai visada padidina puslapio atsisiuntimo laiką. Jei turite daug pradinių viršutinių ribų, galite žymiai padidinti atsisiuntimo laiką, kai daugelis žmonių mano, kad jie yra nereikšmingi.
- Kai kuriose naršyklėse bus rodoma tiek paslėpta pirmoji raidė, tiek vaizdas, todėl pastraipos tekstas gali atrodyti keistas.
- Labai sunku automatizuoti šią parinktį, nes jūs turite tiksliai žinoti, kokia yra pirmoji raidė, kad galėtumėte naudoti teisingą grafiką. Taigi kiekvieną kartą taisant pastraipą gali tekti sukurti naują grafiką.
Pirmiausia turite sukurti pirmosios raidės grafiką. „Photoshop“ kūrėme raidę L su šriftu „Edwardian Script ITC“. Mes padarėme jį didžiulį - 300pt dydžio. Tada apkarpėme vaizdą iki minimumo aplink raidę ir pažymėjome vaizdo plotį ir aukštį.
Tada mes sukūrėme klasę „capL“ savo pastraipai. Čia mes apibrėžiame, kokį vaizdą naudoti, priekinį (linijos aukštis) ir pan.
Norėdami nustatyti pastraipos teksto įtrauką ir „padding-top“, turite naudoti vaizdo plotį ir aukštį. L vaizdui reikalinga 95 taškų įtrauka ir 72 taškų užpildymas.
p.capL {
linijos aukštis: 1em;
fono paveikslėlis: url (capL.gif);
fonas pakartoti: ne kartoti;
teksto įtrauka: 95 taškų;
„topding-top“: 72 taškų;
}
Bet tai dar ne viskas. Jei paliksite jį ten, pirmoji raidė bus nukopijuota pastraipoje, pirmiausia su grafika, tada tekste. Taigi mes pridėjome intervalą aplink šį pirmąjį elementą su klase „pradinis“ ir liepėme naršyklei tos raidės nerodyti:
span.initial {display: none; }
Tada grafika rodoma teisingai. Galite žaisti naudodami pastraipos teksto įtrauką, kad tekstas būtų prigludęs iki raidės, tačiau norėtumėte, kad jis būtų rodomas.