వెబ్ డిజైనర్లు దీర్ఘకాలం CSS3 సన్నివేశాన్ని తాకినప్పుడు సృష్టించే పుటలపై ఎక్కువకాలం ఎక్కువ నియంత్రణను కోరుకొన్నారు. CSS3 లో ప్రవేశపెట్టిన నూతన శైలులు వెబ్ నిపుణులకు తమ పేజీలకు ఫోటోషాప్-వంటి ప్రభావాలను జతచేసే సామర్థ్యాన్ని ఇచ్చాయి. ఇందులో డ్రాప్ షాడోస్ మరియు గ్లోస్, గుండ్రని మూలలు మరియు మరిన్ని వంటి లక్షణాలు ఉన్నాయి. సైట్లు సైట్లలో మంచి ప్రభావశీలతను సృష్టించేందుకు ఉపయోగించే యానిమేషన్-వంటి ప్రభావాలను కూడా ప్రవేశపెట్టాయి.
ఒక చాలా nice దృశ్య ప్రభావం మీరు CSS3 ఉపయోగించి మీ వెబ్ సైట్ లో అంశాలు జోడించవచ్చు వాటిని అస్పష్టత మరియు పరివర్తన కోసం లక్షణాలు కలయిక ఉపయోగించి మరియు అవుట్ వాడిపోవు చేయడానికి ఉంది. ఇది ఒక సైట్ సందర్శకుడు ఏదో చేసేటప్పుడు, ఆ అంశంపై కదిలించడం వంటి దృష్టిని ఆకర్షించే అస్తవ్యస్తమైన ప్రాంతాలను సృష్టించడం ద్వారా మీ పేజీలను మరింత పారస్పరికంగా చేయడానికి సులభమైన మరియు బాగా మద్దతు గల మార్గం.
ఈ పరస్పర ప్రభావ ప్రభావాన్ని మీ వెబ్ పేజీలలోని వివిధ అంశాలకు జోడించడం ఎంత సులభం అయ్యేదో చూద్దాం.
హోవర్ న అస్పష్ట మార్చండి
ఒక కస్టమర్ ఆ అంశంపై కదులుతున్నప్పుడు ఒక చిత్రం యొక్క అస్పష్టతను ఎలా మార్చాలో చూద్దాం. ఈ ఉదాహరణ కోసం (HTML క్రింద చూపబడింది) మేము తరగతి లక్షణంతో ఒక చిత్రాన్ని ఉపయోగిస్తున్నాము
greydout.
దీన్ని మనము గ్రేస్ చేయటానికి, మన CSS స్టైల్షీట్కు కింది స్టైల్ నియమాలను చేర్చాము: .greydout {-వెబ్కిట్-అస్పష్టత: 0.25;-మోజ్-అస్పష్టత: 0.25;అస్పష్టత: 0.25;}
ఈ అస్పష్టత సెట్టింగులు 25% వరకు అనువదించబడ్డాయి. ఈ చిత్రం దాని సాధారణ పారదర్శకతలో 1/4 గా చూపబడుతుంది. ఏ పారదర్శకత లేకుండా పూర్తిగా అపారమైనది 100% అయితే 0% పూర్తిగా పారదర్శకంగా ఉంటుంది. తదుపరి, చిత్రం దానిపై మౌస్ వాటా ఉన్నప్పుడు స్పష్టమైన (లేదా మరింత ఖచ్చితంగా, పూర్తిగా అపారదర్శక మారింది) వస్తాయి చేయడానికి, మీరు : హోవర్నకిలీ తరగతి: .గ్రేడ్: హోవర్ {-వెబ్కిట్-అస్పష్టత: 1;-మోజ్-అస్పష్టత: 1;అస్పష్టత: 1;}
మీరు ఈ ఉదాహరణల కోసం, ఆ బ్రౌజర్ల యొక్క పాత సంస్కరణలకు వెనుకబడి ఉన్న అనుకూలతను నిర్ధారించడానికి నియమావళి యొక్క పూర్వపు సంస్కరణలను మేము ఉపయోగిస్తున్నాము. ఈ మంచి పద్ధతి అయితే, రియాలిటీ అస్పష్టత పాలన ఇప్పుడు బాగా బ్రౌజర్లు మద్దతు ఉంది మరియు ఆ విక్రేత ముందు లైన్లు డ్రాప్ అందంగా సురక్షితం. అయినప్పటికీ, పాత బ్రౌజర్ సంస్కరణలకు మద్దతునివ్వాలంటే, ఈ ఉపసర్గలను చేర్చకూడదని ఎటువంటి కారణం లేదు. శైలి యొక్క సాధారణ, అన్-ప్రిఫిక్డ్ సంస్కరణతో ప్రకటన ముగిసిన అత్యుత్తమ అభ్యాసాన్ని పాటించండి. ఒక సైట్లో మీరు దీన్ని అమలు చేస్తే, ఈ అస్పష్టత సర్దుబాటు చాలా ఆకస్మిక మార్పు అని మీరు చూస్తారు. మొదటిది, ఇది బూడిదరంగు మరియు ఆ రెండు మధ్య మధ్యంతర రాష్ట్రాలతో కాదు. ఇది ఒక కాంతి స్విచ్ వంటిది - ఆన్ లేదా ఆఫ్. ఇది మీకు కావలసినది కావచ్చు, కాని మీరు మరింత క్రమంగా మార్పుతో ప్రయోగాలు చేయాలనుకోవచ్చు. ఒక నిజంగా nice ప్రభావం జోడించడానికి మరియు క్రమంగా ఈ ఫేడ్ చేయడానికి, మీరు జోడించాలనుకుంటే పరివర్తన
ఆస్తి .greydoutclass: .greydout {-వెబ్కిట్-అస్పష్టత: 0.25;-మోజ్-అస్పష్టత: 0.25;అస్పష్టత: 0.25;-వెబ్కిట్-బదిలీ: అన్ని 3s సౌలభ్యం;-మోజ్-పరివర్తనం: అన్ని 3s సౌలభ్యం;-ms-transition: అన్ని 3s సౌలభ్యం;-O- పరివర్తనం: అన్ని 3s సౌలభ్యం;పరివర్తనం: అన్ని 3s సౌలభ్యం;}
