Ikasi Fancy hasierako aurpegiak sortzeko CSS eta irudiak erabiltzea
Ikasi nola CSS erabili zure paragrafoen hasierako txanoak sortzeko. Irudiaren ordezko teknika sinple bat ere badago irudi grafiko bat zure hasierako txanoan erabiltzeko.
Hasierako kapituluetarako oinarrizko estiloak
Hasierako txertatzeen oinarrizko hiru estilo daude:
- planteatu - ohikoenak, non lehen letra handiagoak diren eta egungo testuaren lerro berean.
- eroritakoak ere nahiko arruntak dira, lehen letrak handiagoak baitira eta lehen lerroaren azpian jaisten dira. Hurrengo testua inguruan mugitzen da.
- albokoak - non lehenengo letra zutabe bat gainerako testuaren ondoan dagoen. Web diseinua baino ohikoagoa da.
Hasierako txanoak edo jarlekuak oso ezagunak dira. Testu luzeak eta aspergabeko luzeak janzteko modu bikaina dira. Eta CSS propietatearekin: lehen letra, erraz definitu ahal izango duzu zure lehen letrak nola egin.
Sortu hasierako txano sinple bat
Hasierako lauki sinplea sortzeko egin behar duzun guztia zure paragrafoaren lehen letra da, lehen letrako pseudo-elementuarekin batera handituta.
p: lehen letra {font-size: 3em; }Nabigatzaile askok, ordea, lehenengo letrak lerroan gainerako testua baino handiagoa dela ikusten dute, beraz, lehenengo letraren zentzua izango luke liderra, ez lerroaren gainerakoa. Zorionez, lehen lerroko pseudo-elementuarekin eta linearen altuera-propietatearekin konpontzen erraza da:
p: lehen letra {font-size: 3em; } p: lehen lerroa {lerro-altuera: 1em; }Erreproduzitu lerroaren altuera zure dokumentuaren barruan zure testuaren tamaina egokia aurkitzen duzun arte.
Jolasteko zure hasierako txanoarekin
Hasierako txano bat nola sortu den ulertzen duzunean, arropa jantzita jantzi dezakezu, nabarmentzeko. Jarri koloreak, atzeko planoko koloreak, ertzak edo edozein izanda ere. Estilo nahiko sinplea da letra-tipoaren eta atzeko planearen koloreak alderantzikatzeko lehen letra gisa:
p: lehen letra {font-size: 300%; atzeko planoaren kolorea: # 000; kolorea: #fff; } p: lehen lerroa {lerro-altuera:% 100; }Trikimailu bat lehen lerroa zentratu da. Hau CSS-rekin zaila izan daiteke, testu-lerroaren erdian desberdina izan daiteke zure diseinua malgua bada. Baloreekin jolasten ari den bitartean, lehenengo lerroa nahikoa alda dezakezu lehen letra erdian agertzeko. Just play paragrafoaren testu-kosken portzentajean itxura zuzena izan arte:
p: lehen letra {font-size: 300%; atzeko planoaren kolorea: # 000; kolorea: #fff; } p: lehen lerroa {lerro-altuera:% 100; } p {testu-koska: % 45 ; }Aurrerantzean hasierako aurpegiak Hard with CSS dira
Aurrerantzean, hasierako txertatzeak CSS-rekin zaila izan daiteke hainbat nabigatzaileek modu ezberdinean bistaratzen dituztelako. CSS atzeko kortxoa sortzeko atzean dagoen ideia lehen lerroan testu-koska propietatea erabiltzea da (ezkerrean) balio negatiboa. Paragrafo horren ezkerreko marjina ere aldatu behar duzu. Erreproduzitu zenbaki hauei paragrafoarekin itxura ona izan arte.
p {testu-koska: -2.5em; marjina-ezkerra: 3em; } p: lehen letra {font-size: 3em; } p: lehen lerroa {lerro-altuera:% 100; }Benetan fantasia hasierako aurpegiak eskuratzen
Fancy hasierako txano bat sortzeko modurik onena letra-tipoa dekorazio-letra tipoko familia aldatzea da. Fonts letra-tipoak jarraitzen dituzten hainbat letra-tipoak erabiltzen badituzu, zure hasierako txanoak ondo erakusten du zure bezeroek ikus dezakezula, irisgarritasunean eta erabilgarritasunean sartu gabe.
p: lehen letra {font-size: 3em; font-family: "Edwardian Script ITC", "Brush Script MT", cursive; } p: lehen lerroa {lerro-altuera:% 100; }Eta, ohikoa den bezala, iradokizun guztiak jar ditzakezu elkarrekin paragrafoan iragarkien estiloa sortzeko hasierako cap bat sortzeko.
Initial Cap grafikoa erabiliz
Horren ondoren, oraindik ere ez duzu gustuko hasierako txanoek orriaren itxura nola ikusten duten, grafikoak erabil ditzakezun bilatzen ari zaren efektua lortzeko. Baina grafikoak zuzenean mugitzeko erabakitzen baduzu, metodo honen desabantaila jakitun izan beharko zenuke:
- Irudik gabeko bezeroek ez dute hasierako txanoik ikusiko, eta agian ez da irudia ordezten duen ezkutuko testua ikusiko. Paragrafo hau ezin da sar daitekeenik, edo, hobeto esanda, irakur daiteke.
- Irudiak beti orrialde baten deskargen ordura gehitzen dira. Hasierako txano asko badituzu, askoz ere nabarmenagoa da deskargatzeko ordua handitzea jende askok sentitzen duen zerbait dela.
- Nabigatzaile batzuek ezkutuko lehen letra eta irudia bistaratuko dituzte, eta paragrafoaren testua bakoitiak itxuraz egin daiteke.
- Oso zaila da aukera hau automatizatzea, lehen letrak zehaztutako grafiko egokia erabiltzen duzun jakiteko. Beraz, paragrafo bakoitza editatzen den bakoitzean, grafiko berria sortu beharko duzu.
Lehenik eta behin, lehenengo letraren grafikoa sortu behar duzu. Argazkilaria erabiltzen nuen L letra sortzeko "Edwardian Script ITC" letra-tipoarekin. Erraldoi egin nuen: tamaina 300p. Ondoren, irudia moztu nuen letra gutxieneko letra gutxien eta irudiaren zabalera eta altuera adierazi.
Ondoren, "capL" klase bat sortu nuen nire paragrafoan. Hau da, zer irudia erabili behar den definitzen dut, liderra (lerro-altuera), eta abar.
Irudiaren zabalera eta altuera erabili behar duzu paragrafoaren testu-koska eta betegarria zehazteko. Nire L irudirako, 95px koska eta 72px betegarria behar nituen.
p.capL {line-height: 1em; background-image: url (capL.gif); background-repeat: no-repeat; testu-koska: 95 px; betegarria: 72 px; }Baina hori ez da dena. Utzi egiten baduzu, lehenengo hizkia paragrafoan bikoiztu egingo da - lehenik grafikoarekin, ondoren testuarekin. Horrela, lehen mailako elementu horren inguruan "hasierako" klase bat gehitu nuen eta esan zuen arakatzaileak ez duela letra hori erakutsi:
span.initial {bistan: none; }Eta grafikoa ondo bistaratzen da. Paragrafoan testu-koska egitean testuarekin zuzenean gora joateko aukera duzu, hala ere erakutsi nahi duzu.