హెయిర్ స్టైలింగ్ (క్షితిజసమాంతర రూల్) ట్యాగ్

HR ట్యాగ్లతో వెబ్ పుటలలో ఆసక్తికరమైన చూస్తున్న పంక్తులను రూపొందించడం

మీరు మీ వెబ్సైట్లకు సమాంతర, విభజక-శైలి పంక్తులను జోడించాలంటే, మీకు కొన్ని ఎంపికలు ఉన్నాయి. మీరు ఆ పేజీల యొక్క వాస్తవ చిత్ర ఫైళ్ళను మీ పేజీకి చేర్చవచ్చు, కానీ ఆ సైట్ను పనితీరుపై ప్రతికూల ప్రభావాన్ని కలిగి ఉన్న మీ ఫైళ్ళను తిరిగి పొందడానికి మరియు లోడ్ చేయడానికి మీ బ్రౌజర్ అవసరమవుతుంది.

మీరు సరిహద్దులను ఎగువ భాగంలో లేదా మూలకం యొక్క దిగువ భాగంలో పని చేసే సరిహద్దులను జోడించడానికి CSS సరిహద్దు లక్షణాన్ని ఉపయోగించడం, మీ విభజన పంక్తిని సమర్థవంతంగా సృష్టించడం.

చివరగా, మీరు క్షితిజ సమాంతర నియమం కోసం HTML మూలకం ఉపయోగించవచ్చు -

క్షితిజ సమాంతర నియమం ఎలిమెంట్

మీరు ఎప్పుడైనా ఒక వెబ్ పేజీలో ఒక మూలకాన్ని ఉంటే, ఈ పంక్తులు ప్రదర్శించబడే డిఫాల్ట్ మార్గం ఆదర్శంగా లేదని మీరు గుర్తించారు. మీరు మీ సైట్ ఎలా కనిపించాలి అనేదానికి అనుగుణంగా ఈ అంశాల యొక్క దృశ్యమాన ఆకృతిని సర్దుబాటు చేయడానికి మీరు CSS కి మారాలి.

బ్రౌజర్ను ప్రదర్శించడానికి కోరుకుంటున్న విధంగా ఒక ప్రాథమిక HR ట్యాగ్ ప్రదర్శించబడుతుంది. ఆధునిక బ్రౌజర్లు సాధారణంగా అన్స్టాల్డ్ హెచ్ ఆర్ ట్యాగ్లను 100% వెడల్పుతో, 2px ఎత్తులో, మరియు నలుపు రంగులో ఒక 3D సరిహద్దును సృష్టించడం.

ఇక్కడ ఒక ప్రామాణిక HR మూలకం యొక్క ఉదాహరణ లేదా మీరు ఆధునిక బ్రౌజర్లలో ఒక అస్థిర HR ఎలా కనిపిస్తుందో ఈ చిత్రంలో చూడవచ్చు.

వెడల్పు మరియు ఎత్తు బ్రౌజర్లు అక్రాస్ ఉన్నాయి

వెబ్ బ్రౌజర్లలో స్థిరంగా ఉండే ఏకైక శైలులు వెడల్పు మరియు శైలులు. ఈ రేఖ ఎంత పెద్దది అని నిర్వచించాలి. మీరు వెడల్పు మరియు ఎత్తు నిర్వచించకపోతే డిఫాల్ట్ వెడల్పు 100% మరియు డిఫాల్ట్ ఎత్తు 2px.

ఈ ఉదాహరణలో వెడల్పు పేరెంట్ మూలకం యొక్క 50% (క్రింద ఉన్న ఈ ఉదాహరణలు, అన్ని ఇన్లైన్ శైలులను కలిగి ఉంటాయి.ఒక ఉత్పత్తి అమరికలో, ఈ శైలులు వాస్తవానికి బాహ్య శైలి షీట్ లో అన్ని మీ పేజీల అంతటా నిర్వహణ కోసం వ్రాయబడతాయి):

శైలి = "వెడల్పు: 50%;">

మరియు ఈ ఉదాహరణలో ఎత్తు 2 ని ఉంది:

శైలి = "ఎత్తు: 2em;">

బోర్డర్స్ మార్చడం సవాలుగా ఉంటుంది

ఆధునిక బ్రౌజర్లలో, బ్రౌజర్ సరిహద్దును సర్దుబాటు చేయడం ద్వారా లైన్ నిర్మించబడుతుంది. మీరు శైలి ఆస్తితో సరిహద్దుని తొలగిస్తే, ఆ పుట ఆ పేజీలో కనిపించదు. ఈ ఉదాహరణలో మీరు చూడగలిగినట్లుగా (బాగా, మీరు కనిపించవు, పంక్తులు కనిపించవు):

శైలి = "సరిహద్దు: ఏదీకాదు;">

సరిహద్దు పరిమాణం, రంగు మరియు శైలి సర్దుబాటు లైన్ వివిధ చూడండి మరియు అన్ని ఆధునిక బ్రౌజర్లలో అదే ప్రభావం చేస్తుంది చేస్తుంది. ఉదాహరణకు, ఈ ప్రదర్శనలో సరిహద్దు ఎరుపు, గీతల, 1px వెడల్పు:

శైలి = "సరిహద్దు: 1px గరిష్టంగా # 000;">

మీరు సరిహద్దు మరియు ఎత్తును మార్చుకుంటే, ఆధునిక బ్రౌజర్లలో చేసే వాటి కంటే శైలులు చాలా పాత బ్రౌజర్లలో కొద్దిగా భిన్నంగా కనిపిస్తాయి. మీరు ఈ ఉదాహరణలో చూడగలిగినట్లయితే, మీరు IE7 లో మరియు దిగువ (ఇది woefully గడువు ముగిసిన మరియు ఇకపై మైక్రోసాఫ్ట్ మద్దతు ఇవ్వని బ్రౌజర్) లో వీక్షించినట్లయితే, ఇతర బ్రౌజర్లలో (IE8 మరియు దానితో సహా) :

శైలి = "ఎత్తు: 1.5 ని; వెడల్పు: 25: సరిహద్దు: 1px ఘన # 000;">

ఆ పాతకాలపు బ్రౌజర్లు ఈరోజు వెబ్ డిజైన్లో చాలా ఆందోళన చెందాయి, ఎందుకంటే ఇవి ఎక్కువగా ఆధునిక ఎంపికలతో భర్తీ చేయబడ్డాయి.

నేపథ్య చిత్రంతో అలంకార లైన్ను చేయండి

ఒక రంగుకు బదులుగా, మీరు మీ HR కోసం నేపథ్య చిత్రాన్ని నిర్వచించగలరు, కాబట్టి మీకు కావలసిన విధంగా అది సరిగ్గా కనిపిస్తుంది, కానీ ఇప్పటికీ మీ మార్కప్లో అర్థాన్ని ప్రదర్శిస్తుంది.

ఈ ఉదాహరణలో మేము మూడు వేర్వేరు పంక్తుల యొక్క ఒక చిత్రాన్ని ఉపయోగించాము. పునరావృతం లేకుండా నేపథ్య చిత్రంగా దీన్ని సెట్ చేయడం ద్వారా, మీరు పుస్తకాలలో చూస్తున్నట్లుగా కనిపిస్తున్న కంటెంట్లో విరామం సృష్టిస్తుంది:

style = "height: 20px; background: #ff url (aa010307.gif) నో-రిపీట్ స్క్రోల్ సెంటర్; సరిహద్దు: ఏదీకాదు;">

ఆర్ ఎలిమెంట్స్ ట్రాన్స్ఫార్మింగ్

CSS3 తో, మీరు మీ లైన్లను మరింత ఆసక్తికరంగా చేయవచ్చు. HR మూలకం సాంప్రదాయకంగా ఒక సమాంతర రేఖ, కానీ CSS పరివర్తనం ఆస్తితో, మీరు ఎలా చూస్తారో మీరు మార్చవచ్చు. హెచ్ ఆర్ ఎలిమెంట్ మీద అభిమాన పరివర్తన రొటేషన్ ను మార్చడమే.

ఇది మీ ఆర్ ఎలిమెంట్ను తిప్పవచ్చు, తద్వారా అది కొద్దిగా వికర్ణంగా ఉంటుంది:

hr {
-మోజ్-పరివర్తనం: రొటేట్ (10deg);
-వెబ్కిట్-పరివర్తనం: రొటేట్ (10deg);
-ఒక-పరివర్తనం: రొటేట్ (10deg);
-ms- పరివర్తనం: రొటేట్ (10deg);
పరివర్తనం: రొటేట్ (10deg);
}

లేదా మీరు దానిని నిలువుగా చేయవచ్చు కనుక అది పూర్తిగా నిలువుగా ఉంటుంది:

hr {
-మోజ్-పరివర్తనం: రొటేట్ (90deg);
-వెబ్కిట్-పరివర్తనం: రొటేట్ (90deg);
-ఇ-ట్రాన్స్ఫార్మ్: రొటేట్ (90deg);
-ms- పరివర్తనం: రొటేట్ (90deg);
పరివర్తనం: రొటేట్ (90deg);
}

ఇది డాక్యుమెంట్లో దాని ప్రస్తుత స్థానాన్ని ఆధారంగా HR ను తిరుగుతుంది అని గుర్తుంచుకోండి, కనుక మీకు కావలసిన చోటును పొందడం కోసం మీరు స్థానమును సర్దుబాటు చేయాలి. ఇది నమూనాకు నిలువు వరుసలను జోడించడానికి దీనిని ఉపయోగించడానికి సిఫారసు చేయలేదు, కానీ అది ఒక ఆసక్తికరమైన ప్రభావాన్ని పొందడానికి ఒక మార్గం.

మీ పేజీలలో లైన్స్ ను మరో మార్గం

కొందరు వ్యక్తులు HR మూలకాన్ని ఉపయోగించడం బదులుగా ఇతర అంశాల సరిహద్దులపై ఆధారపడతారు. కానీ కొన్నిసార్లు HR చాలా సరిఅయిన మరియు హద్దులను సెటప్ చెయ్యడానికి ప్రయత్నిస్తున్నదాని కంటే ఉపయోగించడానికి సులభం. కొన్ని బ్రౌజర్ల యొక్క బాక్స్ మోడల్ సమస్యలు కూడా సరిహద్దుని సరిచేసుకోవచ్చు.