వెబ్పేజీ ఎలిమెంట్స్ CSS3 తో ఫేడ్ మరియు అవుట్ చేయండి

CSS3 పరివర్తనాలు నైస్ ఫేడ్ ప్రభావాలు సృష్టించు

వెబ్ డిజైనర్లు దీర్ఘకాలం CSS3 సన్నివేశాన్ని తాకినప్పుడు సృష్టించే పుటలపై ఎక్కువకాలం ఎక్కువ నియంత్రణను కోరుకొన్నారు. CSS3 లో ప్రవేశపెట్టిన నూతన శైలులు వెబ్ నిపుణులకు తమ పేజీలకు ఫోటోషాప్-వంటి ప్రభావాలను జతచేసే సామర్థ్యాన్ని ఇచ్చాయి. ఇందులో డ్రాప్ షాడోస్ మరియు గ్లోస్ , గుండ్రని మూలలు మరియు మరిన్ని వంటి లక్షణాలు ఉన్నాయి. సైట్లు సైట్లలో మంచి ప్రభావశీలతను సృష్టించేందుకు ఉపయోగించే యానిమేషన్-వంటి ప్రభావాలను కూడా ప్రవేశపెట్టాయి.

ఒక చాలా nice దృశ్య ప్రభావం మీరు CSS3 ఉపయోగించి మీ వెబ్ సైట్ లో అంశాలు జోడించవచ్చు వాటిని అస్పష్టత మరియు పరివర్తన కోసం లక్షణాలు కలయిక ఉపయోగించి మరియు అవుట్ వాడిపోవు చేయడానికి ఉంది. ఇది ఒక సైట్ సందర్శకుడు ఏదో చేసేటప్పుడు, ఆ అంశంపై కదిలించడం వంటి దృష్టిని ఆకర్షించే కనుమరుగవుతున్న ప్రాంతాలను సృష్టించడం ద్వారా మీ పేజీలను మరింత పారస్పరికంగా చేయడానికి సులభమైన మరియు బాగా మద్దతు గల మార్గం.

మీ వెబ్ పేజీలలోని వివిధ అంశాలకు ఈ పరస్పర ప్రభావ దృశ్య ప్రభావాన్ని జోడించడం ఎంత సులభం అయ్యేదో పరిశీలించండి.

హోవర్లో అస్పష్టతను మార్చండి

ఒక కస్టమర్ ఆ అంశంపై కదులుతున్నప్పుడు ఒక చిత్రం యొక్క అస్పష్టతను ఎలా మార్చాలో చూద్దాం. ఈ ఉదాహరణ కోసం (HTML క్రింద చూపబడింది) నేను greydout తరగతి లక్షణంతో ఒక చిత్రాన్ని ఉపయోగిస్తున్నాను.

దీన్ని మనము గ్రేస్ చేయటానికి, మన CSS స్టైల్షీట్కు కింది స్టైల్ నియమాలను చేర్చాము:

.greydout {
-వెబ్కిట్-అస్పష్టత: 0.25;
-మోజ్-అస్పష్టత: 0.25;
అస్పష్టత: 0.25;
}

ఈ అస్పష్టత సెట్టింగులు 25% వరకు అనువదించబడ్డాయి. ఈ చిత్రం దాని సాధారణ పారదర్శకతలో 1/4 గా చూపబడుతుంది. ఏ పారదర్శకత లేకుండా పూర్తిగా అపారమైనది 100% అయితే 0% పూర్తిగా పారదర్శకంగా ఉంటుంది.

తదుపరి, చిత్రం దానిపై మౌస్ వాటా ఉన్నప్పుడు స్పష్టమైన (లేదా మరింత ఖచ్చితంగా, పూర్తిగా అపారదర్శక మారింది) వస్తాయి చేయడానికి, మీరు జోడిస్తారు: హోవర్ నకిలీ తరగతి:

.greydout: హోవర్ {
-వెబ్కిట్-అస్పష్టత: 1;
-మోజ్-అస్పష్టత: 1;
అస్పష్టత: 1;
}

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

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

ఒక నిజంగా nice ప్రభావం జోడించడానికి మరియు క్రమంగా ఈ ఫేడ్ చేయడానికి, మీరు .greydout తరగతి పరివర్తన ఆస్తి జోడించాలనుకుంటున్నారా:

.greydout {
-వెబ్కిట్-అస్పష్టత: 0.25;
-మోజ్-అస్పష్టత: 0.25;
అస్పష్టత: 0.25;
-వెబ్కిట్-బదిలీ: అన్ని 3s సౌలభ్యం;
-మోజ్-పరివర్తనం: అన్ని 3s సౌలభ్యం;
-ms-transition: అన్ని 3s సౌలభ్యం;
-O- పరివర్తనం: అన్ని 3s సౌలభ్యం;
పరివర్తనం: అన్ని 3s సౌలభ్యం;
}

ఈ కోడ్తో, మార్పు నెమ్మదిగా మారుతూ కాకుండా క్రమంగా మార్పు చెందుతుంది.

మరోసారి, ఇక్కడ విక్రయదారు ప్రిఫికెడ్ నియమాలను మేము ఉపయోగిస్తున్నాము. పరివర్తనం అస్పష్టతకు మద్దతు ఇవ్వదు, కాబట్టి ఈ ఆదిప్రత్యయాలు అర్ధవంతం చేస్తాయి.

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

అవుట్ క్షీనతకి టూ ఉంది

మీరు క్షీణించిన చిత్రంతో ప్రారంభించాల్సిన అవసరం లేదు, మీరు పూర్తి అపారదర్శక చిత్రం నుండి బయటకుపోవడానికి పరివర్తనాలు మరియు అస్పష్టతను ఉపయోగించవచ్చు. ఒకే చిత్రం ఉపయోగించి, మాత్రమే ఉపసంహరించుకునే తరగతి:

తరగతి = "withfadeout">

ముందుగానే, మీరు ఉపయోగించి అస్పష్టతని మార్చండి: హోవర్ సెలెక్టర్:

తో.
-వెబ్కిట్-బదిలీ: అన్ని 2s సౌలభ్యం ఇన్ అవుట్;
-మోజ్-పరివర్తనం: అన్ని 2s సౌలభ్యం ఇన్ అవుట్;
-ms-transition: అన్ని 2s సౌలభ్యం ఇన్ అవుట్;
-O- పరివర్తనం: అన్ని 2s సౌలభ్యం ఇన్ అవుట్;
పరివర్తనం: అన్ని 2s సౌలభ్యం ఇన్ అవుట్;
}
.తోపాటు: హోవర్ {
-వెబ్కిట్-అస్పష్టత: 0.25;
-మోజ్-అస్పష్టత: 0.25;
అస్పష్టత: 0.25;
}

ఈ ఉదాహరణలో, చిత్రం పూర్తిగా అపారదర్శక నుండి కొంత పారదర్శకంగా మార్పు చెందింది - మా మొదటి ఉదాహరణ యొక్క రివర్స్.

చిత్రాలు బియాండ్ గోయింగ్

మీరు చిత్రాలకు ఈ దృశ్యమాన పరివర్తనాలు మరియు ఫేడ్స్ని దరఖాస్తు చేసుకోవచ్చు, కాని మీరు ఈ CSS ప్రభావాలతో చిత్రాలను మాత్రమే పరిమితం చేయలేరు. మీరు సులభంగా క్లిక్ చేసి ఉంచినప్పుడు ఫేడ్ చేసే CSS శైలి బటన్లను చేయవచ్చు. మీరు అస్పష్టతను సక్రియం చేస్తారు: క్రియాశీల సూడో-తరగతి మరియు బటన్ను నిర్వచిస్తున్న తరగతిపై పరివర్తన ఉంచండి. ఏమి జరిగిందో చూడటానికి ఈ బటన్ను నొక్కి పట్టుకోండి.

ఇది తప్పనిసరిగా ఏవైనా దృశ్యమాన మూలకాన్ని ఫేడ్ చేసినప్పుడు లేదా క్లిక్ చేసినప్పుడు క్లిక్ చేయడం సాధ్యమవుతుంది. ఈ ఉదాహరణలో నేను D యొక్క అస్పష్టత మరియు మౌస్ దాని పై ఉన్నప్పుడు టెక్స్ట్ రంగు మార్చండి. ఇక్కడ CSS:

#myDiv {
వెడల్పు: 280px;
నేపథ్య రంగు: # 557A47;
రంగు: # dfdfdf;
పాడింగ్: 10px;
-వెబ్కిట్-పరివర్తనం: అన్ని 4s సౌలభ్యం అవుట్ 0 సె;
-మోజ్-పరివర్తనం: అన్ని 4s సౌలభ్యం అవుట్ 0 సె;
-ms-transition: అన్ని 4s సౌలభ్యం అవుట్ 0 సె;
-O- పరివర్తనం: అన్ని 4s సౌలభ్యం అవుట్ 0 సె;
పరివర్తనం: అన్ని 4s సౌలభ్యం అవుట్ 0 సె;
}
# mdiv: hover {
-వెబ్కిట్-అస్పష్టత: 0.25;
-మోజ్-అస్పష్టత: 0.25;
అస్పష్టత: 0.25;
రంగు: # 000;
}

నావిగేషన్ మెనూలు నేపథ్య రంగులను క్షీనపరుస్తాయి

ఈ సాధారణ నావిగేషన్ మెనూలో మెనూ అంశాలపై నేను ఎన్నుకున్న నేపథ్యంలో నెమ్మదిగా నేపథ్య రంగు రంగులో ఉంటుంది. ఇక్కడ HTML:

• • హోమ్
  • • CSS3 ట్యుటోరియల్స్
    • • CSS3 గుణాలు

మరియు ఇక్కడ CSS ఉంది:

ul # sampleNav {list-style: none; }
ul # sampleNav li {
ప్రదర్శన: ఇన్లైన్;
ఫ్లోట్: ఎడమ;
పాడింగ్: 5px 15px;
మార్జిన్: 0 5 px;
-వెబ్కిట్-బదిలీ: అన్ని 2s సరళ;
-మోజ్-పరివర్తనం: అన్ని 2s సరళ;
-ms-transition: అన్ని 2s సరళ;
-O- పరివర్తనం: అన్ని 2s సరళ;
పరివర్తనం: అన్ని 2s సరళ;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
నేపథ్య రంగు: # DAF197;
}

బ్రౌజర్ మద్దతు

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

అదనపు ఫన్; రెండు చిత్రాలు మార్చు

మరొక చిత్రాన్ని ఒక చిత్రాన్ని ఎలా మార్చాలి అనేదానికి ఇది ఉదాహరణ. HTML ను ఉపయోగించండి:

మరియు ఇతర పూర్తిగా అపారదర్శకంగా ఉన్నప్పుడు ఒక పూర్తిగా పారదర్శకంగా చేస్తుంది మరియు తరువాత పరివర్తనం రెండు మార్పిడులు చేస్తుంది CSS:

.swapMe img {-webkit-transition: అన్ని 1s సౌలభ్యం ఇన్ అవుట్; -మోజ్-పరివర్తనం: అన్ని 1s సౌలభ్యం ఇన్ అవుట్; -ms-transition: అన్ని 1s సౌలభ్యం ఇన్ అవుట్; -ఏ-బదిలీ: అన్ని 1s సౌలభ్యం ఇన్ అవుట్; పరివర్తన: అన్ని 1s సౌలభ్యం ఇన్ అవుట్; } .swap1, .swapMe: హోవర్ .swap2 {-webkit-opacity: 1; -మోజ్-అస్పష్టత: 1; అస్పష్టత: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -మోజ్-అస్పష్టత: 0; అస్పష్టత: 0; }