រំលងទៅខ្លឹមសារមេ
LibraTool logoLibraTool

កម្មវិធីបង្កើត CSS Gradient ឥតគិតថ្លៃ

បង្កើត CSS gradient លីនែ រ៉ាឌីស និង conic ជាមួយការមើលជាមុនផ្ទាល់។ ចម្លង CSS ដោយចុចម្ដង។

ធ្វើការក្រៅបណ្តាញនៅពេលបានផ្ទុករួច
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

ជៀសវាងចំណុចកណ្តាលពណ៌ប្រផេះរវាងពណ៌ខុសគ្នាខ្លាំង។ បន្ថែមបន្ទាត់ sRGB ធម្មតាជាជម្រើសបម្រុងសម្រាប់កម្មវិធីរុករកចាស់។

0%
100%

លំនាំដើម

ការប្រើប្រាស់ទូទៅ

  • បង្កើតក្រាប់ពណ៌ចាក់សម្រាប់ផ្នែក Heroប្រដាប់ផ្ទៃខាងក្រោយក្រាប់ពណ៌ចាក់មួយលេចលង្វង់សម្រាប់ផ្នែក hero របស់វេបសាយ និងទំព័រចូលបាន។
  • បង្កើតប៊ូតុងក្រាប់ពណ៌ចាក់ និង CTAsប្រដាប់ផ្ទៃខាងក្រោយប៊ូតុងក្រាប់ពណ៌ចាក់ដែលទាក់ទងចិត្ត សម្រាប់វាក់រហ័សឥទ្ធិយដែលលេចសាដៈ។
  • បង្កើតក្រាប់ពណ៌ចាក់សម្រាប់ផ្ទៃខាងក្រោយលក្ខណ៍ប័ណ្ណប្រដាប់ក្រាប់ពណ៌ចាក់សម្រាប់លក្ខណ៍ប័ណ្ណ ប្រអប់ wishes ឡើងក្រោម និងផ្ទៃខាងក្រោយឧបករណ៍ UI
  • បង្កើតក្រាប់ពណ៌ចាក់សម្រាប់ក្រាហ្វិកមេដ្យាសង្គមប្រដាប់ក្រាប់ពណ៌ចាក់ដែលយ៉ាងតូច សម្រាប់ Instagram posts YouTube thumbnails និង Twitter cards
  • បង្កើតមាត្រដ្ឋានពណ៌សម្រាប់ក្រាហ្វិកបង្កើតមាត្រដ្ឋានពណ៌ក្រាប់សម្រាប់ heatmaps របា រ្ខប្រឹងម្ខាង និងក្រាហ្វិកទិន្នន័យ។

វាដំណើរការដោយរបៀបណា

កម្មវិធីបង្កើត gradient កសាង string gradient CSS ដោយផ្ទាល់នៅក្នុងកម្មវិធីរុករក — គ្មានបណ្ណាល័យ គ្មានម៉ាស៊ីនមេ គ្មានការផ្ទុកឡើងទេ។ អនុគមន៍សរសេរដោយដៃប្រកបវាក្យសម្ព័ន្ធ linear-gradient, radial-gradient ឬ conic-gradient ត្រឹមត្រូវពីការឈប់ពណ៌ និងមុំរបស់អ្នកក្នុងពេលវេលាពិត រួចធ្វើទ្រង់ទ្រាយលទ្ធផលសម្រាប់គោលដៅលទ្ធផលណាមួយដែលអ្នកជ្រើសរើស។

  1. 1
    កំណត់រចនាសម្ព័ន្ធការឈប់ និងទិសដៅ
    អ្នកកំណត់ចន្លោះ 2 ដល់ 6 ការឈប់ពណ៌ដោយប្រើកម្មវិធីជ្រើសរើសពណ៌ដើមកំណើតរបស់កម្មវិធីរុករក រួចកំណត់ទីតាំងការឈប់នីមួយៗតាមអ័ក្ស 0–100% ជាមួយឧបករណ៍រំកិលជួរ។ សម្រាប់ gradient លីនេអ៊ែរ និង conic អ្នកក៏ជ្រើសរើសមុំ (0–360°) ផងដែរ; សម្រាប់ gradient ជាចរង្វង់ អ្នកជ្រើសរើសរូបរាង (ពងក្រពើ ឬរង្វង់) និងពាក្យគន្លឹះទំហំដែលគ្រប់គ្រងថាតើ gradient ពង្រីកឆ្ងាយប៉ុណ្ណា។
  2. 2
    buildCss ប្រកប string gradient
    នៅរាល់ការផ្លាស់ប្តូរ អនុគមន៍ buildCss ក្នុងស្រុកភ្ជាប់ប៉ារ៉ាម៉ែត្ររបស់អ្នកទៅជាការហៅអនុគមន៍ CSS ត្រឹមត្រូវ — ឧទាហរណ៍ linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)។ គ្មានបណ្ណាល័យពាក់ព័ន្ធទេ; string ត្រូវបានកសាងជាមួយឡូជីកគំរូ JavaScript ធម្មតា និងភ្ជាប់ដោយផ្ទាល់ពី array ការឈប់។
  3. 3
    ការមើលជាមុនផ្ទាល់បង្ហាញតាមរចនាប័ទ្មក្នុងបន្ទាត់
    string gradient ដែលបានប្រកបត្រូវបានអនុវត្តដោយផ្ទាល់ទៅធាតុ div ជារចនាប័ទ្មផ្ទៃខាងក្រោយក្នុងបន្ទាត់ ដូច្នេះម៉ាស៊ីន CSS ផ្ទាល់របស់កម្មវិធីរុករកបង្ហាញការមើលជាមុន។ គ្មាន canvas ឬរូបភាពពាក់ព័ន្ធទេ — អ្វីដែលអ្នកឃើញគឺគុណលក្ខណៈ CSS កំពុងត្រូវបានអនុវត្តតាមព្យញ្ជនៈ។
  4. 4
    លទ្ធផលចម្លងបានក្នុងទម្រង់បួន
    ជម្រើសទម្រង់ប្តូរ string gradient ដូចគ្នាទៅ CSS ធម្មតា (background: ...), ប្លុក CSS-ជាមួយ-solid-fallback, ថ្នាក់តម្លៃបំពាន Tailwind ឬសេចក្តីប្រកាសអថេរ SCSS។ ការចុចចម្លងសរសេរលទ្ធផលដែលបានជ្រើសរើសទៅក្ដារតម្បៀតខ្ទាស់តាម navigator.clipboard.writeText។ gradient បច្ចុប្បន្នក៏ត្រូវបានអ៊ិនកូដក្នុង URL hash ដូច្នេះអ្នកអាចចំណាំ ឬចែករំលែកវាបានដែរ។

ឧបករណ៍ពាក់ព័ន្ធ

🟦

ម៉ាស៊ីនបង្កើត CSS Grid

រចនា CSS grid ដោយមើលឃើញ — track ឯកតា និងគម្លាត — ហើយចម្លង CSS និង HTML ដែលបង្កើត។

សាកល្បង
↔️

ម៉ាស៊ីនបង្កើត CSS Flexbox

សាលកម្មចម្រើនលម្អិត flex direction, wrap, justify និង align ក្នុងលទ្ធផលក្នុងពេលវេលាផ្ទាល់ — ហើយចម្លងលេខកូដ CSS។

សាកល្បង
🧮

ម៉ាទ្រីសគណនា

បូក ដក គុណ ត្រង់ស្ពូស ច្រាស និងកាត់បន្ថយម៉ាទ្រីស ព្រមទាំងដេទែមីណង់ ចំណាត់ថ្នាក់ តម្លៃផ្ទាល់ និងដោះស្រាយ Ax = b — រហូតដល់ 8×8 ចម្លងបានដោយប៉ះតែម្តង។ ឥតគិតថ្លៃ និងឯកជន។

សាកល្បង

សំណួរដែលសួរជាញឹកញាប់