Learje hoe't jo kreaze begjinne koppen meitsje brûke CSS en images
Learje hoe't jo CSS brûke om foarjierrige kapsjes foar jo begrippen te meitsjen. Der is sels in ienfâldige ôfbylding ferfetsje technyk om in grafyske byld te brûken foar jo earste kap.
Basisstilen fan ynjekslike kapten
Der binne trije basisstilen fan earste kappen yn dokuminten:
- opstien - de meastste, dêr't de earste brief grutter is en op deselde line as de hjoeddeistige tekst.
- It falt - ek gewoan bewust, wêr't de earste letter grutter is en ûnder de earste line fan tekst falt. De folgjende tekst skodde dan om it hinne.
- oanienwei - wêr't de earste brief yn ien kolom is neist de rest fan 'e tekst. Dit is handicher yn print as web design.
Inisjale kappen of dropkappen binne tige fertroud. Se binne in geweldige manier om oare lange en droechte spanen fan tekst te learen. En mei it CSS-eigenskip: earste letter, kinne jo maklik definieare hoe jo jo earste letters fanút meitsje moatte.
Meitsje in ienfâldige ynfierkap
Alles wat jo nedich meitsje om in ienfâldige opliedende yngongskap te meitsjen is it earste letter fan jo paragraaf grutter te meitsjen mei de earste-letter pseudo-elemint:
p: earste-letter {font-size: 3em; }Mar in protte browsers sjogge dat de earste letter grutter is as de rest fan de tekst op 'e rigel, dus meitsje se de liedende lykweardich oan wat it sin soe foar it earste brief, net de rest fan' e line. Soarch, dit is maklik te berikken mei it earste line pseudo-elemint en it line-hight-eigenskip:
p: earste-letter {font-size: 3em; } p: earste-line {line -hichte: 1em; }Spielje mei de linehichte yn jo dokumint oant jo de juste grutte fine foar jo tekst.
Spielje mei jo Initial Cap
As jo begripe hoe't jo in inkant kappen meitsje kinne, kinne jo it opjaan yn 'e loftke klean om it út te stekken. Spielje mei kleuren, eftergrûnkleuren, grinzen, of wat jo oanhingje. In gewoan ienfâldige styl is om de kleuren fan jo lettertype en eftergrûnkleur allinich foar de earste letter werom te setten:
p: earste letter {font-size: 300%; background-color: # 000; color: #fff; } p: earste-line {line -hichte: 100%; }In oare trúk is om de earste line te santearjen. Dit kin sûk wêze mei CSS, om't it midden fan 'e tekstline oars kinne as jo layout fleksibel is. Mar mei guon spultsje mei de wearden, kinne jo jo earste line genôch wêze om de earste letter te sjen yn 'e midden. Spielje just mei it persintaazje op 'e tekst-indent fan' e paragraaf oant it goed sjocht:
p: earste letter {font-size: 300%; background-color: # 000; color: #fff; } p: earste-line {line -hichte: 100%; } p {tekst-indent: 45% ; }Afdienige Initial Caps binne Hard mei CSS
Inisjele oarspronklike kapen kinne swier wêze mei CSS om't de ferskate browsers de lettertypen ferskille sjen. It idee efter it meitsjen fan in neistlizzende kap yn CSS is it gebrûk fan 'e tekst-ûnthâlde eigendom op' e earste line om it (negative) wearde te leverjen (nei links). Jo moatte ek de linke marzje fan dat paragraaf feroarje troch in bepaald bedrach. Spielje mei dizze getallen oant de paragraaf goed sjocht.
p {text-indent: -2.5em; margin-left: 3em; } p: earste-letter {font-size: 3em; } p: earste-line {line -hichte: 100%; }Gelyk Fancy Ynitial Caps
De bêste manier om in inisjale inkapt te meitsjen is it lettertype om te feroarjen yn in mear dekorative lettertypefamylje. As jo in searje lettertypen brûke, folge troch in algemiene lettertype , sil it jo garandearje dat jo earste kappen so goed sjen dat jo klanten dit sjen kinne, sûnder yn tagonklikens en usabeleproblemen te krijen.
p: earste-letter {font-size: 3em; Lettertype-famylje: "Edwardsk Skript ITC", "Brush Script MT", cursive; } p: earste-line {line -hichte: 100%; }En, lykas gewoanlik, kinne jo dizze suggestjes gearfetsje om in begjinne kap oan te meitsjen dat advertinsjes op jo paragraaf foarmje.
Brûk in grafyske ynfierkap
As jo dat noch hieltyd net wolle hoe't jo inisjale kappen op 'e side sjogge, kinne jo rekkenje mei grafiken om de krekte effekt te finen dy't jo sykje. Mar foardat jo beslute om rjochtstreeks nei grafyk te passen, moatte jo bewust wêze fan de tekoarten fan dizze metoade:
- Klanten sûnder byldsjes sjogge de earste kappen net en sjogge de ferburgen tekst net dat de ôfbylding ferfangt. Dit kin de paragraaf net tagonklik meitsje, of op it bêst lestich lêze.
- Ofbyldings taheakje altyd oan 'e downloadtiid fan in side. As jo in protte ynfallende kappen hawwe, kinne jo de downloadtiid fergrutsje ferheegje foar wat in protte minsken fiele kinne is net-weardich.
- Guon browsers sille sawol de ferburgen earste letter en de ôfbylding werjaan - dy kinne de paragraaf tekst selden meitsje.
- It is tige hurd om dizze opsje te automatisearjen, lykas jo krekt witte moatte wat de earste letter is dat jo de juste grafyk brûke. Sa, elke kear de paragraf is bewurke, kinne jo miskien in nije grafyk meitsje.
Earst moatte jo de grafyk fan 'e earste brief meitsje. Ik haw Photoshop brûkt om de letter L te meitsjen mei it skift "Edwardian Script ITC". Ik makke it geweldich - 300pt yn grutte. Ik haw doe de ôfbylding delfalle nei it minste min om de brief en fûn de byldbreedte en hichte.
Dan makke ik in klasse "capL" foar myn paragraaf. Dit is wêr ik definieare hokker ôfbylding brûke, de liedende (line-hichte), ensfh.
Jo moatte de ôfbyldingbreedte en hichte brûke om de tekst-yndeks en de padding-top te setten. Foar myn L-ôfbylding moast ik 95px indent en 72px padding nedich.
p.capL {line-height: 1em; background-image: url (capL.gif); eftergrûn-werhelje: no-werhelje; text-indent: 95px; padding-top: 72px; }Mar dat is net alles. As jo it dêr litte, dan sil de earste brief yn 'e paragraaf duplicearre wurde - earst mei de grafyk, dan yn it tekst. Dus, ik tafoege in span om it earste elemint mei de klasse "begjin" - en fertelde de browser dat dizze letter net werjûn:
span.initial {display: none; }En de grafyk docht dêrnei korrekt. Jo kinne spielje mei de tekst-ûnthâld op 'e paragraaf om de tekst opnij oan' e ljepblêd knippe te kinnen, mar jo wolle graach sjen litte.