CSS3 સાથે વેબપેજ એલિમેન્ટ્સ ફેડ ઇન અને આઉટ કરો

CSS3 અનુવાદ સરસ ફેડ અસરો બનાવો

વેબ ડીઝાઈનર લાંબા સમયથી CSS3 પર દ્રશ્ય હિટ કરતી વખતે તેઓ જે પાના બનાવતા હતા તેના પર વધુ નિયંત્રણ ઇચ્છતા હતા. CSS3 માં રજૂ કરાયેલી નવી શૈલીઓએ વેબ પ્રોફેશનલ્સને તેમના પૃષ્ઠો પર ફોટોશોપ જેવી અસરો ઉમેરવાની ક્ષમતા આપી. તેમાં ડ્રોપ શેડોઝ અને ગ્લોઝ , ગોળાકાર ખૂણાઓ અને વધુ જેવા ગુણધર્મો શામેલ છે. CSS3એ એનિમેશન જેવી અસરો પણ રજૂ કરી છે કે જે સાઇટ્સ પર સરસ ક્રિયાપ્રતિક્રિયા બનાવવા માટે ઉપયોગમાં લઈ શકાય છે.

એક ખૂબ જ સરસ દ્રશ્ય અસર જે તમે CSS3 નો ઉપયોગ કરીને તમારી વેબસાઇટના ઘટકોમાં ઉમેરી શકો છો, તેમને અસ્પષ્ટ અને સંક્રમણ માટેના ગુણધર્મોના મિશ્રણનો ઉપયોગ કરીને અને બહાર ઝાંખા કરી શકાય છે. સાઇટ મુલાકાતી કંઈક કરે છે, જેમ કે તત્વ પર ફેલાયેલું જેવા ધ્યાન કેન્દ્રિત થયેલા ઝાંખુ વિસ્તારો બનાવતા તમારા પૃષ્ઠોને વધુ અરસપરસ બનાવવા માટે આ એક સરળ અને સારી સહાયિત રીત છે.

ચાલો જોઈએ કે તમારી વેબ પૃષ્ઠો પર વિવિધ ઘટકોને આ ક્રિયાપ્રતિક્રિયાત્મક દ્રશ્ય અસર ઉમેરવાનું કેટલું સરળ છે ..

ચાલો હોવર પર અસ્પષ્ટતા બદલો

ગ્રાહક એ તત્વ પર ફેલાયેલ હોય ત્યારે અમે છબીની અસ્પષ્ટતાને કેવી રીતે બદલવી જોઈએ તે જોઈને શરૂ કરીશું. આ ઉદાહરણ માટે (HTML નીચે બતાવેલ છે) હું ગ્રેડેઆઉટના વર્ગ વિશેષતા સાથે એક છબીનો ઉપયોગ કરી રહ્યો છું.

તેને ગરીબ બનાવવા માટે, અમે અમારા CSS સ્ટાઇલશીટમાં નીચેના શૈલી નિયમો ઉમેર્યા છે:

. ગ્રેડેઆઉટ {
-વેબકીટ-અસ્પષ્ટતા: 0.25;
-મોઝ-ઑપેસીટી: 0.25;
અસ્પષ્ટતા: 0.25;
}

આ અસ્પષ્ટ સેટિંગ્સ 25% નો અનુવાદ કરે છે આનો અર્થ એ છે કે છબી તેની સામાન્ય પારદર્શિતાના 1/4 જેટલી દર્શાવવામાં આવશે. કોઈ પારદર્શિતા વગર સંપૂર્ણપણે અપારદર્શક 100% હશે અને 0% સંપૂર્ણપણે પારદર્શક હશે.

આગળ, છબીને સ્પષ્ટ કરવા (અથવા વધુ ચોક્કસપણે, સંપૂર્ણપણે અપારદર્શક બનવા માટે) જ્યારે માઉસ તેની ઉપર આવતું હોય, તો તમે: હોવર સ્યુડો-ક્લાસ ઉમેરો છો:

.greydout: હોવર {
-વેબકીટ-અસ્પષ્ટતા: 1;
-મોઝ-અસ્પષ્ટતા: 1;
અસ્પષ્ટતા: 1;
}

તમે જોશો કે, આ ઉદાહરણો માટે, હું તે બ્રાઉઝરનાં જૂના વર્ઝન માટે પછાત સુસંગતતાને સુનિશ્ચિત કરવા માટે નિયમના વિક્રેતા પ્રિફિક્સ વર્ઝનનો ઉપયોગ કરી રહ્યો છું. જ્યારે આ એક સારી પ્રથા છે, ત્યારે વાસ્તવિકતા એ છે કે અસ્પષ્ટતા નિયમ હવે બ્રાઉઝર્સ દ્વારા સારી રીતે સમર્થિત છે અને તે વિક્રેતા પ્રિફિક્સ રેખાઓને છોડવા માટે ખૂબ સલામત છે. તેમ છતાં, જો તમે જૂના બ્રાઉઝર સંસ્કરણો માટે સમર્થન નિશ્ચિત કરવા માંગતા હો તો આ ઉપસર્ગો શામેલ ન કરવાનું કોઈ કારણ પણ નથી. શૈલીની સામાન્ય, અન-પ્રીફિક્સ વર્ઝન સાથેના જાહેરાતને સમાપ્ત કરવાના સ્વીકૃત શ્રેષ્ઠ પ્રથાને અનુસરવાની ખાતરી કરો.

જો તમે આ સાઇટ પર જમાવ્યું છે, તો તમે જોશો કે આ અસ્પષ્ટ ગોઠવણ ખૂબ આકસ્મિક ફેરફાર છે. પ્રથમ તે ગ્રે છે અને તે પછી તે નથી, તે બે વચ્ચે કોઈ વચગાળાના રાજ્યો નથી. તે પ્રકાશ સ્વીચ - ચાલુ અથવા બંધ જેવી છે. આ તમે શું કરવા માંગો છો હોઈ શકે છે, પરંતુ તમે વધુ ધીમે ધીમે પરિવર્તન સાથે પ્રયોગ કરવાનું પણ પસંદ કરી શકો છો.

ખરેખર સરસ અસર ઉમેરવા અને આ ધીમે ધીમે ઝાંખા કરવા માટે, તમે સંક્રમણ મિલકતને .greydout વર્ગમાં ઍડ કરવા માંગો છો:

. ગ્રેડેઆઉટ {
-વેબકીટ-અસ્પષ્ટતા: 0.25;
-મોઝ-ઑપેસીટી: 0.25;
અસ્પષ્ટતા: 0.25;
વેબકિટ-સંક્રમણ: બધા 3s સરળતા;
-મોઝ-સંક્રમણ: બધા 3s સરળતા;
-એમએસ સંક્રમણ: બધા 3s સરળતા;
-ઓ-સંક્રમણ: બધા 3s સરળતા;
સંક્રમણ: બધા 3s સરળતા;
}

આ કોડ સાથે, ફેરફાર અચાનક સ્વિચ કરવાને બદલે ધીમે ધીમે સંક્રમણ થશે.

ફરી એકવાર, અમે અહીં સંખ્યાબંધ વિક્રેતા પ્રિફિક્સ નિયમોનો ઉપયોગ કરી રહ્યા છીએ. સંક્રમણને અસ્પષ્ટતાની સાથે સાથે સપોર્ટેડ નથી, તેથી આ ઉપસર્ગો અર્થમાં કરે છે

આ ક્રિયાપ્રતિક્રિયાઓની યોજના તરીકે તમારે યાદ રાખવું એક વાત એ છે કે ટચ સ્ક્રીન ડિવાઇસીસમાં "હૉવર" સ્થિતિ નથી, તેથી આ અસરો ઘણીવાર મોબાઇલ ફોન જેવી ટચ સ્ક્રીન ઉપકરણનો ઉપયોગ કરતી કોઈપણ વ્યક્તિ પર ખોવાઇ જાય છે. સંક્રમણ ઘણી વખત થાય છે, પરંતુ તે એટલી ઝડપથી થાય છે કે તેઓ ખરેખર જોઇ શકાતા નથી. તે સારું છે જો તમે આને એક સરસ બોનસ અસર તરીકે ઉમેરી રહ્યા છો, પરંતુ કોઈપણ ફેરફારોને ટાળવા કે જે સામગ્રીને સમજી શકાય તે માટે જોઈ શકાય છે.

વિલીન આઉટ શક્ય છે

તમારે ઝાંખુ છબીથી પ્રારંભ કરવાની જરૂર નથી, તમે સંપૂર્ણપણે અપારદર્શક છબીથી ઝાંખા કરવા માટે સંક્રમણો અને અસ્પષ્ટતાનો ઉપયોગ કરી શકો છો. સમાન છબીનો ઉપયોગ કરીને, માત્ર એક ફેડઆઉટના વર્ગ સાથે:

class = "withfadeout">

પહેલાંની જેમ, તમે અસ્પષ્ટતાને આનો ઉપયોગ કરીને બદલી શકો છો: હોવર પસંદગીકાર:

.withfadeout {
-વેબકીટ-સંક્રમણ: બધા 2s સરળતા ઇન-આઉટ;
-મોઝ-સંક્રમણ: બધા 2s સરળતા માં આઉટ;
-એમએસ સંક્રમણ: બધા 2s સરળતા માં આઉટ;
-ઓ-સંક્રમણ: બધા 2s સરળતા માં આઉટ;
સંક્રમણ: બધા 2s સરળતા માં આઉટ;
}
.withfadeout: હોવર {
-વેબકીટ-અસ્પષ્ટતા: 0.25;
-મોઝ-ઑપેસીટી: 0.25;
અસ્પષ્ટતા: 0.25;
}

આ ઉદાહરણમાં, છબી સંપૂર્ણપણે અપારદર્શકથી અંશે પારદર્શક રૂપે સંક્રમણ કરશે - અમારા પ્રથમ ઉદાહરણનું વિપરીત.

છબીઓ બિયોન્ડ જવું

તે શ્રેષ્ઠ છે કે તમે આ દૃશ્યાત્મક સંક્રમણો અને ફેડ્સને છબીઓ પર લાગુ કરી શકો છો, પરંતુ તમે ફક્ત આ CSS અસરો સાથે છબીઓનો ઉપયોગ કરવા માટે મર્યાદિત નથી. તમે સરળતાથી CSS- રીતની બટન્સ બનાવી શકો છો કે જે ક્લિક અને રાખવામાં આવે ત્યારે ઝાંખા. તમે ફક્ત સક્રિય સ્યુડો-ક્લાસનો ઉપયોગ કરીને અસ્પષ્ટને સેટ કરી શકો છો અને વર્ગ પર સંક્રમણ મૂકો જે બટનને વ્યાખ્યાયિત કરે છે. શું થાય છે તે જોવા માટે આ બટનને ક્લિક કરો અને પકડી રાખો.

આવશ્યક રીતે શક્ય છે કે કોઈ પણ દ્રશ્ય તત્વ ઝાંખું થઈ જાય અથવા તેના પર ક્લિક કરી શકાય. આ ઉદાહરણમાં, જ્યારે હું માઉસની ઉપર હોય ત્યારે div ની અસ્પષ્ટતા અને લખાણનો રંગ બદલીશ. અહીં CSS છે:

#myDiv {
પહોળાઈ: 280px;
બેકગ્રાઉન્ડ રંગ: # 557A47;
રંગ: # ડીએફડીએફડીએફ;
ગાદી: 10 પીએક્સ;
વેબકૅટ-સંક્રમણ: બધા 4s સરળતા આઉટ 0s;
-મોઝ-સંક્રમણ: બધા 4s સરળતા આઉટ 0s;
-એમએસ સંક્રમણ: બધા 4s સરળતા આઉટ 0s;
-ઓ-સંક્રમણ: બધા 4s સરળતા આઉટ 0s;
સંક્રમણ: બધા 4s સરળતા આઉટ 0s;
}
#myDiv: હોવર {
-વેબકીટ-અસ્પષ્ટતા: 0.25;
-મોઝ-ઑપેસીટી: 0.25;
અસ્પષ્ટતા: 0.25;
રંગ: # 000;
}

નેવિગેશન મેનૂઝ વિલીન પૃષ્ઠભૂમિ રંગથી લાભ કરી શકે છે

આ સરળ નેવિગેશન મેનુમાં બેકગ્રાઉન્ડ રંગ ફેડ્સ ધીમે ધીમે અને બહાર આવે છે કારણ કે હું મેનુ વસ્તુઓ પર માઉસ. અહીં HTML છે:

• • હોમ
  • • CSS3 ટ્યુટોરિયલ્સ
    • • CSS3 ગુણધર્મો

અને અહીં CSS છે:

ul # sampleNav {list-style: none; }
ul # sampleNav li {
પ્રદર્શન: ઇનલાઇન;
ફ્લોટ: ડાબે;
ગાદી: 5 પીએક્સ 15 પીએક્સ;
માર્જિન: 0 5 પીએક્સ;
વેબકિટ-સંક્રમણ: બધા 2s રેખીય;
-મોઝ-સંક્રમણ: બધા 2s રેખીય;
-એમએસ-સંક્રમણ: બધા 2s રેખીય;
-ઓ-સંક્રમણ: બધા 2s રેખીય;
સંક્રમણ: બધા 2s રેખીય;
}
ul # sampleNav li {text-decoration: none; }
ul # sampleNav li: હોવર {
બેકગ્રાઉન્ડ રંગ: # DAF197;
}

બ્રાઉઝર આધાર

જેમ મેં પહેલાથી જ થોડા વખત સુધી ટચ કરી દીધી છે, આ શૈલીઓ પાસે ખૂબ જ સારો બ્રાઉઝર સપોર્ટ છે, તેથી તમારે કોઈ પણ પ્રકારની ગભરાટ વિના તેનો ઉપયોગ કરવો જોઈએ. આનો એકમાત્ર અપવાદ ઈન્ટરનેટ એક્સપ્લોરરની ઘણી જૂની આવૃત્તિઓ છે, પરંતુ માઇક્રોસોફ્ટના તાજેતરના નિર્ણયમાં IE ની બધી આવૃત્તિઓનો ટેકો પૂરો કરવાનો 11 ની નીચે છે, આ જૂના બ્રાઉઝર્સ એક મુદ્દો ઓછો અને ઓછો થઇ રહ્યો છે - અને વાસ્તવમાં, જો કોઈ જૂના બ્રાઉઝર ન કરે તો આ ફેડ સંક્રમણ જુઓ, તે મોટી સમસ્યા ન હોવી જોઈએ. જ્યાં સુધી તમે આવા પ્રકારના પ્રભાવોને આનંદપ્રદ ક્રિયાપ્રતિક્રિયાઓ સુધી મર્યાદિત કરી શકો છો અને કાર્યક્ષમતાને ચલાવવા અથવા કી સામગ્રી જાહેર કરવા માટે તેના પર આધાર રાખતા નથી, તો પછી જૂના બ્રાઉઝર્સ જે અસરોને ટેકો આપતા નથી તે ઓછી આનંદપ્રદ અનુભવ મળશે, પરંતુ તે બ્રાઉઝર પરનાં વપરાશકર્તાઓ પણ તફાવતને જાણવું, ખાસ કરીને જો તેઓ સાઈટ તરીકે સામાન્ય રીતે ઉપયોગ કરી શકે અને તેઓની જરૂર હોય તેવી માહિતી મેળવી શકે.

વિશેષ મજા; સ્વતઃ બે છબીઓ

અહીં એક છબીને બીજામાં કેવી રીતે ઝાંખા કરવી તે એક ઉદાહરણ છે. HTML નો ઉપયોગ કરો:

અને CSS જે એક સંપૂર્ણ પારદર્શક બનાવે છે અને જ્યારે અન્ય સંપૂર્ણપણે અપારદર્શક હોય છે અને પછી સંક્રમણ બે અદલબદલ કરે છે:

.swapMe img {-webkit-transition: all 1s સરળતા-ઇન-આઉટ; -મોઝ-સંક્રમણ: બધા 1s સરળતા ઇન આઉટ; -એમએસ સંક્રમણ: બધા 1s સરળતા ઇન આઉટ; -ઓ-સંક્રમણ: બધા 1s સરળતા ઇન આઉટ; સંક્રમણ: બધા 1s સરળતા માં આઉટ; } .swap1, .swapMe: હોવર .swap2 {-webkit-opacity: 1; -મોઝ-અસ્પષ્ટતા: 1; અસ્પષ્ટતા: 1; } .swapMe: હોવર .swap1, .swap2 {-webkit-opacity: 0; -મોઝ-અસ્પષ્ટતા: 0; અસ્પષ્ટતા: 0; }