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

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

Bramus

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

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

কেভিন জে পাওয়েল দ্বারা outline-offset ব্যবহার করে বর্ডার অ্যানিমেশন

একটি নিবন্ধ যা সম্প্রতি আমার দৃষ্টি আকর্ষণ করেছে তা হল ফ্যান্টাস্টিক সিএসএস বর্ডার অ্যানিমেশন , যেখানে লেখক কোকো আরও বিকল্পগুলি অন্বেষণ করেছেন৷ ::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 সম্পত্তিটি ব্যবহার করা।

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

• 1
• 12
• 4
• 3

উৎস

করবেন না

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

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

• 1
• 12
• 4
• 5

উৎস

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

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

• 85
• 85
• 128
• 16.4

উৎস

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

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

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

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

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

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

• 16
• 12
• 15
• 6

উৎস

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

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

সমাপ্তিতে

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