Leer hoe om fancy aanvanklike caps te skep met behulp van CSS en prente
Leer hoe om CSS te gebruik om fancy aanvanklike pette vir jou paragrawe te skep. Daar is selfs 'n eenvoudige prentvervangingstegniek om 'n grafiese beeld vir jou aanvanklike pet te gebruik.
Basiese Style van Aanvanklike Caps
Daar is drie basiese style van aanvanklike pette in dokumente:
- Opgewek - die mees algemene, waar die eerste letter groter is en op dieselfde lyn as die huidige teks.
- gedaal - ook redelik algemeen, waar die eerste letter groter is en onder die eerste reël van die teks neergesit het. Die volgende teks dryf dan om dit.
- aangrensend - waar die eerste letter in die een kolom langs die res van die teks is. Dit is meer algemeen in druk as webontwerp.
Aanvanklike pette of druppeltjies is baie bekend. Hulle is 'n goeie manier om ander lang en vervelige spanne van teks aan te trek. En met die CSS-eienskap: eerste letter, kan jy maklik definieer hoe om jou eerste briewe fyner te maak.
Skep 'n eenvoudige aanvanklike pet
Al wat u moet doen om 'n eenvoudige aanvanklike cap te skep, is om die eerste letter van u paragraaf groter te maak met die eerste letter pseudo-element:
p: eerste letter {font-size: 3em; }Maar baie blaaiers sien dat die eerste letter groter is as die res van die teks op die lyn, sodat hulle die voorste gelyk maak aan wat vir daardie eerste letter sin sou maak, en nie die res van die lyn nie. Gelukkig is dit maklik om te regmaak met die eerste lyn pseudo-element en die lynhoogte-eiendom:
p: eerste letter {font-size: 3em; } p: eerste lyn {reël-hoogte: 1em; }Speel met die lynhoogte in jou dokument totdat jy die regte grootte vir jou teks kry.
Speel met jou aanvanklike pet
Sodra jy verstaan hoe om 'n aanvanklike pet te skep, kan jy dit in fyn klere aantrek om dit uit te steek. Speel met kleure, agtergrond kleure, grense, of wat ookal jou fancy lyk. 'N Redelik eenvoudige styl is om die kleure van jou lettertipe en agtergrondkleur net vir die eerste letter om te keer:
p: eerste letter {font-size: 300%; agtergrondkleur: # 000; kleur: #fff; } p: eerste lyn {lynhoogte: 100%; }Nog 'n truuk is om die eerste lyn te sentreer. Dit kan moeilik wees met CSS, aangesien die middel van die teksreël anders kan wees as jou uitleg buigsaam is. Maar met 'n paar om met die waardes rond te speel, kan jy jou eerste reël inpas om die eerste letter in die middel te laat lyk. Speel net met die persentasie op die teks-streep van die paragraaf totdat dit reg lyk:
p: eerste letter {font-size: 300%; agtergrondkleur: # 000; kleur: #fff; } p: eerste lyn {lynhoogte: 100%; } p (teks-streepje: 45% ; }Aanliggende Aanvanklike Caps is Hard met CSS
Aangrensende aanvanklike pette kan moeilik wees met CSS omdat die verskillende blaaiers die fonts anders vertoon. Die idee om 'n aangrensende pet in CSS te skep, is om die teks-inheemse eienskap op die eerste reël te gebruik om dit (links) 'n negatiewe waarde uit te druk. Jy sal ook die linkermarge van daardie paragraaf met 'n mate moet verander. Speel met hierdie nommers totdat die paragraaf goed lyk.
p {teks-indent: -2.5em; marge-links: 3em; } p: eerste letter {font-size: 3em; } p: eerste lyn {lynhoogte: 100%; }Om regtig fancy aanvanklike caps te kry
Die beste manier om 'n fyn aanvanklike cap te skep, is om die font na 'n meer dekoratiewe fontfamilie te verander. As jy 'n reeks lettertipes gebruik, gevolg deur 'n generiese font , sal dit help om te verseker dat jou aanvanklike pet goed vertoon sodat jou kliënte dit kan sien sonder om toegang tot toeganklikheid en bruikbaarheidsprobleme te kry.
p: eerste letter {font-size: 3em; font-familie: "Edwardian Script ITC", "Brush Script MT", cursief; } p: eerste lyn {lynhoogte: 100%; }En soos gewoonlik kan jy al hierdie voorstelle saambring om 'n aanvanklike pet te skep wat advertensies vir jou paragraaf aanpas.
Gebruik 'n grafiese aanvanklike kap
As jy nog steeds nie hou van hoe jou aanvanklike pette op die bladsy lyk nie, kan jy na grafika toevlug om die presiese effek wat jy soek, te kry. Maar voordat jy besluit om reguit na grafika te beweeg, moet jy bewus wees van die nadele van hierdie metode:
- Kliënte sonder beelde sal nie die aanvanklike pet sien nie, en mag nie die verborge teks sien wat die prent vervang nie. Dit kan die paragraaf ontoeganklik maak, of in die moeilikste moeilik om te lees.
- Prente voeg altyd by die aflaaistyd van 'n bladsy. As jy baie aanvanklike pette het, kan jy die aflaaistyd aansienlik verhoog vir iets wat baie mense sou voel, is onbeduidend.
- Sommige blaaiers sal beide die versteekte eerste letter en die prent vertoon - wat die paragraaf teks vreemd kan lyk.
- Dit is baie moeilik om hierdie opsie te outomatiseer, want jy moet presies weet wat die eerste letter is sodat jy die korrekte grafiese gebruik. Dus, elke keer as die paragraaf geredigeer word, moet jy dalk 'n nuwe prentjie skep.
Eerstens moet jy die grafiese van die eerste letter skep. Ek het Photoshop gebruik om die letter L te skep met die lettertipe "Edwardian Script ITC". Ek het dit groot gemaak - 300pt in grootte. Ek het toe die prentjie na die kaal minimum om die letter geknip en die beeld breedte en hoogte aangeteken.
Toe het ek 'n klas "capL" vir my paragraaf geskep. Hier definieer ek watter beeld om te gebruik, die voorste (lynhoogte), ensovoorts.
U moet die breedte en die hoogte van die beeld gebruik om die teks se teks en die invoegtoepassing van die paragraaf te stel. Vir my L-beeld benodig ek 95px-inspringing en 72px-opvulling.
p.capL {line-height: 1em; agtergrond-beeld: url (capL.gif); agtergrond-herhaling: nie-herhaal; teks-indent: 95px; padding-top: 72px; }Maar dis nie alles nie. As u dit daar laat, sal die eerste letter in die paragraaf gedupliseer word - eers met die grafiese, dan in die teks. So, ek het 'n span rondom die eerste element bygevoeg met die klas "aanvanklike" - en het aan die leser gesê om nie die brief te vertoon nie:
span.initiale {vertoon: geen; }En die grafiese vertoon dan korrek. U kan met die teks-streep op die paragraaf speel om die teks tot by die letter te kry, maar u wil dit graag vertoon.