Fantaro ny fomba hanamboarana kapila matevina amin'ny fampiasana CSS sy sary
Ianaro ny fomba fampiasana CSS mba hamoronana kapila voalohany ho an'ireo fehintsoratrao. Na dia sary tsotra fanodinana sary fotsiny aza dia hampiasa sary iray ho an'ny kapila voalohany.
Styles fototra amin'ny Caps Initial
Misy karazana fototra telo ao amin'ny fonosana voalohany:
- ny fampakaram-bady - ny tena mahazatra indrindra, izay misy ny taratasy voalohany sy ny andalana mitovy amin'ny soratra ankehitriny.
- Nidina - izay ihany koa dia mahazatra, izay toerana lehibe kokoa ny taratasy voalohany ary nilatsaka teo ambanin'ny làlana voalohan'ny lahatsoratra. Ny andininy manaraka dia mirotsaka manodidina izany.
- Manakaiky - ny toerana misy ny taratasy voalohany dia ao anaty tsanganana iray eo akaikin'ny sisin'ny lahatsoratra. Izany dia matetika kokoa amin'ny endritsoratra noho ny tranonkala web.
Ny kapatsina voalohany na ny kapo lava dia tena mahazatra. Fomba lehibe ahafahana mitafy horonan-tsoratra lava lava. Ary miaraka amin'ny fananana CSS: voalohany-taratasy, afaka mamaritra mora foana ny fomba hanoratana ny taratasy fanoratana voalohany anao.
Mamoròna Cap tsotra tsotra
Ny zavatra rehetra tokony hataonao mba hanamboarana kapila tsotra iray efa natsangana dia ny fametrahana ny taratasy voalohany amin'ny fehintsoratra izay lehibe kokoa amin'ny pseudo-element voalohany:
p: voalohany-letter {font-size: 3em; }Nefa maro amin'ireo mpiblaogy no mahita fa ny taratasy voalohany dia lehibe noho ny ampahany sisa amin'ny andalana ao amin'ilay tsipika, noho izany dia ataony ny fitarihana mitovy amin'izay mety ho hevitr'io litera voalohany io, fa tsy ny sisa amin'ny tsipika. Soa ihany fa mora ny mametraka azy miaraka amin'ny singa voalohany pseudo-element sy ny haingam-pirazanana:
p: voalohany-letter {font-size: 3em; } p: voalohany-line {line-height: 1em; }Alefaso amin'ny haavon'ny tsipika ao anatin'ny rakitrao ianao mandra-pahitanao ny habeny mety ho an'ny soratrao.
Alefaso miaraka amin'ny Cap Initial ianao
Raha vao azonao ny fomba hamoronana kapila voalohany, dia azonao atao ny manafana azy amin'ny akanjo marevaka mba hampitsaharana azy. Alefaso miaraka amin'ny loko, loko afara, sisintany, na inona na inona manjo anao. Fomba tsotra dia ny manova ny lokon'ny loko sy loko misy anao ho an'ny taratasy voalohany:
p: voalohany-letter {font-size: 300%; background-color: # 000; loko: #fff; } p: voalohany-line {line-height: 100%; }Ny fanitsiana iray hafa dia ny hamantatra ny laharana voalohany. Ity dia mety ho sarotra amin'ny CSS, satria ny afovoan'ny andalana dia mety ho hafa raha toa ka sarotra ny famelabelaranao. Saingy miaraka amin'ny sasany milalao miaraka amin'ireo soatoavina, dia azonao atao ny mampiditra ny laharanao voalohany mba hahatonga ny taratasy voalohany ho hita eo afovoany. Mialà fotsiny amin'ny isan-jato eo amin'ny andinin-tsoratra ao amin'ny andinin-tsoratra, mandra-pahitanao azy:
p: voalohany-letter {font-size: 300%; background-color: # 000; loko: #fff; } p: voalohany-line {line-height: 100%; } p {lahatsoratra-indent: 45% ; }Ireo kapila voalohany mifatotra dia sarotra amin'ny CSS
Ireo kapila voalohany dia mety ho sarotra amin'ny CSS satria ireo navigateur samihafa dia mampiseho ny endritsoratra hafa. Ny hevitra ambadiky ny fananganana kapa iray eo akaikiny ao CSS dia ny fampiasana ny fananana ny endritsoratra ao amin'ny laharana voalohany mba hanosehana azy (miankavia) ny sandany ratsy. Ilainao koa ny manova ny sisiny havia amin'io andalana io amin'ny vola madinika. Mianara miaraka amin'ireto nomerao ireto mandra-paha-fijery ilay fehintsoratra
p {text-indent: -2.5em; margin-left: 3em; } p: voalohany-letter {font-size: 3em; } p: voalohany-line {line-height: 100%; }Tena mahavariana ny Caps Initial
Ny fomba tsara indrindra ahafahana manamboatra kapa iray mipetaka voalohany dia ny manova ny endritsoratra amin'ny fianakaviana fametrahana loko kokoa. Raha mampiasa andiana fonosina arahin'ny litera manerantany ianao , dia hanampy anao hahazo antoka fa ny volonao voalohany dia maneho tsara ny fahitan'ny mpanjifanao azy, nefa tsy miditra amin'ny fahazoana midadasika sy fampiasana azy.
p: voalohany-letter {font-size: 3em; font-family: "Edwardian Script ITC", "Kitaposin'ny Soratra MT", manakilema; } p: voalohany-line {line-height: 100%; }Ary, araka ny mahazatra dia azonao atao ny mametraka ireo soso-kevitra rehetra ireo mba hamoronana kapila voalohany izay mampiseho ny fomba fanoratana ny paragrafy anao.
Mampiasa Kapila Initial Graph
Raha mbola tsy tianareo foana ny fomba fijerin'ny mofomamy voalohany ao amin'ny pejy, dia mbola mety haka sary ianao mba hahitana ny vokatra tadiavinao. Saingy alohan'ny hanapahanao hivoatra mivantana mankany amin'ny sary, tokony ho fantatrao ny tsy fahampian'io fomba io:
- Ny mpividy tsy misy sary dia tsy hahita ny kapila voalohany, ary mety tsy hahita ny lahatsoratra miafina izay misolo ny sary. Izany dia mety hahatonga ny fehintsary tsy azo idirana, na amin'ny sarotra indrindra ny mamaky.
- Ny sary dia manampy foana ny fotoana fandefasana pejy. Raha manana caps voalohany ianao, dia afaka mampitombo ny fotoana andefasana azy ho an'ny zavatra maro ho tsapa dia tsy misy dikany.
- Ny navigateur sasany dia hampiseho ilay taratasy miafina voalohany sy ny sary - izay ahafahana mametraka ny fehintsoratra amin'ny endrika tsy mahazatra.
- Sarotra be ny manamboatra io safidy io, satria tsy maintsy fantarinao tsara ny litera voalohany amin'ny fampiasanao ilay sary. Noho izany, isaky ny mamoaka ny fehintsoratra, dia mila mamorona grafika vaovao ianao.
Voalohany, mila mamorona ny sarin'ny taratasy voalohany ianao. Nampiasa ny Photoshop aho mba hamoronana ny taratasy L miaraka amin'ny soratra "Edwardian Script ITC". Nataoko lehibe izany - 300 tapitrisa. Avy eo dia nopotehiko ny sary teo amin'ny ambany kely faran'izay manodidina ny taratasy ary nanamarika ny habe sy ny haavony.
Avy eo dia namorona kilasy "capL" aho ho an'ny fehintserako. Eto aho no mamaritra ny sary azoko ampiasaina, ny lohateny (haavo), sy ny sisa.
Mila mampiasa ny haben'ny sary sy ny haavony ianao mba hametrahana ny andinin-tsoratra fonosana-endritsoratra sy padding-top. Ho an'ny endriko dia nilaina ny foitra 95px sy 72px.
p.capL {line-height: 1em; background-image: url (capL.gif); background-repeat: no-repeat; text-indent: 95px; padding-top: 72px; }Saingy tsy izany rehetra izany. Raha avelanao any izany, dia haverina ao amin'ny fehintsoratra ny taratasy voalohany - aloha amin'ny sary, avy eo ao anaty lahatsoratra. Noho izany, nanampy andalana iray manodidina ny singa voalohany amin'ny kilasy "voalohany" aho - ary nilaza tamin'ny mpitety tranonkala fa tsy mampiseho ity taratasy ity:
span.initial {aseho: tsy misy; }Ary ny sary dia mampiseho tsara. Azonao atao ny milalao miaraka amin'ilay lahatsoratra-endritsoratra ao amin'ny fehintsoratra mba hahazoana ilay lahatsoratra voafafa manakaiky ny taratasy, na izany aza, tianao ny hampiseho azy.