CSS3 Multiple Columns অর্থাৎ css3 তে একাধিক কলাম তৈরি করা
css3 ব্যবহার করে আপনি টেক্সটগুলোকে প্রয়োজনমত সাজানোর জন্য একাধিক কলাম তৈরি করতে পারবেন।
এই অধ্যায়ে আপনি নিম্নোক্ত কলাম প্রপার্টি গুলো সম্পর্কে জানবেন-
- column-count
- column-gap
- Column-rule
ব্রাউজার সাপোর্ট (Browser Support)
এই প্রপার্টিটি সকল নতুন ভার্সন এর ব্রাউজারগুলোতে সাপোর্ট করে। IE তে 10.0, Google Chrome 4.0 -webkit-, mozilla 2.0 -moz-, Safari 3.1 -webkit-, opera 15.0 -webkit-11.1
এখানে -webkit- এবং -moz- ব্যবহার করে ব্রাউজারগুলোর প্রথম ভার্সন বুঝানো হয়েছে যা এই prefix গুলো সাপোর্ট করে।
Property | ||||||
column-count |
4.0 -webkit- |
12.0 |
10.0 |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit- |
column-gap |
4.0 -webkit- |
12.0 |
10.0 |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit- |
column-rule |
4.0 -webkit- |
12.0 |
10.0 |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit- |
column-rule-color |
4.0 -webkit- |
12.0 |
10.0 |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit |
column-rule-style |
4.0 -webkit- |
12.0 |
10.0 |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit |
column-rule-width |
4.0 -webkit- |
12.0 |
10.0 |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit |
column-width |
4.0 -webkit- |
12.0 |
10.0 |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit |
CSS3 ব্যবহার করে একাধিক কলাম তৈরি
column-count প্রপার্টি দ্বারা কয়টি কলাম হবে তা বলে দেয়া হয়।
উদাহরণ-
div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; }
উপরের এই css টুকু লিখার ফলে আপনার div এর মধ্যে লিখা টেক্সটগুলো তিনটি কলামে বিভক্ত হবে।
CSS3 দিয়ে কলামগুলোর মাঝে কতখানি ফাঁকা থাকবে তাও বলে দেয়া যায়।
column-gap প্রপার্টি দ্বারা কলামগুলোর মাঝে কতখানি জায়গা ফাঁকা থাকবে তা বলে দেয়া হয়।
উদাহরণ-
div { -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; }
CSS3 কলামের নিয়ম (CSS3 column rules)
column-rule প্রপার্টি দ্বারা কলামের width, style এবং color এই তিনটি বিষয় বলে দেয়া হয়।
উদাহরণ-
div { -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; }
CSS3 এর একাধিক কলামের কিছু প্রপার্টি
column-count | এই প্রপার্টি দ্বারা টেক্সটগুলো কয়টি কলামে ভাগ হবে তা বলা হয়। |
column-fill | এই প্রপার্টি দ্বারা কলামগুলো টেক্সট দিয়ে পুরন করার নির্দেশ দেয়া হয় |
column-gap | এই প্রপার্টি দ্বারা কলামগুলোর মাঝে কতখানি ফাঁক থাকবে তা বলা হয়। |
column-rule | এই প্রপার্টি দ্বারা কলামগুলোর সব নিয়ম নির্ধারণ করা হয়। |
column-rule-color | এই প্রপার্টি দ্বারা কলামগুলোর মাঝে কোন বর্ডার থাকলে তার কালার কি হবে তা বলা হয়। |
column-rule-style | এই প্রপার্টি দ্বারা কলামগুলোর মাঝের বর্ডার কেমন হবে তা বলা হয়। |
column-rule-width | এই প্রপার্টি দ্বারা কলামগুলোর মাঝের বর্ডারের উইদথ কতখানি হবে তা বলা হয়। |
columns | এই প্রপার্টিটি column-width এবং column-count দুইটি প্রপার্টির কাজ একাই করতে পারে। |