ফাংশন

CSS পডকাস্ট - 020: ফাংশন

এখন পর্যন্ত এই কোর্সে, আপনি বেশ কয়েকটি CSS ফাংশনের সংস্পর্শে এসেছেন। গ্রিড মডিউলে, আপনাকে minmax() এবং fit-content() এর সাথে পরিচয় করিয়ে দেওয়া হয়েছে, যা আপনাকে উপাদানের আকার দিতে সাহায্য করে। রঙ মডিউলে, আপনাকে rgb() , এবং hsl() এর সাথে পরিচয় করিয়ে দেওয়া হয়েছে, যা আপনাকে রং নির্ধারণ করতে সাহায্য করে।

অন্যান্য অনেক প্রোগ্রামিং ল্যাঙ্গুয়েজের মতো, CSS-এর অনেকগুলি অন্তর্নির্মিত ফাংশন রয়েছে যা আপনি যখনই প্রয়োজন তখন অ্যাক্সেস করতে পারেন।

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

একটি ফাংশন কি?

একটি ফাংশন হল একটি নামযুক্ত, স্বয়ংসম্পূর্ণ কোডের টুকরো যা একটি নির্দিষ্ট কাজ সম্পন্ন করে। একটি ফাংশনের নামকরণ করা হয়েছে যাতে আপনি এটিকে আপনার কোডের মধ্যে কল করতে পারেন এবং আপনি ফাংশনে ডেটা পাস করতে পারেন। এটি পাসিং আর্গুমেন্ট হিসাবে পরিচিত।

অনেক CSS ফাংশন বিশুদ্ধ ফাংশন , যার মানে হল যে আপনি যদি তাদের মধ্যে একই আর্গুমেন্ট পাস করেন, তাহলে আপনার বাকি কোডে যা ঘটছে তা নির্বিশেষে তারা আপনাকে সবসময় একই ফলাফল দেবে। এই ফাংশনগুলি প্রায়শই আপনার CSS-এ মান পরিবর্তনের সাথে সাথে পুনরায় গণনা করবে, ভাষার অন্যান্য উপাদানের মতো, যেমন কম্পিউটেড ক্যাসকেডেড মান যেমন currentColor ।

CSS-এ, আপনি নিজের লেখার পরিবর্তে শুধুমাত্র প্রদত্ত ফাংশনগুলি ব্যবহার করতে পারেন, তবে ফাংশনগুলিকে আরও নমনীয়তা প্রদান করে কিছু প্রসঙ্গে একে অপরের মধ্যে নেস্ট করা যেতে পারে। আমরা পরে এই মডিউলে আরো বিস্তারিতভাবে তা কভার করব।

কার্যকরী নির্বাচক

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

আপনি সিউডো-ক্লাস মডিউলে কার্যকরী নির্বাচকদের সম্পর্কে শিখেছেন যা বিস্তারিত ফাংশন যেমন :is() এবং :not() । এই ফাংশনগুলিতে পাস করা আর্গুমেন্টগুলি হল CSS নির্বাচক, যা পরে মূল্যায়ন করা হয়। উপাদানগুলির সাথে মিল থাকলে, বাকি CSS নিয়ম তাদের জন্য প্রয়োগ করা হবে।

কাস্টম বৈশিষ্ট্য এবং var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

একটি কাস্টম প্রপার্টি হল একটি ভেরিয়েবল যা আপনাকে আপনার CSS কোডে মান টোকেনাইজ করতে দেয়। কাস্টম বৈশিষ্ট্যগুলিও ক্যাসকেড দ্বারা প্রভাবিত হয় যার অর্থ সেগুলি প্রাসঙ্গিকভাবে ম্যানিপুলেট বা পুনরায় সংজ্ঞায়িত করা যেতে পারে। একটি কাস্টম সম্পত্তি অবশ্যই দুটি ড্যাশ ( -- ) সহ প্রিফিক্স করা উচিত এবং কেস সংবেদনশীল।

var() ফাংশনটি একটি প্রয়োজনীয় আর্গুমেন্ট নেয়: কাস্টম সম্পত্তি যা আপনি একটি মান হিসাবে ফেরত দেওয়ার চেষ্টা করছেন। উপরের স্নিপেটে, var() ফাংশনটি --base-color একটি আর্গুমেন্ট হিসাবে পাস করেছে। যদি --base-color সংজ্ঞায়িত করা হয়, তাহলে var() মান প্রদান করবে।

.my-element {
    background: var(--base-color, hotpink);
}

আপনি var() ফাংশনে একটি ফলব্যাক ঘোষণা মানও পাস করতে পারেন। এর মানে হল যদি --base-color খুঁজে পাওয়া না যায়, তাহলে পাস করা ঘোষণাটি ব্যবহার করা হবে, যা এই নমুনার ক্ষেত্রে hotpink রঙ।

ফাংশন যা একটি মান প্রদান করে

var() ফাংশন হল CSS ফাংশনগুলির মধ্যে একটি যা একটি মান প্রদান করে। attr() এবং url() এর মতো ফাংশনগুলি var() এর অনুরূপ কাঠামো অনুসরণ করে — আপনি এক বা একাধিক আর্গুমেন্ট পাস করেন এবং আপনার CSS ঘোষণার ডানদিকে ব্যবহার করেন।

a::after {
  content: attr(href);
}

এখানে attr() ফাংশনটি <a> এলিমেন্টের href অ্যাট্রিবিউটের বিষয়বস্তু গ্রহণ করছে এবং এটিকে ::after সিউডো-এলিমেন্টের content হিসেবে সেট করছে। যদি <a> উপাদানের href অ্যাট্রিবিউটের মান পরিবর্তন করা হয়, তাহলে এটি স্বয়ংক্রিয়ভাবে এই content বৈশিষ্ট্যে প্রতিফলিত হবে।

.my-element {
    background-image: url('/path/to/image.jpg');
}

url() ফাংশন একটি স্ট্রিং URL নেয় এবং ছবি, ফন্ট এবং বিষয়বস্তু লোড করতে ব্যবহৃত হয়। যদি একটি বৈধ ইউআরএল পাস না করা হয় বা ইউআরএল নির্দেশ করে এমন সংস্থান খুঁজে না পাওয়া যায়, url() ফাংশন দ্বারা কিছুই ফেরত দেওয়া হবে না।

রঙ ফাংশন

আপনি রঙ মডিউল মধ্যে রঙ ফাংশন সম্পর্কে সব শিখেছি. আপনি যদি এখনও এটি না পড়ে থাকেন তবে এটি দৃঢ়ভাবে সুপারিশ করা হয় যে আপনি এটি করবেন।

CSS-এ উপলব্ধ কিছু রঙ ফাংশন হল rgb() , rgba() , hsl() , hsla() , hwb() , lab() এবং lch() । এই সবগুলির একটি অনুরূপ ফর্ম রয়েছে যেখানে কনফিগারেশন আর্গুমেন্টগুলি পাস করা হয় এবং একটি রঙ ফেরত দেওয়া হয়।

গাণিতিক অভিব্যক্তি

অন্যান্য অনেক প্রোগ্রামিং ভাষার মতো, CSS বিভিন্ন ধরনের গণনার সাথে সহায়তা করার জন্য দরকারী গাণিতিক ফাংশন প্রদান করে।

calc()

calc() ফাংশনটি তার প্যারামিটার হিসাবে একটি একক গাণিতিক অভিব্যক্তি নেয়। এই গাণিতিক অভিব্যক্তিটি দৈর্ঘ্য, সংখ্যা, কোণ এবং ফ্রিকোয়েন্সির মতো ধরণের মিশ্রণ হতে পারে। ইউনিটগুলিও মিশ্রিত করা যেতে পারে।

.my-element {
    width: calc(100% - 2rem);
}

এই উদাহরণে, calc() ফাংশনটি একটি এলিমেন্টের প্রস্থকে 100% এর প্যারেন্ট এলিমেন্ট ধারণ করতে ব্যবহার করা হচ্ছে, তারপর সেই গণনা করা মান থেকে 2rem সরিয়ে দেওয়া হচ্ছে।

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

calc() ফাংশন অন্য calc() ফাংশনের ভিতরে নেস্ট করা যেতে পারে। আপনি একটি অভিব্যক্তির অংশ হিসাবে একটি var() ফাংশনে কাস্টম বৈশিষ্ট্যগুলিও পাস করতে পারেন।

min() এবং max()

min() ফাংশন এক বা একাধিক পাস করা আর্গুমেন্টের ক্ষুদ্রতম গণনাকৃত মান প্রদান করে। max() ফাংশন বিপরীতটি করে: এক বা একাধিক পাস করা আর্গুমেন্টের সবচেয়ে বড় মান পান।

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

এই উদাহরণে, প্রস্থ 20vw মধ্যে সবচেয়ে ছোট মান হওয়া উচিত —যা ভিউপোর্ট প্রস্থের 20% —এবং 30rem । উচ্চতা 20vh - যা ভিউপোর্ট উচ্চতার 20% - এবং 20rem মধ্যে সবচেয়ে বড় মান হওয়া উচিত।

বাতা()

clamp() ফাংশনটি তিনটি আর্গুমেন্ট নেয়: সর্বনিম্ন আকার, আদর্শ আকার এবং সর্বোচ্চ।

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

এই উদাহরণে, font-size ভিউপোর্টের প্রস্থের উপর ভিত্তি করে তরল হবে। স্ক্রীন জুমিংয়ে সহায়তা করার জন্য একটি rem ইউনিটে vw ইউনিট যোগ করা হয়েছে, কারণ জুম স্তর নির্বিশেষে একটি vw ইউনিট একই আকারের হবে। একটি rem ইউনিট দ্বারা গুণ করা - রুট ফন্টের আকারের উপর ভিত্তি করে - একটি আপেক্ষিক গণনা বিন্দু সহ clamp() ফাংশন প্রদান করে।

আপনি এই নিবন্ধে min() , max() , এবং clamp () ফাংশন সম্পর্কে আরও শিখতে পারেন।

আকার

clip-path , offset-path এবং shape-outside CSS বৈশিষ্ট্যগুলি আপনার বাক্সটিকে দৃশ্যত ক্লিপ করতে বা চারপাশে প্রবাহিত বিষয়বস্তুর জন্য একটি আকৃতি প্রদান করতে আকারগুলি ব্যবহার করে৷

আকৃতি ফাংশন আছে যা এই উভয় বৈশিষ্ট্যের সাথে ব্যবহার করা যেতে পারে। circle() , ellipse() এবং inset() এর মতো সাধারণ আকারগুলি তাদের আকার দেওয়ার জন্য কনফিগারেশন আর্গুমেন্ট নেয়। আরও জটিল আকার, যেমন polygon() কাস্টম আকৃতি তৈরি করতে X এবং Y অক্ষ মানের কমা দ্বারা পৃথক জোড়া নেয়।

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

polygon() মত, একটি path() ফাংশনও রয়েছে যা একটি SVG ফিল নিয়মকে একটি আর্গুমেন্ট হিসেবে নেয়। এটি অত্যন্ত জটিল আকারের জন্য অনুমতি দেয় যা একটি গ্রাফিক্স টুল যেমন ইলাস্ট্রেটর বা ইঙ্কস্কেপে আঁকা যায় এবং তারপরে আপনার CSS-এ কপি করা যায়।

রূপান্তরিত করে

শেষ পর্যন্ত CSS ফাংশনগুলির এই ওভারভিউতে ট্রান্সফর্ম ফাংশনগুলি রয়েছে, যা একটি উপাদানের গভীরতাকে তির্যক, আকার পরিবর্তন এবং এমনকি পরিবর্তন করে। নিম্নলিখিত সমস্ত ফাংশন transform সম্পত্তির সাথে ব্যবহার করা হয়।

ঘূর্ণন

আপনি rotate() ফাংশন ব্যবহার করে একটি উপাদান ঘোরাতে পারেন, যা একটি উপাদানকে তার কেন্দ্র অক্ষে ঘোরাতে পারে। আপনি পরিবর্তে একটি নির্দিষ্ট অক্ষে একটি উপাদান ঘোরাতে rotateX() , rotateY() এবং rotateZ() ফাংশন ব্যবহার করতে পারেন। ঘূর্ণনের মাত্রা নির্ধারণ করতে আপনি ডিগ্রি, টার্ন এবং রেডিয়ান ইউনিট পাস করতে পারেন।

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() ফাংশনটি চারটি আর্গুমেন্ট নেয়।

প্রথম ৩টি আর্গুমেন্ট হল সংখ্যা, যা X, Y এবং Z স্থানাঙ্ককে সংজ্ঞায়িত করে। চতুর্থ যুক্তি হল ঘূর্ণন যা অন্যান্য ঘূর্ণন ফাংশনের মতই ডিগ্রী, কোণ এবং বাঁক গ্রহণ করে।

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

স্কেল

আপনি transform এবং scale() ফাংশন সহ একটি উপাদানের স্কেলিং পরিবর্তন করতে পারেন। ফাংশনটি একটি মান হিসাবে এক বা দুটি সংখ্যা গ্রহণ করে যা একটি ইতিবাচক বা নেতিবাচক স্কেলিং নির্ধারণ করে। আপনি যদি শুধুমাত্র একটি সংখ্যার আর্গুমেন্ট সংজ্ঞায়িত করেন, তাহলে X এবং Y অক্ষ উভয়ই একই স্কেল করা হবে এবং উভয়কে সংজ্ঞায়িত করা হল X এবং Y-এর জন্য একটি সংক্ষিপ্ত বিবরণ। ঠিক যেমন rotate() , scaleX() , scaleY() এবং scaleZ() ফাংশন রয়েছে পরিবর্তে একটি নির্দিষ্ট অক্ষের উপর একটি উপাদান স্কেল.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

এছাড়াও rotate ফাংশন মত, একটি scale3d() ফাংশন আছে. এটি scale() এর অনুরূপ, তবে এটি তিনটি আর্গুমেন্ট নেয়: X, Y এবং Z স্কেল ফ্যাক্টর।

অনুবাদ করা

translate() ফাংশন একটি উপাদানকে স্থানান্তরিত করে যখন এটি নথির প্রবাহে তার অবস্থান বজায় রাখে। তারা আর্গুমেন্ট হিসাবে দৈর্ঘ্য এবং শতাংশ মান গ্রহণ করে। translate() ফাংশনটি X অক্ষ বরাবর একটি উপাদান অনুবাদ করে যদি একটি আর্গুমেন্ট সংজ্ঞায়িত করা হয়, এবং উভয় আর্গুমেন্ট সংজ্ঞায়িত করা হলে X এবং Y অক্ষ বরাবর একটি উপাদান অনুবাদ করে।

.my-element {
  transform: translatex(40px) translatey(25px);
}

আপনি করতে পারেন—অন্যান্য রূপান্তর ফাংশনের মতো—একটি নির্দিষ্ট অক্ষের জন্য নির্দিষ্ট ফাংশন ব্যবহার করতে পারেন, translateX , translateY এবং translateZ ব্যবহার করে। এছাড়াও আপনি translate3d ব্যবহার করতে পারেন যা আপনাকে X, Y এবং Z অনুবাদকে একটি ফাংশনে সংজ্ঞায়িত করতে দেয়।

স্কুইং

আপনি skew() ফাংশন ব্যবহার করে একটি উপাদান তির্যক করতে পারেন যা আর্গুমেন্ট হিসাবে কোণ গ্রহণ করে। skew() ফাংশন translate() এর জন্য খুব অনুরূপ ভাবে কাজ করে। আপনি যদি শুধুমাত্র একটি যুক্তি সংজ্ঞায়িত করেন তবে এটি শুধুমাত্র X অক্ষকে প্রভাবিত করবে এবং যদি আপনি উভয়টি সংজ্ঞায়িত করেন তবে এটি X এবং Y অক্ষকে প্রভাবিত করবে। প্রতিটি অক্ষকে স্বাধীনভাবে প্রভাবিত করতে আপনি skewX এবং skewY ব্যবহার করতে পারেন।

.my-element {
  transform: skew(10deg);
}

দৃষ্টিকোণ

পরিশেষে, আপনি perspective সম্পত্তি ব্যবহার করতে পারেন — যা বৈশিষ্ট্যের রূপান্তর পরিবারের অংশ—ব্যবহারকারী এবং Z সমতলের মধ্যে দূরত্ব পরিবর্তন করতে। এটি দূরত্বের অনুভূতি দেয় এবং আপনার ডিজাইনে ক্ষেত্রের গভীরতা তৈরি করতে ব্যবহার করা যেতে পারে।

ডেভিড ডেসান্ড্রোর এই উদাহরণটি, তাদের খুব দরকারী নিবন্ধ থেকে, দেখায় যে এটি কীভাবে ব্যবহার করা যেতে পারে, perspective-origin-x এবং perspective-origin-y বৈশিষ্ট্য সহ সত্যিকারের 3D অভিজ্ঞতা তৈরি করতে।

অ্যানিমেশন ফাংশন, গ্রেডিয়েন্ট এবং ফিল্টার

CSS এমন ফাংশনগুলিও সরবরাহ করে যা আপনাকে উপাদানগুলিকে অ্যানিমেট করতে সাহায্য করে, সেগুলিতে গ্রেডিয়েন্ট প্রয়োগ করতে এবং তারা দেখতে কেমন তা হেরফের করতে গ্রাফিকাল ফিল্টার ব্যবহার করে৷ এই মডিউলটিকে যতটা সম্ভব সংক্ষিপ্ত রাখতে, সেগুলি সংযুক্ত মডিউলগুলিতে আচ্ছাদিত করা হয়েছে। তারা সকলেই এই মডিউলে প্রদর্শিত ফাংশনের অনুরূপ কাঠামো অনুসরণ করে।

আপনার উপলব্ধি পরীক্ষা করুন

ফাংশন আপনার জ্ঞান পরীক্ষা