Articles
সিএসএস-এর পরিচিতি
বক্স মডেল সজ্জার সাথে সম্পর্কিত CSS প্রোপার্টিগুলি

বক্স মডেল সজ্জার সাথে সম্পর্কিত CSS প্রোপার্টিগুলি

এই প্রবন্ধটি বক্স মডেল সজ্জার সাথে সম্পর্কিত CSS প্রোপার্টিগুলি ব্যাখ্যা করে।

আপনি কিভাবে বর্ডার এবং শ্যাডো এর মতো প্রোপার্টি লিখবেন তা শিখতে পারেন।

YouTube Video

প্রিভিউর জন্য HTML

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

সজ্জা

border প্রোপার্টি 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

border প্রোপার্টি CSS-এ একটি উপাদানের ফ্রেম সেট করতে ব্যবহৃত হয়। border তিনটি উপাদান নিয়ে গঠিত: প্রস্থ, স্টাইল, এবং রঙ, এবং এগুলি একত্র হয়ে উপাদানের ফ্রেম নির্ধারণ করে।

border-এর মৌলিক গঠন 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • বর্ডারের পুরুত্ব নির্ধারণ করতে border-width ব্যবহার করুন। ইউনিটগুলি px, em, % ইত্যাদির মাধ্যমে নির্ধারিত হয়।

  • border-style দিয়ে বর্ডারের ধরন নির্ধারণ করুন। আপনি নিম্নলিখিত মানগুলি নির্ধারণ করতে পারেন।

    • স্টাইল মানগুলি:
      • none (কোনো বর্ডার নেই)
      • solid (সলিড লাইন)
      • ডটেড (ডটযুক্ত লাইন)
      • ড্যাশড (বিন্দুঃক্ষিপ্ত লাইন)
      • double (দ্বৈত লাইন)
      • groove (গভীর চ্যানেলের লাইন)
      • ridge (উঁচু চ্যাপ্টা লাইন)
      • inset (ভিতরে শ্যাডো লাইন)
      • outset (বাইরের দিকে শ্যাডো লাইন)

border-color দিয়ে বর্ডারের রঙ নির্ধারণ করুন। রঙের নাম, rgb(), rgba(), hex ইত্যাদি ব্যবহার করে রঙ নির্ধারণ করা যেতে পারে।

প্রত্যেক পাশে ব্যক্তিগত সেটিংস 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

আপনি প্রত্যেক পাশের জন্য এইভাবে আলাদা স্টাইল সেট করতে পারেন।

প্রস্থ, স্টাইল, এবং রঙের জন্য ব্যক্তিগত সেটিংস 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

border-width, border-style, এবং border-color ব্যবহার করে আপনি প্রতিটি বৈশিষ্ট্য আলাদাভাবে নির্দিষ্ট করতে পারেন।

border-radius এর সাথে সংযুক্ত করা হচ্ছে 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

border-radius প্রোপার্টি ব্যবহার করে, আপনি বর্ডারের কোনাগুলো গোলাকার করতে পারেন।

border-radius প্রোপার্টি 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

border-radius প্রোপার্টি একটি উপাদানের কোনাগুলোকে গোলাকার করতে ব্যবহৃত হয়। আপনি একটি HTML উপাদানের চারটি কোণ মসৃণভাবে বাঁকাতে পারেন, আয়ত বা বর্গাকার আকৃতিকে গোলাকার ডিজাইনে রূপান্তরিত করতে পারেন।

ব্যাখ্যা:

  • border-radius-all-rounded ক্লাস ২০ পিক্সেলের মাধ্যমে সমস্ত কোণ গোলাকার করে, যা একটি মসৃণভাবে গোলাকার বাক্স সৃষ্টি করে।
  • border-radius-top-left-rounded ক্লাস শুধুমাত্র উপরের-বাম কোণটি ২০ পিক্সেলে গোলাকার করে, বাকি কোণগুলোকে চৌকো রেখে।
  • border-radius-ellipse-corners ক্লাস উপবৃত্তাকার কোণ তৈরি করে, ফলে একটি অনুভূমিকভাবে প্রসারিত গোলাকার আকৃতির বাক্স পাওয়া যায়।

border-radius প্রোপার্টির ফরম্যাট 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • border-radius প্রোপার্টির মান সাধারণত পিক্সেল বা শতাংশে নির্ধারণ করা হয়। এছাড়াও, আপনি ১ থেকে ৪ পর্যন্ত মান সেট করতে পারেন।
    • একটি মান নির্ধারণ করলে সমস্ত কোণ সমানভাবে গোলাকার হয়।
    • দুটি মান নির্ধারণ করলে প্রথম মানটি উপরের-বাম এবং নিচের-ডান কোণে প্রযোজ্য হয়, এবং দ্বিতীয় মানটি উপরের-ডান এবং নিচের-বাম কোণে প্রযোজ্য হয়।
    • চারটি মান নির্ধারণ করে, আপনি প্রত্যেক কোণের জন্য ভিন্ন ব্যাসার্ধ নির্ধারণ করতে পারেন। উপরের-বাম দিক থেকে ঘড়ির কাঁটার মতো এই মানগুলো প্রযোজ্য হয়।
  • আপনি পৃথকভাবে border-top-left-radius এর মতোও নির্ধারণ করতে পারেন।
1border-radius: 50px / 25px;
  • border-radius প্রোপার্টি পৃথকভাবে উল্লম্ব এবং অনুভূমিক ব্যাসার্ধ নির্ধারণ করতে পারে উপবৃত্তাকার কোণ তৈরি করার জন্য। এই ক্ষেত্রে, / দিয়ে পৃথক করুন।
    • উদাহরণস্বরূপ, 50px / 25px নির্ধারণ করলে অনুভূমিক ব্যাসার্ধ হবে ৫০ পিক্সেল এবং উল্লম্ব ব্যাসার্ধ হবে ২৫ পিক্সেল।

সারসংক্ষেপ

  • border-radius একটি প্রোপার্টি যা একটি উপাদানের কোণগুলো গোলাকার করতে ব্যবহৃত হয়।
  • আপনি পিক্সেল বা শতাংশে কোনাগুলোর গোলাকারতা নির্দিষ্ট করতে পারেন, এটি সমস্ত কোনায়, নির্দিষ্ট কোনাগুলিতে প্রয়োগ করতে, অথবা তাদের উপবৃত্তাকার করতে পারেন।
  • এটি নমনীয় ডিজাইনের জন্য এবং ব্যবহারকারীর ইন্টারফেস কাস্টমাইজ করায় সহায়ক।

outline বৈশিষ্ট্য 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

outline বৈশিষ্ট্য হল CSS-এ একটি বৈশিষ্ট্য যা একটি উপাদানের চারপাশে লাইন আঁকতে ব্যবহৃত হয়।

outline, border-এর মতো, কিন্তু নিম্নলিখিত পয়েন্টগুলোতে ভিন্নঃ।

  • outline উপাদানের বক্স মডেলে প্রভাব ফেলেনা, তাই এটি উপাদানের বিন্যাসে প্রভাব ফেলে না।
  • outline উপাদানের বাইরে আঁকা হয়, তাই এটি border-এর বাইরেই প্রদর্শিত হয়।
  • border উপাদানের ভিতরে আঁকা হয়, তাই এটি উপাদানের আকার এবং বিন্যাসে প্রভাব ফেলতে পারে।

এই উদাহরণে, outline বৈশিষ্ট্যটি নিম্নরূপ সেট করা হয়েছেঃ।

  • outline-solid ক্লাস ২ পিক্সেল পুরু লাল রঙের একটি সলিড আউটলাইন সেট করে।
  • outline-dashed ক্লাস ৩ পিক্সেল পুরু নীল রঙের একটি ড্যাশড আউটলাইন সেট করে।
  • outline-double ক্লাস ৪ পিক্সেল পুরু সবুজ রঙের একটি ডাবল-লাইন আউটলাইন সেট করে।
  • outline-offset ক্লাস আউটলাইন এবং উপাদানের মধ্যে ১০ পিক্সেল ফাঁক সেট করে।

মূল সিনট্যাক্স 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-width আউটলাইনের পুরুত্ব নির্দিষ্ট করে।
  • আপনি নির্দিষ্ট মান যেমন thin, medium, thick, অথবা ইউনিট যেমন px, em ব্যবহার করে নির্ধারণ করতে পারেন।
outline-style
  • outline-style আউটলাইনের ধরণ নির্দিষ্ট করে।
  • আপনি solid, dotted, dashed, double, groove, ridge, inset, outset, none ইত্যাদির মতো স্টাইল নির্ধারণ করতে পারেন।
outline-color
  • outline-color আউটলাইনের রং নির্দিষ্ট করে।
  • আপনি নাম, HEX, RGB ইত্যাদি ব্যবহার করে যেকোনো রং নির্দিষ্ট করতে পারেন।
outline-offset
  • outline-offset আউটলাইন এবং উপাদানের মধ্যে দূরত্ব নির্দিষ্ট করে।
  • আপনি px, em ইত্যাদির মতো ইউনিট ব্যবহার করে সুনির্দিষ্ট মান নির্ধারণ করতে পারেন।

box-shadow বৈশিষ্ট্য 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

box-shadow বৈশিষ্ট্যটি উপাদানগুলিতে ছায়া যোগ করতে ব্যবহৃত হয়। এই প্রপার্টি ব্যবহার করে, আপনি উপাদানগুলোর চারপাশে ছায়া তৈরি করতে পারেন যা ত্রিমাত্রিকতা এবং গভীরতার অনুভূতি প্রকাশ করে।

ব্যাখ্যা:

  • box-shadow-basic-shadow ক্লাসে, উপাদানের ডান দিকের নিচে একটি ঝাপসা কালো ছায়া প্রদর্শিত হয়।

  • box-shadow-inset-shadow ক্লাসে, উপাদানের ভিতরে একটি ঝাপসা ছায়া প্রদর্শিত হয়। ছায়াটি ভিতরে প্রবেশ করার সাথে, আপনি একটি গর্তযুক্ত ডিজাইন পেতে পারেন।

  • box-shadow-multiple-shadow ক্লাসে, উপাদানে দুইটি ছায়া প্রয়োগ করা হয়, একটি কালো এবং একটি লাল। কারণ ছায়াগুলো বিভিন্ন স্থানে প্রদর্শিত হয়, একটি ত্রিমাত্রিক প্রভাব তৈরি হয়।

box-shadow প্রপার্টি ফরম্যাট 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
প্রতিটি মানের অর্থ

প্রথম horizontal offset হল অনুভূমিক অফসেটের মান, যা উপাদানের বাম দিক থেকে ছায়ার অবস্থান নির্ধারণ করে। ধনাত্মক মান উল্লেখ করলে ছায়াটি ডান দিকে থাকে, এবং ঋণাত্মক মান উল্লেখ করলে বাম দিকে থাকে।

দ্বিতীয় vertical offset হল উল্লম্ব অফসেটের মান, যা উপাদানের উপরের দিক থেকে ছায়ার অবস্থান নির্ধারণ করে। ধনাত্মক মান উল্লেখ করলে ছায়াটি নীচে থাকে এবং ঋণাত্মক মান উল্লেখ করলে উপরে থাকে।

তৃতীয় blur radius হল ঝাপসা পরিমাণের মান, যা ছায়ার ঝাপসা অবস্থান নির্ধারণ করে। মান যত বড় হয়, ছায়া তত বেশি ছড়িয়ে পড়ে, ফলে একটি আরও বেশি ঝাপসা ছায়া তৈরি হয়। ধনাত্মক মান উল্লেখ করলে ছায়াটি নীচে থাকে এবং ঋণাত্মক মান উল্লেখ করলে উপরে থাকে। এইটি ঐচ্ছিক, এবং ডিফল্ট মান হল 0, যার অর্থ ছায়াতে কোনও ঝাপসা করা হবে না।

চতুর্থ spread radius হল ছড়িয়ে পড়ার পরিসরের মান, যা ছায়াটি কতটা বাড়বে তা নির্ধারণ করে। ধনাত্মক মান উল্লেখ করলে ছায়াটি বড় হবে, আর ঋণাত্মক মান দিয়ে এটি সঙ্কুচিত করা যায়। এই মানটি ঐচ্ছিক।

পঞ্চম color হল রঙের মান, যা ছায়ার রঙ নির্ধারণ করে। CSS-এ উপলব্ধ রঙ নাম, RGB, HEX, HSL এবং অন্যান্য রঙ মডেল ব্যবহার করে রঙ সেট করা যায়। যদি বাদ দেওয়া হয়, তবে উপাদানের ডিফল্ট টেক্সট রঙ (color প্রপার্টির মান) প্রয়োগ করা হয়।

আপনি প্রথমে inset কীওয়ার্ডও উল্লেখ করতে পারেন। inset কীওয়ার্ড উল্লেখ করলে ছায়াটি উপাদানের বাইরের পরিবর্তে ভিতরে আঁকা হয়। কমা দ্বারা পৃথক করা একাধিক ছায়া সেট করাও সম্ভব।

box-shadow এর উদাহরণ

মৌলিক ছায়ার উদাহরণ 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • অনুভূমিক স্থানচ্যুতি 10px, যা ডান দিকে ১০ পিক্সেলের একটি ছায়া তৈরি করে।
  • উল্লম্ব স্থানচ্যুতি 10px, যা নিচে ১০ পিক্সেলের একটি ছায়া তৈরি করে।
  • ব্লার রেডিয়াস 5px, যার ফলস্বরূপ ৫ পিক্সেলের একটি ছায়া ঝাপসা হয়ে যায়।
  • রঙ হলো rgba(0, 0, 0, 0.5), যার ফলে এটি একটি আধা-পারদর্শী কালো ছায়া সৃষ্টি করে।
অভ্যন্তরীণ ছায়ার উদাহরণ 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • inset ব্যবহার করে উপাদানের অভ্যন্তরে ছায়া আঁকা যায়।
একাধিক ছায়ার উদাহরণ 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • তুমি চাইলেও কমা দিয়ে পৃথক করে একাধিক ছায়া নির্ধারণ করতে পারো। এই উদাহরণে দুটি ছায়া প্রয়োগ করা হয়েছে: একটি কালো ছায়া এবং একটি লাল ছায়া।

সারসংক্ষেপ

  • box-shadow একটি বৈশিষ্ট্য যা গভীরতার অনুভূতি তৈরি করতে উপাদানে ছায়া যোগ করতে ব্যবহৃত হয়।
  • অনুভূমিক ও উল্লম্ব স্থানচ্যুতি, ঝাপসা, বিস্তার রেডিয়াস এবং রঙ একত্রিত করার মাধ্যমে বিভিন্ন প্রভাব তৈরি করা সম্ভব।
  • inset দিয়ে অভ্যন্তরে ছায়া আঁকতে পারো, এবং একই সাথে একাধিক ছায়াও নির্ধারণ করতে পারো।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

ব্যাকগ্রাউন্ড-সংক্রান্ত CSS প্রপার্টিতালিকা সম্পর্কিত CSS বৈশিষ্ট্যগুলি