CSS ప్రారంభ క్యాప్స్

CSS మరియు చిత్రాలను ఉపయోగించి ఫ్యాన్సీ ప్రారంభ క్యాప్స్ ఎలా సృష్టించాలో తెలుసుకోండి

మీ పేరాలకు ఫాన్సీ ప్రారంభ క్యాప్లను సృష్టించడానికి 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%; } p {text-indent: 45% ; }

ఆరంభ ప్రారంభ క్యాప్స్ CSS తో హార్డ్ ఉంటాయి

వివిధ బ్రౌజర్లు భిన్నంగా ఫాంట్లు ప్రదర్శించడానికి ఎందుకంటే ప్రక్కనే ప్రారంభ క్యాప్స్ CSS తో కష్టం. CSS లో ఒక ప్రక్కన టోపీ సృష్టించడం వెనుక ఆలోచన ఇది (ఎడమ) ఒక ప్రతికూల విలువ పుష్ మొదటి పంక్తిలో టెక్స్ట్ ఇండెంట్ ఆస్తి ఉపయోగిస్తారు. మీరు కొంత మొత్తాన్ని ఆ పేరా యొక్క ఎడమ మార్జిన్ను మార్చాలి. పేరా మంచిగా కనిపించే వరకు ఈ సంఖ్యలు ఆడండి.

p {text-indent: -2.5em; 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 {line-height: 1em; నేపథ్య చిత్రం: url (capL.gif); background-repeat: no-repeat; టెక్స్ట్-ఇండెంట్: 95px; పాడింగ్-టాప్: 72px; }

కానీ అది కాదు. మీరు దాన్ని వదిలినట్లయితే, మొదటి అక్షరం పేరాలో నకిలీ చేయబడుతుంది - మొదట గ్రాఫిక్లో, అప్పుడు టెక్స్ట్లో. కాబట్టి, తరగతి "ప్రారంభ" తో మొదటి మూలకం చుట్టూ ఒక స్పాన్ని జోడించాను - ఆ లేఖను ప్రదర్శించకుండా బ్రౌజర్కి ఇలా చెప్పాడు:

span.initial {display: none; }

మరియు గ్రాఫిక్ సరిగ్గా ప్రదర్శిస్తుంది. అక్షర పాఠానికి కుడివైపున snugged పొందడానికి మీరు పేరాపై టెక్స్ట్-ఇండెంట్తో ప్లే చేసుకోవచ్చు, అయితే ఇది ప్రదర్శించాలనుకుంటున్నాను.