জটিল আকার

এক নজরে

ব্রাশ স্ট্রোক বা অর্গানিক টেক্সচারের মতো জটিল, ফ্রি-ফর্ম শেপে এলিমেন্ট ক্লিপ করতে, CSS মাস্কিং (mask-image) ব্যবহার করুন। জ্যামিতিক আকার বা ভেক্টর পাথের জন্য clip-path চমৎকার হলেও, mask-image আপনাকে কোনও এলিমেন্টের দৃশ্যমান অংশ নির্ধারণ করতে ছবি (যেমন স্বচ্ছতা সহ PNG) বা SVG ব্যবহার করার অনুমতি দেয়। এই পদ্ধতিটি আরও বেশি অভিব্যক্তিপূর্ণ কারণ এটি আধা-স্বচ্ছতা সমর্থন করে, যা নরম প্রান্ত এবং জটিল টেক্সচারের জন্য অনুমতি দেয় যা clip-path এর সাথে অর্জন করা কঠিন বা অসম্ভব।

প্রয়োগ

CSS মাস্ক ব্যবহার করে জটিল আকার প্রয়োগ করতে:

কোনও ছবি থেকে স্বচ্ছতা ব্যবহার করা

আপনি কোনও ছবির স্বচ্ছতাকে মাস্ক হিসেবে ব্যবহার করতে পারেন, যেখানে অস্বচ্ছ অংশ দৃশ্যমান এবং স্বচ্ছ অংশ লুকানো থাকে। এটি PNG, SVG বা স্বচ্ছতা সহ অন্য ছবি অথবা CSS গ্রেডিয়েন্টের মতো জেনারেট করা ছবি হতে পারে।

.shaped-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('mask.svg');
  -webkit-mask-size: cover; /* Scale mask to cover element */
  -webkit-mask-repeat: no-repeat; /* Do not tile the mask */

  /* Standard property for modern browsers */
  mask-image: url('mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

HTML-এ SVG এলিমেন্ট ব্যবহার করা

এছাড়াও, আপনার পৃষ্ঠার HTML-এ ইনলাইন SVG-তে উল্লেখ করা <mask> এলিমেন্ট রেফারেন্স হিসেবে ব্যবহার করতে পারেন। এলিমেন্টের সাইজ অনুযায়ী মাস্ক স্কেল অটোমেটিক করতে maskContentUnits="objectBoundingBox" ব্যবহার করুন। এটি ব্রাউজারকে মাস্কের মধ্যে থাকা সব কোঅর্ডিনেটকে অ্যাবসোলিউট পিক্সেলের পরিবর্তে 0 থেকে 1 (যেমন ৫০%-এর জন্য 0.5) পর্যন্ত ভগ্নাংশ হিসেবে ব্যাখ্যা করতে বলে।

লুমিন্যান্স বনাম আলফা মাস্কিং: ডিফল্ট হিসেবে, SVG মাস্ক অস্বচ্ছতা নির্ধারণ করতে লুমিন্যান্স (উজ্জ্বলতা) ব্যবহার করে, যেখানে সাদা প্রকাশ করে, কালো লুকায় এবং ধূসর আধা-স্বচ্ছতা তৈরি করে। আপনি যদি চান যে মাস্কটি আপনার SVG আকারের আলফা চ্যানেল (স্বচ্ছতা) ব্যবহার করুক, তাহলে আপনি আপনার CSS-এ mask-type: alpha; বা সরাসরি SVG <mask> এলিমেন্টে mask-type="alpha" নির্দিষ্ট করতে পারেন।

<!-- White areas reveal content, gray creates semi-transparency, black or transparent hides it -->
<svg width="0" height="0">
  <defs>
    <!-- objectBoundingBox scales mask coordinates (0 to 1) with the element's size -->
    <mask id="custom-shape" maskContentUnits="objectBoundingBox">
      <!-- Use white shapes to define fully opaque areas -->
      <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      <!-- Use gray shapes to define semi-transparent/faded areas -->
      <circle cx="0.5" cy="0.5" r="0.25" fill="gray" />
    </mask>
  </defs>
</svg>

<div class="masked-content">
  <!-- Content to be masked -->
</div>

<style>
.masked-content {
  /* Reference the SVG mask ID */
  -webkit-mask-image: url(#custom-shape);
  mask-image: url(#custom-shape);
}
</style>

ফলব্যাক স্ট্র্যাটেজি

কোনও ব্রাউজারে mask-image বা প্রিফিক্সড ভার্সন কাজ না করলে:

• এলিমেন্টটি ক্লিপ করা হবে না এবং একটি সাধারণ আয়তক্ষেত্র হিসাবে দেখানো হবে।
• নিশ্চিত করুন যে কন্টেন্ট এখনও পড়া যাচ্ছে এবং মাস্ক (প্রোগ্রেসিভ এনহ্যান্সমেন্ট) ছাড়াই লেআউট ভেঙে যাচ্ছে না।
• বিকল্প হিসেবে, clip-path-এর সাথে আরও সহজ ফলব্যাক শেপ প্রদান করতে ফিচার শনাক্তকরণ ব্যবহার করুন।

/* Fallback for browsers that do not support masking */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .shaped-element {
    /* Use a simple rounded rectangle as fallback */
    clip-path: inset(5% round 15px);
  }
}