পাথ, আকার, ক্লিপিং এবং মাস্কিং

এইচটিএমএল রেন্ডারিং বক্স মডেলের উপরে তৈরি করা হয়েছে, তবে আয়তক্ষেত্রের চেয়ে জীবন (এবং ওয়েব ডিজাইন) আরও অনেক কিছু আছে। CSS একটি উপাদানের কোন ক্ষেত্রগুলিকে রেন্ডার করা হয়েছে তা পরিবর্তন করার একাধিক উপায় সমর্থন করে, যা বিকাশকারীদের সমস্ত আকার এবং আকার সমর্থন করে এমন ডিজাইন তৈরি করার স্বাধীনতা দেয়। ক্লিপিং জ্যামিতিক আকারের জন্য অনুমতি দেয়, যখন মাস্কিং পিক্সেল স্তরে দৃশ্যমানতাকে প্রভাবিত করে।

পাথ এবং আকার

সিএসএস আকার সংজ্ঞায়িত করার জন্য ফাংশন ব্যবহার করে। আমরা CSS ফাংশন মডিউলে ফাংশন সম্পর্কে সাধারণ তথ্য কভার করি। এই বিভাগে, আপনি শিখবেন কিভাবে CSS-এ আকার তৈরি করতে হয়। নিম্নলিখিত সমস্ত উদাহরণগুলি clip-path বৈশিষ্ট্যের সাথে আপনার তৈরি করা আকারগুলি ব্যবহার করে, যা দৃশ্যমান এলাকাটিকে শুধুমাত্র আকৃতির ভিতরে যা আছে তা কমিয়ে দেয়। এটি উপাদানগুলিকে উপাদানের বাক্স থেকে দৃশ্যত আলাদা করতে দেয়৷ আমরা পরে আরো বিস্তারিতভাবে ক্লিপিং কভার.

CSS-এ সংজ্ঞায়িত আকারগুলি হয় মৌলিক আকার (যেমন বৃত্ত, আয়তক্ষেত্র এবং বহুভুজ) বা পাথ (যা জটিল এবং যৌগিক আকারগুলিকে সংজ্ঞায়িত করতে পারে) হতে পারে।

মৌলিক আকার

circle() এবং ellipse()

circle() এবং ellipse() ফাংশনগুলি একটি উপাদানের সাপেক্ষে রেডিআই সহ বৃত্তাকার এবং ডিম্বাকৃতি আকারকে সংজ্ঞায়িত করে। circle() ফাংশন আর্গুমেন্ট হিসাবে একটি একক আকার বা শতাংশ গ্রহণ করে। ডিফল্টরূপে, উভয় ফাংশন উপাদানের কেন্দ্রের সাপেক্ষে আকৃতিকে অবস্থান করে। উভয়ই at কীওয়ার্ড অনুসরণ করে একটি ঐচ্ছিক অবস্থান গ্রহণ করে, যা দৈর্ঘ্য, শতাংশ বা অবস্থানগত কীওয়ার্ড হিসাবে প্রকাশ করা যেতে পারে।

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

পূর্ববর্তী উদাহরণ circle() ফাংশন ব্যবহার করে একটি বৃত্তাকার ক্লিপিং পাথ দেখায়। মনে রাখবেন যে 50% ব্যাসার্ধ উপাদানটির সম্পূর্ণ প্রস্থের একটি বৃত্ত তৈরি করে। ellipse() ফাংশন আকৃতির অনুভূমিক এবং উল্লম্ব ব্যাসার্ধের প্রতিনিধিত্বকারী দুটি আর্গুমেন্ট গ্রহণ করে।

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

পূর্ববর্তী উদাহরণটি ellipse() ফাংশন ব্যবহার করে একটি উপবৃত্তাকার ক্লিপিং পাথ দেখায়। মনে রাখবেন যে 50% ব্যাসার্ধ উপাদানটির সম্পূর্ণ প্রস্থের একটি উপবৃত্ত তৈরি করে। নিম্নলিখিত উদাহরণটি উপাদানের শীর্ষে কেন্দ্রের সাথে একই উপবৃত্তাকার অবস্থান প্রদর্শন করে।

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() এবং inset()

rect() এবং inset() ফাংশনগুলি একটি উপাদানের বাহুর সাথে সম্পর্কিত তার বাহুগুলির অবস্থান নির্ধারণ করে একটি আয়তক্ষেত্রকে সংজ্ঞায়িত করার বিভিন্ন উপায় প্রদান করে। এটি আপনাকে আয়তক্ষেত্র তৈরি করতে দেয় যা উপাদানের ডিফল্ট বাক্স থেকে দৃশ্যত আলাদা। তারা ঐচ্ছিকভাবে border-radius শর্টহ্যান্ড সম্পত্তির মতো একই সিনট্যাক্স ব্যবহার করে গোলাকার কোণ সহ একটি আয়তক্ষেত্র তৈরি করতে round কীওয়ার্ডটি গ্রহণ করে।

rect() ফাংশন উপাদানটির উপরের প্রান্তের সাথে সম্পর্কিত আয়তক্ষেত্রের উপরের এবং নীচের দিকের অবস্থান এবং উপাদানটির বাম প্রান্তের সাথে বাম এবং ডান দিকের অবস্থান নির্ধারণ করে। এই ফাংশন উপরে, ডান, নীচে এবং বাম দিকগুলিকে সংজ্ঞায়িত করে আর্গুমেন্ট হিসাবে চারটি আকার বা শতাংশ ইউনিট গ্রহণ করে। আপনি rect() ফাংশন চয়ন করতে পারেন যখন আপনি একটি আয়তক্ষেত্র চান যা উপাদানটির আকার পরিবর্তনের সময় স্কেল না করে বা উপাদানের পরিবর্তনের মতো একই অনুপাত রাখে।

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

পূর্ববর্তী উদাহরণটি rect() ফাংশন ব্যবহার করে সংজ্ঞায়িত একটি আয়তক্ষেত্রাকার ক্লিপিং পাথ দেখায়। ডায়াগ্রামে দেখানো উপাদানটির উপরের এবং বাম প্রান্তের সাথে মাত্রাগুলি আপেক্ষিক।

inset() ফাংশন একটি উপাদানের প্রতিটি বাহু থেকে অভ্যন্তরীণ দূরত্ব দ্বারা একটি আয়তক্ষেত্রের বাহুর অবস্থান নির্ধারণ করে। এই ফাংশনটি আর্গুমেন্ট হিসাবে এক থেকে চারটি আকার বা শতাংশ একক গ্রহণ করে, যা আপনাকে একবারে একাধিক দিক সংজ্ঞায়িত করতে দেয়। আপনি inset() ফাংশন চয়ন করতে পারেন যখন আপনি একটি আয়তক্ষেত্র যা উপাদানের সাথে স্কেল করতে চান বা একটি আয়তক্ষেত্র যা উপাদানটির প্রান্ত থেকে একটি নির্দিষ্ট দূরত্ব রয়েছে।

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

পূর্ববর্তী উদাহরণটি inset() ফাংশন ব্যবহার করে সংজ্ঞায়িত একটি আয়তক্ষেত্রাকার ক্লিপিং পাথ দেখায়। মাত্রা উপাদানের পক্ষের আপেক্ষিক হয়.

rect() এবং inset() ফাংশন border-radius শর্টহ্যান্ড প্রপার্টির মতো একই সিনট্যাক্স ব্যবহার করে গোলাকার কোণ সহ একটি আয়তক্ষেত্র তৈরি করতে round কীওয়ার্ডটিকে ঐচ্ছিকভাবে গ্রহণ করে। নিম্নলিখিত উদাহরণটি পূর্বে দেখানো আয়তক্ষেত্রগুলির বৃত্তাকার সংস্করণ প্রদর্শন করে।

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

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

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

পূর্ববর্তী উদাহরণ তিনটি বিন্দু সংজ্ঞায়িত করে একটি ত্রিভুজাকার ক্লিপিং পাথ তৈরি করে।

ডিফল্টরূপে, polygon() ফাংশন ওভারল্যাপিং এলাকাগুলিকে পূর্ণ হিসাবে রেন্ডার করে। আপনি ভরাট নিয়ম নামক একটি ঐচ্ছিক প্রথম যুক্তি দিয়ে এই আচরণ পরিবর্তন করতে পারেন। ভরাট এবং অ-ভরা এলাকার মধ্যে বিকল্প করতে, পূরণের নিয়মটি evenodd এ সেট করুন। ডিফল্ট ফিল রুল ব্যবহার করতে, এটাকে nonzero এ সেট করুন।

পূর্ববর্তী উদাহরণটি নিয়মিত বহুভুজ এবং তারকা আকৃতি তৈরি করতে ত্রিকোণমিতিক ফাংশন সহ polygon() ফাংশন দেখায়। এটি সবচেয়ে বড় সম্ভাব্য নিয়মিত বহুভুজ তৈরি করে না যা একটি উপাদানের অভ্যন্তরে ফিট করে বা এটিকে কেন্দ্র করে- আমরা এটিকে আপনার চেষ্টা করার জন্য একটি অনুশীলন হিসাবে ছেড়ে দেব। এই উদাহরণে তারার আকারগুলি nonzero এবং evenodd ফিল নিয়মগুলিও প্রদর্শন করে।

জটিল আকার

যখন মৌলিক আকৃতি ফাংশনগুলি একটি জটিল আকৃতি বর্ণনা করার জন্য যথেষ্ট নয়, তখন CSS এমন ফাংশন প্রদান করে যা বক্ররেখা এবং রেখার মতো বৈশিষ্ট্যগুলি বর্ণনা করতে আরও পরিশীলিত সিনট্যাক্স ব্যবহার করে। এই ফাংশনগুলি যৌগিক আকারের জন্যও উপযোগী (যে আকারগুলি একাধিক আকারের সমন্বয়ে গঠিত, যেমন একটি বৃত্ত যার মধ্যে একটি ছিদ্র রয়েছে)।

path()

path() ফাংশন একটি আকৃতি বর্ণনা করতে SVG পাথ সিনট্যাক্সের একটি স্ট্রিং গ্রহণ করে। এটি নির্দেশাবলী ব্যবহার করে জটিল আকার তৈরি করার অনুমতি দেয় যা আকৃতি তৈরি করে এমন রেখা এবং বক্ররেখা বর্ণনা করে। সরাসরি SVG সিনট্যাক্স সম্পাদনা করা জটিল হতে পারে, তাই আমরা একটি ডেডিকেটেড ভিজ্যুয়াল এডিটর বিবেচনা করার পরামর্শ দিই যা path() ফাংশনের সাথে আকার তৈরি করার সময় সিনট্যাক্স রপ্তানি করতে পারে।

path() ফাংশন CSS সাইজিং ইউনিট ব্যবহার করে না এবং সমস্ত মান পিক্সেল হিসাবে ব্যাখ্যা করা হয়। এর মানে হল যে পাথ ফাংশন দিয়ে তৈরি করা আকারগুলি উপাদান বা পাত্রের আকারের জন্য প্রতিক্রিয়াশীল নয়। আমরা শুধুমাত্র স্থির মাত্রা আছে এমন আকারের জন্য path() ব্যবহার করার পরামর্শ দিই।

shape()

shape() ফাংশনটি path() ফাংশনের অনুরূপ একটি আকৃতি বর্ণনা করতে একটি কমান্ড সিনট্যাক্স ব্যবহার করে। যাইহোক, shape() ফাংশন কমান্ড নেটিভ CSS এবং CSS সাইজ ইউনিট ব্যবহার করতে পারে। এটি shape() ফাংশন ব্যবহার করে সংজ্ঞায়িত আকারগুলিকে প্রতিক্রিয়াশীলভাবে আকার দেওয়ার অনুমতি দেয়।

পূর্বের উদাহরণে একটি হার্ট আকৃতি এবং কেন্দ্রে একটি ছিদ্র সহ একটি বৃত্ত সংজ্ঞায়িত করতে path() এবং shape() ফাংশন ব্যবহার করা হয়েছে। উদাহরণটি উভয় ফাংশনের জন্য পিক্সেলে একই মান ব্যবহার করে, কিন্তু shape() ফাংশন অন্যান্য সিএসএস আকারের ইউনিট যেমন শতাংশ বা ধারক আপেক্ষিক ইউনিট ব্যবহার করতে পারে।

ক্লিপিং

ক্লিপিং সংজ্ঞায়িত করে কোন উপাদানের কোন ক্ষেত্রগুলি দৃশ্যমান, ম্যাগাজিন থেকে একটি ছবি ক্লিপ করার মতো। clip-path বৈশিষ্ট্য ক্লিপ এলাকা সংজ্ঞায়িত করতে ব্যবহৃত পথ সেট করে।

যেমন আপনি আগের বিভাগে উদাহরণগুলিতে দেখেছেন, মৌলিক আকৃতি বা পাথ ফাংশনগুলির যে কোনো একটি clip-path হিসাবে ব্যবহার করা যেতে পারে। clip-path বৈশিষ্ট্যটি একটি SVG clipPath উপাদানে সংজ্ঞায়িত পাথগুলিকেও সমর্থন করে, যা হয় এম্বেড করা বা একটি পৃথক ফাইলে করা যেতে পারে।

পূর্ববর্তী চিত্রটি দেখায় যে কীভাবে একটি চিত্র উপাদানে একটি clip-path যুক্ত করা চিত্রটির দৃশ্যমান অঞ্চলকে পরিবর্তন করে। উপরের ক্লিপ পাথ circle() ফাংশন ব্যবহার করে, যখন নিচেরটি একটি SVG clipPath ব্যবহার করে। মনে রাখবেন যে circle() ফাংশন ব্যবহার করে তৈরি করা বৃত্তটি ডিফল্টরূপে উপাদানের কেন্দ্রে অবস্থান করে।

clip-path বৈশিষ্ট্য শুধুমাত্র একটি একক পাথ গ্রহণ করে। ওভারল্যাপ না হওয়া একাধিক আকারের একটি উপাদান ক্লিপ করতে, একটি যৌগিক পথ নির্ধারণ করতে path() বা shape() ফাংশন ব্যবহার করুন, অথবা একটি SVG clipPath ব্যবহার করুন। জটিল পরিস্থিতিগুলির জন্য আরেকটি বিকল্প হল ক্লিপিংয়ের পরিবর্তে মাস্কিং ব্যবহার করা, যা আমরা পরবর্তী বিভাগে কভার করব।

আকার সঙ্গে ক্লিপিং

একটি মৌলিক আকৃতি বা পাথ ফাংশন ব্যবহার করে ক্লিপ করার জন্য, clip-path বৈশিষ্ট্যটি ফাংশন দ্বারা প্রত্যাবর্তিত মানের সাথে সেট করুন, যেমন পূর্ববর্তী উদাহরণগুলিতে। প্রতিটি ফাংশন উপাদানের সাপেক্ষে ক্লিপিং আকৃতিকে ভিন্নভাবে অবস্থান করবে, তাই প্রতিটি ফাংশনের জন্য রেফারেন্স দেখুন।

পূর্ববর্তী উদাহরণে .clipped ক্লাস ব্যবহার করে দুটি উপাদানের একটি বৃত্তাকার clip-path প্রয়োগ করা হয়েছে। মনে রাখবেন যে clip-path প্রতিটি উপাদানের সাথে সাপেক্ষে অবস্থান করে এবং clip-path মধ্যে পাঠ্যটি আকৃতি অনুসরণ করার জন্য পুনরায় প্রবাহিত হয় না।

একটি ক্লিপিং পাথের রেফারেন্স বক্স

ডিফল্টরূপে, একটি উপাদানের জন্য ক্লিপিং পাথ উপাদানটির সীমানা অন্তর্ভুক্ত করে। মৌলিক আকৃতি ফাংশনগুলির মধ্যে একটি ব্যবহার করার সময়, আপনি ক্লিপ-পাথের রেফারেন্স বক্স সেট করতে পারেন যাতে সীমানার মধ্যে উপাদানটির এলাকা অন্তর্ভুক্ত করা যায়। রেফারেন্স বাক্সের জন্য বৈধ মান হল stroke-box (ডিফল্ট) এবং fill-box (শুধুমাত্র সীমানার ভিতরের এলাকা অন্তর্ভুক্ত করার জন্য)।

পূর্ববর্তী উদাহরণটি clip-path সেট করতে inset() ফাংশন ব্যবহার করে একটি বড় ( 20px বর্ডার) সহ উপাদানগুলি দেখায়। যে উপাদানটি উপাদানের সীমানার সাপেক্ষে ক্লিপ করে তা এখনও সীমানার একটি অংশ দেখায়। যে উপাদানগুলি সীমানার মধ্যে থাকা অঞ্চলের সাথে সাপেক্ষে ক্লিপ করে সেগুলি কোনও সীমানা দেখায় না এবং ছোট, এমনকি একই ইনসেট মান সহ।

গ্রাফিক্স সহ ক্লিপিং

একটি ক্লিপিং পাথ একটি SVG নথিতে সংজ্ঞায়িত করা যেতে পারে, হয় HTML নথিতে এমবেড করা বা বাহ্যিকভাবে উল্লেখ করা। এটি গ্রাফিক্স প্রোগ্রামে তৈরি জটিল ক্লিপিং পাথ বা একাধিক আকারকে একত্রিত করা ক্লিপিং পাথ নির্ধারণ করতে কার্যকর হতে পারে।

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

পূর্ববর্তী উদাহরণে, kitten-clip-shape এর একটি id সহ clipPath <img> উপাদানে প্রয়োগ করা হয়েছে। এই ক্ষেত্রে SVG ডকুমেন্ট HTML এ এমবেড করা আছে। যদি SVG ডকুমেন্টটি kitten-clipper.svg নামে একটি বাহ্যিক ফাইল হয়, তাহলে clipPath পরিবর্তে url(kitten-clipper.svg#kitten-clip-shape) হিসাবে উল্লেখ করা হবে।

মাস্কিং

মাস্কিং হল একটি উপাদানের কোন ক্ষেত্রগুলি দেখানো বা লুকানো আছে তা নির্ধারণ করার আরেকটি পদ্ধতি। যেখানে ক্লিপিং মৌলিক আকার বা পথ ব্যবহার করে, মাস্কিং দৃশ্যমানতা নির্ধারণ করতে একটি চিত্র বা গ্রেডিয়েন্ট থেকে পিক্সেল ব্যবহার করে। ক্লিপিংয়ের বিপরীতে, মাস্কিং একটি উপাদানের ক্ষেত্রগুলিকে আংশিকভাবে স্বচ্ছ হতে দেয়। একাধিক মাস্ক ইমেজ একটি উপাদানে প্রয়োগ করা যেতে পারে বিভিন্ন প্রভাব তৈরি করতে।

একটি মাস্ক প্রয়োগ করতে, mask-image বৈশিষ্ট্য সেট করুন। এই বৈশিষ্ট্যটি একটি SVG নথিতে এক বা একাধিক ছবি, গ্রেডিয়েন্ট বা <mask> উপাদানগুলির উল্লেখ গ্রহণ করে। একাধিক মাস্ক ছবি কমা দিয়ে আলাদা করে প্রয়োগ করা যেতে পারে।

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

পূর্ববর্তী উদাহরণে, .my-element একটি PNG ইমেজ ব্যবহার করে মাস্ক করা হয়, তার পরে একটি লিনিয়ার গ্রেডিয়েন্ট থাকে। চূড়ান্ত মুখোশ তৈরি করতে ডিফল্টরূপে একাধিক মুখোশ একসাথে যুক্ত করা হয়।

পূর্ববর্তী উদাহরণটি এক বা একাধিক মুখোশ প্রয়োগ করা একটি চিত্র দেখায়। চূড়ান্ত প্রভাব তৈরি করতে মুখোশগুলি কীভাবে একত্রিত হয় তা দেখতে প্রতিটি মুখোশ টগল করুন।

আলফা বনাম লুমিন্যান্স মাস্কিং

আপনি চিত্রের alpha বা luminance ব্যবহার করে একটি মাস্ক প্রয়োগ করতে পারেন। alpha উপর ভিত্তি করে মাস্কিং করার সময়, মাস্ক ইমেজের প্রতিটি পিক্সেলের স্বচ্ছতা উপাদানটিতে প্রয়োগ করা হয়, সেই পিক্সেলের যেকোনো রঙের তথ্য উপেক্ষা করে। luminance উপর ভিত্তি করে মাস্কিং করার সময়, প্রতিটি পিক্সেলের স্বচ্ছতা এবং মান উভয়ই (কতটা উজ্জ্বল বা গাঢ়) উপাদানটিতে প্রয়োগ করা হয়। লুমিন্যান্স দ্বারা মাস্কিং উজ্জ্বল রংকে দৃশ্যমান এবং গাঢ় রংকে অদৃশ্য হিসেবে বিবেচনা করে।

মাস্কিং মোড সেট করতে, mask-mode বৈশিষ্ট্য ব্যবহার করুন। ডিফল্টরূপে, mask-mode প্রপার্টি match-source সেট করা থাকে, যা মাস্ক ইমেজের ধরনের উপর ভিত্তি করে একটি মোড সেট করে। ইমেজ এবং গ্রেডিয়েন্টের জন্য, এটি alpha ডিফল্ট হবে। SVG মাস্কের জন্য, এটি <mask> উপাদানের mask-type প্রোপার্টি বা luminance মান হিসাবে ডিফল্ট হবে, যদি কোনও mask-type সংজ্ঞায়িত না থাকে।

পূর্ববর্তী উদাহরণে বিভিন্ন রঙ এবং আলফা মান দেখানো একটি পরীক্ষার প্যাটার্ন একটি মুখোশ হিসাবে ব্যবহৃত হয়। mask-mode টগল করার মাধ্যমে, আপনি দেখতে পারেন কিভাবে alpha মোড স্বচ্ছতার উপর ভিত্তি করে, যখন luminance মোড রঙের উজ্জ্বলতা এবং স্বচ্ছতার উপর ভিত্তি করে।

অতিরিক্ত মাস্কিং বৈশিষ্ট্য

CSS আপনার মুখোশের আচরণকে সূক্ষ্ম-টিউন করতে অতিরিক্ত বৈশিষ্ট্য সরবরাহ করে। প্রতিটি বৈশিষ্ট্য কমা দ্বারা পৃথক করা মানগুলির তালিকা গ্রহণ করে, যা mask-image সম্পত্তি দ্বারা সেট করা মাস্কগুলির তালিকার সাথে মিলিত হবে। মুখোশের চেয়ে কম মান থাকলে, প্রতিটি মুখোশের জন্য একটি মান সেট না করা পর্যন্ত তালিকাটি পুনরাবৃত্তি হবে। মুখোশের চেয়ে বেশি মান থাকলে, অতিরিক্ত মান বাতিল করা হয়।

মুখোশ শর্টহ্যান্ড

আপনি মাস্ক শর্টহ্যান্ড দিয়ে একসাথে একাধিক মাস্ক বৈশিষ্ট্য সেট করতে পারেন। এটি প্রতিটি মুখোশের সমস্ত বৈশিষ্ট্য একসাথে গ্রুপ করে একাধিক মাস্ক সেট করা সহজ করতে পারে। মাস্ক শর্টহ্যান্ড এই বৈশিষ্ট্যগুলিকে ক্রমানুসারে সেট করার সমতুল্য: mask-image , mask-mode , mask-position , mask-size , mask-repeat , mask-origin , mask-clip , এবং mask-composite । প্রতিটি সম্পত্তি অন্তর্ভুক্ত করার প্রয়োজন নেই এবং অন্তর্ভুক্ত নয় এমন যেকোনও তাদের প্রাথমিক মূল্যে পুনরায় সেট করা হবে। প্রতি মাস্কে আটটি বৈশিষ্ট্যের জন্য সমর্থন সহ, এটি একটি সম্পূর্ণ রেফারেন্স উপলব্ধ করতে সহায়তা করতে পারে।

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

পূর্ববর্তী উদাহরণে, প্রতিটি ক্লাসে দুটি মাস্ক প্রয়োগ করা হয়েছে। প্রথমটি স্বতন্ত্র বৈশিষ্ট্য ব্যবহার করে যখন দ্বিতীয়টি mask শর্টহ্যান্ড ব্যবহার করে। উভয় শৈলী একে অপরের সমতুল্য।

ভাসমান উপাদানের চারপাশে প্রবাহিত পাঠ্য

যখন আপনি একটি উপাদান ক্লিপ বা মাস্ক করেন, আপনি শুধুমাত্র তার বাক্সের মধ্যে দৃশ্যমান এলাকা পরিবর্তন করেন, কিন্তু বাক্সটি নিজেই অপরিবর্তিত থাকে। এর মানে হল যে একটি ভাসমান উপাদান নথির প্রবাহকে প্রভাবিত করবে তার মূল বাউন্ডিং বাক্সের উপর ভিত্তি করে, উপাদানটির দৃশ্যমান অংশগুলিতে নয়। একটি উপাদানের চারপাশে প্রবাহ সংজ্ঞায়িত করতে, ক্লিপ পাথ সহ shape-outside সম্পত্তি ব্যবহার করুন।

shape-outside সম্পত্তি আকৃতি নির্ধারণ করে যে বিষয়বস্তু একটি উপাদানের চারপাশে প্রবাহিত হবে। এই আকৃতিটি মৌলিক আকৃতি ফাংশনগুলির যেকোনো একটি হতে পারে, তবে path() বা shape() ফাংশন, বা SVG নথিতে সংজ্ঞায়িত একটি clipPath ব্যবহার করে সংজ্ঞায়িত আকার নয়।

shape-outside সম্পত্তি একটি চিত্র বা গ্রেডিয়েন্টও গ্রহণ করে। মাস্কিংয়ের মতো, আকৃতির সীমানা চিত্রের স্বচ্ছতা বা গ্রেডিয়েন্ট দ্বারা নির্ধারিত হবে। shape-image-threshold সম্পত্তি আকৃতির ভিতরে স্বচ্ছতার কোন স্তরগুলি বিবেচনা করা হয় তা সেট করে।

অ্যানিমেশন আকারে

ক্লিপ-পাথ অ্যানিমেটিং

আপনি clip-path সম্পত্তি অ্যানিমেট করতে পারেন, আকৃতি থেকে আকৃতিতে মিশ্রিত করতে পারেন। মসৃণ অ্যানিমেশন তৈরি করতে আপনাকে অবশ্যই প্রতিটি কীফ্রেমের জন্য একই আকৃতির ফাংশন ব্যবহার করতে হবে। polygon() বা shape() ফাংশন ব্যবহার করার সময়, প্রতিটি কীফ্রেমে একই সংখ্যক পয়েন্ট ব্যবহার করতে হবে।

পূর্ববর্তী উদাহরণে, polygon() ফাংশন ব্যবহার করে সংজ্ঞায়িত একটি পেন্টাগন এবং তারকা আকৃতির মধ্যে একটি উপাদানের clip-path স্থানান্তরিত হয়। অ্যানিমেটিং পয়েন্টগুলি কীভাবে ওভারল্যাপিং এলাকা তৈরি করে তা দেখানোর জন্য উদাহরণটি evenodd ফিল নিয়ম ব্যবহার করে।

অফসেট-পাথ দিয়ে অ্যানিমেটিং

আপনি এই আকৃতি ফাংশনগুলির সাথে তৈরি পাথ বরাবর উপাদানগুলিকেও অ্যানিমেট করতে পারেন। offset-path বৈশিষ্ট্য পাথ হিসাবে ব্যবহার করার জন্য আকৃতি সেট করে এবং offset-distance সেই পাথ বরাবর অবস্থান সেট করে। আপনি সরলরেখা বরাবর অ্যানিমেট করতে offset-path বৈশিষ্ট্য সহ ray() ফাংশন ব্যবহার করতে পারেন।

পূর্ববর্তী উদাহরণটি একটি clip-path এবং একটি offset-path উভয়ের জন্য একই বহুভুজ ব্যবহার করে দেখায়। অ্যানিমেশনটি clip-path হিসাবে বৃহৎ তারাটি ব্যবহার করে একই বহুভুজ ব্যবহার করে ছোট তারাগুলিকে সরানোর জন্য offset-distance ব্যবহার করে।

আপনার উপলব্ধি পরীক্ষা করুন