ស្រមោលខាងក្នុងក្នុង CSS៖ រូបភាព អត្ថបទ និងលើសពីនេះ។
តារាងមាតិកា
ស្រមោលខាងក្នុងនៅក្នុង CSS៖ រូបភាព អត្ថបទ និងលើសពី
ស្រមោលនៅក្នុង CSS គឺងាយស្រួល និងរហ័ស មិនថាអ្នកកំពុងទះលើស្រមោលប្រអប់ ឬស្រមោលអត្ថបទនោះទេ។ ប៉ុន្តែតើអ្នកសុខស្រួលយ៉ាងណាជាមួយនឹងស្រមោលខាងក្នុង? តើអ្នកអាចដកស្រមោលប្រអប់បញ្ចូលបានទេ? តើអ្នកធ្វើដូចគ្នានៅលើអត្ថបទខ្លះដោយរបៀបណា?
ថ្ងៃនេះ យើងនឹងរៀនពីបច្ចេកទេសនៃការបញ្ចូលស្រមោលដ៏សាមញ្ញមួយចំនួន ដែលអ្នកអាចដកចេញបានដោយប្រើកូដពីរបីបន្ទាត់។ ខ្ញុំនឹងណែនាំអ្នកតាមរយៈវាក្យសម្ព័ន្ធប្រអប់-ស្រមោល និងអត្ថបទស្រមោល និងរបៀបផ្លាស់ប្តូរពួកវាដើម្បីដកស្រមោលដែលដាក់ចេញ។
ស្វែងយល់អំពីទ្រព្យសកម្មឌីជីថល
វាក្យសម្ព័ន្ធស្រមោល
មុនពេលយើងចូលទៅក្នុងស្រមោលខាងក្នុង សូមក្រឡេកមើលវាក្យសម្ព័ន្ធមូលដ្ឋានសម្រាប់បង្កើតស្រមោល CSS ពីរប្រភេទផ្សេងគ្នា។ ទោះបីជាអ្នកបានសរសេរកូដទាំងនេះពីមុនមកក៏ដោយ វាពិតជាមានតម្លៃក្នុងការត្រួតពិនិត្យរហ័ស ដូច្នេះយើងទាំងអស់គ្នានៅលើទំព័រតែមួយ។
Box-Shadow
Box-shadows ប្រហែលជាប្រភេទស្រមោល CSS ទូទៅបំផុត។ ការប្រើប្រាស់សក្ដានុពលនៅទីនេះគឺមានភាពចម្រុះមិនគួរឱ្យជឿ ហើយអ្នកអភិវឌ្ឍន៍បានបង្កើតឡើងជាមួយនឹងគ្រប់ប្រភេទនៃកម្មវិធីដ៏អស្ចារ្យ។ វាក្យសម្ព័ន្ធប្រអប់-ស្រមោលពិតជាស្មុគ្រស្មាញណាស់ ហើយរួមបញ្ចូលតម្លៃប្រាំមួយដាច់ដោយឡែកពីគ្នា។ យើងនឹងចាប់ផ្ដើមដោយមើលទៅលើប្រាំនៃការធម្មតាបំផុតនៃការទាំងនេះ។
ដូចដែលអ្នកអាចមើលឃើញក្នុងបញ្ជីខាងលើ លំដាប់នៃតម្លៃគឺអុហ្វសិតផ្ដេក អុហ្វសិតបញ្ឈរ កាំព្រិល កាំរាលដាល និងពណ៌។ តម្លៃពីរដំបូង អុហ្វសិតផ្តេក និងបញ្ឈរគឺត្រង់ដោយស្មើភាព។ តម្លៃវិជ្ជមាននឹងរុញស្រមោលទៅស្តាំ និងចុះក្រោមរៀងៗខ្លួន ហើយតម្លៃអវិជ្ជមាននឹងរុញស្រមោលទៅឆ្វេង និងឡើងលើ។ នេះជាឧទាហរណ៍នៃទាំងពីរ៖
តម្លៃពីរចុងក្រោយ កាំព្រិល និងកាំរីករាលដាលគឺស្មុគស្មាញបន្តិច។ សំណួរដ៏ធំបំផុតដែលអ្នកប្រហែលជាមានគឺ តើអ្វីជាភាពខុសគ្នា? ដើម្បីឆ្លើយសំណួរនេះ សូមពិនិត្យមើលចំណុចមួយដែលអ្នកប្រហែលជាស្គាល់បំផុតជាមុនសិន៖ កាំព្រិល។
ដូចដែលអ្នកអាចមើលឃើញ គ្មានកាំព្រិលបង្កើតស្រមោលដែលមានគែមរឹង ហើយកាំព្រិលខ្ពស់បង្កើតគែមមិនច្បាស់។ សាមញ្ញណាស់មែនទេ? ដូច្នេះចុះយ៉ាងណាចំពោះកាំរាលដាល? តើវាខុសគ្នាយ៉ាងណា? រូបភាពមួយមានតម្លៃមួយពាន់ពាក្យ ដូច្នេះនេះគឺជាឧទាហរណ៍មួយ៖
ដូចដែលអ្នកបានឃើញហើយ ដោយមិនប៉ះពាល់ដល់ភាពស្រអាប់នៃស្រមោលនោះទេ ការរីករាលដាលនៃស្រមោលនឹងកើនឡើង និងបង្រួមផ្ទៃដែលកាន់កាប់ដោយស្រមោល។ . ប្រសិនបើអ្នកគិតថាវាជាទំហំនៃស្រមោល អ្នកនឹងមិន ពេក នៅឆ្ងាយទេ។
សូមមើលផងដែរ: របៀបដំឡើង & អនុវត្តការកំណត់ជាមុនរបស់ Lightroomប្រសិនបើអ្នកទុកចោលទាំងព្រិល ឬកាំរាលដាល តម្លៃរបស់ពួកវានឹងលំនាំដើមទៅសូន្យ។ . ក្រឡេកមើលជុំវិញគេហទំព័រ អ្នកទំនងជាឃើញថាការបង្ហាញភាគច្រើនដែលអ្នកបានឆ្លងកាត់ រួមទាំងការបង្ហាញនៅលើ Design Shack មិនមានកាំដែលបានកំណត់ទេ។
Text Shadow
ឥឡូវនេះយើងយល់យ៉ាងច្បាស់អំពីរបៀបដែលវាក្យសម្ព័ន្ធប្រអប់ស្រមោលដំណើរការ យើងអាចមើលវាក្យសម្ព័ន្ធសម្រាប់ស្រមោល CSS ប្រភេទផ្សេងទៀត៖ ស្រមោលអត្ថបទ . ជាសំណាងល្អ វាក្យសម្ព័ន្ធនេះគឺសាមញ្ញជាងសម្រាប់ប្រអប់-ស្រមោល។
ដូចដែលអ្នកបានឃើញ តម្លៃភាគច្រើនគឺដូចគ្នានៅទីនេះ ដូច្នេះប្រសិនបើអ្នកយល់មួយ អ្នកយល់មួយទៀត។ គួរឱ្យចាប់អារម្មណ៍អ្នកមិនមានសិទ្ធិចូលទៅកាន់ការរីករាលដាលនៃស្រមោលជាមួយនឹងអត្ថបទស្រមោល។ វានឹងល្អប្រសិនបើអ្នកធ្វើ ប៉ុន្តែជាអកុសលមុខងារនេះមិននៅទីនោះទេ។
Inset Box-Shadows
ត្រូវហើយ ឥឡូវនេះយើងបានដាក់មូលដ្ឋានគ្រឹះ ហើយអ្នកយល់ច្បាស់អំពីវាក្យសម្ព័ន្ធស្រមោលរបស់ CSS វាដល់ពេលហើយដើម្បីចូលទៅក្នុងការបង្កើត "ខាងក្នុង" ឬ " បញ្ចូល” ស្រមោល។ ដើម្បីផ្លាស់ប្តូរស្រមោលទៅជាស្រមោលអសកម្ម អ្វីដែលយើងពិតជាត្រូវធ្វើគឺបន្ថែមពាក្យតែមួយ "inset" ។
នេះជាមូលហេតុដែលយើងចាប់ផ្តើមជាមួយវាក្យសម្ព័ន្ធមូលដ្ឋាន។ សរុបមក ប្រអប់ស្រមោលនៃកូដអាចមើលទៅគួរឱ្យខ្លាចណាស់ ប៉ុន្តែប្រសិនបើអ្នកបំបែកវាដូចដែលយើងបានធ្វើ វាពិតជាសាមញ្ញណាស់។
តម្លៃទាំងអស់នៅទីនេះអនុវត្តដូចគ្នា មានតែស្រមោលប៉ុណ្ណោះដែលត្រូវបានដាក់នៅខាងក្នុងប្រអប់។ នៅទីនេះយើងអាចមើលឃើញពីរបៀបដែលការរីករាលដាលនៃស្រមោលនៅតែអាចមានឥទ្ធិពលយ៉ាងខ្លាំងទៅលើរបៀបដែលស្រមោលមើលទៅ៖
សូមកត់សម្គាល់ថានៅពេលនេះខ្ញុំពិតជាបានប្រើពណ៌ RGBa ជំនួសឱ្យតម្លៃគោលដប់ប្រាំមួយ។ នេះគឺល្អសម្រាប់ស្រមោលព្រោះតម្លៃអាល់ហ្វាផ្ដល់នូវវិធីរហ័ស និងងាយស្រួលក្នុងការបំភ្លឺឬងងឹតស្រមោល។
ជាមួយរូបភាព
វាងាយស្រួលគ្រប់គ្រាន់ក្នុងការបោះស្រមោលប្រអប់ទៅលើ div ទទេ ប៉ុន្តែចុះយ៉ាងណាបើអ្នកចង់ដាក់មួយនៅលើរូបភាព។ វាស្តាប់ទៅសាមញ្ញ ប៉ុន្តែការពិតគឺពិបាកបន្តិច។ សូមក្រឡេកមើលកូដមួយចំនួន និងរបស់វា។ឥទ្ធិពលចុងក្រោយ។ យើងនឹងចាប់ផ្តើមជាមួយស្លាករូបភាពចាស់ធម្មតា។
| 1 |
ឥឡូវនេះយើងនឹងកំណត់គោលដៅនេះនៅក្នុងរបស់យើង CSS និងបន្ថែមស្រមោលប្រអប់បញ្ចូល។ អ្នកគិតថារឿងបែបនេះនឹងដំណើរការ៖
| 1 2 3 | img { box-shadow : inset 0px 0px 10px rgba ( 0,0,0, 0.5); } |
ជាអកុសល វាផ្តល់ឱ្យយើងនូវលទ្ធផលដូចខាងក្រោម។ រូបភាពដំណើរការល្អ ប៉ុន្តែមើលមិនឃើញស្រមោល!
ដូច្នេះតើយើងដកស្រមោលខាងក្នុងចេញពីរូបភាពដោយរបៀបណា? មានវិធីផ្សេងគ្នាមួយចំនួនដើម្បីធ្វើវា ដែលទាំងអស់នេះមានគុណសម្បត្តិ និងគុណវិបត្តិរបស់វា។ សូមក្រឡេកមើលដំណោះស្រាយដ៏ពេញនិយមចំនួនពីរ។
សូមមើលផងដែរ: 20+ គំរូនិមិត្តសញ្ញាក្រុមតន្រ្តី Coolest សម្រាប់ Rock, Punk, & ក្រុមតន្រ្តីដែកដំណោះស្រាយទីមួយគឺត្រូវរុំរូបភាពក្នុង div ដែលមានកម្រិតដូចគ្នាទៅនឹងរូបភាព បន្ទាប់មកកំណត់ស្រមោលទៅ div នោះ ខណៈពេលដែលប្រើទីតាំងទាក់ទងមួយចំនួន និង z -index voodoo នៅលើរូបភាពខ្លួនឯង។ នេះជាអ្វីដែលមើលទៅដូចនៅក្នុងកូដ៖
| 1 2 3 |
| 1 2 3 4 5 6 7 8 9 10 11 12 | div { height : 200px ; ទទឹង: 400px; box-shadow៖ បញ្ចូល 0px 0px 10px rgba (0,0,0,0.9); } img { កម្ពស់ : 200px ; ទទឹង: 400px; ទីតាំង៖ សាច់ញាតិ; z-index : -2 ; } |
ដំណោះស្រាយនេះអាចដំណើរការបាន ប៉ុន្តែវាពាក់ព័ន្ធនឹងការសម្គាល់បន្ថែមបន្តិចបន្តួច និង CSS បន្ថែមបន្តិច។ ជាជម្រើសមួយ អ្នកអាចទម្លាក់រូបភាព HTML ហើយបញ្ចូលរូបភាពផ្ទៃខាងក្រោយតាមរយៈ CSS ។ ដោយប្រើវិធីនេះ រូបភាពមិនបិទបាំងស្រមោលទេ ប៉ុន្តែជំនួសវិញត្រូវបានដាក់នៅក្រោមវាតាមលំនាំដើម។
| 1 2 3 |
| 1 2 3 4 5 6 | div { កម្ពស់ : 200px ; ទទឹង: 400px; ផ្ទៃខាងក្រោយ : url ( http://lorempixum.com/400/200/transport/2 ); box-shadow៖ បញ្ចូល 0px 0px 10px rgba (0,0,0,0.9); } |
ប្រសិនបើយើងរួមបញ្ចូលគ្នានូវបច្ចេកទេសទាំងនេះជាមួយនឹងការរីករាលដាលខ្លាំង យើងអាចសម្រេចបាននូវប្រសិទ្ធិភាពរូបភាព vignette យ៉ាងខ្លាំងដោយប្រើតែ CSS ប៉ុណ្ណោះ។
Inset Text-Shadows
សូម្បីតែនៅក្នុងប្រអប់ inset-shadows ដែលស្មុគ្រស្មាញបំផុតរបស់ពួកគេគឺងាយស្រួលណាស់ក្នុងការរុំគំនិតរបស់អ្នក។ បោះពាក្យ "inset" ហើយស្រមោលធ្លាក់ចុះរបស់អ្នកក្លាយជាស្រមោលខាងក្នុង។ សាមញ្ញណាស់។
ជាអកុសល ស្រមោលអត្ថបទផ្តល់ឱ្យយើងនូវបញ្ហាជាច្រើនទៀតនៅទីនេះ។ តម្លៃ “inset” មិនត្រូវគ្នាជាមួយនឹង text-shadow ដូច្នេះអ្វីមួយបែបនេះនឹងមិនដំណើរការទេ៖
ជំនួសមកវិញ យើងត្រូវតែ hack វាជាមួយគ្នា។ របៀបដែលវាដំណើរការគឺចម្លែកណាស់ ដូច្នេះយើងនឹងសាងសង់វាជាពីរជំហាន ដូច្នេះអ្នកអាចឃើញអ្វីដែលកំពុងកើតឡើង។ ដំបូង យើងនឹងវាយចេញ h1 ហើយអនុវត្តរចនាប័ទ្មខាងក្រោម៖
| 1 2 3 4 5 | h1 { background-color : #565656 ; ពណ៌: ថ្លា; ស្រមោលអត្ថបទ៖ 0px 2px 3px rgba ( 255,255,255,0.5 ); } |
រួចហើយ យើងនៅក្នុងទឹកដីដ៏ចម្លែកមួយចំនួន។ យើងកំណត់ពណ៌ផ្ទៃខាងក្រោយងងឹត ស្រមោលអត្ថបទពណ៌ស និងពណ៌បំពេញថ្លា។ ប្រសិនបើអ្នកគិតថាវាចម្លែក សូមពិនិត្យមើលលទ្ធផល៖
នេះមិនមែនជាអ្វីដែលយើងចង់បានទាល់តែសោះ! គួរឱ្យចាប់អារម្មណ៍គ្រប់គ្រាន់,យើងឈានទៅដល់ការចាប់ផ្តើមដ៏ល្អឥតខ្ចោះ។ ធាតុផ្សំសម្ងាត់ដើម្បីធ្វើឱ្យអ្វីគ្រប់យ៉ាងដំណើរការគឺជាទ្រព្យសម្បត្តិ "ឈុតផ្ទៃខាងក្រោយ" ជាមួយនឹងតម្លៃកំណត់ទៅជា "អត្ថបទ" ។
| 1 2 3 4 5 6 7 8 | h1 { background-color : #565656 ; ពណ៌: ថ្លា; ស្រមោលអត្ថបទ៖ 0px 2px 3px rgba ( 255,255,255,0.5 ); -webkit-background-clip៖ អត្ថបទ ; -moz-background-clip៖ អត្ថបទ ; ឃ្លីបផ្ទៃខាងក្រោយ៖ អត្ថបទ; } |
ដោយកំណត់លក្ខណៈសម្បត្តិឃ្លីបផ្ទៃខាងក្រោយជាអត្ថបទ យើងអាចច្រឹបអ្វីដែលកើតឡើងនៅផ្ទៃខាងក្រោយបានយ៉ាងមានប្រសិទ្ធភាព (រូបភាព ជម្រាល ពណ៌ ។ល។) ទៅព្រំដែននៃអត្ថបទ។ នៅពេលដែលយើងធ្វើវាជាមួយនឹងកូដដែលយើងបានដំឡើងរួចហើយ នោះជាលទ្ធផល៖
ដូចដែលអ្នកបានឃើញហើយ យើងបានដកចេញនូវប្រសិទ្ធិភាពនៃការចុចអក្សរដ៏ស្រស់ស្អាត។ គែមមិនច្បាស់នោះកំពុងត្រូវបានច្រឹប ហើយឥឡូវនេះបង្កើតការបំភាន់នៃស្រមោលដែលបង្កប់។ ទន្ទឹមនឹងនេះ ស្រមោលអត្ថបទពណ៌សកំពុងផ្តល់ឱ្យយើងនូវកម្រិតនៃពន្លឺសម្រាប់ការបំពេញផ្ទៃខាងក្រោយ និងឥទ្ធិពល bevel បន្តិចនៅខាងក្រៅអត្ថបទ។ ប្រសិនបើយើងបុកស្រមោលនោះពី 0.5 ដល់ 03។ អត្ថបទកាន់តែងងឹត។
សេចក្តីសន្និដ្ឋាន
នៅទីនោះ អ្នកមានវា អ្វីគ្រប់យ៉ាងដែលអ្នកចង់ដឹងទាក់ទងនឹងរបៀបអនុវត្ត inset ស្រមោលជាមួយ CSS ។ វាជាតំបន់គួរឱ្យចាប់អារម្មណ៍ដើម្បីរុករក។ បច្ចេកទេសមិនមានវិចារណញាណទេ ហើយយកជំនាញខ្លះដើម្បីធ្វើជាម្ចាស់ ប៉ុន្តែប្រសិនបើអ្នកចាប់ផ្តើមជាមួយកូដខាងលើ អ្នកនឹងក្លាយជាអ្នកជំនាញក្នុងពេលឆាប់ៗនេះ។
