Sužinokite, kaip sukurti išgalvotus pradinius kepurės naudojant CSS ir vaizdus
Sužinokite, kaip naudoti CSS, kad sukurtumėte išgalvotas pradines ribas jūsų straipsniams. Yra net paprastas vaizdo pakeitimo būdas, kad galėtumėte naudoti grafinį vaizdą jūsų pradiniam dangteliui.
Pagrindiniai pradinių kamščių stiliai
Dokumentuose yra trys pagrindiniai dokumentų rinkinio tipai:
- iškėlė - labiausiai paplitusi, kai pirmoji raidė yra didesnė ir tokia pati kaip dabartinis tekstas.
- sumažėjo - taip pat gana dažnas, kai pirmoji raidė yra didesnė ir nukrito žemiau pirmosios teksto eilutės. Tolesniame tekste po jo plūduriuoja.
- šalia - kai pirmoji raidė yra viename stulpelyje šalia likusio teksto. Tai dažniau spausdinama nei interneto dizainas.
Pradinės dangteliai ar dangteliai yra labai gerai žinomi. Tai puikus būdas apsirengti kitokiu ilgiu ir nuobodu teksto ilgiu. O CSS nuosavybe: pirmoji raiška, galite lengvai nustatyti, kaip padaryti savo pirmąsias raides "mėgėjus".
Sukurkite paprastą pradinį dangtelį
Viskas, ką jums reikia padaryti, norint sukurti paprastą iškeltą pradinę dangtelį, yra tai, kad pirmoji jūsų pastraipos raidė didesnė už dydį su pirmosios raidės pseudoelementu:
p: pirmoji raidė {font-size: 3em; }Tačiau daugelis naršyklių mato, kad pirmoji raidė yra didesnė už likusį teksto eilutę, taigi jie lemia lygį to, kas būtų prasminga pirmojoje raidėje, o ne likusiame eilutėje. Laimei, tai lengva nustatyti pirmosios eilutės pseudoelemento ir linijos aukščio savybe:
p: pirmoji raidė {font-size: 3em; } p: first-line {line-height: 1em; }Paleiskite savo dokumento eilutės aukštį, kol rasote tinkamą jūsų teksto dydį.
Žaisk su savo pradine dangteliu
Kai suprasite, kaip sukurti pradinį dangtelį, galite jį suknelę drabužius išvilioti, kad jis būtų aiškus. Žaiskite su spalvomis, fono spalvomis, sienomis ar kitais, kas paveikia jūsų išgales. Gana paprastas stilius - pakeisti savo šrifto ir fono spalvą tik pirmosios raidės spalvoms:
p: pirmoji raidė {font-size: 300%; fono spalva: # 000; spalva: #fff; } p: first line (line-height: 100%; }Kitas triukas - centre pirmoji eilutė. Tai gali būti sudėtinga naudojant CSS, nes teksto eilutės vidurys gali skirtis, jei jūsų maketas yra lankstus. Tačiau, kai žaidžiate kartu su vertybėmis, galite pakartoti pirmąją eilutę, kad pirmoji raidė atrodytų viduryje. Tiesiog žaisdami su pastraipos teksto įtraukos procentine dalimi, kol atrodo tinkamai:
p: pirmoji raidė {font-size: 300%; fono spalva: # 000; spalva: #fff; } p: first line (line-height: 100%; } p (teksto įtrauka: 45% ; }Gretimų pradinių dangtelių yra sunku su CSS
Su CSS gali būti sunkumų šalia esančių pradinių dangtelių, nes skirtingos naršyklės skirtingai rodo šriftus. Kuriant gretimą dangtelį CSS idėja pirmoje eilutėje naudoti pirmojo teksto išdėstymo savybę, kad ją išstumtų (į kairę) neigiamą reikšmę. Jūs taip pat turėsite pakeisti tam tikrą sumą į kairę šios pastraipos ribą. Groti su šiais skaičiais, kol pastraipa atrodo gerai.
p {text-indent: -2.5em; margin-left: 3em; } p: first-letter {font-size: 3em; } p: first line (line-height: 100%; }Kaip iš tikrųjų išgalvoti pradinius kepurės
Geriausias būdas sukurti išgalvotą pradinį dangtelį - pakeisti šriftą į daugiau dekoratyvinių šriftų šeimą. Jei naudosite šriftų seriją, po kurios bus bendras šriftas , tai padės užtikrinti, kad jūsų pradinis dangtelis gerai rodomas, kad jūsų klientai galėtų jį pamatyti, nepasiekdami prieinamumo ir tinkamumo problemų.
p: pirmoji raidė {font-size: 3em; font-family "Edwardian Script ITC", "Brush Script MT", kursyvas; } p: first line (line-height: 100%; }Ir, kaip įprasta, galite visus šiuos pasiūlymus pateikti kartu, kad sukurtumėte pradinę reklamos stiliaus dangtelį prie pastraipos.
Grafinio pradinio dangtelio naudojimas
Jei po to jums vis dar nepatinka, kaip jūsų pradiniai dangteliai rodomi puslapyje, galite pasinaudoti grafika, kad gautumėte tikslų jūsų ieškomo efektą. Tačiau prieš nuspręsdami pereiti tiesiai į grafiką, turėtumėte žinoti apie šio metodo trūkumus:
- Klientai be vaizdų nematys pradinio dangtelio ir gali nematyti paslėpto teksto, kurį pakeičia vaizdas. Tai gali padaryti pastraipą nepasiekiamą arba geriausiu atveju sunku perskaityti.
- Vaizdai visada pridedami prie puslapio atsisiuntimo laiko. Jei turite daug pradinių dangtelių, galite žymiai padidinti atsisiuntimo laiką, kad kažkas daugelis žmonių mano, yra nereikšmingas.
- Kai kurios naršyklės parodys ir paslėptą pirmąją raidę, ir atvaizdą, todėl teksto tekstas gali atrodyti keistai.
- Sunku automatizuoti šią parinktį, nes jūs turite tiksliai žinoti, kokia yra pirmoji raidė, kad galėtumėte naudoti tinkamą grafiką. Taigi kiekvieną kartą, kai pastraipa redaguojama, jums gali tekti sukurti naują grafiką.
Pirmiausia turite sukurti pirmosios raidės grafiką. Aš naudoju Photoshop kurti raidę L su šriftu "Edwardian Script ITC". Aš padariau didžiulę - 300 pėdų dydžio. Tada aš apkarpiau vaizdą iki mažiausio mažiausio aplink raidę ir pažymėjo vaizdo plotį ir aukštį.
Tada sukūriau klasę "capL" savo pastraipai. Čia apibrėžia, kokį vaizdą naudoti, pirmaujanti (linijos aukštis) ir tt
Turite naudoti vaizdo plotį ir aukštį, kad nustatytumėte pastraipos teksto įtrauką ir užpildą. Mano L paveikslėlyje reikėjo 95 pikselių įtraukos ir 72 pikselių užpildai.
p.capL {line-height: 1em; fono paveikslėlis: url (capL.gif); fono kartojimas: ne kartoti; teksto įtrauka: 95 px; padding-top: 72px; }Bet tai dar ne viskas. Jei paliksite jį ten, tada pirmoji raidė bus nukopijuota pastraipoje - pirmiausia su grafika, tada tekste. Taigi, prie šio pirmojo elemento aš pridėjau klasę "pradinis" ir nurodė naršyklę nerodyti šios raidės:
span.initial {display: none; }Ir grafika tada rodoma teisingai. Galite žaisti su pastraipoje esančiu teksto įtrauka, kad tekstas būtų tvirtas iki raidės, tačiau norėtumėte jį rodyti.