সিএসএস অফসেট সহ উপাদানগুলির চারপাশে পাঠ্য অবস্থান


পাঠ্য সহ কোনও পৃষ্ঠায় উপাদানগুলির অবস্থান নির্ধারণের ক্ষেত্রে, সিএসএসে এটি সম্পর্কে অনেকগুলি উপায় রয়েছে – আক্ষরিক position সংশ্লিষ্ট সম্পত্তি inset-* সম্পত্তি, translate, margin, anchor() (এই মুহুর্তে সীমিত ব্রাউজার সমর্থন), এবং আরও কিছু। দ্য offset সম্পত্তি সেই তালিকার অন্তর্ভুক্ত আরেকটি।

দ্য offset সম্পত্তি সাধারণত পূর্বনির্ধারিত পথ বরাবর একটি উপাদান অ্যানিমেট করার জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, নিম্নলিখিত উদাহরণে বর্গক্ষেত্রটি একটি বৃত্তাকার পথ অনুসরণ করে:

<div class="circle">
  <div class="square"></div>
</div>
@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* Equivalent to:
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* etc. */
}

.circle:hover .square{ --p: 100%; }

একটি নিবন্ধিত সিএসএস কাস্টম সম্পত্তি (--p) বর্গাকার উপাদানটির অফসেট দূরত্ব সেট এবং অ্যানিমেট করতে ব্যবহৃত হয়। অ্যানিমেশন সম্ভব কারণ একটি উপাদান ব্যবহার করে প্রদত্ত পথে যে কোনও পর্যায়ে অবস্থান করা যেতে পারে offset। এবং সম্ভবত আপনি এটি জানেন না, কিন্তু offset নিম্নলিখিত উপাদানগুলির সমন্বয়ে গঠিত একটি শর্টহ্যান্ড সম্পত্তি:

  • offset-position:: পাথের সূচনা পয়েন্ট
  • offset-path:: যে আকারটি বরাবর উপাদানটি সরানো যায়
  • offset-distance:: যে পথটিতে উপাদানটি সরানো হয়েছে তার সাথে একটি দূরত্ব
  • offset-rotate:: তার অ্যাঙ্কর পয়েন্ট এবং অফসেট পাথের সাথে সম্পর্কিত কোনও উপাদানের ঘূর্ণন কোণ
  • offset-anchor:: উপাদানটির মধ্যে এমন একটি অবস্থান যা পথের সাথে সংযুক্ত থাকে

দ্য offset-path সম্পত্তি হ’ল আমরা যা অর্জন করার চেষ্টা করছি তার পক্ষে গুরুত্বপূর্ণ। এটি একটি আকারের মান গ্রহণ করে – এসভিজি আকার বা সিএসএস শেপ ফাংশনগুলি সহ – পাশাপাশি পথটি তৈরি করতে উপাদানগুলির রেফারেন্স বাক্সগুলি।

রেফারেন্স বাক্স? সেগুলি সিএসএস বক্স মডেল অনুসারে একটি উপাদানগুলির মাত্রা content-box, padding-box, border-boxপাশাপাশি এসভিজি প্রসঙ্গ যেমন, যেমন view-box, fill-boxএবং stroke-boxএগুলি কীভাবে আমরা তাদের সমন্বিত উপাদানগুলির প্রান্তগুলি সহ উপাদানগুলি স্থাপন করি তা সহজ করে তোলে। এখানে একটি উদাহরণ রয়েছে: নীচের সমস্ত ছোট স্কোয়ারগুলি তাদের সমন্বিত উপাদানগুলির ডিফল্ট শীর্ষ-বাম কোণে স্থাপন করা হয়েছে ‘ content-box। বিপরীতে, ছোট চেনাশোনাগুলি শীর্ষ-ডান কোণার পাশে অবস্থিত (25% তাদের মধ্যে থাকা উপাদানগুলির বর্গাকার ঘের) এর মধ্যে content-box, border-boxএবং padding-boxযথাক্রমে।

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>
.small {
  /* etc. */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* etc. */
  contain: layout; /* (or position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}

দ্রষ্টব্য: আপনি যদি এর সাথে সম্পর্কিত পিতামাতার উপাদানটির ভিতরে স্থান বরাদ্দ করতে না চান তবে আপনি উপাদানটির অফসেট-পজিশনড লেআউট প্রসঙ্গটি পৃথক করতে পারেন। আমি উপরের উদাহরণে এটি এভাবেই পৌঁছেছি যাতে ভিতরে অনুচ্ছেদের পাঠ্যটি প্রান্তগুলির বিরুদ্ধে ফ্লাশ করতে পারে। ফলস্বরূপ, অফসেট অবস্থানযুক্ত উপাদানগুলি (ছোট স্কোয়ার এবং চেনাশোনা) ব্যবহার করে তাদের নিজস্ব প্রসঙ্গ দেওয়া হয় position: absoluteযা তাদের সাধারণ নথি প্রবাহ থেকে সরিয়ে দেয়।

এই পদ্ধতিটি, রেফারেন্স বাক্সগুলির সাথে সম্পর্কিত অবস্থান, কিছু ইউআই মডিউলটির পরিধি বরাবর বিজ্ঞপ্তি বিন্দু এবং আলংকারিক ফিতা টিপসের মতো উপাদান স্থাপন করা সহজ করে তোলে। এটা আরও একটি ব্লকের প্রান্তগুলি সহ পাঠ্যগুলির স্থান নির্ধারণকে সহজতর করেযেমন offset ধন্যবাদ পথ ধরে উপাদানগুলি ঘোরাতে পারে, ধন্যবাদ offset-rotate। একটি সাধারণ উদাহরণ একটি ব্লকের ডান প্রান্তে রাখা একটি নিবন্ধের তারিখ দেখায়:

<article>
  <h1>The Irreplaceable Value of Human Decision-Making in the Age of AI</h1>
  <!-- paragraphs -->
  <div class="date">Published on 11<sup>th</sup> Dec</div>
  <cite>An excerpt from the HBR article</cite>
</article>
article {
  container-type: inline-size;
  /* etc. */
}

.date {
  offset: padding-box 100cqw 90deg / left 0 bottom -10px;
  
  /*
    Equivalent to:
    offset-path: padding-box;
    offset-distance: 100cqw; (100% of the container element's width)
    offset-rotate: 90deg;
    offset-anchor: left 0 bottom -10px;
  */
}

যেমনটি আমরা সবেমাত্র দেখেছি, ব্যবহার করে offset একটি রেফারেন্স বক্স পাথ সহ সম্পত্তি এবং ধারক ইউনিট আরও দক্ষ – আপনি উপাদানটির প্রস্থ বা উচ্চতার উপর ভিত্তি করে সহজেই অফসেট দূরত্ব সেট করতে পারেন। আমি ধারক অনুসন্ধান এবং ধারক ক্যোয়ারী ইউনিট সম্পর্কে আরও শেখার জন্য একটি রেফারেন্স অন্তর্ভুক্ত করব “আরও পড়া” এই নিবন্ধের শেষে বিভাগ।

এছাড়াও আছে offset-anchor সম্পত্তি যা শেষ উদাহরণে ব্যবহৃত হয়। এটি উপাদানটির স্থানচ্যুতি এবং আবর্তনের জন্য অ্যাঙ্কর সরবরাহ করে-উদাহরণস্বরূপ, উদাহরণে 90 ডিগ্রি ঘূর্ণন উপাদানটির নীচের বাম কোণ থেকে ঘটে। দ্য offset-anchor সম্পত্তিটি সামঞ্জস্য করে রেফারেন্স বাক্স থেকে উপাদানটিকে অভ্যন্তরীণ বা বাহ্যিক সরানোর জন্যও সম্পত্তি ব্যবহার করা যেতে পারে inset-* মান – উদাহরণস্বরূপ, bottom -10px যুক্তিগুলি উপাদানগুলির নীচের প্রান্তটি এর সমন্বিত উপাদানগুলির থেকে বাইরের দিকে টানুন padding-box। এটি স্থানগুলির যথার্থতা বাড়ায়, নীচেও প্রদর্শিত।

<figure>
  <div class="big">4</div>
  <div class="small">number four</div>
</figure>
.small {
  width: max-content;
  offset: content-box 90% -54deg / center -3rem;

  /*
    Equivalent to:
    offset-path: content-box;
    offset-distance: 90%;
    offset-rotate: -54deg;
    offset-anchor: center -3rem;
  */

  font-size: 1.5rem;
  color: navy;
}

নিবন্ধের শুরুতে দেখানো হয়েছে, অফসেট পজিশনিং অ্যানিমেটেবল, যা গতিশীল ডিজাইনের প্রভাবগুলির জন্য অনুমতি দেয়, এর মতো:

<article>
  <figure>
    <div class="small one">17<sup>th</sup> Jan. 2025</div>
    <span class="big">Seminar<br>on<br>Literature</span>
    <div class="small two">Tickets Available</div>
  </figure>
</article>
@property --d {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.small {
  /* other style rules */
  offset: content-box var(--d) 0deg / left center;

  /*
    Equivalent to:
    offset-path: content-box;
    offset-distance: var(--d);
    offset-rotate: 0deg;
    offset-anchor: left center;
  */

  transition: --d .2s linear;

  &.one { --d: 2%; }
  &.two { --d: 70%; }
}

article:hover figure {
  .one { --d: 15%;  }
  .two { --d: 80%;  }
}

মোড়ানো আপ

সীমানা, পাঠ্য টীকা বা এমনকি ত্রুটি মেসেজিংয়ের মতো গতিশীল পাঠ্যগুলির মতো গ্রাফিক ডিজাইনের জন্য, সিএসএস অফসেট হ’ল এগুলি সমস্ত অর্জনের জন্য একটি সহজে ব্যবহারযোগ্য বিকল্প। আমরা তাদের সম্বলিত পিতামাতার উপাদানগুলির রেফারেন্স বাক্সগুলির সাথে উপাদানগুলি স্থাপন করতে পারি, সেগুলি ঘোরান এবং এমনকি প্রয়োজনে অ্যানিমেশন যুক্ত করতে পারি।

আরও পড়া



Source link