Léieren Wéi schéi Fancy Initial Caps Erstellt mat CSS an Biller
Léiert wéi Dir CSS benotzt fir Phantasiekappen fir Ären Absätzen ze kreéieren. Et ass souguer eng einfach Bild Ersatztechnik fir e grafesche Bild fir Är initial Kappe ze benotzen.
Grondstil vun Initial Caps
Et gi dräi Grondstil vun initialen Kappen an Dokumenter:
- - am meeschte verbreet, wou den éischte Bréif méi grouss ass an op déi selwecht Linn wéi den aktuellen Text.
- - och zimlech allgemeng, wou den éischte Bréif méi grouss ass an ënner der éischter Zeil vum Text fällt. Dëse Text schwëmmt elo ronderëm.
- Nodeem den éischte Bréif an enger Kolonn niewent dem Rescht vum Text ass. Dëst ass méi heefeg wéi am Webdesign.
Initial Kaps oder Drop Caps sinn ganz gutt. Si sinn e gudden Wee fir aner Longen a langweileg Spannungen aus Text ze maachen. A mat der CSS-Eigenschaft: Éischt-Bréif, kënnt Dir ganz einfach definéieren wéi Dir Är éischt Bréiwer Fanger gemaach gëtt.
Erstelle en einfache Initial Cap
Alles wat Dir braucht fir eng einfach agezuelten Initialenkapazitt ze kreéieren, ass den éischte Bréif vun Ärem Paragraphen méi grouss mat der éischter Pseudo-Element:
p: éischt-letter {font-size: 3em; }}Awer vill Browsere gesinn datt dee éischten Bréif méi grouss ass wéi de Rescht vum Text op der Linn, sou datt se d'Haaptleit egal wéi wat fir den éischte Bréif sinn, net de Rescht vun der Linn. Glécklech, dat ass ganz einfach ze fixéieren mam éischten Pseudo-Element an der Line-Héicht Property:
p: éischt-letter {font-size: 3em; } p: Éischt-Linn {line-height: 1em; }}Spillt mat der Zeil Héicht an Ärem Dokument, bis Dir déi richteg Gréisst fir Ären Text fannen.
Spillt mat Ären Initial Cap
Sidd Dir verstan fir wéi Dir eng Ufankskapp zitt, kënnt Dir et an d'léif Kleeder unzepassen, fir datt se erausstinn. Spill mat Faarwen, Hannergrondfaarf, Ränder, oder och ëmmer wat Dir schreift. E relativ einfache Stil ass d'Faarwen vun Äerer Schrëft an Hannergrond ëmgedréit just fir den éischte Bréif:
p: Éischt-letter {font-size: 300%; Hannergrond-Faarf: # 000; color: #fff; } p: Éischt-Linn {line-height: 100%; }}En aneren Trick ass déi éischt Zeil ze zentréieren. Dëst kann mat CSS schwiereg sinn, well d'Mëtt vun der Textzeechen kann ënnerschiddlech sinn, wann Äert Layout flexibel ass. Awer mat de Wäerter mat de Wäerter spillen, kënnt Dir Är éischter Zeil genug huelen fir den éischte Bréif ze maachen an der Mëtt. Just spillen mat dem Prozentsaz op den Text-Gedrénks vum Paragrapus, bis et richteg ass:
p: Éischt-letter {font-size: 300%; Hannergrond-Faarf: # 000; color: #fff; } p: Éischt-Linn {line-height: 100%; } p {text-indent: 45% ; }}Aneneen Initial Caps sinn mat CSS schwéier
Engersichen Initialenkapsen kënnen mat CSS schwiereg sinn, well déi verschidde Browsers d'Schrëften anescht maachen. D'Iddi hannert engem Neighborhood Cap in CSS ze benotzen ass d'Inspektiounsexamen op der éischter Linn ze benotzen fir se e negative negativen Effekt opzeginn. Dir musst och de lénksen Rand vun dësem Paragrap e puer Betrag änneren. Mat dësen Zuelen spille bis de Paragraf gutt ass.
p {text-indent: -2.5em; Spillraum: 3em; } p: Éischt Bréif {font-size: 3em; } p: Éischt-Linn {line-height: 100%; }}Gitt Really Fancy Initial Caps
De beschte Wee fir eng lëschteg Initial Kappe ze kreéieren ass d'Schrëft an eng méi dekorativ Schrëftfamill z'änneren. Wann Dir eng Serie vu Schrëften benotze kënnt mat engem generesche Schrëft , kënnt Dir suergen datt Är Ufankssäit gutt ass, sou datt Är Clienten et gesinn, ouni datt Dir Zougang zu Accessibilitéit an Usabilityproblemer kritt.
p: éischt-letter {font-size: 3em; Schrëftfamill: "Edwardian Script ITC", "Brush Script MT", cursiv; } p: Éischt-Linn {line-height: 100%; }}A wéi allgemeng kënne Dir all dës Suggestiounen zesummen eng Ersatzkappe kreéieren fir datt Äer Ad-Stil op Ären Paragraphe stin.
Mat engem grapheschen Initial Cap
Wann Dir nach all deem, deen Dir nach ëmmer net gär huet wéi Är initial Koppelen op der Säit kucken, kënnt Dir op Grafik goen fir de genauen Effekt ze fannen deen Dir sicht. Awer ier Dir decidéiert, direkt op d'Grafiken ze réckelen, musst Dir déi Noutwennegkeet vun dëser Methode wëssen:
- Kläner ouni Biller gesäit net d'Ufankskapazitéit a kann den Text net verstoe wat de Bild ersetzt. Dëst kann den paragraph net zougänglech maachen, oder am beschten schwiereg ze liesen.
- Biller addéieren ëmmer op d'Downloadzäit vun enger Säit. Wann Dir e puer initial Kappen brauch, kënnt Dir d'Download-Zäit erof léisen fir datt vill Leedunge fille sinn net onbestëmmend.
- E puer Browser solle sowohl de verstoppten éischte Bréif an d'Bild sinn - wat de Paragraf Text liesen kann.
- Et ass ganz schwéier dës Optioun automatiséieren ze loossen, well Dir genau wëssen wat den éischte Bréif ass datt Dir déi richteg Grafik benotzt. Also, all Kéier wann de Paragraphe geännert gëtt, musst Dir eng nei Grafik erstellen.
Als éischt musst Dir d'Grafik vum éischte Bréif maachen. Ech benotze Photoshop fir de Bréif L mat der Schrëft "Edwardian Script ITC" ze kreéieren. Ech hunn et rieseg - 300pt grouss. Ech hunn d'Bild bis op déi niddreg Minimal un de Bréif geschnëtzt an huet d'Bildbreedung an d'Héicht ugekuckt.
Duerno hunn ech eng Klass "capL" fir meng Paragrap gemaach. Dëst ass wou ech definéieren wat fir eng Bild benotzen, déi führend (Line-Héicht), a sou weider.
Dir musst d'Bildbreedung an d'Héicht benotze fir de Text-Gedrénks a Padding-Top ze setzen. Fir mäi L Bild sinn ech 95px Spektakelen an 72px Polstere gebraucht.
p.capL {line-height: 1em; Background-image: url (capL.gif); Hannergrond -widderhuelen: nee -widderhuelen; Text-Indent: 95px; padding-top: 72px; }}Mee dat ass net alles. Wann Dir et da leeft, da gëtt de éischte Bréif am Paragrapus duplicéiert - éischt mat der Grafik, dann am Text. Also hunn ech eng Spann um Ufank vum éischte Element mat der Klass "Initial" hinzuaddert - an de Browser huet de Bréif net ze gesinn:
span.initial {Display: keng; }}An déi Grafik weist dann korrekt z'erreechen. Dir kënnt mat dem Textindustrie op den Paragrapse spille fir de Text ze schéissen bis op de Bréif, awer Dir wëllt se ze weisen.