విషయము
- 01. సైట్ రంగు పథకాలతో చిత్రాలను సరిపోల్చండి
- 02. గ్రిడ్ యొక్క చివరి వరుసలో స్థలాన్ని సమానంగా భాగస్వామ్యం చేయండి
- 03. బాక్స్-నీడతో కణ యానిమేషన్లను సృష్టించండి
- 04. పరివర్తనాలతో పాలిహెడ్రా యానిమేట్ చేయండి
- 05. స్థానానికి మాస్టర్ ’కాల్ ()’
- 06. బాక్స్ మోడల్‌ను ‘బాక్స్-సైజింగ్’ తో సేన్ చేయండి
- 07. CSS తో నిలువుగా కేంద్రం
- 08. సంబంధిత వస్తువుల బ్యాంకును లక్ష్యంగా చేసుకోండి
- 09. హైఫనేషన్‌ను నియంత్రించండి
- 10. మోడ్‌లు రాయడం వల్ల ప్రయోజనం పొందండి
- 11. ప్రవణతలను అసాధారణ మార్గాల్లో వాడండి
- 12. లింక్‌లపై స్ట్రింగ్-మ్యాచింగ్ ఉపయోగించండి
- 13. మీ కోసం FOUT పని చేయండి
- 14. నేపథ్యాల కోసం SVG ని అన్వేషించండి
- 15. 3D పరివర్తనాలతో వినియోగదారులను కేంద్రీకరించండి
- 16. CSS మరియు గణితాలతో వృత్తాకార మెనులను సృష్టించండి
- 17. హోవర్‌లో లింక్‌లను యానిమేట్ చేయండి
- 18. సాధారణ కీఫ్రేమ్ యానిమేషన్లు చేయండి
- 19. నీడలతో తేలియాడే 3D ప్రభావాలను సృష్టించండి
- 20. ’: లక్ష్యం’ ఉపయోగించి పేజీ ఎలిమెంట్లను నవీకరించండి
- 21. సూక్ష్మ యానిమేషన్లతో అభిప్రాయాన్ని అందించండి
- 22. ‘విల్-యానిమేట్’ కోసం సిద్ధం చేయండి
- 23. ఇన్పుట్ ఫీల్డ్లను మానవీకరించండి
- 24. CSS యానిమేషన్లను పాజ్ చేసి ప్లే చేయండి
- 25. CSS వేరియబుల్స్ ఉపయోగించవద్దు
ఏదైనా సాంకేతిక పరిజ్ఞానంతో ఏదో ఒక సమయంలో, చేయగలిగేది చాలా ఎక్కువ జరిగిందనే భావన ఉంది. ఏదైనా కొత్తగా మరియు మెరిసేటప్పుడు, ఆసక్తి తగ్గుతుంది మరియు తదుపరి పెద్ద విషయానికి శ్రద్ధ చూపుతుంది. వెబ్ పరిశ్రమలో ఇది తరచూ జరుగుతుంది, ఇది సాంకేతిక పరిజ్ఞానం యొక్క ఒక నిర్దిష్ట అంశానికి ముందు, ముందుగానే లేదా తరువాత, ప్రాపంచిక స్థితికి పంపించేటప్పుడు చాలా ఉత్సాహంగా ఉంటుంది.
CSS మొదటిసారి కనిపించినప్పుడు, ఇది విప్లవాత్మకమైనది, మరియు కాలక్రమేణా ఇది డిజైనర్లను సరళమైన, గట్టిగా రూపొందించిన మరియు అందమైన వెబ్ పేజీ లేఅవుట్‌లను రూపొందించడానికి వీలు కల్పించింది. అయితే, ఆలస్యంగా, CSS అలసిపోయిందని మరియు బహుశా ఎండలో సమయం పోయిందని వివిధ ప్రాంతాల నుండి సూచనలు వచ్చాయి.
CSS ప్రపంచంలో ఇంకా చాలా ఉత్సాహం మరియు జీవితం ఉందని నేను ప్రదర్శించాలనుకుంటున్నాను, అది మీరు ఇంకా అన్వేషించని అత్యాధునిక లక్షణాలలో ఉందా లేదా మీరు ఇంతకుముందు పరిగణించని విధంగా CSS యొక్క ఒక అంశాన్ని ఉపయోగించడం ద్వారా.
పరిశ్రమలోని అగ్రశ్రేణి CSS నిపుణుల నుండి కొన్ని చిట్కాలు ఇక్కడ ఉన్నాయి.
(గమనిక: ఈ లక్షణంలోని కొన్ని పద్ధతులు అత్యాధునికమైనవి మరియు అన్ని బ్రౌజర్‌లలో పూర్తిగా మద్దతు ఇవ్వకపోవచ్చు. ఏదైనా పనిని ప్రత్యక్ష ప్రసారం చేయడానికి ముందు పూర్తిగా పరీక్షించండి మరియు ఫాల్‌బ్యాక్‌లు ఉన్నాయని నిర్ధారించుకోండి.)
01. సైట్ రంగు పథకాలతో చిత్రాలను సరిపోల్చండి
క్రిస్టోఫర్ ష్మిట్, సమావేశ నిర్వాహకుడు
సమావేశాలకు వారి స్వంత రంగు పథకాలు ఉన్నాయి మరియు చాలా మంది స్పీకర్లతో, పోర్ట్రెయిట్‌లను నిర్వహించడానికి వర్క్‌ఫ్లో సంక్లిష్టంగా ఉంటుంది. ఫిల్టర్‌లను మాన్యువల్‌గా వర్తింపజేయడం స్కేల్ కాదు మరియు నిర్దిష్ట ఫోటోషాప్ చర్యకు ప్రాప్యత కలిగి ఉండటంపై ఆధారపడుతుంది. నేను ఇప్పుడు హై రెస్ గ్రేస్కేల్ పిఎన్‌జిలను ఉపయోగిస్తున్నాను మరియు సిఎస్ఎస్ ఫిల్టర్‌లను ఉపయోగించి టోన్‌లను జోడించాను. ఏదైనా పోర్ట్రెయిట్‌ను ఈవెంట్ స్కీమ్‌తో సరిపోల్చడానికి మరియు బహుళ థీమ్‌లలో చిత్రాలను తిరిగి ఉపయోగించటానికి ఇది నన్ను అనుమతిస్తుంది. ప్రతిదానికీ నాకు క్రొత్త CSS నియమం అవసరం. డెమో చూడండి.
02. గ్రిడ్ యొక్క చివరి వరుసలో స్థలాన్ని సమానంగా భాగస్వామ్యం చేయండి
స్టీఫెన్ హే, డిజైనర్ మరియు రచయిత
మీరు గ్రిడ్‌లో ప్రదర్శించాల్సిన తెలియని వస్తువుల సంఖ్య ఉంటే, చివరి వరుసను సమానంగా విభజించడానికి మీరు ఫ్లెక్స్‌బాక్స్‌ను ఉపయోగించవచ్చు. కాబట్టి ఒకే అంశం ఉంటే, అది మొత్తం అడ్డు వరుసను తీసుకుంటుంది; రెండు అంశాలు ఉంటే, అడ్డు వరుస సగానికి విభజించబడుతుంది మరియు మొదలైనవి. డెమో చూడండి.
03. బాక్స్-నీడతో కణ యానిమేషన్లను సృష్టించండి
అనా ట్యూడర్, కోడర్ మరియు మ్యాథ్స్ మతోన్మాది
కలపడం ద్వారా బాక్స్-నీడ కొన్ని గణితాలు మరియు సాస్‌లతో, మీరు 2D వక్రతలను గ్రాఫ్ చేయవచ్చు, 3 డి మోషన్‌ను అనుకరించవచ్చు మరియు వెర్రి కణ యానిమేషన్లను సృష్టించవచ్చు, ప్రతి ఒక్కరూ కాన్వాస్ కోసం పొరపాటు చేయబోతున్నారు! ఒక డెమో మరియు మరొకటి చూడండి.
04. పరివర్తనాలతో పాలిహెడ్రా యానిమేట్ చేయండి
అనా ట్యూడర్, కోడర్ మరియు మ్యాథ్స్ మతోన్మాది
సరిహద్దులతో సృష్టించబడిన స్వచ్ఛమైన CSS బహుభుజాలను మీరు బహుశా చూసారు, కాని మేము చాలా శక్తివంతమైన సాధనం రూపాంతరం ఆస్తి. సమూహ మూలకాలపై పరివర్తనలను బంధించడం మరియు వర్తింపజేయడం చిత్ర నేపథ్యాలు లేదా సరిహద్దులు మరియు పారదర్శక ఇంటీరియర్‌లతో సంక్లిష్టమైన బహుభుజాలను సృష్టించడానికి అనుమతిస్తుంది. 3 డి ట్రాన్స్‌ఫార్మ్‌లను ఉపయోగించి, మేము ఈ 2 డి ఆకృతులను పాలిహెడ్రాగా మిళితం చేసి, ఘనపదార్థాలను విలీనం, విప్పు, పేలుడు లేదా తిరిగి కలపడం వంటివి వెబ్‌జిఎల్‌కు సులభంగా తప్పుగా భావించవచ్చు. డెమో చూడండి.
05. స్థానానికి మాస్టర్ ’కాల్ ()’
అనా ట్యూడర్, కోడర్ మరియు మ్యాథ్స్ మతోన్మాది
నేను ప్రేమించా calc () నేను కనుగొన్న క్షణం నుండి. మార్జిన్లు, పాడింగ్ లేదా కొలతలు మచ్చిక చేసుకోవడానికి ఇది ఉపయోగపడుతుంది మరియు నేపథ్యాలను ఉంచడానికి, పరిమాణాలను ఉపయోగించటానికి, ప్రవణతలు లేదా పరివర్తనల లోపల ఉపయోగించినప్పుడు మరియు అదే పాత యూనిట్లతో మాత్రమే కాకుండా, కొత్త మరియు చల్లని వ్యూపోర్ట్ వాటితో కలిపి ఉపయోగించినప్పుడు ఇది ఒక లైఫ్సేవర్ కావచ్చు.
06. బాక్స్ మోడల్‌ను ‘బాక్స్-సైజింగ్’ తో సేన్ చేయండి
సాయర్ హోలెన్స్‌హెడ్, ఓక్ స్టూడియోస్ దేవ్ మరియు డిజైనర్
వా డు బాక్స్-సైజింగ్ మీ తెలివిని కాపాడటానికి. అది లేకుండా, 250px మరియు 25px పాడింగ్ యొక్క వెడల్పు కలిగిన మూలకం 300px వెడల్పుతో మిళితం అవుతుంది, మిక్సింగ్ పిక్సెల్స్ మరియు శాతాలు కఠినంగా ఉంటాయి. తో బాక్స్-పరిమాణం:సరిహద్దు పెట్టె సరిహద్దులు మరియు పాడింగ్ బదులుగా నిర్వచించిన వెడల్పులో ఉంచబడతాయి.
07. CSS తో నిలువుగా కేంద్రం
ట్రెంట్ వాల్టన్, పారావెల్ వ్యవస్థాపకుడు
చారిత్రాత్మకంగా, మీరు CSS తో నిలువుగా ఏదో ఒకదానిని కేంద్రీకరించడం చాలా కష్టం, మీరు ప్రక్కనే ఉన్న వచనంతో ఒక చిత్రాన్ని కలిగి ఉంటే, మీరు నిలువుగా సమలేఖనం చేయాలనుకుంటున్నారు. స్టాంపింగ్ మరియు శపించే బదులు, అమరిక బాధలను పరిష్కరించడానికి ఫ్లెక్స్‌బాక్స్‌ను ఉపయోగించండి. డెమో చూడండి.
08. సంబంధిత వస్తువుల బ్యాంకును లక్ష్యంగా చేసుకోండి
జోనాథన్ స్మైలీ, జుర్బ్ భాగస్వామి మరియు డిజైన్ లీడ్
ప్రతి తరగతికి సాధారణ లక్షణాలను అటాచ్ చేయకుండా, సంబంధిత వస్తువుల యొక్క పెద్ద బ్యాంకును లక్ష్యంగా చేసుకోవడానికి, తరగతి పేర్లలో సుమారుగా గుణం సెలెక్టర్లను ఉపయోగించడం ద్వారా CSS లైన్ బరువును షేవ్ చేయండి. ఉదాహరణకు ... [తరగతి * = "- బ్లాక్-గ్రిడ్-"] {} ... వీటిని లక్ష్యంగా చేసుకుంటుంది: .స్మాల్-బ్లాక్-గ్రిడ్ -3 .లార్జ్-బ్లాక్-గ్రిడ్ -5
09. హైఫనేషన్‌ను నియంత్రించండి
సావిడ్ స్టోరీ, ఓపెన్ వెబ్ అడ్వకేట్
హైఫనేషన్ ముద్రణలో తక్కువగా తీసుకోబడింది మరియు కొంతమంది డెవలపర్లు దీనిని ఉపయోగిస్తారు హైఫన్లు ఆస్తి ఆన్‌లైన్, కానీ కొద్దిమందికి మంచి నియంత్రణను అందించే ఇతర లక్షణాల గురించి తెలుసు. మీరు జాగ్రత్తగా లేకపోతే, మీరు హైఫనేషన్ నిచ్చెనలను పొందుతారు, ఇక్కడ హైఫన్లు బహుళ పంక్తులలో ఉపయోగించబడతాయి. బొటనవేలు యొక్క సాధారణ నియమం వరుసగా రెండు కంటే ఎక్కువ కాదు, మీరు ఉపయోగించడాన్ని నియంత్రించవచ్చు హైఫనేట్-పరిమితి-పంక్తులు. అలాగే, హైఫనేట్-పరిమితి-అక్షరాలు హైఫన్ విరామానికి ముందు మరియు తరువాత అక్షరాల కనీస సంఖ్యతో పాటు, హైఫనేట్ చేయబడే పదం యొక్క కనీస పొడవును పేర్కొనడానికి మిమ్మల్ని అనుమతిస్తుంది.
10. మోడ్‌లు రాయడం వల్ల ప్రయోజనం పొందండి
డేవిడ్ స్టోరీ, ఓపెన్ వెబ్ అడ్వకేట్
వ్రాత మోడ్‌లు వచనం ప్రవహించే దిశను నిర్వచించటానికి మిమ్మల్ని అనుమతిస్తుంది. కొన్ని తూర్పు ఆసియా వచనం నిలువుగా వ్రాయబడింది, కుడి నుండి ఎడమకు పెరుగుతున్న పంక్తులు పేర్కొనబడ్డాయి రైటింగ్-మోడ్: నిలువు- rl (tb-rl IE లో). లంబ వచనం నిజంగా యూరోపియన్ రచనా వ్యవస్థలలో ఉపయోగించబడదు, కానీ మీరు క్షితిజ సమాంతర స్థలాన్ని పరిమితం చేసినప్పుడు పట్టిక శీర్షికలకు ఉపయోగపడుతుంది.
11. ప్రవణతలను అసాధారణ మార్గాల్లో వాడండి
రూత్ జాన్, డిజైనర్
సరిహద్దులు మరియు బుల్లెట్‌లతో ఉపయోగించినప్పుడు నేపథ్య ప్రవణతలు అద్భుతంగా కనిపిస్తాయి. నేను నా బ్లాగులో రెండింటినీ ఉపయోగిస్తాను మరియు ప్రిప్రాసెసర్‌తో తిరిగి ఉపయోగించిన కోడ్‌తో మిక్సిన్‌కు కాల్ చేయవచ్చు, తద్వారా దీన్ని మాన్యువల్‌గా పునరావృతం చేయకూడదు. సూపర్ క్రేజీకి వెళ్లవద్దు ఎందుకంటే ప్రవణతలు ప్రాసెసర్-హెవీగా ఉంటాయి. జాబితా బుల్లెట్ల కోసం SCSS మిక్సిన్:
ix మిక్సిన్ గ్రేడెడ్ బుల్లెట్ ($ రంగు) {నేపథ్య-చిత్రం: సరళ-ప్రవణత (ఎడమ, తేలిక ($ రంగు, 15%) 10px, $ రంగు 11px, $ రంగు 20px, ముదురు ($ రంగు, 15%) 21px, ముదురు ($ రంగు , 15%) 30 పిక్స్‌, పారదర్శక 31 పిక్స్‌); }
12. లింక్‌లపై స్ట్రింగ్-మ్యాచింగ్ ఉపయోగించండి
రూత్ జాన్, డిజైనర్
నా బ్లాగులో, నేను శైలి సామాజిక చిహ్నాలకు స్ట్రింగ్-మ్యాచింగ్‌తో CSS లక్షణ ఎంపికదారులను ఉపయోగించాను. ఇవి నా బ్లాగ్ అంతటా కనిపిస్తాయి, కొన్నిసార్లు వచనంతో మరియు కొన్నిసార్లు లేకుండా, కానీ ఎల్లప్పుడూ చిహ్నంతో. సరైన సామాజిక చిహ్నంతో సరైన లింక్‌ను స్టైల్ చేయడానికి, నేను స్ట్రింగ్ మ్యాచ్‌ను ఉపయోగిస్తాను href యాంకర్ మూలకం యొక్క లక్షణం. నేను ఉపయోగిస్తాను *= కాబట్టి href యాంకర్ మూలకంపై నేను పేర్కొన్న స్ట్రింగ్ మాత్రమే ఉండాలి.
/ * అన్ని సామాజిక లింక్‌లకు * / .సామాజిక a: ముందు {ప్రదర్శన: ఇన్లైన్-బ్లాక్; పాడింగ్-కుడి: 30 పిక్స్‌; font-family: ’FontAwesome’;} / * ప్రతి నిర్దిష్ట లింక్ * / .సామాజిక [href * = "twitter"]: ముందు {కంటెంట్: " f099"; color: # 52ae9f;} .సామాజిక a [href * = "github"]: ముందు {content: " f09b"; రంగు: # 5f2e44;} .సామాజిక a [href * = "ఫీడ్"]: {కంటెంట్‌కు ముందు: " f09e"; రంగు: # b47742;}
13. మీ కోసం FOUT పని చేయండి
జాసన్ పామెంటల్, H + W డిజైన్‌లో ప్రిన్సిపాల్
బ్రౌజర్ బ్లింగ్ ఇవ్వలేక పోయినప్పటికీ, వెబ్ కంటెంట్ కంటెంట్‌ను అందించే ఆవరణలో నిర్మించబడింది. నెమ్మదిగా లోడ్ అవుతున్న వెబ్ ఫాంట్‌లు నిరాశకు గురిచేస్తాయి, ఫాంట్‌లు డౌన్‌లోడ్ చేసేటప్పుడు నావిగేషన్ మరియు టెక్స్ట్ రిఫ్లోలుగా ఫౌట్ (అన్‌స్టైల్డ్ టెక్స్ట్ యొక్క ఫ్లాష్) జార్జింగ్. గూగుల్ మరియు టైప్‌కిట్ సమాధానం ఇస్తాయి: వెబ్-ఫాంట్ లోడర్. ఫాంట్‌ల లోడింగ్ స్థితి ఆధారంగా ఒక పేజీలో తరగతులను ఇంజెక్ట్ చేయడం ద్వారా, వెబ్కిట్ యొక్క ‘అదృశ్య కంటెంట్’ సిండ్రోమ్‌ను కూడా నిర్మూలించి, కనిష్టంగా రిఫ్లో ఉంచడానికి మీరు ఆ తరగతులతో ఫాల్‌బ్యాక్‌లను స్టైల్ చేయవచ్చు. డెమో చూడండి.
14. నేపథ్యాల కోసం SVG ని అన్వేషించండి
ఎమిల్ జార్క్‌లండ్, వెబ్ డెవలపర్‌ను ఉపయోగించండి
ఇప్పుడు SVG మద్దతు లేని ఏకైక బ్రౌజర్‌లు IE8 మరియు అంతకంటే తక్కువ మరియు Android 2 వెబ్కిట్, అందువల్ల CSS లోని నేపథ్యాల కోసం SVG ని ఉపయోగించడం సాధ్యమే, ముఖ్యంగా గ్రుంటికాన్ వంటి PNG ఫాల్‌బ్యాక్ పరిష్కారంతో పాటు. SVG ను CSS చేత స్టైల్ చేయవచ్చు మరియు SVG నుండి ఆసక్తికరమైన బ్లీడ్-త్రూ CSS లక్షణాలు (ఫిల్టర్లు!) ఉన్నాయి, వీటిని మేము HTML కు వర్తింపజేయవచ్చు.
15. 3D పరివర్తనాలతో వినియోగదారులను కేంద్రీకరించండి
ఎమిల్ జార్క్‌లండ్, వెబ్ డెవలపర్‌ను ఉపయోగించండి
3D పరివర్తనాలను ఉపయోగించడం మరియు ఉపయోగించడం z- పరిమాణం వినియోగదారు ఇంటర్‌ఫేస్‌లలో నిజంగా ఉపయోగకరంగా ఉంటుంది, ముఖ్యంగా కంటెంట్‌ను దాచడానికి / చూపించడానికి లేదా కూలిపోవడానికి / విస్తరించడానికి. ఆ పరిస్థితులలో 2D పరివర్తనకు తిరిగి రావడం చాలా సులభం, లేదా ఎటువంటి మార్పు లేదు. ఇది కొద్దిగా ప్రగతిశీల మెరుగుదల చాలా దూరం వెళ్ళే ప్రాంతం.
16. CSS మరియు గణితాలతో వృత్తాకార మెనులను సృష్టించండి
సారా సౌయిడాన్, ఫ్రంటెండ్ డెవలపర్
మొబైల్ అనువర్తనాల్లో వృత్తాకార మెనూలు ప్రాచుర్యం పొందాయి మరియు సాధారణ వృత్తాకార మెనుని సృష్టించడానికి మీరు CSS పరివర్తనాలు మరియు పరివర్తనాలను ఉపయోగించవచ్చు. ఈ మెను సవరించవచ్చు మరియు పైకి లేదా క్రిందికి తెరిచే మెనుని సృష్టించడానికి అనుకూలీకరించవచ్చు. ఒక అంశాన్ని వికర్ణంగా అనువదించడానికి CSS లో ప్రత్యక్ష మార్గం లేదు, కానీ మీరు వస్తువులను ఉంచాలనుకునే సర్కిల్ యొక్క వ్యాసార్థం యొక్క విలువను ఉపయోగించవచ్చు మరియు సమాంతర మరియు నిలువు అనువాద విలువలను లెక్కించడానికి సరళమైన గణిత నియమాన్ని వర్తింపజేయండి. translateX () మరియు translateY () విధులు. ఆ విధంగా, మీరు a తో ముగుస్తుంది వికర్ణ మెను ఐటెమ్‌లను సర్కిల్‌లోని సరైన స్థానాలకు తరలించడానికి అనువాదం. మెనుని మూసివేసే / తెరిచే క్లిక్ ఈవెంట్ జావాస్క్రిప్ట్ ఉపయోగించి నిర్వహించబడుతుంది, లేదా మీరు దానిని ఒక అడుగు ముందుకు వేసి, CSS చెక్బాక్స్ హాక్ ఉపయోగించి CSS- మాత్రమే మెనుని కలిగి ఉండవచ్చు. నా డెమోలో, నేను జావాస్క్రిప్ట్ మరియు HTML5 క్లాస్‌లిస్ట్ API ని ఉపయోగిస్తాను, ఇది అన్ని బ్రౌజర్‌లలో మద్దతు ఇవ్వదు కాబట్టి మీరు డెమోను పని చేయడానికి ఆధునిక బ్రౌజర్‌లో చూడాలి, లేదా క్లాస్‌లిస్ట్ API ని ఉపయోగించకుండా j క్వెరీ కోడ్‌ను అన్‌కామ్ చేయండి. కోడ్.
డెమో మరియు పూర్తి ట్యుటోరియల్ చూడండి. CSS చెక్బాక్స్ హాక్ ఉదాహరణ.
17. హోవర్‌లో లింక్‌లను యానిమేట్ చేయండి
పాల్ లాయిడ్, ది గార్డియన్ ఇంటరాక్షన్ డిజైనర్
హోవర్ స్టేట్స్ చర్య పని చేయడానికి లేదా ముఖ్యమైన సమాచారాన్ని అందించడానికి ఆధారపడకూడదు, కానీ మీరు మౌస్-ఆధారిత వినియోగదారుల కోసం ఇంటర్‌ఫేస్‌లను మెరుగుపరచవచ్చు. 24ways.org లో, మీరు మునుపటి / తదుపరి నావిగేషన్‌లోని లింక్‌లపై హోవర్ చేసినప్పుడు మేము కథన శీర్షికలను వెల్లడిస్తాము. ఒక సృష్టించడం ద్వారా ఇది సాధించబడింది :: తరువాత a యొక్క విలువ నుండి సేకరించిన ఉత్పత్తి కంటెంట్‌ను కలిగి ఉన్న నకిలీ మూలకం సమాచారం- లక్షణం, హోవర్‌లో వీక్షణలోకి జారిపోయేలా CSS పరివర్తనతో వర్తించబడుతుంది. డెమో చూడండి.
18. సాధారణ కీఫ్రేమ్ యానిమేషన్లు చేయండి
పాల్ లాయిడ్, ది గార్డియన్ ఇంటరాక్షన్ డిజైనర్
24ways.org లో, మేము సారాంశాలకు యానిమేటెడ్ కార్నర్ ఫ్లాప్‌లను జోడించాము, ఇది హోవర్‌లో తెరవబడింది. కలపడం ద్వారా ఇది జరిగింది @keyframes యానిమేషన్ ప్రాపర్టీతో పాలించండి, స్ప్రైట్-ఆధారిత యానిమేషన్ సాధించడానికి నేపథ్య చిత్రం యొక్క స్థానాన్ని మారుస్తుంది. మీ యానిమేషన్ స్ప్రైట్‌లో మీ వద్ద ఉన్న ఫ్రేమ్‌ల సంఖ్యను ప్రకటించడమే ఉపాయం దశలు () విలువ. డెమో చూడండి.
19. నీడలతో తేలియాడే 3D ప్రభావాలను సృష్టించండి
కేథరీన్ ఫార్మాన్, హ్యాపీ కాగ్ డెవలపర్
ఇటీవలి ప్రాజెక్ట్కు దిగువ రౌండ్ నీడతో తేలియాడే ఉత్పత్తి ఫోటో అవసరం, ఇది స్క్రీన్ నుండి పాపింగ్ యొక్క 3D ప్రభావాన్ని సృష్టిస్తుంది. నీడ అనేక CSS3 లక్షణాలను ఉపయోగిస్తుంది: సరిహద్దు-వ్యాసార్థం ఆల్ఫా పారదర్శకత మరియు బాక్స్-నీడ. ఇది ఉత్పత్తి గ్రిడ్లు, హోమ్‌పేజీ హీరోలో ఇమేజరీని ప్రదర్శించడం లేదా స్కీయుమోర్ఫిక్ బెంట్‌తో ఏదైనా విచిత్రమైన డిజైన్ కోసం బాగా పనిచేస్తుంది. డెమో చూడండి.
20. ’: లక్ష్యం’ ఉపయోగించి పేజీ ఎలిమెంట్లను నవీకరించండి
సైమన్ మాడిన్, హీరే సీనియర్ వెబ్ డెవలపర్
CSS అనేది సాధారణ అర్థంలో ప్రోగ్రామింగ్ భాష కాదు, కానీ మీరు జావాస్క్రిప్ట్‌కు తిరిగి రాకుండా తెలివైన పనులు చేయవచ్చు. ఉదాహరణకు, ది : లక్ష్యం క్లిక్ చేసిన లింక్ యొక్క లక్ష్యం అయిన అంశాలకు సూడో-క్లాస్ వర్తించబడుతుంది.
పేజీ యొక్క స్థితిని నిర్వచించడానికి, చాలా మూలకాలను కలిగి ఉన్న తల్లిదండ్రులను లక్ష్యంగా చేసుకోవడానికి మీరు దీన్ని ఉపయోగించవచ్చు మరియు మీ లింక్‌లు ఒకే క్లిక్‌తో పిల్లలందరి రూపాన్ని మరియు లేఅవుట్‌ను నియంత్రించే సాధనంగా మారతాయి. డెమో చూడండి.
21. సూక్ష్మ యానిమేషన్లతో అభిప్రాయాన్ని అందించండి
నీల్ రెనికర్, డిజైనర్ మరియు డెవలపర్
CSS నకిలీ అంశాలు :: ముందు మరియు :: తరువాత CSS పరివర్తనాలతో పాటు, మౌస్ వినియోగదారులకు సూక్ష్మమైన అభిప్రాయాన్ని అందించే సంతోషకరమైన యానిమేషన్‌ను ప్రారంభించవచ్చు. ఉదాహరణకు, ఒక నకిలీ మూలకంలో ఒక CSS బాణాన్ని రూపొందించండి, నకిలీ మూలకానికి పరివర్తనను వర్తించండి (పరివర్తన: అన్నీ తేలికగా -15 లు;), ఆపై సాధారణ లేఅవుట్ మార్పును జోడించండి : హోవర్ నకిలీ తరగతి (సవరించడం వంటివి మార్జిన్-టాప్). డెమో చూడండి.
22. ‘విల్-యానిమేట్’ కోసం సిద్ధం చేయండి
పాల్ లూయిస్, కోడర్ మరియు క్రోమ్ డెవలపర్ రిలేషన్స్ టీం సభ్యుడు
మీరు ఉపయోగించినట్లయితే -వెబ్కిట్-ట్రాన్స్ఫార్మ్: ట్రాన్స్లేట్జెడ్ (0) మీ పేజీలను అద్భుతంగా చేయడానికి, చాలా బ్రౌజర్‌లలో క్రొత్త స్వరకర్త పొరను సృష్టించే హాక్, దీని ద్వారా భర్తీ చేయబడుతుంది విల్-యానిమేట్. త్వరలో, మీరు ఒక మూలకం (దాని స్థానం, పరిమాణం, విషయాలు లేదా స్క్రోల్ స్థానం) గురించి ఏమి మార్చాలనుకుంటున్నారో బ్రౌజర్‌కు చెప్పగలుగుతారు మరియు బ్రౌజర్ హుడ్ కింద సరైన ఆప్టిమైజేషన్‌ను వర్తింపజేస్తుంది. మరింత సమాచారం.
23. ఇన్పుట్ ఫీల్డ్లను మానవీకరించండి
యారోన్ స్కోయెన్, మేడ్ ఫర్ హ్యూమన్స్ వ్యవస్థాపకుడు
వినియోగదారులు ఇంటరాక్ట్ చేసే అంశాలకు శీఘ్ర యానిమేషన్లను జోడించడం వల్ల ఇంటర్‌ఫేస్ తక్కువ కంప్యూటరీగా అనిపిస్తుంది. ఇన్పుట్ ఫీల్డ్‌లతో, a ఉంచడానికి ప్రయత్నించండి పరివర్తన కాల్ లోపల, కాబట్టి మీరు దాన్ని కేంద్రీకరించినప్పుడు లేదా దృష్టి కేంద్రీకరించినప్పుడు, సున్నితమైన పరివర్తన ఉంటుంది.
ఇన్పుట్, టెక్స్ట్ఏరియా mo -మోజ్-ట్రాన్సిషన్: అన్ని 0.2 సె ఈజీ-అవుట్; -ఓ-ట్రాన్సిషన్: అన్ని 0.2 సె ఈజీ-అవుట్; -వెబ్కిట్-ట్రాన్సిషన్: అన్ని 0.2 సె ఈజీ-అవుట్; -ms- పరివర్తన: అన్ని 0.2 సె ఈజీ-అవుట్; పరివర్తన: అన్ని 0.2 సె ఈజీ-అవుట్;
24. CSS యానిమేషన్లను పాజ్ చేసి ప్లే చేయండి
వాల్ హెడ్, డిజైనర్ మరియు కన్సల్టెంట్
CSS యానిమేషన్‌ను మార్చడం ద్వారా మీరు దాన్ని ‘పాజ్’ చేయవచ్చు మరియు ‘ప్లే’ చేయవచ్చు యానిమేషన్-ప్లే-స్టేట్ ఆస్తి. దీన్ని ‘పాజ్’ గా సెట్ చేస్తే మీరు మారే వరకు మీ యానిమేషన్ ఆగిపోతుంది యానిమేషన్-ప్లే-స్టేట్ కు నడుస్తోంది, ఉదాహరణకు హోవర్‌లో.
.animating_thing {యానిమేషన్: స్పిన్ 10 సె లీనియర్ అనంతం; యానిమేషన్-ప్లే-స్టేట్: పాజ్ చేయబడింది; }. animating_thing: హోవర్ {యానిమేషన్-ప్లే-స్టేట్: రన్నింగ్; }
25. CSS వేరియబుల్స్ ఉపయోగించవద్దు
డేవ్ షియా, డిజైనర్ మరియు రచయిత
మేము చివరకు CSS వేరియబుల్స్ పొందుతున్నాము, ఉదాహరణకు కలర్ యొక్క హెక్స్ విలువను ఒకసారి వ్రాసి స్టైల్షీట్ ద్వారా సూచించండి. కానీ అధికారిక స్పెక్ వెర్బోస్, వాక్యనిర్మాణ సంక్లిష్టతను జోడిస్తుంది, తక్కువ కార్యాచరణను అందిస్తుంది మరియు చాలా బ్రౌజర్‌లచే ఎక్కువగా మద్దతు ఇవ్వబడదు. సాస్ విస్తృతంగా ప్రాచుర్యం పొందిన మరియు కస్టమ్ ఫంక్షన్ల వంటి శక్తివంతమైన ప్రోగ్రామింగ్ లాజిక్‌తో వేరియబుల్స్ దాటిన యుగంలో మరియు / లేకపోతే స్టేట్‌మెంట్‌లు ఉంటే, అధికారిక స్పెక్ చాలా తక్కువగా వస్తుంది.
ఈ అగ్ర చిట్కాలు CSS గురించి మీ అభిప్రాయాన్ని మరియు వెబ్ అభివృద్ధి మరియు రూపకల్పనలో ప్రాతినిధ్యం వహిస్తున్న అవకాశాలను పునరుద్ధరించాయని ఆశిద్దాం. ఏదైనా పనిని ప్రత్యక్ష ప్రసారం చేయడానికి ముందు బ్రౌజర్ మద్దతును తనిఖీ చేయడానికి ఈ పద్ధతుల్లో దేనినైనా పూర్తిగా పరీక్షించడం మర్చిపోవద్దు.
పదాలు: క్రెయిగ్ గ్రాన్నెల్ దృష్టాంతం: మైక్ చిప్పర్‌ఫీల్డ్
ఈ వ్యాసం మొదట నెట్ మ్యాగజైన్ సంచిక 253 లో వచ్చింది.
