Lernu Kiel Krei Fancy Initial Caps Uzanta CSS kaj Bildoj
Lernu kiel uzi CSS por krei fajnajn komencajn ĉapojn por viaj alineoj. Ekzistas eĉ simpla bildo anstataŭigi teknikon por uzi grafikan bildon por via komenca ĉapo.
Bazaj Stiloj de Initial Caps
Ekzistas tri bazaj stiloj de komencaj ĉapoj en dokumentoj:
- levita - la plej ofta, kie la unua litero estas pli granda kaj en la sama linio kiel la nuna teksto.
- falis - ankaŭ sufiĉe komuna, kie la unua litero estas pli granda kaj falis sub la unua linio de teksto. La sekva teksto flosas ĉirkaŭ ĝi.
- apude - kie la unua litero estas en unu kolumno apud la resto de la teksto. Ĉi tio estas pli ofta en presaĵo ol retejo-dezajno.
Komencaj ĉapoj aŭ gutaj ĉapoj estas tre familiaraj. Ili estas bonega maniero por vesti alie longajn kaj enuigajn spacojn de teksto. Kaj kun la CSS-posedaĵo: unua-letero, vi povas facile difini kiel fari viajn unuajn leterojn pli fajnajn.
Krei Simpla Komenca Ĉapitro
Ĉio, kion vi devas fari por krei simplan leviĝan komencan ĉapon, faru la unuan leteron de via alineo pli granda laŭ la unua litero pseŭdo-elemento:
p: unua-letero {font-size: 3em; }Sed multaj foliumiloj vidas, ke la unua litero estas pli granda ol la resto de la teksto sur la linio, do ili faras la eminentan egala al kio sentus por tiu unua letero, ne la resto de la linio. Por sorto, ĉi tio estas facile ripari kun la unua-linio pseŭdo-elemento kaj la linio-alteco propraĵo:
p: unua-letero {font-size: 3em; } p: unua linio {linio-alteco: 1em; }Ludu kun la linio alteco ene de via dokumento ĝis vi trovos la ĝustan grandecon por via teksto.
Ludi kun Via Komenca Kapelo
Unufoje vi komprenas kiel krei komencan ĉapojn, vi povas vesti ĝin laŭ fantaĝaj vestoj por ke ĝi elstaras. Ludu kun koloroj, fonkoloroj, limoj, aŭ ĉio, kio frapas vian imagon. Tre simpla stilo estas reverti la kolorojn de via tiparo kaj fonkoloro nur por la unua litero:
p: unua litero {font-grandeco: 300%; fonkoloro: # 000; koloro: #fff; } p: unua linio {linio-alteco: 100%; }Alia lertaĵo devas centri la unuan linion. Ĉi tio povas esti malfacila kun CSS, ĉar la mezo de la teksta linio povas esti malsama se via aranĝo estas fleksebla. Sed kun iuj ludantaj ĉirkaŭe kun la valoroj, vi povas indentigi vian unuan linion sufiĉa por fari la unuan leteron esti en la mezo. Nur ludu kun la procento sur la teksto-indento de la alineo ĝis ĝi aspektas ĝuste:
p: unua litero {font-grandeco: 300%; fonkoloro: # 000; koloro: #fff; } p: unua linio {linio-alteco: 100%; } p {text-indent: 45% ; }Adajaj Komencaj Kapeloj estas Malfacilaj kun CSS
Adajaj komencaj ĉapeloj povas esti malfacilaj kun CSS ĉar la malsamaj retumiloj montras malsamajn tiparojn. La ideo malantaŭe krei apuda ĉapo en CSS estas uzi la tekst-indentan proprieton sur la unua linio por forpuŝi ĝin (maldekstre) negativan valoron. Vi ankaŭ bezonos ŝanĝi la maldekstran randon de tiu alineo per iu kvanto. Ludu kun ĉi tiuj nombroj ĝis la alineo aspektas bone.
p {teksto-indento: -2.5em; rando-maldekstra: 3em; } p: unua-letero {font-size: 3em; } p: unua linio {linio-alteco: 100%; }Ricevante Vere Fancy Komenca Ĉapeloj
La plej bona maniero por krei similan komenca ĉapo estas ŝanĝi la tiparon al pli ornama tipara familio. Se vi uzas serion de tiparoj sekvataj de genera tiparo , ĝi helpos garantii, ke via komenca ĉapitro montras bone, tiel viaj klientoj povas vidi ĝin, sen atingi alireblecon kaj usabilidad-aferojn.
p: unua-letero {font-size: 3em; tiparo-familio: "Edwardian Script ITC", "Brush Script MT", kursivo; } p: unua linio {linio-alteco: 100%; }Kaj, kiel kutime, vi povas kunmeti ĉiujn ĉi tiujn sugestojn por krei komenca ĉapitro, kiu anoncas stilon al via alineo.
Uzante Grafikan Komencan Kapon
Se, post ĉio tio, vi ankoraŭ ne ŝatas, kiel viaj komencaj ĉapeloj rigardas la paĝon, vi povas recurri al grafikaĵoj por akiri la ĝustan efikon, kiun vi serĉas. Sed antaŭ ol vi decidas moviĝi rekte al grafikaĵoj, vi devus esti konscia pri la malavantaĝoj de ĉi tiu metodo:
- Klientoj sen bildoj ne vidos la komenca ĉapo, kaj eble ne vidos la kaŝitan tekston, kiun la bildo anstataŭas. Ĉi tio povas neigi la alineon, aŭ plej bone malfacile legi.
- Bildoj ĉiam aldonas al la elŝuta tempo de paĝo. Se vi havas multajn komencajn ĉapojn, vi povas pliigi signife la malŝarĝan tempon por ke multaj homoj sentus min sensignifa.
- Iuj foliumiloj montros la kaŝitan unuan leteron kaj la bildon, kiu povas vidi ke la alinea teksto aspektas stranga.
- Estas tre malfacile aŭtomatigi ĉi tiun eblon, ĉar vi devas scii precize, kio estas la unua letero, por ke vi uzu ĝustan grafikon. Do, ĉiufoje kiam la paragrafo estas redaktata, vi eble bezonos krei novan grafikon.
Unue, vi devas krei la grafikon de la unua letero. Mi uzis Photoshop por krei la literon L kun la tiparo "Edwardian Script ITC". Mi faris ĝin grandega - 300pt en grandeco. Mi tiam kroĉis la bildon ĝis la neta minimumo ĉirkaŭ la letero kaj notis la bildon larĝecon kaj altecon.
Tiam mi kreis klason "kapL" por mia alineo. Ĉi tie mi difinas, kian bildon uzi, la ĉefa (linio-alteco), kaj tiel plu.
Vi devas uzi la bildon larĝe kaj altecon por agordi la alinean tekston-tabulon kaj kompletigon. Por mia L bildo, mi bezonis 95px indent kaj 72px kompletigon.
p.capL {linio-alteco: 1em; fono-bildo: url (capL.gif); fono-ripeto: ne-ripeto; teksto-indento: 95px; kompletigado supre: 72px; }Sed tio ne estas ĉio. Se vi lasas ĝin tie, tiam la unua litero duobligos en la alineo - unue kun la grafikaĵo, tiam en la teksto. Do mi aldonis spanon ĉirkaŭ tiu unua elemento kun la klaso "komenca" - kaj diris al la retumilo ne montri tiun literon:
span.initial {montriĝo: nenio; }Kaj la grafikaĵo tiam montras ĝuste. Vi povas ludi kun la teksto-indento sur la alineo por akiri la tekston enkudrita ĝis la letero, tamen vi ŝatus ĝin montri.