Post No-20
Previous Link :https://blog.shikhun.net/css-height-width-border-radius-padding-margin-box-shadowtext-shadow-part-01
আমরা যদি আরোও কয়েকটা উদাহরণ দেখি তাহলে বুঝতে সুবিধা হবেঃ
আশাকরি এখন ভালো ভাবে বুঝতে পেরেছেন।
Padding:
কোন এইচটিএমএল এলিমেন্টের বর্ডার এবং এলিমেন্ট কন্টেন্টের মধ্যকার ফাঁকা স্থান নির্ধারণ করতে সিএসএস এর প্যাডিং প্রোপার্টি গুলো ব্যবহার করা হয়।
সিএসএস এর প্যাডিং প্রোপার্টি গুলো, সুনির্ধারিতভাবে নির্দিষ্ট করে দেয় কোন কন্টেন্টের চারপাশের অর্থাৎ বর্ডারের ভেতর ফাঁকা স্থান। অর্থাৎ সিএসএস প্যাডিং প্রপার্টি এলিমেন্ট ও বর্ডার এর মধ্যবর্তী ফাঁকা স্থান নির্ধারণ করে। প্যাডিং এর পৃষ্ঠদেশ বা background এ কোন রঙ ব্যবহার করা যায় না, এটি পুরোপুরি স্বচ্ছ বা transparent অর্থাৎ অদৃশ্য হয়।
ভিন্ন ভিন্ন প্যাডিং প্রপার্টি গুলো ব্যবহার করে, স্বাধীনভাবে কোন এইচটিএমএল এলিমেন্ট এর চতুর্দিকে প্যাডিং নির্ধারণ করা যায়। প্যাডিং প্রোপার্টি গুলো হল - padding-left, padding-right, padding-top এবং padding-bottom.
সকল প্যাডিং প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন:
<IDOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
p{
background-color:red;
padding-left: 40px;
padding-right: 60px;
padding-top: 8apx;
padding-bottom: 100px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Padding property & value:
বিভিন্ন একক ব্যবহার করে সিএসএস এর প্যাডিং প্রোপার্টি গুলোর মান নির্ধারণ করা যায়।, যেমন - নির্দিষ্ট বা fixed মান ব্যবহার করে কিংবা শতকরা পদ্ধতিতে, ইত্যাদি।
length:নির্দিষ্ট মানেরে প্যাডিং নির্ধারণ করার জন্য px, pt, cm ইত্যাদি ব্যবহার করা হয়। যদি কোন মান উল্লেখ না করা হয়, তবে স্বয়ংক্রিয়ভাবে মান 0px হবে।
%:কোন এলিমেনটের প্রস্থ অনুযায়ী শতকরা অনুপাতে প্যাডিং নির্দিষ্ট করার জন্য এই পদ্ধতি ব্যবহার করা হয়। যেমন- ১০%, ১৫% ইত্যাদি।
সিএসএস এর padding প্রোপার্টি কে মান বা value লেখার ওপর নির্ভর করে চার ভাবে ব্যবহার করা যায়।
padding প্রোপার্টি - 4টি মান বা value:
padding প্রোপার্টি তে 4 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর দিকের প্যাডিং, দ্বিতীয় মানটি ডান দিকের প্যাডিং, তৃতীয়টি নিচের দিকের প্যাডিং এবং চতুর্থটি বাঁ দিকের প্যাডিং নির্ধারণ করে।
সিএসএস এর padding প্রোপার্টিতে 4 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
padding প্রোপার্টি - 3টি মান বা value:
padding প্রোপার্টি তে 3 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর দিকের প্যাডিং, দ্বিতীয় মানটি ডান ও বাঁ দিকের প্যাডিং এবং তৃতীয়টি নিচের দিকের প্যাডিং নির্ধারণ করে।
সিএসএস এর padding প্রোপার্টিতে 3 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
div{
padding:40px 60px 80px;
}
padding প্রোপার্টি - 2টি মান বা value:
padding প্রোপার্টি তে 2 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর ও নিচের দিকের প্যাডিং এবং দ্বিতীয় মানটি ডান ও বাঁ দিকের প্যাডিং নির্ধারণ করে।
সিএসএস এর padding প্রোপার্টিতে 2 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
div{
padding:40px 60px ;
}
padding প্রোপার্টি - 1টি মান বা value:
padding প্রোপার্টি তে 1 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে মানটি এইচটিএমএল এলিমেন্ট এর চতুর্দিকের প্যাডিং নির্ধারণ করে
সিএসএস এর padding প্রোপার্টিতে 1 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
div{
padding:40px;
}
সকল প্যাডিং প্রোপার্টি:
padding
padding-left
padding-right
padding-top
padding-bottom
চলুন একটা মজার জিনিস জেনে নেওয়া যাক
width এর সাথে padding যোগ হয়:
যেমন কোন এলিমেন্টের width : 100px; আছে এবং এখানে padding : 10px; আছে, তাহলে শেষ পর্যন্ত এলিমেন্টের width হয়ে যাবে ১২০ পিক্সেল। এই সমস্যার জন্য যদি box-sizing : border-box; ব্যবহার করেন তবে আসল width ফেরত আসবে।
Margin:
কোন এইচটিএমএল এলিমেন্টের চারপাশের ফাকা স্থান নির্ধারণ করাই হল সিএসএস মার্জিন ব্যবহারের উদ্দেশ্য। এক কথায় আমরা লেখাপড়া করার সময় খাতার দুই বা চার পাশে যে, ফাঁকা স্থান বাদ রেখে লেখা শুরু করতাম, সেটাই হল মার্জিন।
কোন এলিমেন্ট বর্ডারের চারপাশের ফাকা স্থান নির্দিষ্ট করে দেয়া হয় সিএসএস মার্জিন প্রপার্টি গুলো ব্যবহার করে। মার্জিনের পৃষ্ঠদেশ বা background কোন রঙ ব্যবহার করা যায় না, এটি পুরোপুরি স্বচ্ছ বা transparent অর্থাৎ অদৃশ্য হয়।
ভিন্ন ভিন্ন মার্জিন প্রপার্টি ব্যবহার করে, স্বাধীনভাবে কোন এইচটিএমএল এলিমেন্ট এর চতুর্দিকে মার্জিন নির্ধারণ করা যায়। margin-left, margin-right, margin-top এবং margin-bordar.
সকল মার্জিন প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।
div{
padding:40px 60px 80px 100px;
}
মার্জিন প্রোপার্টির মান বা value:
বিভিন্ন একক ব্যবহার করে সিএসএস এর মার্জিন প্রোপার্টি গুলোর মান নির্ধারণ করা যায়।, যেমন - নির্দিষ্ট বা fixed মান ব্যবহার করে কিংবা শতকরা পদ্ধতিতে, ইত্যাদি
auto ব্রাউজার মার্জিন নির্ধারণ করে। এতে ব্রাউজারের উপরেই ফলাফল নির্ভর করে।
length নির্দিষ্ট মানের(pixel, pt, em ইত্যাদিতে) মার্জিন নির্ধারণ করে।
% ধারনক্রিত এলিমেনটের শতকরা হারের ওপর মার্জিন নির্ধারণ করে।
নোট - কন্টেন্ট overlap করার জন্য negetive (-) মানও ব্যবহার করা যায়।
সিএসএস margin প্রোপার্টি কে মান বা value লেখার ওপর নির্ভর করে চার ভাবে ব্যবহার করা যায়।
margin প্রোপার্টি - 4টি মান বা value:
margin প্রোপার্টি তে 4 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর দিকের মার্জিন, দ্বিতীয় মানটি ডান দিকের মার্জিন, তৃতীয়টি নিচের দিকের মার্জিন এবং চতুর্থটি বাঁ দিকের মার্জিন নির্ধারণ করে।
সিএসএস এর margin প্রোপার্টিতে 4 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
margin প্রোপার্টি - 3টি মান বা value:
margin প্রোপার্টি তে 3 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর দিকের মার্জিন, দ্বিতীয় মানটি ডান ও বাঁ দিকের মার্জিন এবং তৃতীয়টি নিচের দিকের মার্জিন নির্ধারণ করে।
সিএসএস এর margin প্রোপার্টিতে 3 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
div{
padding:40px 60px 80px;
}
margin প্রোপার্টি - 2টি মান বা value:
margin প্রোপার্টি তে 2 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর ও নিচের দিকের মার্জিন এবং দ্বিতীয় মানটি ডান ও বাঁ দিকের মার্জিন নির্ধারণ করে।
সিএসএস এর margin শর্টহ্যান্ড প্রোপার্টিতে 2 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
margin প্রোপার্টি - 1টি মান বা value:
margin প্রোপার্টি তে 1 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে মানটি এইচটিএমএল এলিমেন্ট এর চতুর্দিকের মার্জিন নির্ধারণ করে।
সিএসএস এর margin শর্টহ্যান্ড প্রোপার্টিতে 1 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।
div{
padding:40px;
}
সকল মার্জিন প্রোপার্টি
margin
margin-left
margin-right
margin-top
margin-bottom
CSS Shadow:-বলতে সিএসএস দ্বারা এইচটিএমএল এলিমেন্টের ছায়া দেখানো হয়। অর্থাৎ সিএসএস টেক্সট স্যাডো প্রোপার্টি ব্যবহার করে আপনি যেকোনো টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন। টেক্সট দ্বারা আপনি সুন্দর সুন্দর 3D টেক্সট তৈরী করতে পারেন। ফটোশপ দিয়ে যে কাজ গুলো করতে আমাদের অনেক সময় লেগে যায়, একই কাজ সিএসএস এর মাধ্যমে অল্প কোড লিখে খুবই তাড়াতাড়ি করতে পারেন। সিএসএস স্যাডো প্রোপার্টি গুলো নিম্নরুপঃ-
text-shadow - এটি দিয়ে টেক্সের জন্য স্যাডো ইফেক্ট যুক্ত করা হয়।
box-shadow - এটি দিয়ে বক্স এলিমেন্টের জন্য স্যাডো ইফেক্ট যুক্ত করা হয়।
Text-shadow:
টেক্সট স্যাডো ব্যবহারের ছোট ছোট কিছু নিয়ম রয়েছে:
একটি এলিমেন্টের জন্য একাধিক স্যাডো ইফেক্ট যুক্ত করতে চাইলে কমা ( , ) দ্বারা পৃথক করতে হবে।
প্রতিটি স্যাডোর মধ্যে দুই বা তিনটি length ভ্যালু থাকে। প্রথম দুটি length ভ্যালু হলো offset-x এবং offset-y অর্থাৎ Horizontal Distance বা অনুভূমিক দূরত্ব, এবং Vertical Distance বা উল্লম্বীয় দূরত্ব। এবং তৃতীয় ঐচ্ছিক length ভ্যালু হলো blur-radius. এই blur-radius এর ভ্যালু যত বেশী হবে blur তত বেশি বা বড় হবে। ফলে টেক্সট স্যাডোর বিস্তৃতি বাড়বে এবং স্যাডো হালকা হবে। সর্বশেষ ভ্যালুটি হবে কালার ভ্যালু। টেক্সট স্যাডোর ডিফল্ট কালার কালো থাকে।
নিম্মোক্ত ছবিটিতে নিয়মটা তুলে ধরেছি।
আসুন আমরা কয়েকটি উদাহরন দেখে নেইঃ
এছারাও আপনি অনেক রুকুম ডিজাইন করতে পারবেন।
Box-shadow:
এর মাধ্যমে বক্স এলিমেন্টের জন্য স্যাডো ইফেক্ট যুক্ত করতে পারবেন।প্রোপার্টি একটি এলিমেন্টে এক বা একাধিক স্যাডো যুক্ত করে। স্যাডোর প্রোপার্টিগুলো কমা দিয়ে আলাদা করা হয়। এর ২-৪ টি ভ্যালু নির্ধারন করা হয়। এদের মধ্যে ঐচ্ছিক কালার এবং ঐচ্ছিক ইনসেট কি-ওয়ার্ড থাকতে পারে। ০ হচ্ছে বর্জনকৃত দৈর্ঘ্য।
আজকে আমরা কি শিখলাম ?
আজকে আমরা শিখলাম Height,width কী এবং কি ভাবে use করতে হয় ,Border-radies কী এবং কি ভাবে use করতে হয়,padding,margine কী এবং কি ভাবে use করতে হয়,Box-shadow,text-shadow কি ভাবে use করতে হয়,ইত্যাদি।
আর্টিকেলের সাথে জড়িত কোনো সমস্যা বা পরামর্শ থাকলে, নিচে কমেন্ট করে জানিয়ে দিতে পারেন।
আর্টিকেলটি ভালো লেগে থাকলে শেয়ার (share) করতে পারেন
ধ্যনবাদ।