Mësoni si të krijoni kapele fillestare me anë të përdorimit të CSS dhe imazheve
Mësoni se si të përdorni CSS për të krijuar kapele fillestare të dashura për paragrafët tuaj. Ekziston edhe një teknikë e thjeshtë e zëvendësimit të imazhit për të përdorur një imazh grafik për kapakun tuaj fillestar.
Stilet bazë të kapave fillestare
Ekzistojnë tre stile themelore të kapakëve fillestarë në dokumente:
- ngritur - më e zakonshme, ku shkronja e parë është më e madhe dhe në të njëjtën linjë si teksti aktual.
- ra - gjithashtu mjaft e zakonshme, ku shkronja e parë është më e madhe dhe zbriti poshtë vijës së parë të tekstit. Teksti i mëposhtëm pastaj luan rreth tij.
- ngjitur - ku shkronja e parë është në një kolonë pranë pjesës tjetër të tekstit. Kjo është më e zakonshme në shtyp se sa Web design.
Kapele fillestare ose kapele rënie janë shumë të njohura. Ata janë një mënyrë e mrekullueshme për të veshur hapësirë të gjatë dhe të mërzitshme të tekstit. Dhe me pronën e CSS-së: letra e parë, mund të përcaktoni me lehtësi se si t'i bëni shkronjat tuaja të para.
Krijo një kapak të thjeshtë fillestar
Të gjithë ju duhet të bëni për të krijuar një kapak të thjeshtë të ngritur fillestar është të bëni shkronjën e parë të paragrafit tuaj më të madh në madhësi me pseudo-elementin e parë të letrës:
p: shkronja e parë {font-size: 3em; }Por shumë shfletues shohin që shkronja e parë është më e madhe se pjesa tjetër e tekstit në linjë, kështu që ata e bëjnë drejtimin e barabartë me atë që do të kishte kuptim për atë letër të parë, jo pjesën tjetër të linjës. Për fat të mirë, kjo është e lehtë për tu ndrequr me pseudo-elementin e vijës së parë dhe me pronën line-height:
p: shkronja e parë {font-size: 3em; } p: vijë e parë {line-height: 1em; }Luaj me lartësinë e linjës brenda dokumentit tuaj derisa të gjeni madhësinë e duhur për tekstin tuaj.
Luaj me kapakun tuaj fillestar
Sapo të kuptoni se si të krijoni një kapak fillestar, mund ta veshni në rroba të dashura për ta bërë atë të dalë jashtë. Luaj me ngjyra, ngjyrat e sfondit, kufijtë, apo çfarëdo që godet imagjinatën tuaj. Një stil mjaft i thjeshtë është të ndryshosh ngjyrat e shkronjave dhe ngjyrën e sfondit vetëm për letrën e parë:
p: shkronja e parë {font-size: 300%; background-color: # 000; ngjyra: #fff; } p: vijë e parë {line-height: 100%; }Një tjetër mashtrim është të përqëndrohemi në vijën e parë. Kjo mund të jetë e ndërlikuar me CSS, pasi që mesi i rreshtit të tekstit mund të jetë i ndryshëm nëse faqosja juaj është fleksibile. Por, me disa që luajnë rreth vlerave, mund të vendosni vijën tuaj të parë të mjaftueshme për të bërë që letra e parë të shfaqet në mes. Vetëm luani me përqindjen në tekstin e paragrafit deri sa të duket e drejtë:
p: shkronja e parë {font-size: 300%; background-color: # 000; ngjyra: #fff; } p: vijë e parë {line-height: 100%; } p {text-indent: 45% ; }Kapsulat e hershme fillestare janë të vështira me CSS
Kufijtë e ardhshëm fillestarë mund të jenë të vështira me CSS sepse shfletuesit e ndryshëm shfaqin fontet ndryshe. Ideja prapa krijimit të kapëses së ngjitur në CSS është të përdorë pronën e teksteve në vijën e parë për ta shtyrë atë (në të majtë) një vlerë negative. Ju gjithashtu do të duhet të ndryshoni diferencën e majtë të atij paragrafi nga një sasi. Luaj me këto shifra derisa paragrafi të duket i mirë.
p {text-indent: -2.5em; margjina e majtë: 3em; } p: shkronja e parë {font-size: 3em; } p: vijë e parë {line-height: 100%; }Marrja me të vërtetë e kapave fillestare
Mënyra më e mirë për të krijuar një kapak të zbukuruar fillestar është të ndryshoni fontin në një familje më të mirë dekorative. Nëse përdorni një seri fontesh të ndjekur nga një font i përgjithshëm , kjo do t'ju ndihmojë të garantoni që kapaku juaj fillestar të shfaqet mirë kështu që klientët tuaj mund ta shohin atë pa u futur në çështjet e aksesueshmërisë dhe përdorshmërisë.
p: shkronja e parë {font-size: 3em; font-family: "Script Edwardian ITC", "Brush Script MT", kursiv; } p: vijë e parë {line-height: 100%; }Dhe, si zakonisht, mund t'i vendosni të gjitha këto sugjerime së bashku për të krijuar një kapak fillestar që reklamon stilin tuaj të paragrafit.
Përdorimi i një Kapaku Grafik Fillestar
Nëse, mbas gjithë kësaj, ende nuk i pëlqen se si kapelet e tua fillestare shikojnë në faqe, mund të përdorësh grafikë për të marrë efektin e saktë që kërkon. Por, para se të vendosni të shkoni direkt në grafikë, duhet të jeni të vetëdijshëm për disavantazhet e kësaj metode:
- Konsumatorët pa imazhe nuk do të shohin kapakun fillestar dhe mund të mos shohin tekstin e fshehur që imazhi po zëvendëson. Kjo mund ta bëjë paragrafin të paarritshëm, ose në të mirë të vështirë për t'u lexuar.
- Imazhet gjithmonë shtojnë kohën e shkarkimit të një faqeje. Nëse keni shumë kapele fillestare, mund të rritni ndjeshëm kohën e shkarkimit për diçka që shumë njerëz do të ndiejnë është e parëndësishme.
- Disa shfletues do të shfaqin edhe letrën e parë të fshehur dhe imazhin - gjë që mund të bëjë që teksti i paragrafit të duket i çuditshëm.
- Është shumë e vështirë të automatizoni këtë opsion, pasi duhet të dini saktësisht se çfarë është letra e parë në mënyrë që të përdorni grafikun korrekt. Pra, çdo herë që paragrafi është redaktuar, mund t'ju duhet të krijoni një grafik të ri.
Së pari, ju duhet të krijoni grafikun e letrës së parë. I përdorur Photoshop për të krijuar letër L me font "Edwardian Script ITC". E bëra të madhe - 300 copë në madhësi. Unë pastaj e prerë imazhin poshtë në minimum të zhveshur rreth letrës dhe vuri në dukje gjerësinë dhe lartësinë e imazhit.
Pastaj krijova një "kapelë" për paragrafin tim. Kjo është ajo ku unë përcaktoj se çfarë imazhi duhet të përdorë, lartësia (lartësia e linjës) dhe kështu me radhë.
Ju duhet të përdorni gjerësinë dhe lartësinë e imazhit për të vendosur tekstin e faqes së paragrafit dhe mbushjen e sipërme. Për imazhin tim L, unë kam nevojë për 95px indent dhe 72px padding.
p.capL {line-height: 1em; background-image: url (capL.gif); përsëritje e sfondit: jo-përsëritje; tekst-indent: 95px; mbushje-lart: 72px; }Por kjo nuk është e gjitha. Nëse e lini atë atje, atëherë letra e parë do të dublohet në paragrafin - së pari me grafikun, pastaj në tekst. Pra, shtova një hapësirë rreth elementit të parë me klasën "fillestare" - dhe i thashë shfletuesit të mos shfaqte atë letër:
span.initial {display: none; }Dhe grafiku pastaj tregon saktë. Ju mund të luani me tekstin në paragrafin për të marrë tekstin e shtrirë deri në letrën, megjithatë ju dëshironi që ajo të shfaqet.