এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

একটি শীতল সীমানা তৈরি করতে কনিক গ্রেডিয়েন্ট ব্যবহার করুন

কনিক গ্রেডিয়েন্টগুলি কিছু আকর্ষণীয় প্রভাব তৈরি করতে ব্যবহার করা যেতে পারে, যেমন এই চমৎকার সীমানা উদাহরণ।

অ্যাডাম আর্গিল দ্বারা তৈরি এই কোডপেন , মূলত টুইটারে এই টুইটের মাধ্যমে ভাগ করা হয়েছে, একটি সীমানা তৈরি করতে কীভাবে একটি কনিক গ্রেডিয়েন্ট ব্যবহার করতে হয় তা দেখায়।

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

টেরি মুন সৃজনশীলভাবে অ্যাডামের কোডপেনকে কাঁটাচামচ করে এই কোডপেনটি তৈরি করেন। আপনার মাউসটিকে উপাদানটির উপরে সরান এবং আপনি গ্রেডিয়েন্ট পরিবর্তন দেখতে পাবেন, জাভাস্ক্রিপ্টের একটি সামান্য বিটকে একটি সিএসএস কাস্টম সম্পত্তি আপডেট করার জন্য ধন্যবাদ যা ঘূর্ণন কোণটি সঞ্চয় করে।

এই উদাহরণ border-image-source সম্পত্তি ব্যবহার করে। এই বৈশিষ্ট্যটি একটি উপাদানের সীমানা তৈরি করতে ব্যবহৃত উত্স চিত্র সেট করে। অন্যান্য বৈশিষ্ট্যগুলির মতো যা একটি চিত্রের মান গ্রহণ করে, যে কোনও CSS গ্রেডিয়েন্ট প্রকারও বৈধ।

`border-image-source`

ব্রাউজার সমর্থন

উৎস