সিএসএস৩ একাধিক কলাম - Css3 Multiple Columns


সিএসএস 3.0 এর column প্রোপার্টি গুলো ব্যবহার করে ওয়েব পেজের কোন এলিমেন্টেকে সহজে একাধিক কলামে ভাগ করে প্রদর্শন করা যায়। খবরের কাগজে যেমন খবর গুলো অনেক গুলো কলামে ভাগ করা থাকে, সেভাবে। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।

websSchool.com is a free bangla website for learning web design, and many other web related services like that SEO, free website template etc. websSchool.com is a free bangla website for learning web design, electronics circuits and many other web related services like that SEO, free website template etc.


নতুন column প্রোপার্টি

সিএসএস এর 3.0 সংস্করণে যে সকল column প্রোপার্টি গুলো যোগ করা হয়েছে, সেগুলো হল নিম্নরূপ।


column-count প্রপার্টি

কোন এইচটিএমএল এলিমেন্ট কত গুলো কলামে বিভক্ত হবে, তা সিএসএস এর column-count প্রোপার্টি ব্যাবহার করে নির্ধারণ করা হয়। নিচে column-count প্রোপার্টির সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-count: number|auto|initial|inherit;

কোড এডিটর


নিচের উদাহরণ টি দেখুন, এখানে column-count প্রপার্টির মান নির্ধারণ করা হয়েছে 3, তাই <div> এলিমেন্টটি ৩টি ভাগে বিভক্ত হয়েছে।

উদাহরণ

div {
  column-count: 3;
  }

কোড এডিটর


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-count সমর্থন বা support করে না।

column-count প্রপার্টির মান

column-count প্রপার্টির জন্য যে সকল মান বা value নির্ধারণ করা যায়, সে গুলো হল নিম্নরুপ -


column-gap প্রোপার্টি

column-count প্রপার্টি ব্যবহার করে যে কলাম গুলো তৈরি করা হয়, সেগুলোর মাঝে ফাকা স্থান বা gap তৈরি করতে column-gap প্রপার্টি ব্যবহার করা হয়। নিচে column-gap প্রোপার্টির সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-gap: length|normal|initial|inherit;

নিচের উদাহরণ টি দেখুন, এখানে column-gap প্রপার্টির মান নির্ধারণ করা হয়েছে 50px, তাই কলাম গুলোর মাঝে 50px এর ফাকা স্থান রয়েছে।

উদাহরণ

div {
  column-gap: 50px;
  }

কোড এডিটর


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের সংস্করণ বা version গুলো column-gap সমর্থন বা support করে না।

column-gap প্রপার্টির মান

column-gap প্রপার্টির জন্য যে সকল মান বা value নির্ধারণ করা যায়, সে গুলো হল নিম্নরুপ।


column-rule-style প্রোপার্টি

কলাম গুলোর মাঝের স্টাইল নির্ধারণ করতে সিএসএস এর column-rule-style প্রোপার্টি ব্যাবহার করা হয়। নিচে column-rule-style প্রোপার্টির সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit

নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস এর column-rule-style প্রোপার্টি ব্যাবহার করা হয়েছে।

উদাহরণ

div {
  column-rule-style: solid;
  }

কোড এডিটর


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-rule-style সমর্থন বা support করে না।

column-rule-style প্রোপার্টির মান

সিএসএস এর column-rule-style প্রোপার্টিতে যে সকল মান বা value ব্যাবহার করা যায়, সেগুলো হল নিম্নরূপ।


column-rule-width প্রোপার্টি

দুইটি কলামের মাঝের স্টাইল এর প্রস্থ বা width নির্ধারণ করা হয় column-rule-width প্রোপার্টি ব্যাবহার করে। নিচে column-rule-width প্রোপার্টির সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-rule-width: medium|thin|thick|length|initial|inherit;

নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস এর column-rule-width প্রোপার্টি ব্যাবহার করা হয়েছে।

উদাহরণ

div {
column-rule-width: 1px;
}

কোড এডিটর


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-rule-width সমর্থন বা support করে না।

column-rule-width প্রোপার্টির মান

সিএসএস এর column-rule-width প্রপার্টির জন্য যে সকল মান বা value নির্ধারণ করা যায়, সেগুল হল নিম্নরুপ।


column-rule-color প্রোপার্টি

ুইটি কলামের মাঝের স্টাইলটির রঙ নির্ধারণ করার জন্য সিএসএস এর column-rule-color প্রোপার্টি ব্যাবহার করা হয়। নিচে column-rule-color প্রোপার্টির সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-rule-color: color|initial|inherit;

সিএসএস এর column-rule-color প্রোপার্টি ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

div {
  column-rule-color: teal;
  }

কোড এডিটর


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-rule-color সমর্থন বা support করে না।

column-rule-color প্রোপার্টি

column-rule-color প্রোপার্টিতে যে সকল মান বা value নির্ধারণ করা যায়, সে গুলো হল নিম্নরূপ।


column-rule প্রোপার্টি

সকল column-rule-* প্রোপার্টি গুলোর শর্টহ্যান্ড হল column-rule প্রোপার্টি। সিএসএস এর column-rule প্রোপার্টিতে ধারাবাহিক ভাবে column-rule-width, column-rule-style ও ও column-rule-color প্রোপার্টির মান উল্লেখ করতে হয়। নিচে column-rule প্রোপার্টির সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-rule: width । style । colour;

নিচে column-rule প্রপার্টি ব্যবহার করে একটি উদাহরণ দেখুন, যেখানে প্রস্থ বা width, স্টাইল এবং রঙ নির্ধারণ করা হয়েছে।

উদাহরণ

div {
  column-rule: 2px solid lime;
  }

কোড এডিটর


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-rule সমর্থন বা support করে না।


column-span প্রোপার্টি

কলামের মাঝে অবস্থিত কোনো এইচটিএমএল এলিমেন্ট কয়টি কলাম নিয়ে অবস্থান করবে তা column-span প্রোপার্টি দ্বারা নির্ধারণ করে দেয়া যায়। নিচের একটি উদাহরণ দেখুন,এখানে h2 এলিমেন্ট অর্থাৎ <h2> ট্যাগের মধ্যস্থিত লেখা গুলো সকল কলামে বিস্তৃত থাকবে।

উদাহরণ

h2 {
  column-span: all;
  }

কোড এডিটর


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-span সমর্থন বা support করে না।


column-width প্রোপার্টি

সিএসএস এর column-width প্রোপার্টি ব্যাবহার করে, কোন কলামের প্রস্থ বা width কত হবে বা এটি কতটুকু জায়গা দখল করবে তা নির্ধারণ করা হয়।

নিচে উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে প্রতিটি কলামের প্রস্থ 150px নির্ধারণ করা হয়েছে।

উদাহরণ

div {
  column-width: 150px;
  }

কোড এডিটর


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-width প্রোপার্টি সমর্থন বা support করে না।


columns প্রপার্টি

সিএসএস এর column-span প্রপার্টি এবং column-width প্রপার্টির শর্টহ্যান্ড হল columns প্রপার্টি।

এক্ষেত্রে column-span এবং column-width প্রপার্টির মান বা value ধারাবাহিক ভাবে উল্লেখ করতে হয়।

নিচে columns প্রপার্টি ব্যবহার করে একটি উদাহরণ দেখুন। এখানে -webkit এবং -moz প্রিফিক্স ব্যবহার করা হয়েছে ক্রোম, সাফারি, অপেরা এবং ফায়ারফক্স এ ভালভাবে প্রদর্শন এর জন্য।

উদাহরণ

div {
  columns: 100px 3;
  -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
  -moz-columns: 100px 3; /* Firefox */
  }

কোড এডিটর


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো columns প্রোপার্টি সমর্থন বা support করে না।


ব্রাউজার সমর্থন

প্রপার্টি
column-count 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-gap 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-rule 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit-
11.1
column-rule-color 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-rule-style 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-rule-width 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-span 50.0
4.0 -webkit-
10.0 Not supported 9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1
column-width 50.0
4.0 -webkit-
10.0 52.0
2.0 -moz-
9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1

সকল columns প্রোপার্টি

প্রোপার্টিবর্ণনা
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
columns