() translation by (you can also view the original English article)
বিন্যাসের মূলনীতি হচ্ছে–কলাম এবং সারি, কোণ এবং লাইন–যা ব্যবহার করে আমরা মূলত ওয়েবসাইট তৈরি করে থাকি। এগুলো আসলে তাদের পূর্ববর্তী মুদ্রণ ঐতিহ্য দ্বারা প্রভাবিত। এবং যদিও ওয়েবে গ্রিডের বাস্তবায়ন আরো ভালো এবং পরিশীলিত হচ্ছে, তথাপিও, সাধারণভাবে ওয়েব লেআউট এখনও প্রিন্ট মিডিয়ার তুলনায় বিশ্রী, বিশেষত যখন এটির বিষয়বস্তুতে প্রবাহ বা মনোযোগ আসে।
ম্যাগাজিন এবং খবরের কাগজে সর্বদাই মার্জিত উপায়ে বিষয়বস্তু বিন্যাস্ত করা হয়ে থাকে। যেমন, বিষয়বস্তুর বিন্যাস ব্যবস্থা, চারদিকে লেখা মুড়িয়ে থাকা, অথবা ভিতরের পাতা, অ-আয়তকার আকৃতি ইত্যাদি।
চলুন তাহলে ব্যাখ্যা করা যাক সিএসএস শেপ মডিউল কিভাবে ওয়েবেও আমাদের একই রকম স্বাধীনতা দিয়ে থাকে।
CSS আকৃতির সংক্ষিপ্ত সূচনা
সিএসএস আকৃতি ওয়েব ডিজাইনারদের আরো বিমূর্ত, জ্যামিতিক বিন্যাস, সহজ আয়তক্ষেত্র এবং চতুষ্কোণ তৈরি করতে সাহায্য করে। এই সবিস্তার বিবরণী আমাদেরকে shape-outside এবং shape-margin সহ নতুন নতুন CSS বৈশিষ্ট্যের সঙ্গে পরিচিত করবে। ব্রাউজারের সমর্থন পাওয়াও যুক্তিযুক্ত, যদিও এই বৈশিষ্ট্য বর্তমানে একমাত্র ক্রোমি, অপেরা, এবং সাফারিতে পাওয়া যায়, সঙ্গে -webkit- প্রিফিক্স, এবং -webkit-shape-outside ও আছে।
shape-outside প্রোপার্টিটি এমন একটি ইনলাইন কনটেন্ট যা বক্স মডেলের বদলে একটি উপাদানকে বাহির থেকে চারদিকে জড়িয়ে রাখে। প্রাথমিকভাবে, shape-inside কোন বিষয়বস্তুকে একটি উপাদানের ভিতর মুড়িয়ে রাখে; একটি বৃত্তাকার উপাদানের ভিতরের লেখাও বৃত্তাকার আকৃতি হিসেবে ধরা হয়ে থাকে। যাইহোক, এটার পুরোপুরি বাস্তবায়ন করা সিএসএস আকার স্তর ২ এর জন্য স্থগিত করা হয়েছে।
shape-margin প্রোপার্টির মাধ্যমে, যেই শেইপটি shape-outside ব্যবহার করেছে, তাঁর চারদিকে মার্জিন দেয়ার জন্য ব্যবহার করা হয়।
চলুন কিছু উদাহরণ দেখা যাক।
একটি আকৃতি তৈরি করা
কিভাবে CSS শেইপ কাজ করে তা খুঁজে বের করার সহজ উপায় হচ্ছে বৃত্ত তৈরি করা। তাই, এখানে একটি div (আমাদের বৃত্তটি), পাশাপাশি বিভিন্ন অনুচ্ছেদের সঙ্গে দেখানো হলো।
1 |
<div class="circle"></div> |
2 |
<p>Lorem ipsum…</p> |
3 |
<p>Lorem ipsum…</p> |
4 |
<p>Lorem ipsum…</p> |
এখানে কিছু বেসিক স্টাইলিং আছে, বৃত্তের ব্যাস ও উচ্চতাসহ, border-radius টি বৃত্তের আকার প্রদান করে থাকে, এবং একটি অনুচ্ছেদ যা বৃত্তের মাঝামাঝি ভাসমান অবস্থায় থাকে।
1 |
.circle { |
2 |
width: 250px; |
3 |
height: 250px; |
4 |
background-color: #40a977; |
5 |
border-radius: 50%; |
6 |
float: left; |
7 |
}
|
আমরা যেমন আশা করেছি, তেমনি অনুচ্ছেদটির এখন প্রায় বৃত্তের চারদিকে জড়িয়ে আছে। যদিও, বর্ডার-রেডিয়াস প্রোপার্টি প্রকৃতপক্ষে উপাদানটির শেইপ নির্ধারণ করে না, এবং বৃত্তটি অনুচ্ছেদে মোড়ানোর জন্য বক্ররেখা গঠন করে না।
যদি আমরা আমাদের ব্রাউজার DevTools এর মাধ্যমে উপাদানটি পরীক্ষা করে দেখি, তবে আমরা দেখতে পাব যে উপাদানটি এখনও একটি বাক্সের মত দেখাচ্ছে। সুতরাং, যদিও আমাদের div টি দেখতে বৃত্তের মত দেখাচ্ছে, তবে border-radius আসলে উপাদানটির গঠন বা আকৃতি তৈরির ক্ষেত্রে কিছুই করে নি।
আমাদের অনুচ্ছেদটি দেখতে যাতে বৃত্তের মত হয়, সেজন্য আমাদের প্রকৃত উপাদান বা এলিমেণ্টটির শেইপ shape-outside প্রোপার্টি দ্বারা পরিবর্তন করতে হবে; এই ক্ষেত্রে আমরা circle() ফাংশনে এটা যোগ করতে পারি।
1 |
.circle { |
2 |
width: 250px; |
3 |
height: 250px; |
4 |
background-color: #40a977; |
5 |
border-radius: 50%; |
6 |
float: left; |
7 |
-webkit-shape-outside: circle(); |
8 |
shape-outside: circle(); |
9 |
}
|
আমাদের অনুচ্ছেদটি এখন বৃত্তের চারিদিকে খুব সুন্দরভাবে মোড়ানো আছে।
উপরন্তু, আমরা এখন DevTools এর মাধ্যমে উপাদানটি নিরীক্ষণ করলে, দেখব যে উপাদানটি সঠিকভাবে একটি বৃত্তের পরিণত করা হয়েছে।
এবার কিছু মার্জিন দিয়ে, দেখুন কিভাবে এটি সহজে বিন্যাস্ত হতে পারে:
বৃত্ত কাস্টমাইজ করা
circle() ফাংশনটি যথাক্রমে ব্যাসার্ধ এবং কেন্দ্র সমন্বয় করার জন্য কয়েকটি মান নিয়ে গঠিত: circle(r at x y)। সাধারণভাবে, ব্যাসার্ধের মান উপাদানটির আকার থেকে উদ্ভূত হয়; উদাহরনতঃ যদি উপাদানটি 300px চওড়া হয়, তাহলে ব্যসার্ধ হবে 150px (radius বা ব্যাসার্ধটি বৃত্তের ব্যাসের অর্ধেক হবে)।
অনুরূপভাবে,x এবং y এর স্থানাঙ্ক উপাদানটির আকারের সাথে সম্পর্কিত, এবং সচরাচর ডানদিকে উপাদানটির কেন্দ্রে 50% 50% -এ সেট করা হয়।
এই দুটি মান কার্যকর হবে যখন আপনি আকৃতির আকার পরিবর্তন করতে চান, প্রকৃত উপাদানটি রাখলে, অথবা বস্তুর অবস্থান ধরে রাখার সময় আকৃতি স্থানান্তর করতে পারেন। নিম্নোক্ত উদাহরণে, আমরা বৃত্তের ব্যাসার্ধটি 60px-এর নিচে কমিয়ে দেব এবং কেন্দ্রের সমন্বয়টি 30% 70% পর্যন্ত সেট করব, যা ফলে বৃত্তটির উপাদান বাক্সের নীচে বামদিকে সরাতে হবে।
এটি লক্ষ্য করা যায় যে, যখন বৃত্তকে কেন্দ্রস্থলে সমন্বয় করা হয় এবং ব্যাসার্ধ স্পষ্টভাবে সংজ্ঞায়িত করা হয়; তখন কেবলমাত্র একটি ভ্যালু যোগ করা ঠিক নয়।
1 |
circle( 60px at 30% 70% ) // correct. |
2 |
circle( 60px ) // invalid. |
3 |
circle( at 30% 70% ) // invalid. |
বক্স মডেলের আকৃতি
CSS আকারগুলি উপাদান হিসাবে একই বক্স মডেল নীতির অনুসরণকারী, কিন্তু উপাদানটিকে নিজ থেকেই এই সুযোগের বাইরে প্রয়োগ করা হয়। এটি আমাদের padding-box এর আকৃতি সেট করার সময় border-box এ আলাদা আলাদা উপাদান সেট করতে দেয়। বক্স মডেলের আকৃতি পরিবর্তন করার জন্য, বক্স মডেলের যেকনো একটি কীওয়ার্ড, content-box, margin-box, border-box অথবা padding-box যোগ করতে পারেন।
1 |
.circle { |
2 |
width: 250px; |
3 |
height: 250px; |
4 |
background-color: #40a977; |
5 |
border-radius: 50%; |
6 |
float: left; |
7 |
padding: 10px; |
8 |
border: 20px solid #ccc; |
9 |
margin: 30px; |
10 |
-webkit-shape-outside: circle() padding-box; |
11 |
shape-outside: circle() padding-box; |
12 |
}
|
ডিফল্ট বক্স-মডেলের আকৃতিটি margin-box এ সেট করা হয়। এবং নিম্নোক্ত উদাহরণে, আমরা এটি padding-box এ পরিবর্তিত করবো যা ব্রাউজারকে আকার আকৃতি বা span নির্ধারণ করার সময় উপাদানটির মার্জিন বাদ দিতে বলবে। এখন আমরা অনুচ্ছেদটি বর্ডারের মধ্য দিয়ে অতিক্রম করতে পারি, এবং অবিচ্ছিন্ন উপাদানটির প্যাডিং স্পর্শ করি।
বক্স-মডেল কীভাবে কাজ করে, সে সম্পর্কে বিস্তারিত জানতে সিএসএস বক্স মডেলের মৌলিক বিষয় সম্পর্কে আমাদের কোর্সটি বিনামূল্যে চেক করার জন্য আমি অত্যন্ত সুপারিশ করছি।
আরও শেইপ তৈরি
CSS আকারের নির্দিষ্টকরণে আরো কিছু আকৃতি ফাংশনগুলির সাথে আসে:
-
ellipse(): নামের মতই, এই ফাংশনটি ডিম্বাকার আকৃতি তৈরি করবে। আমরা ellipse এর ব্যাসার্ধ কনফিগার করতে পারি এবং আকৃতিটি কেন্দ্রের সঙ্গে সমন্বয় করতে পারি। কিন্তুcircle()ফাংশনটির মতই,ellipse()ফাংশন দুটি ব্যাসার্ধ পরিমাপ, অনুভূমিক এবং উল্লম্বভাবে প্রয়োগ করে, অতএবellipse (100px 180px at 10% 20%)। -
polygon(): এই ফাংশনটি আমাদের আরও জটিল আকার তৈরি করতে সক্ষম করে যেমন, ত্রিভুজ, ষড়ভুজ, এবং অ-জ্যামিতিক আকার। বহুভুজ ব্যবহার করে একটি বৃত্ত তৈরি করা ততটা সহজ নয় , তবে পলিগন কনভার্টার টুলের পাথটি এটাকে আরও বেশি সহজ করে তোলে।
শেষ কথা
এই টিউটোরিয়ালে, আমরা দেখছি CSS আকৃতির মৌলিক প্রায়োগিক বিষয়, আমরা একটি আকৃতি তৈরি করেছি, আকার পরিবর্তন করেছি, অবস্থান এবং বক্স মডেল ঠিক করেছি। লেখার সময়, সিএসএস আকারের বেশ কিছু দিক এখনও প্রান্তের কাছাকাছি বেশ অদ্ভুতভাবে দেখা যাচ্ছে, সম্ভবতঃ এ কারনেই এটি ব্যাপকভাবে ব্যবহার করা হয় না।
- যেমন এই টিউটোরিয়ালে আগেই উল্লেখ করা হয়েছে, সিএসএস আকৃতির জন্য
shape-insideপ্রোপার্টি, যা আমাদের একটি উপাদানের ভিতরে খুবই চমৎকার উপায়ে বিষয়বস্তুকে মুড়িয়ে রাখে। - সিএসএস আকারের নির্দিষ্টকরণ বক্স-মডেলকে সংজ্ঞায়িত করার জন্য
shape-boxনামক একটি পৃথক প্রোপার্টি প্রদান করে, যদিও এটি বর্তমানে কোনও কোনও ব্রাউজারে অক্ষম বলে মনে হয়। - সাফারি ব্রাউজারের জন্য
-webkit-prefix এর প্রয়োজন হয় যা প্রমান করে যে এই বৈশিষ্ট্যটি পরীক্ষামূলক।
তবুও, এই মুহূর্তে ব্রাউজারের ধীর অগ্রগতি এবং অসমতা সত্ত্বেও, আমি CSS আকারের দিকে তাকিয়ে আছি! একবার প্রধান ব্রাউজারগুলো এটি পছন্দ করে নিলে, আমি ওয়েবে নিশ্চয়ই কিছু সত্যিকারের সৃজনশীল লেআউট দেখতে পাবো!
