CSS3 Transitions Nice Fade Effects නිර්මාණය කරයි
CSS3 වෙබ් අඩවි නිර්මාණකරුවන් වෙබ් අඩවි නිර්මාණකරුවන් විසින් නිර්මාණය කරන ලද පිටු කෙරෙහි වැඩි අවධානයක් යොමු කර ඇත. CSS3 හි හඳුන්වා දුන් නව විලාසිතා වෙබ් අඩවි වෘත්තිකයින්ට ඔවුන්ගේ පිටු වලට Photoshop-like බලපෑම් එකතු කිරීමේ හැකියාව ලබා දුනි. මේවාට සෙවනැලි හා ග්ලූකෝස් වැනි ගුණාංග, වටකුරු කොන සහ තවත් බොහෝ දේ ඇතුළත් විය. CSS3 විසින් වෙබ් අඩවිවල හොඳ අන්තර්ක්රියාකාරිත්වයක් ඇති කර ගැනීමට භාවිතා කළ හැකි සජීවීකරණ-ආචරණ ආචරණ හඳුන්වා දෙයි.
CSS3 භාවිතයෙන් ඔබේ වෙබ් අඩවියේ මූලද්රව්ය එකතු කිරීමට එක් ලස්සන දෘශ්ය ආචරනයකි, පාරදෘශ්යතාවය සහ සංක්රමණය සඳහා ගුණාංගවල සංයෝගයක් භාවිතා කරමින් ඔවුන් තුළට හා ඉන් පිටතට වීසි කිරීමයි. වෙබ් අඩවියට පැමිණෙන වෙබ් අඩවියේ යම් යම් දෙයක් සිදු කරන විට අවධානය යොමු කර ඇති පාෂාණ ප්රදේශ නිර්මාණය කිරීමෙන් ඔබේ පිටු වඩාත් අන්තර්ක්රියාකාරී වන පහසු හා පහසු වූ මාර්ගයකි.
ඔබේ වෙබ් පිටු මත විවිධ අංගයන්ට මෙම අන්තර්ක්රියාකාරී දෘෂ්ය ප්රයෝග එකතු කිරීමට කොතරම් පහසුදැයි අපි බලමු.
අස්ථාපනය වෙනස් කිරීමට ඉඩ දෙන්න
පාරිභෝගිකයා එම මූලද්රව්යය ගැන තදින් කථා කරන විට ප්රතිබිම්බයක පාරාන්ධතාව වෙනස් කරන්නේ කෙසේ ද යන්න අපි ආරම්භ කරමු. මෙම උදාහරණ සඳහා (HTML පහත දැක්වේ) මම ගයිඩෝට් පන්තියේ ගති ගුණ ඇති රූපයක් භාවිතා කරමි.
එය වර්ණයෙන් නිමවා ගැනීම සඳහා, අපගේ CSS විලාසිතාවේ පහත දැක්වෙන ශෛලිය නීති එකතු කරමු:
.greydout {
-බෙබිට්-පාරාන්ධතාවය: 0.25;
-මොස්-පාරාන්ධතාවය: 0.25;
පාරාන්ධතාවය: 0.25;
}}
මෙම පාරාන්ධතා සැකසුම් 25% දක්වා පරිවර්තනය කරයි. මෙයින් පෙනී යන්නේ රූපයේ සාමාන්ය විනිවිදභාවය 1/4 ක් ලෙස පෙන්වනු ඇති බවයි. විනිවිදභාවයකින් තොරව සම්පූර්ණයෙන්ම විනිවිද නොපෙනීම 100% ක් වන අතර 0% සම්පූර්ණයෙන්ම පාරදෘශ්ය විය යුතුය.
ඊලඟට, මූසිකය ඊට වඩා ඉහලින් ඇති විට, රූපය පැහැදිලිව (හෝ වඩා නිවැරදිව, සම්පූර්ණයෙන්ම නොපෙනෙන ලෙස) බවට පත් කිරීම සඳහා, ඔබ එකතු කරනු ඇත: pseudo-class:
.මිලියන:
-බ්බිට්-පාරාන්ධතාවය: 1;
-moz-පාරාදීසය: 1;
පාරාන්ධතාවය: 1;
}}
මෙම නිදසුන් සඳහා, එම වෙබ් බ්රව්සරවල පැරණි අනුවාදයන් සඳහා පසුගාමී අනුකූලතාව සහතික කිරීම සඳහා මම රීතියේ වෙළෙන්දන්ගේ පෙරසැකසුම් අනුවාදයන් භාවිතා කරමි. මෙය හොඳ පුරුද්දක් වුවත්, යථාර්ථය වන්නේ විනිවිදතාවයේ පාලනය දැන් බ්රව්සර් මගින් හොඳින් අනුමත කර ඇති අතර එම වෙළෙන්දාගේ නිර්මිත රේඛාව ඇද දැමීම ඉතාමත් ආරක්ෂාකාරී වේ. එහෙත්, පැරණි බ්රව්සර අනුවාද සඳහා සහය ලබා ගැනීමට අවශ්ය නම් මෙම උපසර්ග ඇතුළත් කිරීමට කිසිදු හේතුවක් නැත. සාමාන්යයෙන්, ශෛලිය නොලැබූ ප්රකෘති අනුවාදය සමග ප්රකාශය අවසන් කිරීමේ පිළිගත් හොඳ භාවිතයන් අනුගමනය කිරීමට වග බලා ගන්න.
ඔබ මෙම වෙබ් අඩවියක මෙම කාර්යය යොදවා ඇත්නම්, මෙම විනිවිද පෙනෙන හැඩ ගැස්වීම ඉතා හදිසි වෙනසක් වනු ඇත. පළමුව එය අළු සහ ඉන් පසුව නොවේ, එම දෙක අතර අන්තර් ප්රාන්ත අතර නො වේ. එය ආලෝකය මාරු කිරීමක් වැනි ය. ඔබට මෙය අවශ්ය විය හැකිය, නමුත් ක්රම ක්රමයෙන් වෙනස් වීමක් සමඟ ඔබට අත්හදා බැලීමට අවශ්ය විය හැකිය.
ඇත්ත වශයෙන්ම හොඳ බලපෑමක් එකතු කිරීම සඳහා මෙම ක්රමයෙන් අඩු වී ඇති අතර, මෙම ප්රස්ථිබිතය සඳහා .greydout පන්තිය වෙත ඔබට අවශ්යය:
.greydout {
-බෙබිට්-පාරාන්ධතාවය: 0.25;
-මොස්-පාරාන්ධතාවය: 0.25;
පාරාන්ධතාවය: 0.25;
-webkit-සංක්රාන්තිය: සියලු 3 පහසුයි;
-මොස්-සංක්රාන්තිය: සියලු 3s පහසුයි;
-ms-සංක්රාන්තිය: සියලු 3s පහසුයි;
-o-සංක්රාන්තිය: සියලු 3s පහසුයි;
සංක්රාන්තිය: සියලු 3s පහසුයි;
}}
මෙම කේතය සමඟ, වෙනස් කිරීම හදිසියේ මාරු වීම වෙනුවට ක්රමයෙන් වෙනස් වේ.
නැවත වරක්, අපි මෙහි බොහෝ වෙළෙන්දන්ගේ උපසර්ග නීති රීති භාවිතා කරමු. සංක්රාන්තිය විනිවිද පෙනෙන ලෙස නොසැලකේ. එබැවින් මෙම උපසර්ගයන් අර්ථවත් වේ.
මෙම අන්තර්ක්රියාවන් සැලසුම් කරන විට මතක තබා ගැනීමට එක් කරුණක් වන්නේ ස්පර්ශ තිර උපාංගයට "හූවර්" තත්වයක් නොමැති බැවින්, එම නිසා ජංගම දුරකථනයක් වැනි ටච් ස්කී්රන් උපාංගයක් භාවිතා කරන ඕනෑම කෙනෙකුට මෙම බලපෑම බොහෝ විට අහිමි වේ. සංක්රමණය බොහෝ විට සිදුවනු ඇත, නමුත් ඒවා සැබවින්ම නොපෙනේ. ඔබ මෙය හොඳ ප්රසාද දීමනාවක් ලෙස එකතු කිරීම හොඳ නම්, නමුත් අන්තර්ගතය තේරුම් ගත යුතු බව දැක ගැනීමට අවශ්ය වන වෙනස්කම් වළක්වා ගැනීම හොඳය.
ඉවත දැමීම සිදුවිය හැකිය
සම්පූර්ණයෙන්ම විනිවිද නොපෙනෙන පින්තූරයෙන් ඉවතට ගැනීම සඳහා ඔබට සංක්රමණය සහ පාරාන්ධතාවය භාවිතා කළ හැකිය. එකම ප්රතිරූපයක් යොදා ගනිමින්,
class = "withfadeout">
පෙර මෙන් ම, ඔබ විසින් අඳින වෙනස්කම් වෙනස් කරන්න: hover selector:
.අවසන්
-webkit-සංක්රාන්තිය: සියලු 2s පහසු වේ;
-මොස්-සංක්රාන්තිය: සියලු 2s පහසු-පිටත;
-ms-සංක්රාන්තිය: සියලු 2s පහසු වේ;
-o-සංක්රාන්තිය: සියලු 2s පහසු වේ;
සංක්රමණය: සියලු 2s පහසු වේ;
}}
.අවසන් අතුරින්:
-බෙබිට්-පාරාන්ධතාවය: 0.25;
-මොස්-පාරාන්ධතාවය: 0.25;
පාරාන්ධතාවය: 0.25;
}}
මෙම උදාහරණයේ දී, රූපය සම්පූර්ණයෙන්ම විනිවිද පෙනෙන ලෙස විනිවිද පෙනෙන පරිදි විනිවිද පෙනෙන අතර, අපගේ පළමු උදාහරණයේ ප්රතිවිරුද්ධයයි.
රූප පිටින් යනවා
ඔබට මෙම දෘශ්ය සංක්රමණ යෙදීම හා පින්තූරවලට නොලැබෙන බව ඔබට විශිෂ්ඨයි, නමුත් ඔබට CSS බලපෑම් සහිත රූප පමණක් භාවිතා කිරීම පමණක් සීමා නොවේ. ඔබට පහසුවෙන් ක්ලික් කර CSS-විලාසිත බොත්තම් සාදා ගත හැකිය. ඔබ ක්රියාකාරී ව්යාජ පංතිය භාවිතා කරමින් පාරදෘශ්යතාවය සකසනු ඇත, බොත්තම නිර්ණය කරන පන්තිය මත මාරු කිරීම ය. සිදුවනුයේ කුමක්දැයි බැලීමට මෙම බොත්තම ක්ලික් කරන්න.
කිසියම් දෘශ්ය අංගයක් සවිබල ගන්වන විට හෝ ක්ලික් කළ විට එය සීතල වීම අත්යවශ්ය වේ. මෙම උදාහරණයේ දී මායාවේ උඩ කොටස හා එහි වර්ණයේ වර්ණය වෙනස් කරමි. මෙන්න CSS:
# මයි ඩිව {
පළල: 280px;
පසුබිම් වර්ණය: # 557A47;
වර්ණය: #dfdfdf;
බල්ලා: 10px;
-webkit-සංක්රාන්තිය: සියලු 4s පහසු පිටත 0s;
-මොස්-සංක්රාන්තිය: සියලු 4s පහසු වේ 0;
-ms-සංක්රාන්තිය: සියලු 4s පහසු වේ 0;
-o-සංක්රාන්තිය: සියලු 4s පහසු වේ 0;
සංක්රාන්තිය: සියලු 4s පහසු වන 0s;
}}
# මායා:
-බෙබිට්-පාරාන්ධතාවය: 0.25;
-මොස්-පාරාන්ධතාවය: 0.25;
පාරාන්ධතාවය: 0.25;
වර්ණය: # 000;
}}
පසුබිම් වර්ණ අකුරින් සිටුවීමේ සිට සෙවුම් කළමණාකරනයන්ට ප්රයෝජනවත් වේ
මෙම සරල නාවිකකරණ මෙනුව තුළ මෙනුවේ අයිතමයන් මත මවුසය මෙනුවෙහි පසුබිමේ වර්ණය සෙමින් සෙමින් හා පිටතට වැටේ. HTML යනු මෙන්න:
- ගෙදර
- CSS3 ටීකාව
- CSS3 ගුණාංග
මෙන්න CSS:
ul # sampleNav {list-style: none; }}
ul # නියැදි නාලි {
දර්ශණය: පේළි;
float: වම්;
padding: 5px 15px;
සීමාව: 0 5px;
-webkit-transition: all 2s linear;
-moz-සංක්රමණය: සියලු 2s රේඛීය;
-ms-සංක්රාන්තිය: සියලු 2s රේඛීය;
-o-සංක්රාන්තිය: සියලු 2s රේඛීය;
සංක්රමණය: සියළු 2s රේඛීය;
}}
ul # sampleNav li {{text-decoration: none; }}
ul # නියැදිය:
පසුබිම් වර්ණය: # DAF197;
}}
බ්රවුසර් සහාය
දැනටමත් කිහිප වතාවක්ම මම ස්පර්ශ කර ඇති නිසා, මෙම විලාසයන් ඉතා හොඳ බ්රවුසර් උපකාරයක් ඇත, එබැවින් ඔබ කිසිදු වෙව්ලීමක් නොමැතිව ඒවා භාවිතා කිරීමට නිදහස් විය යුතුය. මේ සඳහා ඇති එකම ව්යාර්ථය වන්නේ අන්තර්ජාල Explorer හි බොහෝ පැරණි අනුවාදයන් වන නමුත්, මෙම පැරණි වෙබ් බ්රවුසරයේ ගැටළු වලට වඩා අඩුවෙන් සහ අඩු ගැටළුවක් වන අතර, ඇත්ත වශයෙන්ම, පැරණි බ්රවුසරයක් නොවේ නම්, මෙම විසකුරු සංක්රාන්තිය දැකිය හැකි ප්රධාන ගැටලුවක් නොවිය යුතුය. විනෝදය සඳහා අන්තර්ක්රියාකාරිත්වයට මෙම ආකාරයේ බලපෑම් සීමා කර ඇති අතර ඒවායේ ක්රියාකාරීත්වය ධාවනය කිරීමට හෝ ඒවායේ ප්රධාන අන්තර්ගතයන් ධාවනය කිරීමට හෝ රඳා නොපවතින විට, ප්රතිඵලවලට සහය නොදක්වන පැරණි බ්රව්සරවලට වඩා විනෝදජනක අත්දැකීමක් ලැබෙනු ඇත, නමුත් එම බ්රවුසර් භාවිතා කරන්නන් පවා වෙනස දැන සිටියත් විශේෂයෙන් වෙබ් අඩවිය සාමාන්ය ලෙස භාවිතා කළ හැකි අතර ඒවා අවශ්ය තොරතුරු ලබා ගන්න.
අමතර විනෝදය, හුවමාරු දෙකක් පින්තූර
එක් පින්තූරයක් වෙනත් ආකාරයකට අතුගා දැමීම සඳහා උදාහරණයක් මෙහි දැක්වේ. HTML භාවිතා කරන්න:
තවද අන්යයක් සම්පූර්ණයෙන්ම පාරදෘශ්ය වන CSS එක සම්පූර්ණයෙන්ම විනිවිද නොපෙනෙන අතර ඉන්පසු සංක්රාන්තිය හුවමාරු කර ගනී.
.swapMe img {-webkit-transition: all 1s පහසුයි-out-out; -මොස්-සංක්රාන්තිය: සියලු 1s පහසු-පිටත; -ms-සංක්රාන්තිය: සියළු 1s පහසු වේ; -o-සංක්රාන්තිය: සියලු 1s පහසු වේ; සංක්රාන්තිය: සියලු 1s පහසු වේ; } .swap1, .swapMe: hover .swap2 {-webkit-ප්රමිතිය: 1; -moz-පාරාදීසය: 1; පාරාන්ධතාවය: 1; } .swapMe: hover .swap1, .swap2 {-webkit-ප්රමිතිය: 0; -moz-පාරාදීසය: 0; පාරාන්ධතාවය: 0; }}