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

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

Bramus

সীমানা নির্ধারণ

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

একটি নিবন্ধ যা সম্প্রতি আমার দৃষ্টি আকর্ষণ করেছে তা হল ফ্যান্টাস্টিক সিএসএস বর্ডার অ্যানিমেশন , যেখানে লেখক কোকো আরও বিকল্পগুলি অন্বেষণ করেছেন৷ ::before এবং ::after ব্যবহার করে জেনারেট করা কন্টেন্ট ইনজেকশনের মাধ্যমে তারা একটি ভুল বর্ডার তৈরি করে যা পরে অ্যানিমেটেড হয়।

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

সাদা স্তর এবং রঙিন লাইন উভয়ই সামগ্রী তৈরি করে। সাদা স্তরটিকে ভিতরে এবং বাইরে বিবর্ণ করে, তারা কীভাবে স্ট্যাক করে এবং কীভাবে অ্যানিমেশন কাজ করে তা পরিষ্কার হয়ে যায়।

বক্স মডেল ধরে রাখা

একটি সীমানা অনুকরণ করার জন্য জেনারেটেড সামগ্রী ব্যবহার করার একটি অসুবিধা হল যে আপনি একটি ভাঙা বাক্স মডেলের সাথে শেষ করবেন: বিষয়বস্তুটি এখন ভুল সীমানাটিকে অস্পষ্ট করতে পারে কারণ "সীমানা" নীচে আঁকা হয়েছে৷ প্রশমিত করতে, আপনাকে 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 প্রপার্টি ব্যবহার করা সবচেয়ে ভাল।

/* 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 সেট করুন। এই ভাবে পটভূমি আর সীমানা এলাকার নীচে আঁকা হয় না.

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 কে ধন্যবাদ এটি সমর্থনকারী ব্রাউজারগুলিতে এটি একটি হাওয়া হয়ে উঠেছে:

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

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

সব মিলিয়ে, কোডটি হয়ে যায়:

বোনাস বিষয়বস্তু: border-image

একটি গ্রেডিয়েন্ট সীমানা আঁকার জন্য পূর্বে আচ্ছাদিত পদ্ধতি হল CSS border-image ব্যবহার করা।

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

/* 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 নীচে আঁকা হয় না কিন্তু উপরে। আপনি যদি ব্যাকগ্রাউন্ডটি আধা-স্বচ্ছ হতে চান তবে এটি সমস্যাজনক হতে পারে।

সমাপ্তিতে

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