CSS বর্ডার অ্যানিমেশন

CSS-এ বর্ডার অ্যানিমেট করার বিভিন্ন উপায় দেখা

Bramus

বর্ডার সেট করা হচ্ছে

কোনও এলিমেন্টে বর্ডার সেট করার জন্য কয়েকটি পদ্ধতি উপলভ্য আছে: border, outline এবং box-shadow। স্টেফানি একলসের লেখা এলিমেন্ট বর্ডার যোগ করার ৩টি CSS পদ্ধতি-তে বিস্তারিতভাবে উল্লেখ করা হয়েছে যে, প্রতিটি পদ্ধতির নিজস্ব সুবিধা ও অসুবিধা আছে–বিশেষ করে বর্ডার অ্যানিমেট করার ক্ষেত্রে। অ্যানিমেশনের জন্য সঠিক CSS border ব্যবহার না করার প্রধান কারণ।

কেভিন জে-এর outline-offset ব্যবহার করে বর্ডার অ্যানিমেশন। Powell

সম্প্রতি আমার নজর কেড়েছে এমন একটি নিবন্ধ হল Fantastic CSS border animation, যেখানে লেখক Coco আরও বিকল্প এক্সপ্লোর করেছেন। ::before এবং ::after ব্যবহার করে জেনারেট করা কন্টেন্ট ইনজেক্ট করার মাধ্যমে তারা একটি নকল বর্ডার তৈরি করে যা পরে অ্যানিমেট করা হয়।

নিবন্ধে ব্যবহৃত সহায়ক অ্যানিমেটেড ভিজ্যুয়ালাইজেশন আমার কাছে সবচেয়ে বেশি আকর্ষণীয় বলে মনে হয়েছে। কাঙ্খিত ফলাফল পেতে ঠিক কী করা হচ্ছে তা ব্যাখ্যা করতে এগুলি সত্যিই সাহায্য করে।

Coco-র জেনারেট করা কন্টেন্ট ব্যবহার করে বর্ডার অ্যানিমেশন

সাদা লেয়ার ও রঙিন লাইন, দুটিই জেনারেট করা কন্টেন্ট। সাদা লেয়ারটি ফেড-ইন ও ফেড-আউট করার মাধ্যমে, সেগুলি কীভাবে স্ট্যাক করা হয় এবং অ্যানিমেশন কীভাবে কাজ করে তা স্পষ্ট হয়ে যায়।

বক্স মডেল রেখে দেওয়া হচ্ছে

বর্ডার অনুকরণ করার জন্য জেনারেটেড কন্টেন্ট ব্যবহার করার একটি অসুবিধা হল যে আপনি একটি ভাঙা বক্স মডেল পাবেন: কন্টেন্টটি এখন নকল বর্ডারকে অস্পষ্ট করতে পারে কারণ উল্লিখিত "বর্ডার" নিচে আঁকা হয়েছে। প্রশমিত করতে, আপনাকে padding হিসেবে কাঙ্ক্ষিত border-width প্রয়োগ করতে হবে।

প্রকৃত বর্ডার পেতে–এবং এইভাবে বক্স মডেলের কাজ ধরে রাখতে–আপনি একাধিক ব্যাকগ্রাউন্ড ব্যবহার করতে পারেন যা আপনি বর্ডার এরিয়াতে প্রসারিত করতে পারেন।

প্রাথমিক বিষয়

ডটেড বর্ডার তৈরি করে এবং একাধিক ব্যাকগ্রাউন্ড যোগ করে শুরু করা যাক।

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

background-origin-এর সাথে ব্যাকগ্রাউন্ডের সাইজ নির্ধারণ করা হচ্ছে

আপনি দেখতেই পাচ্ছেন যে এখানে ব্যাকগ্রাউন্ডে কিছু একটা মজার জিনিস চলছে: সেগুলি বর্ডারে আঁকা হয়েছে, কিন্তু conic-gradient-এর ক্ষেত্রে কিছু একটা ভুল হয়েছে বলে মনে হচ্ছে। এটি আসলে প্রত্যাশিত আচরণ: ডিফল্ট ব্যাকগ্রাউন্ড ছবি বর্ডারে আঁকা হয় না কারণ তাদের উৎস হল এলিমেন্টের padding-box। বর্ডার তৈরি করার জন্য, সেট করা ব্যাকগ্রাউন্ড ছবি বর্ডারে বারবার দেখানো হয়, যার ফলে অদ্ভুত ভিজ্যুয়াল এফেক্ট তৈরি হয়।

এই সমস্যার সমাধান করতে, আপনাকে ব্যাকগ্রাউন্ডটি প্রসারিত করতে হবে যাতে এটি বর্ডারের আকারও দখল করে। আপনি ব্যাকগ্রাউন্ড স্ট্রেচ ও রিপজিশন করে ম্যানুয়ালি এটি করতে পারেন, তবে border-box-এর সাথে ব্যাকগ্রাউন্ডের সাইজ ম্যাচ করতে background-origin প্রপার্টি ব্যবহার করা সবচেয়ে ভাল।

Browser Support

• 1
• 12
• 4
• 3

Source

আপনি কী কী করতে পারবেন না

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

কী করতে হবে

background-origin: border-box;

এই একটি জিনিস যোগ করলে সবকিছু অনেক ভালো দেখাবে:

background-clip-এর সাহায্যে সাদা ব্যাকগ্রাউন্ড লেয়ার ছোট করা হচ্ছে

ব্যাকগ্রাউন্ড এখন সব জায়গা নিয়ে নিয়েছে, তাই আধা-স্বচ্ছ লেয়ারটি আবার ছোট করতে হবে। background-size নিয়ে আবার ঘাঁটাঘাঁটি করার পরিবর্তে, এটি করার আরও সহজ উপায় আছে: background-clip ব্যবহার করুন এবং এটি padding-box-এ সেট করুন। এইভাবে ব্যাকগ্রাউন্ড আর বর্ডারের নিচে আঁকা হয় না।

Browser Support

• 1
• 12
• 4
• 5

Source

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

সবশেষে, সম্পূর্ণ এফেক্ট পেতে বর্ডার transparent করুন।

border: 0.3rem dotted transparent;

অ্যানিমেশন

বর্ডারের অ্যানিমেশন ফিরিয়ে আনতে, আপনি conic-gradient-এর শুরুর কোণ পরিবর্তন করতে পারেন।

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

@property-এর জন্য এটি কাজ করে এমন ব্রাউজারে খুব সহজেই করা যায়:

Browser Support

• 85
• 85
• 128
• 16.4

Source

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

সব একসাথে যোগ করলে, কোডটি এইরকম দেখায়:

বোনাস কন্টেন্ট: border-image

গ্রেডিয়েন্ট বর্ডার আঁকার জন্য আগে কভার করা অ্যাপ্রোচ হল CSS border-image ব্যবহার করা।

Browser Support

• 16
• 12
• 15
• 6

Source

এটি আরও সহজ কোড ব্যবহারের সুবিধা দেয়, কারণ আপনাকে ওভারল্যাপ করা ব্যাকগ্রাউন্ড নিয়ে চিন্তা করতে হয় না। আগের মতোই অ্যানিমেশন প্রয়োগ করা যাবে।

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

তবে, আপনি লক্ষ্য করবেন যে এই পদ্ধতিতে কিছু জিনিস আর কাজ করে না:

• border-image, border-radius অনুসরণ করে না; এটি সবসময় আয়তাকার থাকবে।
• border-image-slice-কে ফিল হিসেবে সেট করার সময়, border-image-কে সেট করা background-এর নিচে নয়, উপরে আঁকা হয়। আপনি ব্যাকগ্রাউন্ড অর্ধ-স্বচ্ছ করতে চাইলে এটি সমস্যাজনক হতে পারে।

উপসংহারে

CSS-এ বর্ডার অ্যানিমেট করার অনেক সম্ভাবনা আছে। ব্যবহারের উপর নির্ভর করে, আপনি একটি বা অন্যটির দিকে ঝুঁকতে পারেন।