বিষয়বস্তু মার্কেটিং

CSS3 বৈশিষ্ট্যগুলি সম্পর্কে আপনি সচেতন নাও হতে পারেন: ফ্লেক্সবক্স, গ্রিড লেআউট, কাস্টম বৈশিষ্ট্য, রূপান্তর, অ্যানিমেশন এবং একাধিক পটভূমি

ক্যাসকেডিং স্টাইল শীট (সিএসএস) বিকশিত হতে থাকে এবং সর্বশেষ সংস্করণে এমন কিছু বৈশিষ্ট্য থাকতে পারে যা আপনি হয়তো জানেন না। এখানে কোড উদাহরণ সহ CSS3 এর সাথে প্রবর্তিত কিছু প্রধান উন্নতি এবং পদ্ধতি রয়েছে:

  • নমনীয় বক্স লেআউট (ফ্লেক্সবক্স): একটি লেআউট মোড যা আপনাকে ওয়েব পৃষ্ঠাগুলির জন্য নমনীয় এবং প্রতিক্রিয়াশীল লেআউট তৈরি করতে দেয়৷ ফ্লেক্সবক্সের সাহায্যে, আপনি সহজেই একটি পাত্রের মধ্যে উপাদানগুলি সারিবদ্ধ এবং বিতরণ করতে পারেন। n এই উদাহরণ, .container ক্লাস ব্যবহার করে display: flex ফ্লেক্সবক্স লেআউট মোড সক্ষম করতে। দ্য justify-content সম্পত্তি সেট করা হয় center পাত্রের মধ্যে শিশু উপাদানটিকে অনুভূমিকভাবে কেন্দ্রে রাখতে। দ্য align-items সম্পত্তি সেট করা হয় center শিশু উপাদানটিকে উল্লম্বভাবে কেন্দ্রে রাখতে। দ্য .item ক্লাস চাইল্ড এলিমেন্টের জন্য পটভূমির রঙ এবং প্যাডিং সেট করে।

এইচটিএমএল

<div class="container">
  <div class="item">Centered Element</div>
</div>

সিএসএস

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.item {
  background-color: #ddd;
  padding: 20px;
}

ফল

কেন্দ্রীভূত উপাদান
  • গ্রিড বিন্যাস: আরেকটি লেআউট মোড যা আপনাকে ওয়েব পৃষ্ঠাগুলির জন্য জটিল গ্রিড-ভিত্তিক লেআউট তৈরি করতে দেয়। গ্রিডের সাহায্যে, আপনি সারি এবং কলাম নির্দিষ্ট করতে পারেন এবং তারপর গ্রিডের নির্দিষ্ট কক্ষের মধ্যে উপাদানগুলি স্থাপন করতে পারেন। এই উদাহরণে, .grid-container ক্লাস ব্যবহার করে display: grid গ্রিড লেআউট মোড সক্ষম করতে। দ্য grid-template-columns সম্পত্তি সেট করা হয় repeat(2, 1fr) সমান প্রস্থের দুটি কলাম তৈরি করতে। দ্য gap সম্পত্তি গ্রিড কোষের মধ্যে ব্যবধান সেট করে। দ্য .grid-item ক্লাস গ্রিড আইটেমগুলির জন্য পটভূমির রঙ এবং প্যাডিং সেট করে।

এইচটিএমএল

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

সিএসএস

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

ফল

আইটেম এক্সএনএমএক্স
আইটেম এক্সএনএমএক্স
আইটেম এক্সএনএমএক্স
আইটেম এক্সএনএমএক্স
  • রূপান্তর: CSS3 ওয়েব পৃষ্ঠাগুলিতে রূপান্তর তৈরির জন্য বেশ কয়েকটি নতুন বৈশিষ্ট্য এবং কৌশল চালু করেছে। উদাহরণস্বরূপ, দ transition সময়ের সাথে CSS বৈশিষ্ট্যের পরিবর্তনগুলিকে অ্যানিমেট করতে সম্পত্তি ব্যবহার করা যেতে পারে। এই উদাহরণে, .box ক্লাস উপাদানটির জন্য প্রস্থ, উচ্চতা এবং প্রাথমিক পটভূমির রঙ সেট করে। দ্য transition সম্পত্তি সেট করা হয় background-color 0.5s ease একটি সহজ-ইন-আউট টাইমিং ফাংশন সহ অর্ধ সেকেন্ডের বেশি ব্যাকগ্রাউন্ডের রঙের বৈশিষ্ট্যে পরিবর্তনগুলি অ্যানিমেট করতে। দ্য .box:hover ক্লাস এলিমেন্টের পটভূমির রঙ পরিবর্তন করে যখন মাউস পয়েন্টার এটির উপরে থাকে, যা ট্রানজিশন অ্যানিমেশনকে ট্রিগার করে।

এইচটিএমএল

<div class="box"></div>

সিএসএস

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: blue;
}

ফল

বাতাসে ভাসিতে থাকা
এখানে!
  • অ্যানিমেশন: CSS3 ওয়েব পৃষ্ঠাগুলিতে অ্যানিমেশন তৈরির জন্য বেশ কয়েকটি নতুন বৈশিষ্ট্য এবং কৌশল চালু করেছে। এই উদাহরণে, আমরা ব্যবহার করে একটি অ্যানিমেশন যোগ করেছি animation সম্পত্তি আমরা একটি সংজ্ঞায়িত করেছি @keyframes অ্যানিমেশনের নিয়ম, যা নির্দিষ্ট করে যে বাক্সটি 0 সেকেন্ডের সময়কাল ধরে 90 ডিগ্রি থেকে 0.5 ডিগ্রি পর্যন্ত ঘোরানো উচিত। যখন বাক্সের উপর হোভার করা হয়, spin বাক্সটি ঘোরাতে অ্যানিমেশন প্রয়োগ করা হয়। দ্য animation-fill-mode সম্পত্তি সেট করা হয় forwards অ্যানিমেশন শেষ হওয়ার পরে তার চূড়ান্ত অবস্থা বজায় রাখা হয়েছে তা নিশ্চিত করতে।

এইচটিএমএল

<div class="rotate"></div>

সিএসএস

.rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* Add animation properties */
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

/* Define the animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

.rotate:hover {
  animation-name: spin;
}

ফল

বাতাসে ভাসিতে থাকা
এখানে!
  • CSS কাস্টম বৈশিষ্ট্য: এই নামেও পরিচিত CSS ভেরিয়েবল, কাস্টম বৈশিষ্ট্য CSS3 এ চালু করা হয়েছিল। তারা আপনাকে CSS-এ আপনার নিজস্ব কাস্টম বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করতে এবং ব্যবহার করার অনুমতি দেয়, যা আপনার স্টাইলশীট জুড়ে মান সংরক্ষণ এবং পুনরায় ব্যবহার করতে ব্যবহার করা যেতে পারে। CSS ভেরিয়েবল একটি নাম দ্বারা চিহ্নিত করা হয় যা দুটি ড্যাশ দিয়ে শুরু হয়, যেমন
    --my-variable. এই উদাহরণে, আমরা –primary-color নামক একটি CSS ভেরিয়েবল সংজ্ঞায়িত করি এবং এর একটি মান দিই #007bff, যা একটি নীল রঙ যা সাধারণত অনেক ডিজাইনে প্রাথমিক রঙ হিসাবে ব্যবহৃত হয়। আমরা সেট করতে এই ভেরিয়েবল ব্যবহার করেছি background-color একটি বোতাম উপাদানের বৈশিষ্ট্য, ব্যবহার করে var() ভেরিয়েবলের নামে ফাংশন এবং পাসিং। এটি বোতামের পটভূমির রঙ হিসাবে ভেরিয়েবলের মান ব্যবহার করবে।
:root {
  --primary-color: #007bff;
}

button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
}
    • একাধিক পটভূমি: CSS3 আপনাকে একটি উপাদানের জন্য একাধিক ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট করতে দেয়, যার অবস্থান এবং স্ট্যাকিং ক্রম নিয়ন্ত্রণ করার ক্ষমতা। ব্যাকগ্রাউন্ড দুটি ছবির সমন্বয়ে গঠিত, red.png এবং blue.png, যা ব্যবহার করে লোড করা হয় background-image সম্পত্তি প্রথম ছবি, red.png, উপাদানটির ডান নীচের কোণায় অবস্থিত, যখন দ্বিতীয় চিত্রটি, blue.png, উপাদানটির বাম উপরের কোণে অবস্থান করা হয়। দ্য background-position সম্পত্তি প্রতিটি ছবির অবস্থান নিয়ন্ত্রণ করতে ব্যবহৃত হয়. দ্য background-repeat চিত্রগুলি কীভাবে পুনরাবৃত্তি হয় তা নিয়ন্ত্রণ করতে সম্পত্তি ব্যবহার করা হয়। প্রথম ছবি, red.png, পুনরাবৃত্তি না করার জন্য সেট করা হয়েছে (no-repeat), যখন দ্বিতীয় চিত্র, blue.png, পুনরাবৃত্তি করতে সেট করা হয়েছে (repeat).

    এইচটিএমএল

    <div id="multibackground"></div>

    সিএসএস

    #multibackground {
      background-image: url(red.png), url(blue.png);
      background-position: right bottom, left top;
      background-repeat: no-repeat, repeat;
      height: 200px;
      width: 200px;
    }

    ফল

    Douglas Karr

    Douglas Karr এর CMO হয় ওপেনইনসাইটস এবং এর প্রতিষ্ঠাতা Martech Zone. ডগলাস কয়েক ডজন সফল MarTech স্টার্টআপকে সাহায্য করেছে, Martech অধিগ্রহণ এবং বিনিয়োগে $5 বিলিয়নেরও বেশি যোগ্য পরিশ্রমে সহায়তা করেছে এবং কোম্পানিগুলিকে তাদের বিক্রয় ও বিপণন কৌশলগুলি বাস্তবায়ন এবং স্বয়ংক্রিয় করতে সহায়তা করে চলেছে৷ ডগলাস একজন আন্তর্জাতিকভাবে স্বীকৃত ডিজিটাল রূপান্তর এবং MarTech বিশেষজ্ঞ এবং স্পিকার। ডগলাস একজন ডামি'স গাইড এবং একটি ব্যবসায়িক নেতৃত্ব বইয়ের একজন প্রকাশিত লেখকও।

    সম্পরকিত প্রবন্ধ

    শীর্ষ বোতামে ফিরে যান
    ঘনিষ্ঠ

    অ্যাডব্লক সনাক্ত করা হয়েছে

    Martech Zone আমরা বিজ্ঞাপন রাজস্ব, অনুমোদিত লিঙ্ক, এবং স্পনসরশিপ মাধ্যমে আমাদের সাইট নগদীকরণ কারণ বিনা খরচে আপনাকে এই সামগ্রী প্রদান করতে সক্ষম. আপনি যদি আমাদের সাইট দেখার সাথে সাথে আপনার বিজ্ঞাপন ব্লকারকে সরিয়ে দেন তবে আমরা কৃতজ্ঞ।