సుదీర్ఘకాలం HTML ను వ్రాస్తున్న మీలో ఆ మూలకం గుర్తుంచుకోవచ్చు. ఇది తెరపై స్క్రోలింగ్ టెక్స్ట్ యొక్క బ్యానర్ను సృష్టించిన బ్రౌజర్-నిర్దిష్ట మూలకం. ఈ ఎలిమెంట్ HTML స్పెసిఫికేషన్కు జోడించబడలేదు మరియు దాని కోసం మద్దతు బ్రౌజర్లలో విస్తృతంగా మారుతూ ఉంది. సానుకూల మరియు ప్రతికూల రెండు - ఈ మూలకం యొక్క ఉపయోగం గురించి ప్రజలు తరచుగా చాలా బలమైన అభిప్రాయాలను కలిగి ఉన్నారు. కానీ మీరు దాన్ని ప్రేమిస్తారా లేదా అసహ్యించుకున్నానా, అది కనిపించే బాక్స్ సరిహద్దులను కప్పి ఉంచే కంటెంట్ను రూపొందించడానికి ఉద్దేశించినది.
బలమైన బ్రౌజర్ల ద్వారా పూర్తిగా అమలు చేయబడని కారణంగా, ఇది ఒక దృశ్య ప్రభావంగా పరిగణించబడిందని మరియు ఇది నిర్మాణాన్ని నిర్వచిస్తున్న HTML చేత నిర్వచించబడదు. బదులుగా, దృశ్యమాన లేదా ప్రదర్శన ప్రభావాలను CSS చేత నిర్వహించాలి. మరియు CSS3 అంశాలకు మార్క్యూ ప్రభావాన్ని ఎలా జోడించాలో నియంత్రించడానికి మార్క్యూ మాడ్యూల్ను జోడిస్తుంది.
కొత్త CSS3 లక్షణాలు
ఓవర్ఫ్లో-స్టైల్, మార్క్యూ-శైలి, మార్క్యూ-ప్లే-కౌంట్, మార్క్యూ-దిశ మరియు మార్క్యూ-స్పీడ్: మీ కంటెంట్ మార్క్యూలో ఎలా ప్రదర్శించాలో నియంత్రించడానికి ఐదు కొత్త లక్షణాలను జోడిస్తుంది.
ఓవర్ఫ్లో-శైలి
ఓవర్ఫ్లో-శైలి ఆస్తి (నేను వ్యాసం CSS ఫ్లోఫ్ లో చర్చించిన ఇది) కంటెంట్ బాక్స్ ఓవర్ఫ్లో విషయాలు కోసం ఇష్టపడే శైలి నిర్వచిస్తుంది. మీరు మార్క్యూ-లైన్ లేదా మార్క్యూ-బ్లాక్కు విలువను అమర్చినట్లయితే మీ కంటెంట్ ఎడమ / కుడి (మార్క్యూ-లైన్) లేదా అప్ / డౌన్ (మార్క్యూ-బ్లాక్) లో మరియు వెలుపలికి మారుతుంది.
మార్క్యూ తరహా
కంటెంట్ ఎలా వీక్షించబడుతుందో (మరియు వెలుపల) ఎలా మారుస్తుందో ఈ ఆస్తి వివరిస్తుంది.
ఎంపికలు స్క్రోల్, స్లయిడ్ మరియు ప్రత్యామ్నాయ ఉంటాయి. స్క్రోల్ పూర్తిగా తెరపైకి కంటెంట్తో మొదలవుతుంది, ఇది పూర్తిగా తెరపైకి వచ్చేవరకు కనిపించే ప్రాంతంపై కదులుతుంది. స్లయిడ్ పూర్తిగా తెరవెనుక కంటెంట్తో మొదలవుతుంది మరియు కంటెంట్ తెరపైకి పూర్తిగా మారిపోయే వరకు అది అంతటా కదులుతుంది మరియు తెరపై స్లయిడ్ చేయడానికి మరింత కంటెంట్ లేవు.
చివరగా, ప్రత్యామ్నాయ పక్క నుండి ప్రక్కన కంటెంట్ బౌన్స్ అవుతుంది, ముందుకు వెనుకకు స్లైడింగ్.
మార్క్యూ-నాటకం-లెక్కింపు
MARQUEE మూలకాన్ని ఉపయోగించి లోపాలలో ఒకటి మార్క్యూ ఎప్పుడూ ఆగుతుంది. కానీ శైలి ఆస్తి మార్క్యూ-ప్లే-కౌంట్తో మీరు ఒక నిర్దిష్ట సంఖ్యలో కంటెంట్ని తిప్పడానికి మరియు ఆఫ్ కంటెంట్ను తిప్పడానికి మార్క్యూని సెట్ చేయవచ్చు.
మార్క్యూ దిశ
మీరు స్క్రీన్పై స్క్రోల్ చేయవలసిన దిశను కూడా ఎంచుకోవచ్చు. ఓవర్ఫ్లో-శైలి మార్క్యూ-లైన్ మరియు ఓవర్ఫ్లో-శైలి మార్క్యూ-బ్లాక్ ఉన్నప్పుడు ఓవర్ఫ్లో-శైలి మార్క్యూ-లైన్ మరియు అప్ లేదా డౌన్ చేస్తున్నప్పుడు, ముందుకు మరియు రివర్స్ విలువలు టెక్స్ట్ దిశాత్మకతపై ఆధారపడి ఉంటాయి.
మార్క్యూ-డైరెక్షన్ వివరాలు
| ఓవర్ఫ్లో-శైలి | భాషా దిశ | ఎదురు | రివర్స్ |
|---|---|---|---|
| మార్క్యూ లైన్ | ltr | వదిలి | కుడి |
| RTL | కుడి | వదిలి | |
| మార్క్యూ-బ్లాక్ | అప్ | డౌన్ |
మార్క్యూ వేగం
ఈ ఆస్తి ఎంత వేగంగా తెరపై కంటెంట్ స్క్రోల్లను నిర్ణయిస్తుంది. విలువలు నెమ్మదిగా, సాధారణమైనవి మరియు వేగవంతమైనవి. అసలు వేగం కంటెంట్ మరియు బ్రౌజర్ ప్రదర్శించడం మీద ఆధారపడి ఉంటుంది, కానీ విలువలు నెమ్మదిగా ఉండాలి, ఇది నెమ్మదిగా ఉంటుంది, ఇది నెమ్మదిగా ఉంటుంది, ఇది నెమ్మదిగా కంటే నెమ్మదిగా ఉంటుంది.
మార్క్వీ ప్రాపర్టీస్ యొక్క బ్రౌజర్ మద్దతు
మీరు CSS మార్క్యూ మూలకాలు పని చేయడానికి విక్రేత పూర్వపదాలను ఉపయోగించాలి. ఇవి క్రింది విధంగా ఉన్నాయి:
| CSS3 | విక్రేత ప్రిఫిక్స్ |
|---|---|
| ఓవర్ఫ్లో-ఎక్స్: మార్క్యూ-లైన్; | ఓవర్ఫ్లో-ఎక్స్: -వెబ్కిట్-మార్క్యూ; |
| మార్క్యూ తరహా | -webkit-మార్క్యూ తరహా |
| మార్క్యూ-నాటకం-లెక్కింపు | -webkit-మార్క్యూ-పునరావృత్తులు |
| మార్క్యూ-దిశ: ముందుకు | రివర్స్; | -వెబ్కిట్-మార్క్యూ-దిశ: ముందుకు | వెనుకకు; |
| మార్క్యూ వేగం | -webkit-మార్క్యూ వేగం |
| సమానమైనది కాదు | -webkit-మార్క్యూ-వృద్ధికి |
మార్క్యూలో స్క్రీన్పై కంటెంట్ స్క్రోల్లు వలె దశలను ఎలా పెద్దగా లేదా చిన్నదిగా నిర్వచించాలో చివరి ఆస్తి మిమ్మల్ని అనుమతిస్తుంది.
మీ మార్క్యూ పని చేయడానికి, ముందుగా విక్రేత ముందు విలువలు ఉంచండి మరియు వాటిని CSS3 వివరణ విలువలతో అనుసరించండి. ఉదాహరణకు, ఇక్కడ ఒక మార్క్యూ కోసం CSS ఉంది, ఇది ఎడమవైపు నుండి కుడికి 200x50 బాక్స్ లోపల ఐదుసార్లు స్క్రోల్ చేస్తుంది.
{
వెడల్పు: 200px; ఎత్తు: 50px; తెల్లని స్థలం: nowrap;
overflow: hidden;
ఓవర్ఫ్లో-x: -webkit-మార్క్యూ;
-వెబ్కిట్-మార్క్యూ-దిశ: ముందుకు;
-వెబ్కిట్-మార్క్యూ-శైలి: స్క్రోల్;
-వెబ్కిట్-మార్క్యూ-స్పీడ్: సాధారణ;
-వెబ్కిట్-మార్క్యూ-ఇంక్రిమెంట్: చిన్న;
-వెబ్కిట్-మార్క్యూ-పునరావృతం: 5;
ఓవర్ఫ్లో-ఎక్స్: మార్క్యూ-లైన్;
మార్క్యూ-దిశ: ముందుకు;
మార్క్యూ-శైలి: స్క్రోల్;
మార్క్యూ-స్పీడ్: సాధారణ;
మార్క్యూ-ప్లే-కౌంట్: 5;
}