CSS Shapes ব্যবহার শুরু করা

কাস্টম পাথের চারপাশে কন্টেন্ট র‍্যাপ করা

Razvan Caliman

দীর্ঘদিন ধরে, ওয়েব ডিজাইনারদের আয়তক্ষেত্রের সীমাবদ্ধতার মধ্যে ডিজাইন করতে বাধ্য করা হয়েছে। ওয়েবের বেশিরভাগ কন্টেন্ট এখনও সাধারণ বক্সের মধ্যে সীমাবদ্ধ কারণ আয়তাকার নয় এমন লেআউট নিয়ে বেশিরভাগ ক্রিয়েটিভ উদ্যোগই ব্যর্থ হয়। Chrome 37 থেকে উপলভ্য CSS Shapes-এর মাধ্যমে এটি পরিবর্তন হতে চলেছে। CSS শেপ ওয়েব ডিজাইনারদের কাস্টম পাথ, যেমন বৃত্ত, উপবৃত্ত এবং বহুভুজের চারপাশে কন্টেন্ট র‍্যাপ করার সুবিধা দেয়, যার ফলে আয়তক্ষেত্রের সীমাবদ্ধতা থেকে মুক্তি পাওয়া যায়।

আকৃতি ম্যানুয়ালি নির্ধারণ করা যেতে পারে অথবা ছবি থেকে অনুমান করা যেতে পারে।

আসুন, একটি খুব সহজ উদাহরণ দেখা যাক।

আপনি হয়ত আমার মতোই সরলভাবে ভেবেছিলেন যে ট্রান্সপারেন্ট অংশ সহ কোনও ছবি প্রথমবার ফ্লোট করলে কন্টেন্ট র‍্যাপ হয়ে ফাঁকা জায়গা পূরণ করে দেবে, কিন্তু এলিমেন্টের চারপাশে আয়তাকার র‍্যাপ শেপ দেখে হতাশ হয়েছেন। এই সমস্যার সমাধান করতে CSS Shapes ব্যবহার করা যেতে পারে।

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

shape-outside: url(image.png) CSS ডিক্লারেশন ব্রাউজারকে ছবি থেকে একটি আকার এক্সট্র্যাক্ট করতে বলে।

shape-image-threshold প্রপার্টি পিক্সেলের ন্যূনতম ওপেসিটি লেভেল নির্ধারণ করে যা আকৃতি তৈরি করতে ব্যবহার করা হবে। এর মান 0.0 (সম্পূর্ণ স্বচ্ছ) থেকে 1.0 (সম্পূর্ণ অস্বচ্ছ) রেঞ্জের মধ্যে হতে হবে। তাই, shape-image-threshold: 0.5-এর অর্থ হল, আকার তৈরি করার জন্য শুধুমাত্র ৫০% এবং তার বেশি অস্বচ্ছতা সহ পিক্সেল ব্যবহার করা হবে।

float প্রপার্টি এখানে মূল বিষয়। shape-outside প্রপার্টি কন্টেন্ট যে এলাকার চারপাশে র‍্যাপ করা হবে তার আকার নির্ধারণ করে, তবে ফ্লোট ছাড়া আপনি আকারের প্রভাব দেখতে পাবেন না।

এলিমেন্টের float ভ্যালুর বিপরীত দিকে একটি ফ্লোট এরিয়া থাকে। যেমন, কফি কাপের ছবি সহ কোনও এলিমেন্ট বাঁদিকে ফ্লোট করা হলে, কাপের ডানদিকে ফ্লোট এরিয়া তৈরি করা হবে। আপনি দুই দিকে ফাঁকা জায়গা রেখে কোনও ছবি তৈরি করতে পারলেও, কন্টেন্ট শুধুমাত্র ফ্লোট প্রপার্টি দ্বারা নির্ধারিত বিপরীত দিকের আকৃতির চারপাশে র‍্যাপ করা হবে, বাঁদিকে বা ডানদিকে, কখনই দুই দিকে নয়।

ভবিষ্যতে, CSS এক্সক্লুশন চালু হওয়ার সাথে সাথে, ফ্লোট করা হয়নি এমন এলিমেন্টে shape-outside ব্যবহার করা সম্ভব হবে।

ম্যানুয়ালি আকার তৈরি করা

ছবি থেকে শেপ এক্সট্র্যাক্ট করা ছাড়াও, আপনি ম্যানুয়ালিও সেগুলি কোড করতে পারবেন। শেপ তৈরি করার জন্য আপনি কয়েকটি ফাংশনাল ভ্যালু থেকে বেছে নিতে পারেন: circle(), ellipse(), inset() এবং polygon()। প্রতিটি শেপ ফাংশন এক সেট কোঅর্ডিনেট গ্রহণ করে এবং এটি একটি রেফারেন্স বক্সের সাথে পেয়ার করা হয় যা কোঅর্ডিনেট সিস্টেম প্রতিষ্ঠা করে। রেফারেন্স বক্স সম্পর্কে আরও তথ্য শীঘ্রই জানানো হবে।

circle() ফাংশন

বৃত্তের আকারের ভ্যালুর সম্পূর্ণ নোটেশন হল circle(r at cx cy) যেখানে r হল বৃত্তের ব্যাসার্ধ এবং cx ও cy হল X-অক্ষ ও Y-অক্ষে বৃত্তের কেন্দ্রের স্থানাঙ্ক। বৃত্তের কেন্দ্রের স্থানাঙ্ক ঐচ্ছিক। আপনি এগুলি বাদ দিলে, এলিমেন্টের কেন্দ্র (এর কর্ণগুলির ছেদবিন্দু) ডিফল্ট হিসেবে ব্যবহার করা হবে।

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

উপরের উদাহরণে, কন্টেন্ট বৃত্তাকার পথের বাইরে র‍্যাপ করবে। একক আর্গুমেন্ট 50% বৃত্তের ব্যাসার্ধ নির্দিষ্ট করে, যা এই নির্দিষ্ট ক্ষেত্রে এলিমেন্টের প্রস্থ বা উচ্চতার অর্ধেক। এলিমেন্টের ডাইমেনশন পরিবর্তন করলে বৃত্তের ব্যাসার্ধ প্রভাবিত হবে। CSS Shapes কীভাবে রেসপন্সিভ হতে পারে তার একটি প্রাথমিক উদাহরণ এটি।

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

এই ডকুমেন্ট জুড়ে থাকা ইলাস্ট্রেশনগুলি আকৃতি হাইলাইট করতে এবং আপনাকে এফেক্ট বুঝতে সাহায্য করার জন্য ক্লিপিং ব্যবহার করে।

বৃত্তাকার শেপে ফিরে যান।

বৃত্তের ব্যাসার্ধের জন্য শতাংশ ব্যবহার করার সময়, মানটি আসলে একটু জটিল ফর্মুলা দিয়ে গণনা করা হয়: sqrt(width^2 + height^2) / sqrt(2). এটি বোঝা দরকার কারণ এলিমেন্টের মাপ সমান না হলে বৃত্তের আকার কেমন হবে তা আপনি কল্পনা করতে পারবেন।

শেপ ফাংশন কোঅর্ডিনেটে সব ধরনের CSS ইউনিট ব্যবহার করা যেতে পারে - px, em, rem, vw, vh ইত্যাদি। আপনার প্রয়োজন অনুযায়ী আপনি ফ্লেক্সিবল বা রিজিড বেছে নিতে পারেন।

আপনি বৃত্তের কেন্দ্রের স্থানাঙ্কের জন্য নির্দিষ্ট মান সেট করে বৃত্তের অবস্থান অ্যাডজাস্ট করতে পারেন।

.element{
  shape-outside: circle(50% at 0 0);
}

এটি বৃত্তের কেন্দ্রকে স্থানাঙ্ক সিস্টেমের অরিজিনে অবস্থান করায়। স্থানাঙ্ক সিস্টেম কী? এখানেই আমরা রেফারেন্স বক্সের ব্যাপারে জানাই।

CSS শেপের জন্য রেফারেন্স বক্স

রেফারেন্স বক্স হল এলিমেন্টের চারপাশে থাকা একটি ভার্চুয়াল বক্স, যা আকার আঁকা ও পজিশন করার জন্য ব্যবহৃত কোঅর্ডিনেট সিস্টেম প্রতিষ্ঠা করে। কোঅর্ডিনেট সিস্টেমের উৎপত্তি হল এর উপরের-বাঁদিকের কোণায়, যেখানে X-অ্যাক্সিস ডানদিকে এবং Y-অ্যাক্সিস নিচের দিকে নির্দেশ করে।

মনে রাখবেন যে shape-outside ফ্লোট এরিয়ার আকার পরিবর্তন করে যার চারপাশে কন্টেন্ট র‍্যাপ করা হবে। margin প্রপার্টি দ্বারা নির্ধারিত বক্সের বাইরের প্রান্ত পর্যন্ত ফ্লোট এরিয়া বিস্তৃত হয়। এটিকে margin-box বলা হয় এবং এটি কোনও আকারের জন্য ডিফল্ট রেফারেন্স বক্স, যদি না স্পষ্টভাবে উল্লেখ করা হয়।

নিচে উল্লেখ করা দুটি CSS ডিক্লারেশনের ফলাফল একই:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

আমরা এখনও এলিমেন্টে মার্জিন সেট করিনি। এই পর্যায়ে, এটি ধরে নেওয়া নিরাপদ যে কোঅর্ডিনেট সিস্টেমের অরিজিন এবং বৃত্তের কেন্দ্র এলিমেন্টের কন্টেন্ট এরিয়ার উপরের-বাঁদিকের কোণায় রয়েছে। আপনি মার্জিন সেট করলে এটি পরিবর্তন হয়:

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

কোঅর্ডিনেট সিস্টেমের অরিজিন এখন এলিমেন্টের কন্টেন্ট এরিয়ার (১০০px উপরে এবং ১০০px বাঁদিকে) বাইরে রয়েছে, যেমন বৃত্তের কেন্দ্র রয়েছে। margin-box রেফারেন্স বক্সের মাধ্যমে তৈরি করা কোঅর্ডিনেট সিস্টেমের সারফেসের বৃদ্ধিকে বিবেচনা করার জন্য বৃত্তের ব্যাসার্ধের গণনা করা মানও বৃদ্ধি পায়।

বেছে নেওয়ার জন্য কয়েকটি রেফারেন্স বক্সের বিকল্প আছে: `margin-box`, `border-box`, `padding-box` এবং `content-box`৷ তাদের নাম থেকে তাদের সীমানা বোঝা যায়৷ আমরা আগে `margin-box` সম্পর্কে ব্যাখ্যা করেছি। `border-box` এলিমেন্টের বর্ডারের বাইরের প্রান্ত দ্বারা সীমাবদ্ধ, `padding-box` এলিমেন্টের প্যাডিং দ্বারা সীমাবদ্ধ, যেখানে `content-box` এলিমেন্টের মধ্যে কন্টেন্ট দ্বারা ব্যবহৃত প্রকৃত সারফেস এরিয়ার মতো।

shape-outside ঘোষণার সাথে নির্দিষ্ট সময়ে শুধুমাত্র একটি রেফারেন্স বক্স ব্যবহার করা যাবে। প্রতিটি রেফারেন্স বক্স আকৃতিকে আলাদা এবং কখনও কখনও সূক্ষ্ম উপায়ে প্রভাবিত করবে। আরেকটি নিবন্ধ আছে যা আরও গভীরে গিয়ে আপনাকে CSS শেপের জন্য রেফারেন্স বক্স বুঝতে সাহায্য করে।

ellipse() ফাংশন

উপবৃত্তগুলি চ্যাপ্টা বৃত্তের মতো দেখায়। এগুলিকে ellipse(rx ry at cx cy) হিসেবে সংজ্ঞায়িত করা হয়, যেখানে rx এবং ry হল X-অক্ষ এবং Y-অক্ষে উপবৃত্তের ব্যাসার্ধ, যেখানে cx এবং cy হল উপবৃত্তের কেন্দ্রের স্থানাঙ্ক।

.element{
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

স্থানাঙ্ক সিস্টেমের মাত্রা থেকে শতাংশের মান গণনা করা হবে। এখানে কোনও জটিল অঙ্ক কষতে হবে না। আপনি উপবৃত্তের কেন্দ্রের স্থানাঙ্ক বাদ দিতে পারেন এবং সেগুলি স্থানাঙ্ক সিস্টেমের কেন্দ্র থেকে অনুমান করা হবে।

X ও Y অক্ষের ব্যাসার্ধও কীওয়ার্ড দিয়ে সংজ্ঞায়িত করা যেতে পারে: farthest-side-এর মাধ্যমে এমন ব্যাসার্ধ পাওয়া যায় যা উপবৃত্তের কেন্দ্র ও রেফারেন্স বক্সের সবচেয়ে দূরে থাকা পাশের দূরত্বের সমান, যেখানে closest-side-এর অর্থ ঠিক বিপরীত - কেন্দ্র ও পাশের মধ্যে সবচেয়ে কম দূরত্ব ব্যবহার করুন।

.element{
  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
  /* identical to: */
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

এলিমেন্টের ডাইমেনশন (বা রেফারেন্স বক্স) অপ্রত্যাশিতভাবে পরিবর্তন হলে, কিন্তু আপনি উপবৃত্তাকার আকৃতি মানিয়ে নিতে চাইলে এটি কাজে আসতে পারে।

circle() শেপ ফাংশনে ব্যাসার্ধের জন্য একই farthest-side এবং closest-side কীওয়ার্ড ব্যবহার করা যেতে পারে।

polygon() ফাংশন

বৃত্ত ও উপবৃত্তের মাধ্যমে যদি আপনার প্রয়োজন পূরণ না হয়, তাহলে পলিগন শেপ ফাংশন ব্যবহার করে আপনি অনেক বিকল্প পেতে পারেন। ফর্ম্যাটটি হল polygon(x1 y1, x2 y2, ...) যেখানে আপনি বহুভুজের প্রতিটি শীর্ষবিন্দুর (পয়েন্ট) জন্য x y স্থানাঙ্কের জোড়া নির্দিষ্ট করেন। একটি বহুভুজ নির্দিষ্ট করার জন্য ন্যূনতম জোড়ার সংখ্যা হল তিনটি, একটি ত্রিভুজ।

.element{
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
  width: 300px;
  height: 600px;
}

শীর্ষবিন্দুগুলি স্থানাঙ্ক সিস্টেমে স্থাপন করা হয়েছে। রেসপন্সিভ পলিগনের জন্য আপনি কিছু বা সব কোঅর্ডিনেটের জন্য শতাংশের মান ব্যবহার করতে পারেন।

.element{
  /* polygon responsive to font-size*/
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  width: 20em;
  height: 40em;
}

একটি ঐচ্ছিক fill-rule প্যারামিটার আছে, SVG থেকে ইমপোর্ট করা হয়েছে, যা ব্রাউজারকে নির্দেশ দেয় যে সেল্ফ-ইন্টারসেক্টিং পাথ বা এনক্লোজড শেপের ক্ষেত্রে কীভাবে পলিগনের "ইনসাইডনেস" বিবেচনা করতে হবে। জনি ট্রাইথাল খুব ভালোভাবে ব্যাখ্যা করেছেন যে SVG-তে fill-rule প্রপার্টি কীভাবে কাজ করে। নির্দিষ্ট করা না থাকলে, fill-rule ডিফল্ট হিসেবে nonzero হয়ে যায়।

.element{
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  /* identical to: */
  shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}

inset() ফাংশন

inset() শেপ ফাংশন আপনাকে আয়তাকার শেপ তৈরি করতে দেয় যার চারপাশে কন্টেন্ট র‍্যাপ করা যায়। প্রাথমিক ধারণা অনুযায়ী, CSS Shapes ওয়েব কন্টেন্টকে সাধারণ বক্স থেকে মুক্ত করে, তাই এটি শুনতে কিছুটা অদ্ভুত লাগতে পারে। হতে পারে। আমি এখনও inset()-এর জন্য এমন কোনও ব্যবহারের কেস খুঁজে পাইনি যা ফ্লোট এবং মার্জিন বা polygon()-এর মাধ্যমে আগে থেকেই অর্জন করা যায় না। যদিও inset(), polygon()-এর চেয়ে আয়তাকার শেপের জন্য আরও সহজে পড়া যায় এমন এক্সপ্রেশন প্রদান করে।

ইনসেট শেপ ফাংশনের সম্পূর্ণ নোটেশন হল inset(top right bottom left border-radius)। প্রথম চারটি পজিশন আর্গুমেন্ট হল এলিমেন্টের প্রান্ত থেকে ভিতরের দিকে অফসেট। শেষ আর্গুমেন্টটি হল আয়তাকার আকৃতির বর্ডার রেডিয়াস। এটি ঐচ্ছিক, তাই আপনি এটি ছেড়ে দিতে পারেন। এটি border-radius শর্টহ্যান্ড নোটেশন অনুসরণ করে যা আপনি আগে থেকেই CSS-এ ব্যবহার করেন।

.element{
  shape-outside: inset(100px 100px 100px 100px);
  /* yields a rectangular shape which is 100px inset on all sides */
  float: left;
}

রেফারেন্স-বক্স থেকে আকার তৈরি করা

আপনি shape-outside প্রপার্টিতে কোনও শেপ ফাংশন নির্দিষ্ট না করলে, এলিমেন্টের রেফারেন্স বক্স থেকে ব্রাউজারকে শেপ ডিরাইভ করার অনুমতি দিতে পারেন। ডিফল্ট রেফারেন্স বক্স হল margin-box। এখনও পর্যন্ত নতুন কিছু নয়, ফ্লোট এভাবেই কাজ করে। তবে এই টেকনিক প্রয়োগ করে আপনি কোনও এলিমেন্টের জিওমেট্রি আবার ব্যবহার করতে পারবেন। border-radius প্রপার্টি দেখা যাক।

আপনি যদি কোনও ফ্লোট করা এলিমেন্টের কোণগুলি গোল করতে এটি ব্যবহার করেন, তাহলে আপনি ক্লিপিং এফেক্ট পাবেন, কিন্তু ফ্লোট এরিয়া আয়তাকারই থাকবে। border-radius-এর তৈরি করা কনট্যুরের চারপাশে র‍্যাপ করতে shape-outside: border-box যোগ করুন।

.element{
  border-radius: 50%;
  shape-outside: border-box;
  float: left;
}

অবশ্যই, আপনি এই পদ্ধতিতে সব রেফারেন্স বক্স ব্যবহার করতে পারবেন। এখানে ডেরাইভড শেপের আরেকটি ব্যবহার দেখানো হল - অফসেট পুল-কোট।

শুধুমাত্র ফ্লোট ও মার্জিন প্রপার্টি ব্যবহার করে অফসেট পুল-কোট এফেক্ট অর্জন করা সম্ভব। তবে, এর জন্য আপনাকে HTML ট্রিতে কোট এলিমেন্টটি এমন একটি পজিশনে রাখতে হবে যেখানে আপনি এটি দেখাতে চান।

অতিরিক্ত নমনীয়তার সাথে একই অফসেট পুল-কোট এফেক্ট কীভাবে অর্জন করবেন তা এখানে দেওয়া হল:

.pull-quote{
  shape-outside: content-box;
  margin-top: 200px;
  float: left;
}

আমরা স্পষ্টভাবে শেপের কোঅর্ডিনেট সিস্টেমের জন্য content-box রেফারেন্স বক্স সেট করেছি। এই ক্ষেত্রে, পুল-কোটে কন্টেন্টের পরিমাণ সেই আকৃতিকে সংজ্ঞায়িত করে যার চারপাশে বাইরের কন্টেন্ট র‍্যাপ করা হবে। HTML ট্রি-তে অবস্থান যাই হোক না কেন, পুল-কোটের অবস্থান (অফসেট) ঠিক করতে এখানে margin-top প্রপার্টি ব্যবহার করা হয়।

শেপের মার্জিন

আপনি লক্ষ্য করবেন যে কোনও শেপের চারপাশে কন্টেন্ট র‍্যাপ করলে তা এলিমেন্টের খুব কাছাকাছি চলে আসতে পারে। shape-margin প্রপার্টি ব্যবহার করে আপনি আকারের চারপাশে স্পেসিং যোগ করতে পারবেন।

.element{
  shape-outside: circle(40%);
  shape-margin: 1em;
  float: left;
}

এই এফেক্টটি রেগুলার margin প্রপার্টি ব্যবহার করার মতোই, তবে shape-margin শুধুমাত্র shape-outside ভ্যালুর আশেপাশের স্পেসকে প্রভাবিত করে। কোঅর্ডিনেট সিস্টেমে জায়গা থাকলে তবেই এটি আকারের চারপাশে স্পেসিং যোগ করবে। সেই জন্য উপরের উদাহরণে বৃত্তের ব্যাসার্ধ ৫০% নয়, ৪০% সেট করা হয়েছে। ব্যাসার্ধ ৫০% সেট করা হলে, বৃত্তটি কোঅর্ডিনেট সিস্টেমের সমস্ত জায়গা নিয়ে নিত এবং shape-margin-এর প্রভাবের জন্য কোনও জায়গা থাকত না। মনে রাখবেন, আকৃতিটি শেষ পর্যন্ত এলিমেন্টের margin-box (এলিমেন্ট এবং তার আশেপাশের margin) দ্বারা সীমাবদ্ধ থাকে। আকৃতিটি বড় হলে এবং উপচে পড়লে, এটি margin-box-এ ক্লিপ করা হবে এবং আপনি একটি আয়তক্ষেত্রাকার আকৃতি পাবেন।

মনে রাখবেন যে shape-margin-এ শুধুমাত্র একটি ধনাত্মক ভ্যালু লেখা যায়। এটির কোনও লং-হ্যান্ড নোটেশন নেই। যাই হোক, বৃত্তের জন্য shape-margin-top কী?

অ্যানিমেটিং শেপ

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

আপনি circle() এবং ellipse() আকারের জন্য ব্যাসার্ধ এবং কেন্দ্র অ্যানিমেট করতে পারেন যতক্ষণ না সেগুলি ব্রাউজার ইন্টারপোলেট করতে পারে এমন মানগুলিতে সংজ্ঞায়িত করা হয়। circle(30%) থেকে circle(50%)-এ যাওয়া সম্ভব। তবে, circle(closest-side) থেকে circle(farthest-side)-এর মধ্যে অ্যানিমেট করলে ব্রাউজার চোক করবে।

.element{
  shape-outside: circle(30%);
  transition: shape-outside 1s;
  float: left;
}

.element:hover{
  shape-outside: circle(50%);
}

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

একটি কৌশল হল, আপনার যতগুলি ভার্টেক্স প্রয়োজন তার সর্বাধিক সংখ্যা যোগ করা এবং অ্যানিমেশন স্টেটে সেগুলিকে একসাথে ক্লাস্টার করে পজিশন করা, যেখানে আপনি শেপের কম সংখ্যক এজ দেখাতে চান।

.element{
  /* four vertices (looks like rectangle) */
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}

.element:hover{
  /* four vertices, but second and third overlap (looks like triangle) */
  shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

আকৃতির মধ্যে কন্টেন্ট র‍্যাপ করা

CSS শেপ স্পেসিফিকেশনের প্রাথমিক ড্রাফ্টে একটি shape-inside প্রপার্টি অন্তর্ভুক্ত ছিল যা আপনাকে একটি শেপের মধ্যে কন্টেন্ট র‍্যাপ করার অনুমতি দেয়। এমনকি কিছু সময়ের জন্য Chrome ও Webkit-এও এটি প্রয়োগ করা হয়েছিল। কিন্তু কাস্টম পাথের মধ্যে ইচ্ছামতো পজিশন করা কন্টেন্ট র‍্যাপ করার জন্য সমস্ত সম্ভাব্য পরিস্থিতি কভার করতে এবং সমস্যা এড়াতে অনেক বেশি প্রচেষ্টা এবং গবেষণার প্রয়োজন। সেই কারণে, shape-inside প্রপার্টি CSS Shapes লেভেল ২-এ স্থগিত করা হয়েছে এবং এর প্রয়োগ প্রত্যাহার করা হয়েছে।

তবে, কিছুটা চেষ্টা এবং একটু আপস করে, আপনি এখনও কাস্টম আকারের মধ্যে কন্টেন্ট র‍্যাপ করার এফেক্ট অর্জন করতে পারেন। কন্টেনারের বিপরীত দিকে পজিশন করা shape-outside সহ দুটি ফ্লোট করা এলিমেন্ট ব্যবহার করা হল হ্যাক। আপনাকে এক বা দুটি খালি এলিমেন্ট ব্যবহার করতে হবে যেগুলির কোনও শব্দার্থিক অর্থ নেই, তবে ভিতরে একটি আকৃতির বিভ্রম তৈরি করার জন্য স্ট্রুট হিসাবে কাজ করে।

<div>
  <div class='left-shape'></div>
  <div class='right-shape'></div>

  Lorem ipsum...
</div>

কন্টেনারের উপরে .left-shape এবং .right-shape স্ট্রাট এলিমেন্টের পজিশন গুরুত্বপূর্ণ কারণ কন্টেন্টের দুই পাশে দেখানোর জন্য এগুলি বাঁদিকে ও ডানদিকে ফ্লোট করা হবে।

.left-shape{
  shape-outside: polygon(0 0, ...);
  float: left;
  width: 50%;
  height: 100%;
}

.right-shape{
  shape-outside: polygon(50% 0, ...);
  float: right;
  width: 50%;
  height: 100%;
}

এই স্টাইলিংয়ের ফলে দুটি ফ্লোটেড স্ট্রাট এলিমেন্টের মধ্যে সব স্পেস নিয়ে নেয়, তবে shape-outside প্রপার্টি বাকি কন্টেন্টের জন্য স্পেস তৈরি করে।

ব্রাউজারে CSS Shapes কাজ না করলে, এটি সব কন্টেন্ট নিচে ঠেলে দিয়ে খারাপ এফেক্ট তৈরি করবে। সেই জন্য, প্রোগ্রেসিভ এনহ্যান্সমেন্টের মাধ্যমে ফিচারটি ব্যবহার করা গুরুত্বপূর্ণ।

আগের শেপ অ্যানিমেশনের উদাহরণে আপনি লক্ষ্য করবেন যে টেক্সট এদিক ওদিক সরে যাওয়া বিরক্তিকর হতে পারে। সব ক্ষেত্রে অ্যানিমেটেড শেপের প্রয়োজন হয় না। তবে, আপনি অন্যান্য প্রপার্টি অ্যানিমেট করতে পারেন যা CSS শেপের সাথে ইন্টার‍্যাক্ট করে, যাতে যেখানে প্রয়োজন সেখানে এফেক্ট যোগ করা যায়।

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

ব্রাউজার নেটিভভাবে টেক্সট লেআউট করে বলে জাভাস্ক্রিপ্ট সমাধানের চেয়ে এর পারফর্ম্যান্স ভালো হয়। তবে, স্ক্রল করার সময় margin-top পরিবর্তন করলে, অনেক রিলেআউট ও পেইন্ট ইভেন্ট ট্রিগার হয় এবং এর ফলে পারফর্ম্যান্স লক্ষণীয়ভাবে কমে যেতে পারে। সাবধানে ব্যবহার করুন! তবে, CSS শেপ অ্যানিমেট না করে ব্যবহার করলে পারফর্ম্যান্সে কোনও লক্ষণীয় প্রভাব পড়ে না।

প্রোগ্রেসিভ এনহ্যান্সমেন্ট

ব্রাউজারে CSS Shapes কাজ করে না বলে ধরে নিয়ে শুরু করুন এবং ফিচারটি শনাক্ত করার পরে সেই অনুযায়ী কাজ করুন। ফিচার শনাক্ত করার জন্য Modernizr একটি ভালো সমাধান এবং 'নন-কোর শনাক্তকরণ' বিভাগে CSS শেপের জন্য একটি পরীক্ষা আছে।

কিছু ব্রাউজার এক্সটার্নাল লাইব্রেরির প্রয়োজন ছাড়াই @supports নিয়মের মাধ্যমে CSS-এ ফিচার শনাক্তকরণ প্রদান করে। Google Chrome-এ CSS Shapes কাজ করে এবং এটি @supports নিয়ম বুঝতে পারে। প্রোগ্রেসিভ এনহ্যান্সমেন্টের জন্য আপনি এটি এইভাবে ব্যবহার করেন:

.element{
  /* styles for all browsers */
}

@supports (shape-outside: circle(50%)){
  /* styles only for browsers which support CSS Shapes */
  .element{
    shape-outside: circle(50%);
  }
}

Lea Verou CSS @supports নিয়ম কীভাবে ব্যবহার করতে হয় সেই সম্পর্কে আরও লিখেছেন।

CSS এক্সক্লুশন থেকে দ্ব্যর্থতা নিরসন

আজ আমরা যাকে CSS Shapes বলে জানি, স্পেসিফিকেশনের শুরুর দিকে তাকে CSS Exclusions and Shapes বলা হত। নামের এই পরিবর্তনকে সূক্ষ্ম পার্থক্য বলে মনে হতে পারে, কিন্তু এটি আসলে খুবই গুরুত্বপূর্ণ। CSS এক্সক্লুশন, এখন একটি আলাদা স্পেক, ফ্লোট প্রপার্টির প্রয়োজন ছাড়াই ইচ্ছামত অবস্থান করা এলিমেন্টের চারপাশে কন্টেন্ট র‍্যাপ করতে দেয়। কোনও অ্যাবসোলিউট-পজিশনড এলিমেন্টের চারপাশে কন্টেন্ট র‍্যাপ করার কথা ভাবুন; এটি CSS এক্সক্লুশনের একটি ব্যবহারিক ক্ষেত্র। CSS Shapes শুধু সেই পাথ নির্ধারণ করে যার চারপাশে কন্টেন্ট র‍্যাপ করা হবে।

তাই, আকার ও বাদ দেওয়া একই জিনিস নয়, তবে তারা একে অপরের পরিপূরক। CSS শেপ বর্তমানে ব্রাউজারে উপলভ্য, তবে CSS এক্সক্লুশন এখনও শেপ ইন্টার‍্যাকশনের সাথে প্রয়োগ করা হয়নি।

CSS শেপের সাথে কাজ করার টুল

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

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

Brackets: Brackets-এর জন্য CSS Shapes Editor এক্সটেনশন কোড এডিটরের লাইভ প্রিভিউ মোড ব্যবহার করে শেপের ভ্যালু এডিট করার জন্য একটি ইন্টার‍্যাক্টিভ এডিটর ওভারলে করে।

Google Chrome: Google Chrome-এর জন্য CSS Shapes Editor এক্সটেনশন ব্রাউজারের ডেভেলপার টুলকে আরও উন্নত করে, যার মাধ্যমে আকার তৈরি ও এডিট করার কন্ট্রোল পাওয়া যায়। এটি বেছে নেওয়া এলিমেন্টের উপরে একটি ইন্টার‍্যাক্টিভ এডিটর প্লেস করে।

Google Chrome-এর ইন্সপেক্টরে আকার হাইলাইট করার জন্য বিল্ট-ইন সহায়তা রয়েছে। shape-outside প্রপার্টি সহ কোনও এলিমেন্টের উপর মাউস নিয়ে যান এবং এটি আকারটি বোঝাতে আলোকিত হবে।

ছবি থেকে আকার: আপনি যদি ছবি তৈরি করতে চান এবং ব্রাউজারকে সেগুলি থেকে আকার এক্সট্র্যাক্ট করতে দিতে চান, তাহলে রেবেকা হক Photoshop-এর জন্য একটি ভালো টিউটোরিয়াল লিখেছেন।

Polyfill: Google Chrome হল প্রথম প্রধান ব্রাউজার যা CSS Shapes শিপ করে। Apple-এর iOS 8 এবং Safari 8-এ এই ফিচার শীঘ্রই কাজ করবে। অন্যান্য ব্রাউজার ভেন্ডর ভবিষ্যতে এটি বিবেচনা করতে পারে। ততদিন পর্যন্ত, প্রাথমিক সহায়তা প্রদান করার জন্য CSS Shapes পলিফিল আছে।

উপসংহার

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

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

এই নিবন্ধটি পর্যালোচনা করার জন্য এবং মূল্যবান অন্তর্দৃষ্টি প্রদান করার জন্য পার্ল চেন, অ্যালান স্টার্নস এবং জোল্টান হরভাথকে অনেক ধন্যবাদ।