কাস্টম পাথের চারপাশে কন্টেন্ট মোড়ানো
দীর্ঘদিন ধরে, ওয়েব ডিজাইনাররা আয়তক্ষেত্রের সীমাবদ্ধতার মধ্যে তৈরি করতে বাধ্য হয়েছেন। ওয়েবে বেশিরভাগ বিষয়বস্তু এখনও সাধারণ বাক্সে আটকে আছে কারণ অ-আয়তাকার লেআউটে বেশিরভাগ সৃজনশীল উদ্যোগ হতাশার মধ্যে শেষ হয়। এটি Chrome 37 থেকে শুরু করে উপলব্ধ CSS আকারগুলির প্রবর্তনের সাথে পরিবর্তন হতে চলেছে৷ 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 অর্থ হল আকৃতি তৈরি করতে 50% এবং তার বেশি অপাসিটি সহ শুধুমাত্র পিক্সেল ব্যবহার করা হবে।
float সম্পত্তি এখানে মূল. যদিও shape-outside সম্পত্তিটি সেই এলাকার আকৃতিকে সংজ্ঞায়িত করে যার চারপাশে বিষয়বস্তু মোড়ানো হবে, ভাসা ছাড়া, আপনি আকৃতির প্রভাব দেখতে পাবেন না।
উপাদানগুলির float মানের বিপরীত দিকে একটি ফ্লোট এলাকা রয়েছে। উদাহরণস্বরূপ, যদি একটি কফি কাপ চিত্র সহ একটি উপাদান বাম দিকে ভাসানো হয়, তাহলে ফ্লোট এলাকাটি কাপের ডানদিকে তৈরি হবে। যদিও আপনি উভয় দিকে ফাঁক দিয়ে একটি চিত্র প্রকৌশলী করতে পারেন, তবে বিষয়বস্তু শুধুমাত্র ফ্লোট সম্পত্তি দ্বারা মনোনীত বিপরীত দিকের আকৃতির চারপাশে মোড়ানো হবে, বাম বা ডান, উভয়ই নয়।
ভবিষ্যতে, সিএসএস এক্সক্লুশনের ভূমিকার সাথে ভাসমান নয় এমন উপাদানগুলিতে shape-outside ব্যবহার করা সম্ভব হবে।
ম্যানুয়ালি আকার তৈরি করা
চিত্রগুলি থেকে আকারগুলি বের করার বাইরে, আপনি সেগুলিকে ম্যানুয়ালি কোডও করতে পারেন৷ আকৃতি তৈরি করতে আপনি কয়েকটি কার্যকরী মান থেকে বেছে নিতে পারেন: circle() , ellipse() , inset() এবং polygon() । প্রতিটি আকৃতি ফাংশন স্থানাঙ্কের একটি সেট গ্রহণ করে এবং এটি একটি রেফারেন্স বাক্সের সাথে যুক্ত হয় যা স্থানাঙ্ক ব্যবস্থা স্থাপন করে। এক মুহূর্তের মধ্যে রেফারেন্স বাক্স সম্পর্কে আরো.
বৃত্ত() ফাংশন
একটি বৃত্তের আকৃতির মানের জন্য সম্পূর্ণ স্বরলিপি হল circle(r at cx cy) যেখানে r হল বৃত্তের ব্যাসার্ধ, যখন cx এবং cy হল X-অক্ষ এবং Y-অক্ষের বৃত্ত কেন্দ্রের স্থানাঙ্ক। বৃত্ত কেন্দ্রের স্থানাঙ্কগুলি ঐচ্ছিক৷ আপনি যদি সেগুলি বাদ দেন, তাহলে উপাদানটির কেন্দ্র (এর তির্যকগুলির ছেদ) ডিফল্ট হিসাবে ব্যবহার করা হবে৷
.element{
shape-outside: circle(50%);
width: 300px;
height: 300px;
float: left;
}
উপরের উদাহরণে, বিষয়বস্তু একটি বৃত্তাকার পথের বাইরের চারপাশে মোড়ানো হবে। একক যুক্তি 50% বৃত্তের ব্যাসার্ধ নির্দিষ্ট করে, যা এই নির্দিষ্ট ক্ষেত্রে, উপাদানটির প্রস্থ বা উচ্চতার অর্ধেক। উপাদানের মাত্রা পরিবর্তন বৃত্তের আকৃতির ব্যাসার্ধকে প্রভাবিত করবে। এটি একটি মৌলিক উদাহরণ কিভাবে CSS আকার প্রতিক্রিয়াশীল হতে পারে।
আরও এগিয়ে যাওয়ার আগে, দ্রুত একপাশে: এটা মনে রাখা গুরুত্বপূর্ণ যে CSS আকারগুলি শুধুমাত্র একটি উপাদানের চারপাশে ফ্লোট এলাকার আকৃতিকে প্রভাবিত করে। যদি উপাদানটির একটি ব্যাকগ্রাউন্ড থাকে তবে এটি আকৃতি দ্বারা ক্লিপ করা হবে না। সেই প্রভাব অর্জন করতে, আপনাকে অবশ্যই CSS মাস্কিং থেকে বৈশিষ্ট্যগুলি ব্যবহার করতে হবে - হয় ক্লিপ-পাথ বা মাস্ক-ইমেজ । clip-path প্রপার্টি খুব সহজে আসে কারণ এটি CSS আকারের মতো একই স্বরলিপি অনুসরণ করে, তাই আপনি মানগুলি পুনরায় ব্যবহার করতে পারেন।
এই নথি জুড়ে চিত্রগুলি আকৃতি হাইলাইট করতে এবং প্রভাবগুলি বুঝতে সাহায্য করতে ক্লিপিং ব্যবহার করে।
বৃত্তের আকারে ফিরে যান।
বৃত্ত ব্যাসার্ধের জন্য শতাংশ ব্যবহার করার সময়, মানটি আসলে একটি সামান্য জটিল সূত্র দিয়ে গণনা করা হয়: sqrt(প্রস্থ^2 + উচ্চতা^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;
}
স্থানাঙ্ক সিস্টেমের উৎপত্তি এখন উপাদানের বিষয়বস্তুর এলাকার বাইরে (100px উপরে এবং 100px বামে), বৃত্ত কেন্দ্রের মতো। margin-box রেফারেন্স বক্স দ্বারা প্রতিষ্ঠিত স্থানাঙ্ক সিস্টেমের বর্ধিত পৃষ্ঠের জন্য বৃত্ত ব্যাসার্ধের গণনা করা মানও বৃদ্ধি পায়।
একটি নির্দিষ্ট সময়ে শুধুমাত্র একটি রেফারেন্স বাক্স ব্যবহার করা যেতে পারে একটি shape-outside ঘোষণার সাথে। প্রতিটি রেফারেন্স বক্স আকৃতিকে ভিন্ন এবং কখনও কখনও সূক্ষ্মভাবে প্রভাবিত করবে। আরও একটি নিবন্ধ রয়েছে যা গভীরভাবে অনুসন্ধান করে এবং আপনাকে CSS আকারের রেফারেন্স বাক্সগুলি বুঝতে সাহায্য করে।
উপবৃত্ত() ফাংশন
উপবৃত্তগুলি কুঁচিত বৃত্তের মতো দেখায়। এগুলিকে 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(x1 y1, x2 y2, ...) যেখানে আপনি একটি বহুভুজের প্রতিটি শীর্ষবিন্দুর (বিন্দু) জন্য xy স্থানাঙ্কের জোড়া নির্দিষ্ট করেন। একটি বহুভুজ নির্দিষ্ট করার জন্য জোড়ার ন্যূনতম সংখ্যা তিনটি, একটি ত্রিভুজ।
.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 থেকে আমদানি করা হয়েছে , যা ব্রাউজারকে নির্দেশ দেয় কিভাবে স্ব-ছেদযুক্ত পাথ বা আবদ্ধ আকারের ক্ষেত্রে বহুভুজের "অভ্যন্তরীণতা" বিবেচনা করতে হয়। Joni Trythall SVG-তে ফিল-রুল প্রপার্টি কীভাবে কাজ করে তা খুব ভালভাবে ব্যাখ্যা করেছেন। যদি সংজ্ঞায়িত না করা হয়, 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() এর জন্য একটি ব্যবহারের ক্ষেত্রে খুঁজে পাইনি যা ইতিমধ্যে ফ্লোট এবং মার্জিন বা 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 সম্পত্তি তাকান.
আপনি যদি এটি একটি ভাসমান উপাদানের কোণে বৃত্তাকার করতে ব্যবহার করেন তবে আপনি ক্লিপিং প্রভাব পাবেন, তবে ভাসমান এলাকাটি আয়তক্ষেত্রাকার থাকবে। shape-outside: border-box border-radius দ্বারা তৈরি কনট্যুরের চারপাশে মোড়ানোর জন্য বর্ডার-বক্স।
.element{
border-radius: 50%;
shape-outside: border-box;
float: left;
}
অবশ্যই, আপনি এই পদ্ধতিতে সমস্ত রেফারেন্স বাক্স ব্যবহার করতে পারেন। প্রাপ্ত আকারের জন্য এখানে আরেকটি ব্যবহার রয়েছে - অফসেট পুল-কোট।
শুধুমাত্র ফ্লোট এবং মার্জিন বৈশিষ্ট্য ব্যবহার করে অফসেট পুল-কোট প্রভাব অর্জন করা সম্ভব। কিন্তু এর জন্য আপনাকে এইচটিএমএল ট্রিতে উদ্ধৃতি উপাদানটি যেখানে আপনি রেন্ডার করতে চান সেখানে অবস্থান করতে হবে।
যোগ করা নমনীয়তার সাথে একই অফসেট পুল-কোট প্রভাব কীভাবে অর্জন করা যায় তা এখানে রয়েছে:
.pull-quote{
shape-outside: content-box;
margin-top: 200px;
float: left;
}
আমরা আকৃতির স্থানাঙ্ক সিস্টেমের জন্য স্পষ্টভাবে content-box রেফারেন্স বক্স সেট করেছি। এই ক্ষেত্রে, পুল-উদ্ধৃতিতে বিষয়বস্তুর পরিমাণ নির্ধারণ করে যে আকৃতির চারপাশে বাইরের সামগ্রী মোড়ানো হবে। এইচটিএমএল ট্রিতে অবস্থান নির্বিশেষে, পুল-কোটকে অবস্থান (অফসেট) করতে এখানে margin-top প্রপার্টি ব্যবহার করা হয়।
আকৃতি মার্জিন
আপনি লক্ষ্য করবেন যে একটি আকৃতির চারপাশে সামগ্রী মোড়ানো এটি উপাদানটির বিরুদ্ধে খুব ঘনিষ্ঠভাবে ঘষতে পারে। আপনি shape-margin বৈশিষ্ট্য সহ আকৃতির চারপাশে ব্যবধান যোগ করতে পারেন।
.element{
shape-outside: circle(40%);
shape-margin: 1em;
float: left;
}
প্রভাবটি রেগুলার margin প্রপার্টি ব্যবহার করে আপনি যা ব্যবহার করেন তার অনুরূপ, কিন্তু shape-margin শুধুমাত্র shape-outside মানের চারপাশের স্থানকে প্রভাবিত করে। স্থানাঙ্ক ব্যবস্থায় এটির জন্য জায়গা থাকলেই এটি আকৃতির চারপাশে ব্যবধান যোগ করবে। তাই উপরের উদাহরণে বৃত্তের ব্যাসার্ধ 40% সেট করা হয়েছে, 50% নয়। যদি ব্যাসার্ধ 50% সেট করা হয়, তাহলে বৃত্তটি স্থানাঙ্ক সিস্টেমের সমস্ত স্থান দখল করে নিত এবং shape-margin প্রভাবের জন্য কোন স্থান না রেখে। মনে রাখবেন, আকৃতিটি শেষ পর্যন্ত উপাদানের margin-box সীমাবদ্ধ থাকে (উপাদানটি এবং এর পার্শ্ববর্তী margin )। যদি আকারটি বড় হয় এবং ওভারফ্লো হয়, তবে এটি margin-box ক্লিপ করা হবে এবং আপনি একটি আয়তক্ষেত্রাকার আকৃতির সাথে শেষ হবে।
এটা বোঝা গুরুত্বপূর্ণ যে shape-margin শুধুমাত্র একটি একক ইতিবাচক মান গ্রহণ করে। এটি একটি দীর্ঘ হাত স্বরলিপি নেই. একটি বৃত্তের জন্য একটি আকৃতি-মার্জিন-শীর্ষ কি, যাইহোক?
অ্যানিমেটিং আকার
আপনি 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 শেপস লেভেল 2- এ স্থগিত করা হয়েছে এবং এর জন্য বাস্তবায়ন প্রত্যাহার করা হয়েছে।
যাইহোক, কিছু প্রচেষ্টা এবং কিছুটা আপস করে, আপনি এখনও একটি কাস্টম আকারের মধ্যে সামগ্রী মোড়ানোর প্রভাব অর্জন করতে পারেন। হ্যাক হল দুটি ভাসমান উপাদান ব্যবহার করা যার shape-outside , একটি পাত্রের বিপরীত দিকে অবস্থিত। সমঝোতা হল যে আপনাকে এক বা দুটি খালি উপাদান ব্যবহার করতে হবে যার কোন শব্দার্থিক অর্থ নেই, কিন্তু ভিতরে একটি আকৃতির বিভ্রম তৈরি করতে স্ট্রুট হিসাবে কাজ করে।
<div>
<div class='left-shape'></div>
<div class='right-shape'></div>
Lorem ipsum...
</div>
কন্টেইনারের শীর্ষে .left-shape এবং .right-shape strut উপাদানগুলির অবস্থান গুরুত্বপূর্ণ কারণ বিষয়বস্তুকে ফ্ল্যাঙ্ক করার জন্য এগুলি বাম এবং ডানে ভাসানো হবে।
.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 আকারগুলি ব্রাউজার দ্বারা সমর্থিত না হয়, তাহলে এটি সমস্ত সামগ্রীকে নিচে ঠেলে কুৎসিত প্রভাব ফেলবে। এই কারণেই বৈশিষ্ট্যটি ধীরে ধীরে উন্নত পদ্ধতিতে ব্যবহার করা গুরুত্বপূর্ণ।
আগের আকৃতির অ্যানিমেশন উদাহরণগুলিতে, আপনি লক্ষ্য করবেন যে পাঠ্যের চারপাশে স্থানান্তর করা বিরক্তিকর হতে পারে। সমস্ত ব্যবহারের ক্ষেত্রে একটি অ্যানিমেটেড আকৃতি নিশ্চিত করে না। কিন্তু আপনি অন্যান্য বৈশিষ্ট্যগুলিকে অ্যানিমেট করতে পারেন যা CSS আকারের সাথে ইন্টারঅ্যাক্ট করে যেখানে এটি অর্থপূর্ণ প্রভাব যোগ করতে পারে।
এলিস ইন ওয়ান্ডারল্যান্ডে সিএসএস আকারের প্রদর্শনীতে, আমরা বিষয়বস্তুর শীর্ষ মার্জিন পরিবর্তন করতে স্ক্রোল অবস্থান ব্যবহার করেছি। টেক্সট দুটি ভাসমান উপাদানের মধ্যে চাপা হয়. এটি নিচের দিকে যাওয়ার সাথে সাথে এটিকে দুটি ভাসমান উপাদানের shape-outside অনুযায়ী রিলেআউট করতে হবে। এটি ছাপ দেয় যে পাঠ্যটি খরগোশের গর্তে নেমে যাচ্ছে এবং এটি গল্প বলার অভিজ্ঞতা যোগ করে। বর্ডারলাইন অকারণে? হতে পারে। কিন্তু এটা শান্ত দেখায়.
যেহেতু টেক্সট লেআউটটি ব্রাউজার দ্বারা নেটিভভাবে করা হয়, তাই কর্মক্ষমতা জাভাস্ক্রিপ্ট সমাধান ব্যবহার করার চেয়ে ভাল। কিন্তু স্ক্রলে মার্জিন-টপ পরিবর্তন করা অনেকগুলি রিলেআউট এবং পেইন্ট ইভেন্টগুলিকে ট্রিগার করে এবং এটি কার্যকারিতা উল্লেখযোগ্যভাবে হ্রাস করতে পারে। সতর্কতার সাথে ব্যবহার করুন! যাইহোক, CSS শেপগুলিকে অ্যানিমেট না করে ব্যবহার করলে বোধগম্য পারফরম্যান্স হিট হয় না।
প্রগতিশীল বর্ধন
ব্রাউজারে CSS আকৃতি সমর্থন নেই বলে ধরে নিয়ে শুরু করুন এবং আপনি যখন বৈশিষ্ট্যটি শনাক্ত করবেন তখন এটি তৈরি করুন। Modernizr বৈশিষ্ট্য সনাক্তকরণের জন্য একটি ভাল সমাধান এবং 'নন-কোর সনাক্তকরণ' বিভাগে CSS আকারের জন্য একটি পরীক্ষা রয়েছে।
কিছু ব্রাউজার বাহ্যিক লাইব্রেরির প্রয়োজন ছাড়াই @supports নিয়মের মাধ্যমে CSS-এ বৈশিষ্ট্য সনাক্তকরণ প্রদান করে। Google Chrome, যা CSS আকারগুলিকেও সমর্থন করে, @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 আকার হিসাবে যা জানি সেগুলিকে CSS এক্সক্লুশন এবং আকৃতি বলা হত স্পেকের প্রথম দিকে। নামকরণের সুইচ একটি সূক্ষ্মতা হিসাবে মনে হতে পারে, কিন্তু এটি আসলে খুবই গুরুত্বপূর্ণ। CSS এক্সক্লুশন , এখন একটি পৃথক বৈশিষ্ট্য, কোনো ফ্লোট সম্পত্তির প্রয়োজন ছাড়াই ইচ্ছামত অবস্থান করা উপাদানগুলির চারপাশে সামগ্রী মোড়ানো সক্ষম করে। একটি একেবারে অবস্থানকারী উপাদানের চারপাশে কন্টেন্ট মোড়ানো কল্পনা করুন; এটি CSS এক্সক্লুশনের জন্য একটি ব্যবহারের ক্ষেত্রে। CSS আকারগুলি কেবল সেই পথটি সংজ্ঞায়িত করে যার চারপাশে সামগ্রীটি মোড়ানো হবে।
সুতরাং, আকার এবং বর্জন একই জিনিস নয়, কিন্তু তারা একে অপরের পরিপূরক করে। CSS আকারগুলি আজ ব্রাউজারগুলিতে উপলব্ধ, যখন CSS এক্সক্লুশনগুলি এখনও আকারের ইন্টারঅ্যাকশনের সাথে প্রয়োগ করা হয়নি৷
CSS আকারের সাথে কাজ করার জন্য টুল
আপনি ক্লাসিক ইমেজ অথরিং টুলে পাথ তৈরি করতে পারেন, কিন্তু এই লেখার সময় সেগুলির কোনোটিই CSS আকারের মানগুলির জন্য প্রয়োজনীয় সিনট্যাক্স রপ্তানি করে না। এমনকি যদি তারা তা করেও, সেভাবে কাজ করা খুব বেশি ব্যবহারিক হবে না।
CSS আকারগুলি ব্রাউজারে ব্যবহার করার জন্য বোঝানো হয়, যেখানে তারা পৃষ্ঠার অন্যান্য উপাদানগুলিতে প্রতিক্রিয়া জানায়৷ এটিকে ঘিরে থাকা বিষয়বস্তুর উপর আকৃতি সম্পাদনার প্রভাবগুলি কল্পনা করা খুব দরকারী। এই কর্মপ্রবাহে আপনাকে সাহায্য করার জন্য কয়েকটি সরঞ্জাম রয়েছে:
বন্ধনী : বন্ধনীর জন্য CSS শেপস এডিটর এক্সটেনশন কোড এডিটরের লাইভ প্রিভিউ মোড ব্যবহার করে আকৃতির মান সম্পাদনার জন্য একটি ইন্টারেক্টিভ এডিটর ওভারলে করে।
গুগল ক্রোম : গুগল ক্রোমের সিএসএস শেপস এডিটর এক্সটেনশন আকার তৈরি এবং সম্পাদনা করার জন্য নিয়ন্ত্রণ সহ ব্রাউজারের বিকাশকারী সরঞ্জামগুলিকে প্রসারিত করে। এটি নির্বাচিত উপাদানের উপরে একটি ইন্টারেক্টিভ সম্পাদক রাখে।
গুগল ক্রোমের ইন্সপেক্টরের আকার হাইলাইট করার জন্য অন্তর্নির্মিত সমর্থন রয়েছে। shape-outside সম্পত্তি সহ একটি উপাদানের উপর হভার করুন এবং এটি আকৃতিটি চিত্রিত করতে আলোকিত হবে।
ছবি থেকে আকৃতি : আপনি যদি ছবি তৈরি করতে পছন্দ করেন এবং ব্রাউজারে সেগুলি থেকে আকৃতি বের করতে চান, রেবেকা হক ফটোশপের জন্য একটি ভাল টিউটোরিয়াল লিখেছেন।
পলিফিল : গুগল ক্রোম হল প্রথম প্রধান ব্রাউজার যা সিএসএস শেপ পাঠায়। অ্যাপলের iOS 8 এবং Safari 8-এ বৈশিষ্ট্যটির জন্য আসন্ন সমর্থন রয়েছে। অন্যান্য ব্রাউজার বিক্রেতারা ভবিষ্যতে এটি বিবেচনা করতে পারে। ততক্ষণ পর্যন্ত, মৌলিক সহায়তা প্রদানের জন্য একটি CSS আকার পলিফিল রয়েছে।
উপসংহার
একটি ওয়েবে যেখানে বিষয়বস্তু বেশিরভাগই সাধারণ বাক্সে আটকে থাকে, CSS আকারগুলি অভিব্যক্তিপূর্ণ লেআউট তৈরি করার একটি উপায় প্রদান করে, ওয়েব এবং প্রিন্ট ডিজাইনের মধ্যে বিশ্বস্ততার ব্যবধান পূরণ করে। অবশ্যই, আকার অপব্যবহার করা যেতে পারে এবং বিভ্রান্তি তৈরি করতে পারে। কিন্তু, যখন স্বাদ এবং ভাল বিচারের সাথে প্রয়োগ করা হয়, তখন আকারগুলি বিষয়বস্তু উপস্থাপনাকে উন্নত করতে পারে এবং ব্যবহারকারীর মনোযোগকে এমনভাবে ফোকাস করতে পারে যা তাদের কাছে অনন্য।
আমি আপনাকে অন্যদের কাজের একটি সংগ্রহ দিয়ে রেখেছি, বেশিরভাগ মুদ্রণ থেকে, যা অ-আয়তাকার বিন্যাসের জন্য আকর্ষণীয় ব্যবহার প্রদর্শন করে। আমি আশা করি এটি আপনাকে CSS আকারগুলি চেষ্টা করতে এবং নতুন ডিজাইন ধারণা নিয়ে পরীক্ষা করতে অনুপ্রাণিত করবে।
এই নিবন্ধটি পর্যালোচনা করার জন্য এবং মূল্যবান অন্তর্দৃষ্টি প্রদানের জন্য পার্ল চেন, অ্যালান স্টারনস এবং জোল্টান হরভাথকে অনেক ধন্যবাদ।