CSS -Height, width, Border-radius, padding, margin, Box-shadow,text-shadow Part-01
Post No:19
একনজরে দেখে নেই আজকের ব্লগ থেকে আমরা কি কি বিষয় জানতে পারবো ও শিখতে পারবো
১। Height,width কী এবং কি ভাবে use করতে হয়।
২। Border-radies কী এবং কি ভাবে use করতে হয়।
৩। padding,margine কী এবং কি ভাবে use করতে হয়।
৪। Box-shadow,text-shadow কি ভাবে use করতে হয়।
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
Height/ উচ্চতাঃ
একটি এলিমেন্টের height নির্ধারন করার জন্য height প্রোপার্টি ব্যবহার করা হয়,সাধারণত block-level element এর ক্ষেত্রে প্রয়োগ করা যায়।
ডিজাইন করার সময় যদি কোন section/div/tag এর height ফিক্সড রাখতে হয় তখন আমরা height এলিমেন্ট ব্যাবহার করি,যেমনঃ
Height প্রোপার্টির ভ্যালু-সমূহ:
autoব্রাউজারে ডিফল্ট একটি Height থাকে।
height এর মধ্যে px, cm ইত্যাদি নির্ধারণ করা যায়।
Intail সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
Max-height:
একটি এলিমেন্টের সর্বোচ্চ(maximum) height সেট করার জন্য ব্যবহার করা হয়।
Min-height:
একটি এলিমেন্টের সর্বনিম্ন(minumum) height সেট করার জন্য ব্যবহার করা হয়।
এটি height প্রোপার্টির ভ্যালু min-height প্রোপার্টির ভ্যালু থেকে ছোট হওয়ার ক্ষেত্রে প্রতিরোধ করে।
Width/ দৈর্ঘ্যঃ
একটি এলিমেন্টের width প্রোপার্টি দিয়ে width নির্দিষ্ট করা হয়।Inline-block element কোন tag কে নিদিষ্ট ডিজাইন করার জন্য width ব্যবহার করা হয়।যেমনঃ
Width প্রোপার্টির ভ্যালু-সমূহঃ
autoব্রাউজারে ডিফল্ট একটি width থাকে।
lengthwidth এর মধ্যে px, cm ইত্যাদি নির্ধারণ করা যায়।
%কন্টেইন ব্লকের জন্য width এর মধ্যে পার্সেন্ট(%) নির্ধারণ করা যায়।
Intail সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
Max-width:
একটি এলিমেন্টের maximum width সেট করার জন্য max-width প্রোপার্টিটি ব্যবহার করা হয়। দৈর্ঘ্য নির্ণয়ের বিভিন্ন একক যেমনঃ px, cm ইত্যাদি অথবা পারসেন্ট(%) ব্যবহার করে একটি এলিমেন্টের max-width সেট করা যেতে পারে। অথবা max-width এর ভ্যালু none সেট করা যেতে পারে। অর্থাৎ ডিফল্টভাবে যার কোনো কোন maximum width থাকবে না। জেনে রাখা ভাল যে, যখন ব্রাউজার উইন্ডো থেকে এলিমেন্টের width বড় হয় তখন ব্রাউজার এলিমেন্টটিতে একটি হরিজন্টাল স্ক্রলবার যুক্ত করে নেয়। এক্ষেত্রে max-width প্রোপার্টিটি ব্যবহার করে এই সমস্যার সমাধান করা যায়।
Min-width:
একটি এলিমেন্টের সর্বনিম্ন(minumum) width সেট করার জন্য ব্যবহার করা হয়।
Border-radius:
border-radius প্রোপার্টি একটি এলিমেন্টে গোলাকার কর্নার করতে ব্যবহৃত হয়।
border-radius প্রোপার্টি দ্বারা সহজেই চারটি বর্ডার-*-রেডিয়াসের প্রোপার্টি নির্ধারণ করা যায়।
যদি আপনি border-radius প্রোপার্টির জন্য একটি ভ্যালু দেন, তাহলে রেডিয়াস ৪টি কর্নারের জন্য প্রয়োগ হবে।
আপনি চাইলে প্রত্যেকটি কর্নারের জন্য আলাদাভাবে ভ্যালু দিতে পারেন। নিচে কিছু নিয়ম দেয়া হলোঃ
একটি ভ্যালুঃ চারটি কর্নার সমান ভাবে গোলাকার হয়।
দুইটি ভ্যালুঃ ১ম ভ্যালু উপর থেকে বামে এবং নিচ থেকে ডানে, ২য় ভ্যালু উপর থেকে ডান এবং নিচ থেকে বামে প্রয়োগ করে প্রয়োগ করে।
তিনটি ভ্যালুঃ ১ম ভ্যালু উপর থেকে বামে, ২য় ভ্যালু উপর থেকে ডানে এবং নিচ থেকে বামে, ৩য় ভ্যালু নিচ থেকে ডানে প্রয়োগ করে।
চারটি ভ্যালুঃ ১ম ভ্যালু উপর থেকে বামে, ২য় ভ্যালু উপর থেকে ডানে, ৩য় ভ্যালু নিচ থেকে ডানে এবং ৪র্থ ভ্যালু নিচ থেকে বামে প্রয়োগ করে।
যেমনঃ
১. একটি ভ্যালু- border-radius: 15px;
২. দুইটি ভ্যালু - border-radius: 15px 50px;
৩. তিনটি ভ্যালু - border-radius: 15px 50px 30px;
৪. চারটি ভ্যালু - border-radius: 15px 50px 30px 5px;
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>CSS Rounded Corners</title>
<style>
div{
border:2px solid red;
padding:0 10px;
border-radius:8px;
}
p{
background-color:green;
color:white;
padding:10px;
font-size:120%;
text-align:center;
border-radius:0 50px 0 50px;
}
H
</style>
</head>
<body>
<div>,
<p>This is a Paragraph</p>
</div>
</body>
</html>
উপরের চিত্র তে যদি আমরা লক্ষ্য করে তাহলে দেখতে পাচ্ছি যে Border-radius চারটি ভ্যালুর মধ্য দুটি ব্যবহার করা হয়েছে। আর বাকি দুটি ভ্যালু 0 দেওয়া হয়েছে। আমরা এই ভাবে ভ্যালু গুলো ব্যবহার করে নিজের ইচ্ছা মতো বিভিন্ন ডিজাইন করতে পারবো।
আসুন Border-radius ব্যবহার করে মজার একটা জিনিস দেখি
<IDOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Rounded Corners</title>
<style>
span{
display: block;
margin:20px auto;
height :250px;
width:250px;
text-align:center;
line-height:250px;
color:#fff;
font-size:22px;
font-family:sans-serif;
background-color:purple;
border:3px dotted white;
border-radius : 50%;
}
</style>
</head>
<body>
<span>Full Rounded</span>
</body>
</html>
উপরের চিত্র তে যদি আমরা লক্ষ্য করি তাহলে দেখতে পাচ্ছি যে Border-radius:50%; ব্যবহার করা হয়েছে যার ফলে আমরা গোলাকার বৃত্ত দেখতে পাচ্ছি। আপনি এই ভাবে বিভিন্ন Percent( % ) ব্যবহার করে ডিজাইন করতে পারবেন।
Part -02 Link:https://blog.shikhun.net/css-height-width-border-radius-padding-margin-box-shadowtext-shadow-part-02
