CSS પ્રારંભિક કેપ્સ

CSS અને છબીઓનો ઉપયોગ કરીને ફેન્સી પ્રારંભિક કેપ્સ કેવી રીતે બનાવવો તે જાણો

તમારા ફકરા માટે ફેન્સી પ્રારંભિક કેપ્સ બનાવવા માટે CSS નો ઉપયોગ કેવી રીતે કરવો તે જાણો. તમારી પ્રારંભિક કેપ માટે ગ્રાફિકવાળી છબીનો ઉપયોગ કરવા માટે એક સરળ છબી રિપ્લેસમેન્ટ ટેકનિક પણ છે.

પ્રારંભિક કેપ્સની મૂળભૂત શૈલીઓ

દસ્તાવેજોમાં પ્રારંભિક કેપ્સની ત્રણ મૂળભૂત શૈલીઓ છે:

• ઊભા - સૌથી સામાન્ય છે, જ્યાં પ્રથમ અક્ષર મોટા છે અને વર્તમાન ટેક્સ્ટની જેમ જ લાઇન પર છે.
• ઘટાડો - પણ એકદમ સામાન્ય છે, જ્યાં પ્રથમ અક્ષર મોટા છે અને ટેક્સ્ટની પ્રથમ લીટીની નીચે નીચે ઉતર્યો છે. નીચેના ટેક્સ્ટ પછી તેની આસપાસ તરે છે.
• અડીને - જ્યાં બાકીના ટેક્સ્ટની બાજુમાં પ્રથમ પત્ર એક સ્તંભમાં છે. આ વેબ ડિઝાઇન કરતાં પ્રિન્ટમાં વધુ સામાન્ય છે

પ્રારંભિક કેપ્સ અથવા ડ્રોપ કેપ્સ ખૂબ પરિચિત છે. તેઓ ટેક્સ્ટના અન્યથા લાંબી અને કંટાળાજનક સ્પેન્સ પહેરવાનું સુંદર રીત છે. અને CSS ગુણધર્મ સાથે: પ્રથમ અક્ષર, તમે સરળતાથી તમારી પ્રથમ અક્ષરો ફેન્સી બનાવવા કેવી રીતે વ્યાખ્યાયિત કરી શકો છો.

એક સરળ પ્રારંભિક કેપ બનાવો

સરળ ઊભા થયેલા પ્રારંભિક કેપ બનાવવા માટે તમારે બધાને પ્રથમ-અક્ષર સ્યુડો-એલિમેન્ટ સાથેના કદના મોટાભાગનાં ફકરાના પ્રથમ અક્ષર બનાવવાની જરૂર છે:

p: પ્રથમ અક્ષર {font-size: 3em; }

પરંતુ ઘણાં બ્રાઉઝર્સમાં જોવા મળે છે કે પ્રથમ અક્ષર લીટી પરની બાકીની ટેક્સ્ટ કરતાં મોટી છે, તેથી તે અગ્રણી સમાન બનાવે છે જે તે પ્રથમ અક્ષર માટે અર્થમાં બનાવશે, નહીં કે રેખા બાકીના. સદભાગ્યે, આ પ્રથમ-લાઇન સ્યુડો-એલિમેન્ટ અને લાઇન-ઊંચાઈની મિલકત સાથે ઠીક કરવાનું સરળ છે:

p: પ્રથમ અક્ષર {font-size: 3em; } પૃષ્ઠ: પ્રથમ-લાઇન {લાઇન-ઊંચાઈ: 1em; }

જ્યાં સુધી તમે તમારા ટેક્સ્ટ માટેનો યોગ્ય કદ ન મેળવો ત્યાં સુધી તમારા દસ્તાવેજની અંદર લીટીની ઊંચાઇ વડે રમો.

તમારી પ્રારંભિક કેપ સાથે રમો

એકવાર તમે પ્રારંભિક કેપ કેવી રીતે બનાવવું તે સમજી લો પછી, તમે તેને સુંદર બનાવીને તેને સુંદર બનાવવા માટે કપડાં પહેરી શકો છો. રંગો, પૃષ્ઠભૂમિ રંગ, સરહદો, અથવા ગમે તે તમારી ફેન્સી પર કોઈ રન નોંધાયો નહીં સાથે રમે છે. એકદમ સરળ શૈલી તમારા ફોન્ટ અને પૃષ્ઠભૂમિ રંગના રંગોને ફક્ત પ્રથમ અક્ષર માટે વિપરીત કરવા છે:

p: પ્રથમ અક્ષર {font-size: 300%; બેકગ્રાઉન્ડ રંગ: # 000; રંગ: #fff; } પૃષ્ઠ: પ્રથમ-લાઇન {લાઇન-ઊંચાઈ: 100%; }

બીજી યુક્તિ એ પ્રથમ વાક્યનું કેન્દ્ર છે આ CSS સાથે કપટી હોઈ શકે છે, કારણ કે ટેક્સ્ટ લાઇનનું મધ્યમ અલગ હોઈ શકે છે જો તમારું લેઆઉટ સાનુકૂળ હોય. પરંતુ કેટલાક મૂલ્યો સાથે આસપાસ રમી રહ્યાં હોવા સાથે, તમે પ્રથમ અક્ષરને મધ્યમાં દેખાવા માટે તમારી પ્રથમ લાઇનને ઇન્ડેન્ટ કરી શકો છો. ફકરાના ટેક્સ્ટ-ઇન્ડેન્ટ પર ટકાવારી સાથે રમવાનું નહીં ત્યાં સુધી તે યોગ્ય લાગે છે:

p: પ્રથમ અક્ષર {font-size: 300%; બેકગ્રાઉન્ડ રંગ: # 000; રંગ: #fff; } પૃષ્ઠ: પ્રથમ-લાઇન {લાઇન-ઊંચાઈ: 100%; } પૃષ્ઠ {ટેક્સ્ટ ઇન્ડેન્ટ: 45% ; }

અડીને પ્રારંભિક કેપ્સ CSS સાથે હાર્ડ છે

અડીને પ્રારંભિક કેપ્સ CSS સાથે મુશ્કેલ હોઈ શકે છે કારણ કે વિવિધ બ્રાઉઝરો ફોન્ટ્સને જુદા રીતે પ્રદર્શિત કરે છે. CSS માં સંલગ્ન કેપ બનાવવા પાછળનો વિચાર એ લખાણ-ઇન્ડેન્ટ પ્રોપર્ટીનો પ્રથમ લીટી પર ઉપયોગ કરવા માટે છે (તેને ડાબી બાજુએ) નકારાત્મક મૂલ્ય. તમારે અમુક રકમ દ્વારા તે ફકરાના ડાબી માર્જિનને બદલવાની જરૂર પડશે. ફકરો સારી દેખાય ત્યાં સુધી આ સંખ્યાઓ સાથે રમો.

પૃષ્ઠ {ટેક્સ્ટ ઇન્ડેન્ટ: -2.5મ; માર્જીન-ડાબે: 3મ; } પૃષ્ઠ: પ્રથમ અક્ષર {font-size: 3em; } પૃષ્ઠ: પ્રથમ-લાઇન {લાઇન-ઊંચાઈ: 100%; }

ખરેખર ફેન્સી પ્રારંભિક કેપ્સ મેળવવી

ફેન્સી પ્રારંભિક કેપ બનાવવાનો શ્રેષ્ઠ માર્ગ ફૉન્ટને વધુ સુશોભિત ફૉન્ટ પરિવારમાં બદલવાનો છે. જો તમે સામાન્ય ફૉન્ટની અનુસરતા શ્રેણીબદ્ધ ફોન્ટ્સનો ઉપયોગ કરો છો, તો તે બાંહેધરી કરવામાં મદદ કરશે કે તમારી પ્રારંભિક કેપ સારી રીતે બતાવે છે જેથી તમારા ગ્રાહકો એક્સેસિબિલિટી અને ઉપયોગીતા મુદ્દાઓ પર વિચાર કર્યા વગર તે જોઈ શકે છે.

p: પ્રથમ અક્ષર {font-size: 3em; ફૉન્ટ-ફેમિલી: "એડવર્ડિયન સ્ક્રિપ્ટ આઇટીસી", "બ્રશ સ્ક્રિપ્ટ એમટી", કર્સિવ; } પૃષ્ઠ: પ્રથમ-લાઇન {લાઇન-ઊંચાઈ: 100%; }

અને, હંમેશની જેમ, તમે પ્રારંભિક કેપ બનાવવા માટે આ બધા સૂચનોને એકસાથે મૂકી શકો છો કે જે તમારા ફકરોને જાહેરાતો શૈલી આપે છે.

ગ્રાફિકલ પ્રારંભિક કેપનો ઉપયોગ કરવો

જો, તે પછી, તમને હજુ પણ ગમતું નથી કે તમારી પ્રારંભિક કેપ્સ પૃષ્ઠ પર કેવી દેખાય છે, તો તમે જે અસર શોધી રહ્યાં છો તે માટે ગ્રાફિક્સનો ઉપયોગ કરી શકો છો. પરંતુ તમે સીધા ગ્રાફિક્સ પર જવાનું નક્કી કરો તે પહેલાં, તમારે આ પદ્ધતિની ખામીઓથી વાકેફ હોવું જોઈએ:

• છબીઓ વગરના ગ્રાહકો પ્રારંભિક કેપ દેખાશે નહીં, અને છુપાયેલા ટેક્સ્ટને જોઈ શકશે નહીં કે છબી બદલી રહી છે. આ ફકરોને પ્રાપ્ય બનાવી શકે છે, અથવા વાંચવા માટે શ્રેષ્ઠ મુશ્કેલ બનાવી શકે છે.
• ચિત્રો હંમેશા પૃષ્ઠના ડાઉનલોડ સમય પર ઉમેરે છે. જો તમારી પાસે ઘણી બધી પ્રારંભિક કેપ્સ હોય, તો તમે ઘણાં લોકોની લાગણી ઓછી કરવા માટે ડાઉનલોડ સમય નોંધપાત્ર રીતે વધારી શકો છો.
• કેટલાક બ્રાઉઝરો છૂપી પ્રથમ અક્ષર અને છબી બંનેને પ્રદર્શિત કરશે - જે ફકરા લખાણ વિચિત્ર દેખાશે.
• આ વિકલ્પને સ્વચાલિત કરવા માટે ખૂબ જ મુશ્કેલ છે, કારણ કે તમારે જાણવું જરૂરી છે કે પ્રથમ અક્ષર શું છે જેથી તમે યોગ્ય ગ્રાફિકનો ઉપયોગ કરો તેથી, દર વખતે ફકરા સંપાદિત થાય છે, તમારે નવું ગ્રાફિક બનાવવાની જરૂર પડી શકે છે.

પ્રથમ, તમારે પ્રથમ અક્ષરનો ગ્રાફિક બનાવવાની જરૂર છે. મેં "એડવર્ડિયન સ્ક્રિપ્ટ આઇટીસી" ફોન્ટ સાથે અક્ષર "એલ" બનાવવા માટે ફોટોશોપનો ઉપયોગ કર્યો. મેં તેને વિશાળ બનાવ્યો - 300pt કદમાં. પછી મેં ઇમેજની નીચે એકદમ ન્યૂનતમ પત્ર લખ્યો અને છબીની પહોળાઈ અને ઊંચાઈ નોંધ્યું.

પછી મેં મારા ફકરો માટે વર્ગ "કેપીએલ" બનાવ્યો. આ તે છે જ્યાં હું વ્યાખ્યાયિત કરું છું કે કઈ છબીનો ઉપયોગ કરવો, અગ્રણી (રેખાની ઊંચાઇ), અને તેથી વધુ.

ફકરોના ટેક્સ્ટ-ઇન્ડેન્ટ અને પેડિંગ-ટોપને સુયોજિત કરવા માટે તમારે છબી પહોળાઈ અને ઊંચાઈનો ઉપયોગ કરવાની જરૂર છે. મારી એલ ઇમેજ માટે, મને 95 પીએક્સ ઇન્ડેન્ટ અને 72 પીએક્સ પેડિંગની જરૂર છે.

p.capL {લાઇન-ઊંચાઈ: 1em; બેકગ્રાઉન્ડ છબી: url (capL.gif); બેકગ્રાઉન્ડ પુનરાવર્તન: કોઈ પુનરાવર્તન; ટેક્સ્ટ ઇન્ડેન્ટ: 95 પીએક્સ; પેડિંગ-ટોપ: 72 પીએક્સ; }

પરંતુ તે બધા નથી. જો તમે તેને ત્યાંથી છોડો છો, તો પ્રથમ અક્ષર ફકરામાં ડુપ્લિકેટ કરવામાં આવશે - પ્રથમ ગ્રાફિક સાથે, પછી ટેક્સ્ટમાં. તેથી, મેં "પ્રારંભિક" વર્ગ સાથે પ્રથમ ઘટકની આસપાસ સ્પાન ઉમેર્યું - અને તે પત્ર દર્શાવવા માટે બ્રાઉઝરને કહ્યું:

span.initial {display: none; }

અને ગ્રાફિક પછી યોગ્ય રીતે દર્શાવે છે. તમે ટેક્સ્ટ-ઇન્ડેન્ટ સાથે ફકરા પર રમી શકો છો જેથી લખાણને સ્ક્રગ્વેસ્ટમાં પત્ર મળે, જો કે તમે તેને પ્રદર્શિત કરવા માંગો છો.