ការផ្លាស់ប្តូរ CSS3 បង្កើតបែបផែនអមៗ
អ្នករចនាគេហទំព័របានចង់គ្រប់គ្រងលើទំព័រដែលពួកគេបានបង្កើតនៅពេលដែល CSS3 បានកើតមានឡើង។ រចនាប័ទ្មថ្មីដែលបានណែនាំនៅក្នុង CSS3 បានផ្តល់ឱ្យអ្នកជំនាញគេហទំព័រនូវសមត្ថភាពក្នុងការបន្ថែមផលប៉ះពាល់ដូចជា Photoshop ទៅទំព័ររបស់ពួកគេ។ នេះរួមបញ្ចូលទាំងលក្ខណៈសម្បត្តិដូចជា ស្រមោលស្រក់និងពន្លឺ , ជ្រុងមូលនិងច្រើនទៀត។ CSS3 ក៏បានណែនាំបែបផែនចលនាដែលអាចត្រូវបានប្រើដើម្បីបង្កើតអន្តរកម្មដ៏ស្រស់ស្អាតនៅលើគេហទំព័រ។
ប្រសិទ្ធិភាពមើលឃើញដ៏ល្អមួយដែលអ្នកអាចបន្ថែមធាតុនៅក្នុងគេហទំព័ររបស់អ្នកដោយប្រើ CSS3 គឺដើម្បីឱ្យពួកគេបន្ថយនៅក្នុងនិងចេញដោយប្រើការរួមបញ្ចូលគ្នានៃលក្ខណៈសម្បត្តិសម្រាប់ ភាពស្រអាប់ និងការផ្លាស់ប្តូរ។ នេះជាមធ្យោបាយងាយស្រួលនិងគាំទ្រយ៉ាងងាយស្រួលក្នុងការធ្វើឱ្យទំព័ររបស់អ្នកកាន់តែមានអន្តរកម្មដោយបង្កើតតំបន់រសាត់ដែលផ្តោតអារម្មណ៍នៅពេលភ្ញៀវទេសចរធ្វើអ្វីមួយដូចជាការដាក់លើធាតុនោះ។
សូមពិនិត្យមើលថាតើវាងាយស្រួលក្នុងការបន្ថែមប្រសិទ្ធិភាពមើលឃើញអន្តរកម្មទៅនឹងធាតុផ្សេងៗនៅលើគេហទំព័ររបស់អ្នក ..
សូមផ្លាស់ប្តូរភាពស្រអាប់នៅលើការដាក់
យើងនឹងចាប់ផ្តើមដោយសម្លឹងមើលរបៀបផ្លាស់ប្តូរភាពស្រអាប់នៃរូបភាពនៅពេលអតិថិជនកំពុងដាក់លើធាតុនោះ។ សម្រាប់ឧទាហរណ៍នេះ (HTML ត្រូវបានបង្ហាញខាងក្រោម) ខ្ញុំកំពុងប្រើរូបភាពដែលមានគុណលក្ខណៈថ្នាក់នៃ greydout ។
ដើម្បីធ្វើឱ្យវាមានពណ៌ប្រផេះយើងបន្ថែមក្បួនរចនាប័ទ្មខាងក្រោមទៅរចនាប័ទ្ម CSS របស់យើង:
.greydout {
-webkit-opacity: 0,25;
-moz-opacity: 0.25;
ភាពស្រអាប់: 0.25;
}
ការកំណត់ភាពស្រអាប់ទាំងនេះប្រែទៅជា 25% ។ នេះមានន័យថារូបភាពនឹងត្រូវបានបង្ហាញជា 1/4 នៃតម្លាភាពធម្មតារបស់វា។ ភាពស្រអាប់យ៉ាងពេញលេញដោយគ្មានតម្លាភាពនឹងមានកម្រិត 100% ខណៈដែល 0% នឹងមានតម្លាភាពទាំងស្រុង។
បន្ទាប់ដើម្បីធ្វើឱ្យរូបភាពលេចចេញច្បាស់ (ឬច្បាស់ជាងនេះដើម្បីឱ្យក្លាយទៅជាស្រអាប់យ៉ាងពេញលេញ) នៅពេលកណ្តុរត្រូវបានដាក់លើវាអ្នកនឹងបន្ថែម: hover pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
ភាពស្រអាប់: 1;
}
អ្នកនឹងកត់សម្គាល់ឃើញថាសម្រាប់ឧទាហរណ៍ទាំងនេះខ្ញុំកំពុងប្រើបុព្វបទដែលបានដាក់បុព្វបទនៃច្បាប់ដើម្បីធានាភាពឆបគ្នាសម្រាប់ជំនាន់ចាស់នៃកម្មវិធីរុករកទាំងនោះ។ ខណៈនេះជាការអនុវត្តល្អការពិតគឺថាច្បាប់នៃភាពស្រអាប់ឥឡូវនេះត្រូវបានគាំទ្រយ៉ាងល្អដោយកម្មវិធីរុករកហើយវាមានសុវត្ថិភាពណាស់ក្នុងការទម្លាក់អ្នកលក់ទាំងនោះដែលមានបុព្វបទ។ ក៏ប៉ុន្តែក៏គ្មានហេតុផលដើម្បីមិនបញ្ចូលបុព្វបទទាំងនេះប្រសិនបើអ្នកចង់ធានាការគាំទ្រសម្រាប់កំណែកម្មវិធីរុករកចាស់។ គ្រាន់តែប្រាកដថាត្រូវធ្វើតាមការអនុវត្តដ៏ល្អបំផុតនៃការបញ្ចប់ការប្រកាសជាមួយរចនាប័ទ្មធម្មតាដែលគ្មានបុព្វបទនៃរចនាប័ទ្ម។
ប្រសិនបើអ្នកដាក់វានៅលើគេហទំព័រអ្នកនឹងឃើញថាការលៃតម្រូវភាពស្រអាប់នេះគឺជាការផ្លាស់ប្តូរយ៉ាងឆាប់រហ័ស។ ដំបូងវាជាប្រផេះហើយបន្ទាប់មកវាមិនមែនទេដោយគ្មានរដ្ឋបណ្តោះអាសន្នរវាងអ្នកទាំងពីរ។ វាគឺដូចជាការបិទពន្លឺ - បើកឬបិទ។ នេះអាចជាអ្វីដែលអ្នកចង់បានប៉ុន្តែអ្នកក៏ប្រហែលជាចង់សាកល្បងជាមួយការផ្លាស់ប្តូរដែលកាន់តែច្រើនបន្តិចម្តង ៗ ។
ដើម្បីបន្ថែមប្រសិទ្ធិភាពដ៏ស្រស់ស្អាតនិងធ្វើឱ្យបន្ថយបន្តិចម្តងនេះ, អ្នកចង់បន្ថែមលក្ខណៈសម្បត្តិអន្តរកាលទៅថ្នាក់ .greydout:
.greydout {
-webkit-opacity: 0,25;
-moz-opacity: 0.25;
ភាពស្រអាប់: 0.25;
-webkit-transition: ទាំងអស់ 3s បន្ធូរបន្ថយ;
-moz-transition: ទាំងអស់ 3s បន្ធូរបន្ថយ;
-ms-transition: ទាំងអស់ 3s បន្ធូរបន្ថយ;
- ការផ្លាស់ប្តូរ: ទាំងអស់ 3s បន្ធូរបន្ថយ;
ការផ្លាស់ប្តូរ: ទាំងអស់ 3s បន្ធូរបន្ថយ;
}
ជាមួយនឹងកូដនេះការផ្លាស់ប្តូរនេះនឹងផ្លាស់ប្តូរជាលំដាប់ជាជាងគ្រាន់តែផ្លាស់ប្តូរភ្លាមៗ។
ជាថ្មីម្តងទៀតយើងកំពុងប្រើលេខនៃអ្នកលក់ដែលបានដាក់បុព្វបទនៅទីនេះ។ ការផ្លាស់ប្តូរមិនត្រូវបានគាំទ្រជាភាពស្រអាប់ទេដូច្នេះប្រហាក់ប្រហែលទាំងនេះធ្វើឱ្យយល់។
រឿងមួយដែលត្រូវចងចាំនៅពេលអ្នករៀបចំអន្តរកម្មទាំងនេះគឺថាឧបករណ៍អេក្រងថាសប៉ះមិនមាន "សន្សំសំចៃ" ទេហេតុដូច្នេះផលប៉ះពាល់ទាំងនេះជារឿយៗបាត់បង់ទៅលើអ្នកដែលប្រើឧបករណ៍អេក្រង់ដូចជាទូរស័ព្ទដៃជាដើម។ ការផ្លាស់ប្តូរជារឿយៗនឹងកើតមានឡើងប៉ុន្តែវាកើតឡើងយ៉ាងឆាប់រហ័សដែលពួកគេមិនអាចមើលឃើញពិតប្រាកដ។ វាល្អប្រសិនបើអ្នកបន្ថែមថានេះជាផលប្រយោជន៍បន្ថែមប៉ុន្តែជៀសវាងការផ្លាស់ប្តូរដែលត្រូវបានគេមើលឃើញសម្រាប់មាតិកាដែលត្រូវយល់។
ការហៀរចេញគឺអាចធ្វើបាន
អ្នកមិនចាំបាច់ចាប់ផ្តើមរូបភាពដែលរសាត់ទេអ្នកអាចប្រើភាពផ្លាស់ប្តូរនិងភាពស្រអាប់ដើម្បីបន្ថយចេញពីរូបភាពស្រអាប់។ ដោយប្រើរូបភាពដូចគ្នា, តែជាមួយថ្នាក់មួយ withfadeout:
class = "withfadeout">
ដូចមុនដែរអ្នកអាចផ្លាស់ប្ដូរភាពស្រអាប់ដោយប្រើកម្មវិធីជ្រើស hover:
.withfadeout {
-webkit-transition: ទាំងអស់ 2s ងាយស្រួល - ក្នុង - ចេញ;
-moz-transition: ទាំងអស់ 2s ងាយស្រួលក្នុងការចេញ -
-ms-transition: ទាំងអស់ 2s បន្ធូរបន្ថយចេញ;
- ការផ្លាស់ប្តូរ: ទាំងអស់ 2s ងាយស្រួល - ក្នុង - ចេញ;
ការផ្លាស់ប្តូរ: ទាំងអស់ 2s ងាយស្រួល - ក្នុង - ចេញ;
}
.withfadeout: hover {
-webkit-opacity: 0,25;
-moz-opacity: 0.25;
ភាពស្រអាប់: 0.25;
}
ក្នុងឧទាហរណ៍នេះរូបភាពនឹងផ្លាស់ប្តូរពីស្រអាប់ដើម្បីឱ្យមានតម្លាភាព - ផ្ទុយទៅវិញឧទាហរណ៍ដំបូងរបស់យើង។
ទៅលើសពីរូបភាព
វាល្អឥតខ្ចោះដែលអ្នកអាចអនុវត្តការផ្លាស់ប្តូរដែលមើលឃើញទាំងនេះនិងបន្ថយរូបភាពប៉ុន្តែអ្នកមិនត្រូវបានកំណត់ត្រឹមការប្រើប្រាស់រូបភាពជាមួយនឹងបែបផែន CSS ទាំងនេះទេ។ អ្នកអាចធ្វើឱ្យ CSS មានភាពងាយស្រួលនៅពេលដែលចុចនិងដាក់។ អ្នកនឹងកំណត់ភាពស្រអាប់ដោយប្រើ pseudo-class សកម្មហើយដាក់ការផ្លាស់ប្ដូរនៅលើថ្នាក់ដែលកំណត់ប៊ូតុង។ ចុចនិងសង្កត់ប៊ូតុងនេះដើម្បីមើលថាមានអ្វីកើតឡើង។
វាអាចធ្វើឱ្យធាតុផ្សំនៃវត្ថុដែលមើលឃើញរលាយនៅពេលដែលងងឹតជាងឬចុចលើ។ ក្នុងឧទាហរណ៍នេះខ្ញុំផ្លាស់ប្ដូរភាពស្រអាប់នៃ div និងពណ៌នៃអត្ថបទនៅពេលដែលកណ្ដុរនៅលើវា។ នេះជា CSS:
#myDiv {
ទទឹង: 280 ភីក;
background-color: # 557A47;
ពណ៌: #dfdfdf;
ចន្លោះ: 10px;
-webkit-transition: រាល់ 4s បន្សល់ទុក 0s;
-moz-transition: ទាំងអស់ 4s បន្សល់ពី 0s;
-ms-transition: all 4s បន្សល់ទុក 0s;
- ការផ្លាស់ប្តូរ: រាល់ 4s បន្សល់ទុក 0s;
ការផ្លាស់ប្តូរ: រាល់ 4s បន្សល់ទុក 0s ។
}
#myDiv: hover {
-webkit-opacity: 0,25;
-moz-opacity: 0.25;
ភាពស្រអាប់: 0.25;
ពណ៌: # 000;
}
ម៉ឺនុយរុករកអាចទទួលបានអត្ថប្រយោជន៍ពីពណ៌ផ្ទៃខាងក្រោយដែលកំពុងរលាយ
នៅក្នុងម៉ឺនុយរុករកសាមញ្ញនេះពណ៌ផ្ទៃខាងក្រោយបន្ថយបន្តិចម្តង ៗ ក្នុងនិងក្រៅនៅពេលខ្ញុំដាក់កណ្ដុរលើធាតុម៉ឺនុយ។ នេះគឺជា HTML:
- ផ្ទះ
- CSS3 ការបង្រៀន
- លក្ខណៈសម្បត្តិ CSS3
ហើយទីនេះគឺ CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
បង្ហាញ: inline;
float: left;
ចន្លោះ: 5px 15px;
រឹម: 0 5px;
-webkit-transition: ទាំងអស់ 2s លីនេអ៊ែរ;
-moz-transition: ទាំងអស់ 2s linear;
-ms-transition: ទាំងអស់ 2s linear;
-o-transition: all 2s linear;
ការផ្លាស់ប្តូរ: ទាំងអស់ 2s លីនេអ៊ែរ;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
ផ្ទៃខាងក្រោយ - ពណ៌: # DAF197;
}
ការគាំទ្រកម្មវិធីរុករក
ដូចដែលខ្ញុំបាននិយាយពីរបីដងរួចមកហើយរចនាប័ទ្មទាំងនេះមានការគាំទ្រកម្មវិធីរុករកល្អណាស់ដូច្នេះអ្នកគួរតែមានអារម្មណ៍ដោយសេរីក្នុងការប្រើប្រាស់វាដោយមិនមានការភ័យរន្ធត់។ ការលើកលែងតែមួយគត់ចំពោះបញ្ហានេះគឺកំណែចាស់របស់ Internet Explorer ប៉ុន្តែជាមួយនឹងការសំរេចចិត្តនាពេលថ្មីៗនេះរបស់ក្រុមហ៊ុន Microsoft ដើម្បីបញ្ចប់ការគាំទ្រសម្រាប់កំណែ IE ទាំងអស់ខាងក្រោម 11 កម្មវិធីរុករកចាស់ៗទាំងនេះក្លាយជាបញ្ហាតិចតួចនិងតិចជាង - ហើយជាក់ស្តែងប្រសិនបើកម្មវិធីរុករកចាស់មិនដំណើរការ សូមមើលការផ្លាស់ប្តូរនេះដែលមិនគួរជាបញ្ហាធំ។ ដរាបណាអ្នកកំណត់ប្រភេទបែបនេះទៅអន្តរកម្មដ៏រីករាយនិងមិនពឹងផ្អែកលើពួកវាដើម្បីជំរុញមុខងារឬបង្ហាញមាតិកាសំខាន់នោះកម្មវិធីរុករកចាស់ដែលមិនគាំទ្របែបផែននឹងទទួលបានបទពិសោធន៍តិចជាងប៉ុន្តែអ្នកប្រើនៅលើកម្មវិធីរុករកទាំងនោះនឹងមិនមាន ដឹងពីភាពខុសគ្នាជាពិសេសប្រសិនបើពួកគេអាចប្រើគេហទំព័រនេះជាធម្មតាហើយទទួលបានព័ត៌មានដែលពួកគេត្រូវការ។
រីករាយបន្ថែមប្តូររូបភាពពីរ
នេះជាឧទាហរណ៍មួយអំពីរបៀបបំបាត់រូបភាពមួយចូលទៅក្នុងរូបភាពមួយទៀត។ ប្រើ HTML:
និង CSS ដែលធ្វើឱ្យមួយថ្លាពេញលេញខណៈពេលដែលមួយទៀតគឺស្រអាប់ខ្លាំងហើយបន្ទាប់មកការផ្លាស់ប្តូរផ្លាស់ប្តូរពីរ:
.swapMe img {-webkit-transition: ទាំងអស់ 1s បន្ធូរបន្ថយចេញ; -moz- ការផ្លាស់ប្តូរ: ទាំងអស់ 1s បន្ធូរ - ចេញ -; -m ការផ្លាស់ប្តូរ: ទាំងអស់ 1s ការបន្ធូរបន្ថយ - ចេញ -; - ការផ្លាស់ប្តូរ: ទាំងអស់ 1s បន្ធូរបន្ថយ - ចេញ -; ការផ្លាស់ប្តូរ: ទាំងអស់ 1s បន្ធូរបន្ថយ - ចេញ -; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; ភាពស្រអាប់: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; ភាពស្រអាប់: 0; }