Uzziniet, kā to izmantot CSS radītiedomātā sākotnējie ierobežojumi jūsu rindkopām. Ir pat vienkārša attēla aizstāšanas tehnika, lai sākotnējam vāciņam izmantotu grafisko attēlu.
Sākotnējo vāciņu pamatstili
Dokumentos ir trīs sākotnējo vāciņu galvenie stili:
- Paaugstināts - visizplatītākais, kur pirmais burts ir lielāks un atrodas vienā rindā ar pašreizējo tekstu.
- Nometa - arī diezgan izplatīts, kur pirmais burts ir lielāks un nolaižams zem pirmās teksta rindas. Pēc tam apkārt tekošais teksts.
- Blakus - kur pirmais burts atrodas vienā kolonnā blakus pārējam tekstam. Tas ir vairāk izplatīts drukā, nevis tīmekļa dizainā.
Sākotnējie vai nomestie vāciņi ir ļoti pazīstami. Tie ir lielisks veids, kā saģērbt citādi garus un garlaicīgus teksta posmus. Izmantojot CSS rekvizītu: pirmais burts, jūs varat viegli noteikt, kā padarīt savus pirmos burtus iecienītākus.
Izveidojiet vienkāršu sākotnējo vāciņu
Viss, kas jums jādara, lai izveidotu vienkāršu paaugstinātu sākotnējo vāciņu, ir padarīt rindkopas pirmo burtu lielāku ar pirmā burta pseidoelementu:
p: pirmais burts {font-size: 3em; }
Bet daudzi pārlūkprogrammas redzēt, ka pirmais burts ir lielāks nekā pārējais teksts uz līnijas, tāpēc tie padara vadību vienādu ar to, kas būtu jēga šim pirmajam burtam, nevis pārējai rindai. Par laimi, to ir viegli novērst ar pirmās rindas pseidoelementu un līnijas augstuma īpašību:
p: pirmais burts {font-size: 3em; }
p: pirmā līnija {line-height: 1em; }
Spēlējiet ar līnijas augstumu dokumentā, līdz atrodat pareizo teksta izmēru.
Spēlējiet ar savu sākotnējo vāciņu
Kad esat sapratis, kā izveidot sākotnējo vāciņu, varat to saģērbt izdomātās drēbēs, lai tas izceļas. Spēlējiet ar krāsām, fona krāsām, apmalēm vai jebkuru citu lietu, kas jums patīk. Diezgan vienkāršs stils ir mainīt fonta un fona krāsas tikai pirmajam burtam:
p: pirmais burts {
fonta lielums: 300%;
fona krāsa: # 000;
krāsa: #fff;
}
p: pirmā līnija {line-height: 100%; }
Vēl viens triks ir pirmās līnijas centrēšana. CSS gadījumā tas var būt sarežģīti, jo teksta rindas vidusdaļa var būt atšķirīga, ja izkārtojums ir elastīgs. Bet, kad daži spēlē ar vērtībām, jūs varat atkāpt savu pirmo rindu pietiekami, lai pirmais burts, šķiet, būtu pa vidu. Vienkārši spēlējiet ar procentuālo daļu rindkopas teksta ievilkumā, līdz tas izskatās pareizi:
p: pirmais burts {
fonta lielums: 300%;
fona krāsa: # 000;
krāsa: #fff;
}
p: pirmā līnija {line-height: 100%; }
p {teksta ievilkums: 45%; }
Blakus esošajiem sākotnējiem vāciņiem ir grūti ar CSS
Blakus esošajiem sākotnējiem burtiem CSS var būt grūti, jo dažādās pārlūkprogrammās fonti tiek parādīti atšķirīgi. Blakus esošā vāciņa izveide CSS ir ideja izmantot pirmās rindas rekvizītu teksta ievilkums, lai to izspiestu (pa kreisi) negatīvu vērtību. Jums būs jāmaina arī šī punkta kreisā mala par kādu summu. Spēlējiet ar šiem skaitļiem, līdz rindkopa izskatās labi.
p {
teksta ievilkums: -2,5em;
atstarpe pa kreisi: 3em;
}
p: pirmais burts {font-size: 3em; }
p: pirmā līnija {line-height: 100%; }
Gūstot patiešām iedomātus sākotnējos ierobežojumus
Labākais veids, kā izveidot izdomātu sākotnējo vāciņu, ir mainīt fontu uz dekoratīvāku fontu saimi. Ja izmantojat a fontu sērija kam seko a vispārējs fonts, tas palīdzēs garantēt, ka jūsu sākotnējais ierobežojums ir labi redzams, lai klienti to varētu redzēt, neiedziļinoties pieejamības un lietojamības jautājumos.
p: pirmais burts {
fonta lielums: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", kursīvs;
}
p: pirmā līnija {line-height: 100%; }
Kā parasti, jūs varat salikt visus šos ieteikumus, lai izveidotu sākotnējo ierobežojumu, kas jūsu stilam atbilst reklāmas stilam.
Izmantojot grafisko sākotnējo vāciņu
Ja pēc visa tā jums joprojām nepatīk, kā sākotnējie vāciņi izskatās lapā, varat izmantot grafiku, lai iegūtu precīzu meklēto efektu. Bet pirms izlemjat pāriet tieši uz grafiku, jums jāapzinās šīs metodes trūkumi:
- Klienti bez attēliem neredzēs sākotnējo vāciņu un, iespējams, neredzēs slēpto tekstu, kuru attēls aizstāj. Tas var padarīt punktu nepieejamu vai labākajā gadījumā grūti lasāmu.
- Attēli vienmēr tiek pievienoti lapas lejupielādes laikam. Ja jums ir daudz sākotnējo vāciņu, varat ievērojami palielināt lejupielādes laiku, ko daudzi cilvēki uzskata par nenozīmīgu.
- Dažās pārlūkprogrammās tiks parādīts gan slēptais pirmais burts, gan attēls, kas var padarīt rindkopas tekstu dīvainu.
- Šo opciju ir ļoti grūti automatizēt, jo, lai izmantotu pareizo grafiku, jums precīzi jāzina, kāds ir pirmais burts. Tātad, katru reizi, kad tiek rediģēts punkts, jums var būt nepieciešams izveidot jaunu grafiku.
Pirmkārt, jums ir jāizveido pirmā burta grafika. Mēs izmantojām Photoshop, lai izveidotu burtu L ar fontu "Edwardian Script ITC". Mēs to padarījām milzīgu - 300pt lielumā. Pēc tam mēs apgriezām attēlu līdz minimumam ap burtu un atzīmējām attēla platumu un augstumu.
Tad mēs izveidojām klases "capL" mūsu rindkopai. Šeit mēs definējam, kādu attēlu izmantot, vadošo (līnijas augstums) utt.
Jums ir jāizmanto attēla platums un augstums, lai iestatītu rindkopas teksta ievilkumu un polsterējumu augšdaļu. Mūsu L attēlam mums bija nepieciešams 95 pikseļu ievilkums un 72 pikseļu polsterējums.
p.capL {
līnijas augstums: 1em;
fona attēls: url (capL.gif);
fona atkārtojums: neatkārtot;
teksta ievilkums: 95 pikseļi;
polsterējums - 72 pikseļi;
}
Bet tas vēl nav viss. Ja jūs to atstājat, tad pirmais burts tiks dublēts rindkopā, vispirms ar grafiku, pēc tam tekstā. Tāpēc mēs pievienojām diapazonu ap šo pirmo elementu ar klasi "sākotnējais" un teicām pārlūkam nerādīt šo burtu:
span.initial {display: none; }
Pēc tam grafika tiek parādīta pareizi. Varat spēlēt ar rindkopas teksta ievilkumu, lai teksts tiktu piegults tieši līdz burtam, tomēr vēlaties to parādīt.