మీ పేరాలకు ఫాన్సీ ప్రారంభ క్యాప్లను సృష్టించడానికి CSS ను ఎలా ఉపయోగించాలో తెలుసుకోండి. మీ ప్రారంభ టోపీ కోసం ఒక గ్రాఫికల్ చిత్రం ఉపయోగించడానికి ఒక సాధారణ చిత్రం భర్తీ టెక్నిక్ కూడా ఉంది.
ప్రారంభ క్యాప్స్ ప్రాథమిక స్టైల్స్
పత్రాల్లో ప్రాథమిక క్యాప్స్ యొక్క మూడు ప్రాథమిక శైలులు ఉన్నాయి:
- పెరిగిన - అత్యంత సాధారణమైనది, ఇక్కడ మొదటి అక్షరం పెద్దది మరియు ప్రస్తుత పాఠం వలె అదే రేఖలో ఉంటుంది.
- పడిపోయింది - కూడా చాలా సాధారణ, మొదటి లేఖ పెద్దది మరియు టెక్స్ట్ యొక్క మొదటి లైన్ క్రింద పడిపోయింది పేరు. క్రింది టెక్స్ట్ అప్పుడు దాని చుట్టూ తేలుతుంది.
- ప్రక్కనే - మిగిలిన అక్షరం పక్కన ఒక లేఖలో మొదటి అక్షరం ఉన్నది. ఇది వెబ్ రూపకల్పన కంటే ముద్రణలో సర్వసాధారణంగా ఉంటుంది.
ప్రారంభ క్యాప్స్ లేదా డ్రాప్ క్యాప్స్ బాగా తెలిసినవి. వారు టెక్స్ట్ యొక్క లేకపోతే దీర్ఘ మరియు బోరింగ్ పరిధుల దుస్తులు ధరించే ఒక గొప్ప మార్గం. మరియు CSS లక్షణంతో: మొదటి-లేఖ, మీరు మీ మొదటి అక్షరాలను ఫ్యాన్సియెర్స్ ఎలా చేయాలో సులభంగా నిర్వచించవచ్చు.
ఒక సాధారణ ప్రారంభ క్యాప్ను సృష్టించండి
మొదటి పేరే సూడో-మూలకంతో మీ పేరా యొక్క మొదటి అక్షరాన్ని పెద్ద పరిమాణంలో తయారుచేయడం,
p: మొదటి-లేఖ {font-size: 3em; }
కానీ అనేక బ్రౌజర్లు మొదటి అక్షరాన్ని లైన్లోని మిగిలిన భాగాల కంటే పెద్దవిగా ఉన్నాయని చూస్తారు, అందువల్ల వారు మొదటి అక్షరానికి అర్ధవంతం కావాల్సిన దానికి సమానం అయ్యారు, మిగిలిన భాగాన్ని కాదు. అదృష్టవశాత్తూ, ఇది మొదటి లైన్ సూడో-మూలకం మరియు లైన్-ఎత్తు ఆస్తితో పరిష్కరించడానికి సులభం:
p: మొదటి-లేఖ {font-size: 3em; }
p: మొదటి-లైన్ {line-height: 1em; }
మీరు మీ టెక్స్ట్ కోసం సరైన పరిమాణాన్ని కనుగొనే వరకు మీ పత్రంలో ఉన్న లైన్ ఎత్తుతో ఆడండి.
మీ ప్రారంభ క్యాప్తో ప్లే చేయండి
ఒక ప్రారంభ టోపీని ఎలా సృష్టించాలో మీరు అర్థం చేసుకున్న తర్వాత, మీరు దానిని నిలబడి చేయటానికి ఫాన్సీ బట్టలులో వేసుకోవచ్చు. రంగులతో, నేపథ్య రంగుల్లో, సరిహద్దులతో లేదా మీ ఫాన్సీని తాకింది. మొదటి అక్షరానికి మీ ఫాంట్ మరియు నేపథ్య రంగు యొక్క రంగులను రివర్స్ చేయడం చాలా సులభం:
p: మొదటి-లేఖ {
font-size: 300%;
నేపథ్య రంగు: # 000;
రంగు: # ff;
}
p: మొదటి-లైన్ {లైన్-ఎత్తు: 100%; }
ఇంకొక ట్రిక్ మొదటి రేఖకు కేంద్రం. ఇది CSS తో గమ్మత్తైనది, ఎందుకంటే మీ లేఅవుట్ సరళమైనది అయినట్లయితే టెక్స్ట్ లైన్ మధ్యలో భిన్నంగా ఉంటుంది. కానీ కొంతమంది విలువలతో చుట్టూ ప్లే చేస్తే, మొదటి అక్షరం మధ్యలో కనిపించేలా చేయడానికి మీ మొదటి పంక్తిని ఇండెంట్ చేయవచ్చు. పేరా యొక్క వచనం-ఇండెంట్లో కుడివైపు కనిపించే వరకు శాతంతో ప్లే చేయండి:
p: మొదటి-లేఖ {
font-size: 300%;
నేపథ్య రంగు: # 000;
రంగు: # ff;
}
p: మొదటి-లైన్ {లైన్-ఎత్తు: 100%; }
ప్రక్కన ప్రారంభ కాప్స్ CSS తో హార్డ్ ఉంటాయి
వివిధ బ్రౌజర్లు భిన్నంగా ఫాంట్లు ప్రదర్శించడానికి ఎందుకంటే ప్రక్కనే ప్రారంభ క్యాప్స్ CSS తో కష్టం. CSS లో ఒక ప్రక్కన టోపీ సృష్టించడం వెనుక ఆలోచన ఇది (ఎడమ) ఒక ప్రతికూల విలువ పుష్ మొదటి పంక్తిలో టెక్స్ట్ ఇండెంట్ ఆస్తి ఉపయోగిస్తారు. మీరు కొంత మొత్తాన్ని ఆ పేరా యొక్క ఎడమ మార్జిన్ను మార్చాలి. పేరా మంచిగా కనిపించే వరకు ఈ సంఖ్యలు ఆడండి.
p {
టెక్స్ట్-ఇండెంట్: -2.5;
margin-left: 3em;
}
p: మొదటి-లేఖ {font-size: 3em; }
p: మొదటి-లైన్ {లైన్-ఎత్తు: 100%; }
నిజంగా ఫ్యాన్సీ ప్రారంభ క్యాప్లు పొందడం
ఒక ఫాన్సీ ప్రారంభ టోపీని సృష్టించడానికి ఉత్తమమైన మార్గం ఫాంట్ను మరింత అలంకరణ ఫాంట్ కుటుంబానికి మార్చడం. మీరు ఒక సాధారణ ఫాంట్ తరువాత వరుస ఫాంట్లని ఉపయోగించినట్లయితే, మీ ప్రారంభ క్యాప్ బాగా ఉందని మీకు హామీ ఇవ్వగలదు, అందువల్ల మీ కస్టమర్లు చూడగలరు, ప్రాప్యత మరియు వినియోగ సమస్యల లేకుండా.
p: మొదటి-లేఖ {
font-size: 3em;
font-family: "ఎడ్వర్డియన్ స్క్రిప్ట్ ఐటిసి", "బ్రష్ స్క్రిప్ట్ ఎంటీ", కర్సివ్;
}
p: మొదటి-లైన్ {లైన్-ఎత్తు: 100%; }
మరియు, ఎప్పటిలాగానే, మీ పేరాకు యాడ్ శైలిని ప్రారంభ క్యాప్ సృష్టించడానికి మీరు ఈ అన్ని సూచనలు కలిసి ఉంచవచ్చు.
ఒక గ్రాఫికల్ ప్రారంభ క్యాప్ ఉపయోగించడం
ఆ తరువాత, మీ ప్రారంభ క్యాప్లు పేజీలో ఎలా కనిపిస్తాయో మీరు ఇప్పటికీ ఇష్టపడకపోతే, మీరు వెతుకుతున్న ఖచ్చితమైన ప్రభావాన్ని పొందడానికి గ్రాఫిక్స్ను ఆశ్రయించవచ్చు. మీరు గ్రాఫికుకు నేరుగా తరలించడానికి ముందు, ఈ పద్ధతి యొక్క ప్రతికూలతలు గురించి తెలుసుకోవాలి:
- చిత్రాల లేకుండా వినియోగదారుడు ప్రారంభ టోపీని చూడలేరు మరియు చిత్రం మార్చిన దాచిన వచనాన్ని చూడలేరు. ఇది పేరాను అసాధ్యమైనదిగా లేదా చదవడానికి చాలా కష్టంగా ఉంటుంది.
- చిత్రాలు ఎల్లప్పుడూ ఒక పేజీ యొక్క డౌన్లోడ్ సమయం జోడించండి. మీకు ప్రారంభ క్యాప్లు చాలా ఉంటే, మీరు చాలా మందికి తక్కువగా భావించే వాటి కోసం డౌన్లోడ్ సమయం గణనీయంగా పెరుగుతుంది.
- కొన్ని బ్రౌజర్లు దాచిన మొదటి అక్షరం మరియు పేరాగ్రాఫ్ టెక్స్ట్ బేసిని సరిచూసుకోగల ఇమేజ్ను ప్రదర్శిస్తుంది.
- ఈ ఐచ్ఛికాన్ని ఆటోమేట్ చేయడం చాలా కష్టమే, మీరు సరిగ్గా మొదటి అక్షరం ఏమిటో తెలుసుకోవాలి కనుక మీరు సరైన గ్రాఫిక్ని వాడతారు. కాబట్టి, పేరా సవరించిన ప్రతిసారీ మీరు కొత్త గ్రాఫిక్ని సృష్టించాలి.
మొదట, మీరు మొదటి అక్షరం యొక్క గ్రాఫిక్ని సృష్టించాలి. మేము ఫాంట్ "ఎడ్వర్డియన్ స్క్రిప్ట్ ఐటీసీ" తో లేఖ L ను రూపొందించడానికి Photoshop ను ఉపయోగించాము. మేము అది భారీగా చేసింది - పరిమాణం లో 300pt. మేము ఆ చిత్రం చుట్టూ ఉన్న కనిష్ట స్థాయికి కత్తిరించాం మరియు చిత్రం వెడల్పు మరియు ఎత్తును గుర్తించాము.
అప్పుడు మన పేరా కోసం ఒక క్లాస్ "క్యాప్" సృష్టించాము. ఇది ఏది ఉపయోగించాలో ప్రతిబింబిస్తుంది, ఇది ప్రముఖ (లైన్-ఎత్తు), మరియు అందువలన.
మీరు పేరా యొక్క టెక్స్ట్-ఇండెంట్ మరియు పాడింగ్-టాప్ సెట్ చేయడానికి చిత్రం వెడల్పు మరియు ఎత్తును ఉపయోగించాలి. మా L చిత్రం కోసం, మేము 95px ఇండెంట్ మరియు 72px ప్యాడింగ్ అవసరం.
p.capL {
లైన్-ఎత్తు: 1 గంట;
నేపథ్య చిత్రం: url (capL.gif);
background-repeat: no-repeat;
టెక్స్ట్-ఇండెంట్: 95px;
పాడింగ్-టాప్: 72px;
}
కానీ అది కాదు. మీరు దాన్ని వదిలేస్తే, మొదటి అక్షరం పేరాలో నకిలీ చేయబడుతుంది, మొదట గ్రాఫిక్తో, అప్పుడు టెక్స్ట్లో ఉంటుంది. కాబట్టి మేము "మొదటి" తరగతితో మొదటి మూలకం చుట్టూ ఒక span ను జోడించి, ఆ లేఖను ప్రదర్శించకుండా బ్రౌజర్కు ఇలా చెప్పాము:
span.initial {display: none; }
మరియు గ్రాఫిక్ సరిగ్గా ప్రదర్శిస్తుంది. అక్షర పాఠానికి కుడివైపున snugged పొందడానికి మీరు పేరాపై టెక్స్ట్-ఇండెంట్తో ప్లే చేసుకోవచ్చు, అయితే ఇది ప్రదర్శించాలనుకుంటున్నాను.
