8452fa0f6957c73169f00ac34588a8c0.png?s=48&d=http%3a%2f%2fi2.wp.com%2fspiritz.in%2fdefaulticon “CSS3 সম্পর্কে বিস্তারিত - পর্ব ১”

বিভাগঃ ওয়েব ডেভলপমেন্ট  পোস্ট করেছেনঃ মইনুল হাসান

CSS(Cascading Style Sheets) সম্পর্কে যারা ওয়েব ডিজাইন এর সাথে সম্পৃক্ত তাদের সবার ই কম বেশি জানার কথা। CSS এর ই বংশধর CSS3 যার অনেক ফিচার ই সবার অজানা। শুধু CSS সম্পর্কে পূর্ণ ধারণা নিয়েই যে কোন ওয়েবসাইট বানিয়ে ফেলা সম্ভব ঠিক ই, কিন্তু CSS3 এর সব নতুন এডভান্সড ফিচার গুলো না জানলে অনেক কাজই আপনাকে অনেক ঘুরিয়ে করতে হবে যা সময়সাপেক্ষ ও বটে।

CSS3 এর সকল ফিচার যদি বিস্তারিত বলতে যাই তাহলে একবারে বলে শেষ করা সম্ভব না। তাই আমি বেশ কয়েকটি পর্বে ভাগ করে বিস্তারিত ভাবে দেবার চেষ্টা করব যাতে সবাই সহজেই বুঝতে পারে এবং আমারও সুবিধা হয়। প্রথমেই বলে রাখি এই টিউটোরিয়াল টি HTML এবং CSS সম্পর্কে ধারণা না থাকলে না দেখাই ভাল।

Border Radius

Border Radius দেখেই হয়ত সবাই বুঝতে পারছেন এটির কাজ কি। হ্যা, এটা যে কোন বর্ডার এর রেডিয়াস ডিফাইন করতেই ব্যবহার করা হয়।

1
2
3
4
5
.style {
      background-color: #333;
      padding: 20px;
      border-radius: 20px;
}

border-radius: 20px কন্টেন্ট এর চারপাশে 20px এর একটি বর্ডার তৈরি করে। যদি width এবং height সমান হয় তাহলে আপনি চাইলে কন্টেন্ট এর টোটাল width এর অর্ধেক border width ব্যবহার করে কন্টেন্ট ব্যাকগ্রাউন্ড কে circular shape দিতে পারবেন।

1
2
3
4
5
.style {
      width: 300px;
      height: 300px;
      border-radius: 150px;
}

Border Radius

calc()

calc() ফিচার টি মূলত CSS এ যে কোন এরিথমেটিক ক্যাল্কুলেশান এর জন্য ব্যবহার করা হয়। যে কোন মান কে আরও সাবলীল ভাবে ব্যবহার করার সুযোগ করে দেয় calc()।

1
2
3
4
5
6
.style {
      width: calc(100% - 40px);
      margin: 0 auto;
      background-color: #333;
      padding: 20px;
}

width: calc(100% - 40px) এই লাইন টি বোঝাচ্ছে যে .style ক্লাস এর অন্তর্গত কন্টেন্ট এর width হবে এর প্যারেন্ট কন্টেন্ট এর টোটাল width এর চে 40px কম। calc() এর ভেতর আপনি চাইলে পার্সেন্টেজ বাদে পিক্সেল মান ও ব্যবহার করতে পারবেন।

Calc

Modified color structure

CSS3 তে যে কোন element এর color এখন আরও ভালভাবে opacity সহ ডিফাইন করা যাবে। এর জন্য CSS2.1 এর rgb() স্ট্রাকচার কে আরও মোডিফাই করে rgba() তে আনা হয়েছে।

1
2
3
4
5
6
7
.style1 {
      background-color: rgba(255, 34, 0, 0.3); /* rgba(red, green, blue, opacity) */
}

.style2 {
      color: rgba(100%, 50%, 0, 0.8); /* rgba(red, green, blue, opacity) */
}

কমেন্ট এ যেভাবে লিখা হয়েছে সবাই হয়ত বুঝতে পারছেন যে প্রথম মান টি লাল, দ্বিতীয় টি সবুজ এবং তৃতীয় টি নীল রঙ এর মান নির্ণায়ক এবং সর্বশেষ মান টি opacity বা transparency নির্দেশ করে। লাল, সবুজ এবং নীল রঙ এর মান এর সীমা ০-২৫৫। এইসব মানের ক্ষেত্রে চাইলে পার্সেন্টেজ ইউনিট হিসাবে ব্যাবহার করতে পারবেন। আর সব শেষে opacity এর সীমা 0.0 - 1.0।

Box Shadow

Box Shadow প্রপার্টি আপনার স্টাইলড কন্টেন্ট এর চারপাশে shadow তৈরি করবে। সাধারণত এটি ৪ টি মান নিয়ে কাজ করে। প্রথম দুটি মান X এবং Y অফসেট এর মান নির্দেশ করে, এই দুই মান ঠিক করবে ছায়া টি কোন দিকে কতটুকু পরবে। তৃতীয় মান টি নির্দেশ করে ছায়া টি কতটুকু স্পষ্ট হবে। আর সর্বশেষ মান টি ছায়ার রঙ নির্বাচনে ব্যবহার করা হয়। এখানে আপনি চাইলে যে কোন COLOR HEX অথবা rgba() স্ট্রাকচার ব্যাবহার করতে পারেন।

1
2
3
4
5
6
7
8
9
.style1 {
      -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.7); /* Safari ব্রাউজার এর জন্য */
      box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}

.style2 {
      -webkit-box-shadow: 5px 5px 5px #000;  /* Safari ব্রাউজার এর জন্য */
      box-shadow: 5px 5px 5px #000;
}

Box Shadow

Custom Font

CSS3 তে চাইলে সহজেই Custom Font যোগ করা যাবে। পছন্দের ফন্ট টি নামিয়ে প্রজেক্ট ফোল্ডার এ রাখুন। এবার ফন্ট এর সোর্স দেখিয়ে ফন্ট এর নাম দিন ইচ্ছেমত এবং ব্যাবহার করুন যে কোনও কন্টেন্ট এ।

1
2
3
4
5
6
7
8
9
10
11
12
@font-face
{
      /* ইচ্ছেমত নাম দিন আপনার ফন্ট এর */
      font-family: myFont;
       /* ফন্ট এর সোর্স ফাইল টির লোকেশন দেখিয়ে দিন */
      src: url('fontfile.otf');
}

div
{
      font-family: myFont;
}

অথবা কেউ চাইলে সরাসরি html ফাইল এ ফন্ট এর লিঙ্ক যোগ করে ফন্ট টি ব্যবহার করতে পারবেন।

1
2
3
4
5
6
 /* CSS */
h1 {
      font-family: Satisfy, cursive;
      font-weight: normal;
      font-size: 24px;
}
1
2
3
4
 /* HTML */
<link href="http://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" />

<h1>This is my Webfont!</h1>

আপাতত এইটুকুই। পরবর্তীতে CSS3 এর Border Image প্রপার্টি নিয়ে বিস্তারিত পোস্ট থাকবে। সাথেই থাকবেন।

পোস্ট এ কোথাও কোন ভুল বা ঘাটতি থাকলে দয়া করে ধরিয়ে দিবেন। ভাল লাগলে জানাবেন। ধন্যবাদ।

ট্যাগঃ CSS3 web design CSS

পোস্ট টি 73 বার পড়া হয়েছে



পাঠকদের মন্তব্য

comments powered by Disqus