Home-theater-designers
সিউডো-এলিমেন্টস হল আরো উন্নত নির্বাচকদের মধ্যে একটি যা CSS- এ ব্যবহারের জন্য উপলব্ধ। এই নির্বাচকদের পিছনে মূল উদ্দেশ্য হল একটি নির্দিষ্ট ওয়েবপৃষ্ঠার মৌলিক কাঠামো তৈরিতে ব্যবহৃত HTML ডকুমেন্ট পরিবর্তন না করে অনন্য স্টাইলিং তৈরি করা।
সিএসএস-এ ছদ্ম-উপাদানগুলি কীভাবে ব্যবহার করবেন তা এখানে।
আইফোন ক্যালেন্ডারে ইভেন্টগুলি কীভাবে মুছবেন
সাধারণ ছদ্ম-উপাদান
ওয়েব ডেভেলপারের জীবনকে সহজ করার জন্য ছদ্ম-উপাদানগুলির একটি বিস্তৃত তালিকা রয়েছে। এই ছদ্ম-উপাদানগুলির মধ্যে কিছু অন্তর্ভুক্ত:
- আগে
- পরে
- ব্যাকড্রপ
- প্রথম লাইন
- প্রথম চিঠি
নির্দিষ্ট পরিস্থিতিতে, কিছু ছদ্ম-উপাদান অন্যদের চেয়ে বেশি উপযুক্ত বলে প্রমাণিত হবে, কিন্তু যে জিনিসটি স্থির থাকে তা হল যেকোনো ছদ্ম-উপাদান ব্যবহারের সাধারণ গঠন।
ছদ্ম-উপাদান গঠন উদাহরণ
selector::pseudo-element{
/* css code */
} যদিও আপনি একটি HTML উপাদানকে নির্বাচক হিসাবে ব্যবহার করতে পারেন, তবে আপনার লেআউটে অনিচ্ছাকৃত উপাদানগুলিকে লক্ষ্যবস্তু করা এড়াতে একটি ক্লাস বা একটি আইডি ব্যবহার করার পরামর্শ দেওয়া হয়। উপাদান, শৈলী, বা ডেটা যা আপনি পছন্দসই অবস্থানে সন্নিবেশ করতে চান কোঁকড়া ধনুর্বন্ধনী মধ্যে স্থাপন করা উচিত।
ছদ্ম-উপাদানগুলি আগে এবং পরে তালিকায় সর্বাধিক জনপ্রিয়, এবং এটি ব্যবহার করার জন্য অনেক ব্যবহারিক উপায় রয়েছে-এটি কেন তা দেখতে কঠিন নয়।
সিএসএস-এ বিফোর সিউডো-এলিমেন্ট ব্যবহার করা
অসম্ভব না হলেও, CSS- এ পাঠযোগ্য পাঠ্যের সাথে ছবি ওভারলে করা কঠিন। এটি বেশিরভাগ কারণ ইমেজ এবং পাঠ্য একটি ওয়েবপেজে একই অবস্থান দখল করবে।
এটা তুলনামূলকভাবে সহজ পাঠ্যের একটি গ্রুপের পটভূমিতে একটি ছবি পাঠান , কিন্তু যখন সেই ছবিটি খুব উজ্জ্বল হয় তখন এটি তার উপরে থাকা পাঠ্যকে ছাপিয়ে যায়। এই ক্ষেত্রে, পরবর্তী ধাপ হল অস্বচ্ছ সম্পত্তি ব্যবহার করে ছবিটিকে কম অস্বচ্ছ করার চেষ্টা করা।
একমাত্র সমস্যা হল যেহেতু ছবি এবং পাঠ্য একই অবস্থান দখল করে তাই পাঠ্যও কিছুটা স্বচ্ছ হয়ে যাবে।
এই সমস্যা সমাধানের কয়েকটি কার্যকর উপায়গুলির মধ্যে একটি হল পূর্বের ছদ্ম-উপাদান ব্যবহার করা।
আগে ছদ্ম-উপাদান উদাহরণ ব্যবহার করে
.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}উপরের কোডটি নীচের HTML ল্যান্ডিংপেজ ক্লাসের সাথে একত্রে ব্যবহার করার জন্য তৈরি করা হয়েছে। উপরের কোডে দেখানো হয়েছে, পূর্বের ছদ্ম-উপাদান ব্যবহার করে আমরা চিত্রটিকে লক্ষ্য করতে পারি এবং ছবিটি পাঠ্যের সাথে মিলিত হওয়ার আগে তার উপর অস্বচ্ছ সম্পত্তি ব্যবহার করতে পারি।
This is the result of using the before pseudo-element
to overlay and image with readable text.
এর ফলে ছবিতে একটি ওভারলে স্থাপন করা হবে এবং নীচের ছবিতে যেমন দেখানো হয়েছে তেমন স্পষ্ট লেখা উপরে প্রদর্শিত হবে:
CSS- এ After Pseudo-element ব্যবহার করা
ছদ্ম-উপাদানটির জন্য একটি ব্যবহারিক ব্যবহার হল একটি HTML ফর্ম তৈরিতে সহায়তা করা। বেশিরভাগ ফর্ম ক্ষেত্রের একটি সেট দিয়ে তৈরি করা হয় যার জন্য সফলভাবে ফর্ম জমা দেওয়ার জন্য ডেটার প্রয়োজন হয়।
একটি ফর্মের একটি ক্ষেত্রের ডেটা প্রয়োজন তা নির্দেশ করার একটি উপায় হল এই ক্ষেত্রের লেবেলের পরে একটি তারকাচিহ্ন স্থাপন করা। পরের ছদ্ম-উপাদানটি আপনাকে এটি করার জন্য একটি ব্যবহারিক উপায় সরবরাহ করে।
ছদ্ম-উপাদান উদাহরণ ব্যবহার করে
.required::after{
content: '*';
color: red;
} আপনার ফর্মের CSS বিভাগে উপরের কোডটি willুকিয়ে দিলে নিশ্চিত করা হবে যে প্রয়োজনীয় লেবেলযুক্ত প্রতিটি লেবেল সরাসরি একটি লাল তারকা দ্বারা অনুসরণ করা হবে। এই উদাহরণে ছদ্ম-উপাদানটিও ব্যবহারিক কারণ এটি স্টাইলিংকে কাঠামো থেকে আলাদা করতে সহায়তা করে (যা সফ্টওয়্যার বিকাশে সর্বদা আদর্শ।)
কিভাবে সিস্টেম রিস্টোর পয়েন্ট মুছে ফেলবেন উইন্ডোজ ১০
বিষয়বস্তু সম্পত্তি
উপরের ছদ্ম-উপাদান উদাহরণে যেমন দেখানো হয়েছে, বিষয়বস্তু সম্পত্তি হল একটি সরঞ্জাম যা একটি ওয়েবপৃষ্ঠায় নতুন সামগ্রী সন্নিবেশ করতে ব্যবহৃত হয়। এই সম্পত্তি শুধুমাত্র ছদ্ম-উপাদানগুলির আগে এবং পরে ব্যবহার করা হয়।
এটি লক্ষ্য করা গুরুত্বপূর্ণ যে সামগ্রী সম্পত্তিতে খাওয়ার জন্য কোন সামগ্রী না থাকলেও (যেমন উপরের ছদ্ম-উপাদান উদাহরণে), আপনাকে এখনও আগে বা পরে প্যারামিটারের মধ্যে বিষয়বস্তু সম্পত্তি ব্যবহার করতে হবে ছদ্ম-উপাদান তাদের উদ্দেশ্য অনুযায়ী কাজ করতে।
এখন আপনি সিএসএস-এ সিউডো-এলিমেন্ট ব্যবহার করতে পারেন
এই নিবন্ধে, আপনি শিখেছেন কিভাবে আপনার সিএসএস প্রোগ্রামে ছদ্ম-উপাদানগুলি সনাক্ত করতে এবং ব্যবহার করতে হয়। আপনাকে ছদ্ম-উপাদানগুলির আগে এবং পরে পরিচয় করিয়ে দেওয়া হয়েছিল এবং উভয়ই ব্যবহার করার জন্য ব্যবহারিক উপায় দেওয়া হয়েছিল। আপনি ছদ্ম-উপাদানগুলির আগে এবং পরে সফল ব্যবহারের জন্য কেন সামগ্রী সম্পত্তি প্রয়োজন তা দেখতে সক্ষম হন।
শেয়ার করুন শেয়ার করুন টুইট ইমেইল 10 টি সহজ CSS কোড উদাহরণ আপনি 10 মিনিটে শিখতে পারেনসিএসএসের সাহায্যের প্রয়োজন? শুরু করার জন্য এই মৌলিক CSS কোড উদাহরণগুলি চেষ্টা করুন, তারপর সেগুলি আপনার নিজস্ব ওয়েব পেজে প্রয়োগ করুন।
পরবর্তী পড়ুন সম্পর্কিত বিষয়- প্রোগ্রামিং
- ওয়েব ডিজাইন
- সিএসএস
Kadeisha Kean একজন ফুল স্ট্যাক সফটওয়্যার ডেভেলপার এবং টেকনিক্যাল/টেকনোলজি রাইটার। কিছু জটিল প্রযুক্তিগত ধারণাকে সরলীকরণ করার তার স্বতন্ত্র ক্ষমতা আছে; যে কোন প্রযুক্তি নবজাতকের দ্বারা সহজেই বোঝা যায় এমন উপাদান তৈরি করা। তিনি লেখালেখি, আকর্ষণীয় সফটওয়্যার বিকাশ এবং বিশ্ব ভ্রমণ (তথ্যচিত্রের মাধ্যমে) সম্পর্কে উত্সাহী।
Kadeisha Kean থেকে আরোআমাদের নিউজলেটার সদস্যতা
প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন