এই ম্যানুয়ালটিতে, আমরা ডিভ দেখানো এবং লুকানোর পদ্ধতি শিখব ' স্থানান্তর CSS এর সম্পত্তি।
কিভাবে CSS এ ট্রানজিশন সহ একটি ডিভ দেখাবেন এবং লুকাবেন?
সিএসএস ' স্থানান্তর ' সম্পত্তি একটি নির্দিষ্ট সময়ের উপর ভিত্তি করে সম্পত্তির মান পরিবর্তন করা সহজ করে তোলে। এটি তার অবস্থার উপর নির্ভর করে একটি ভাসমান বা সক্রিয় উপাদান হতে পারে। তাছাড়া, CSS-এর ট্রানজিশন প্রপার্টি HTML-এ div দেখাতে এবং লুকানোর জন্য ব্যবহার করা হয়।
এখন, ট্রানজিশন প্রপার্টির সিনট্যাক্সে যাওয়া যাক।
বাক্য গঠন
একটি রূপান্তর প্রভাব তৈরি করার সময় আপনাকে দুটি জিনিস নির্দিষ্ট করতে হবে:
মূলত, ' স্থানান্তর ” হল একটি শর্টহ্যান্ড সম্পত্তি যা চারটি অন্যান্য বৈশিষ্ট্য নিয়ে গঠিত, যা নীচে দেওয়া হল:
স্থানান্তর : স্থানান্তর-সম্পত্তি স্থানান্তর-কালট্রানজিশন-টাইমিং-ফাংশন ট্রানজিশন-বিলম্ব
এখানে উল্লিখিত বৈশিষ্ট্যগুলির বর্ণনা রয়েছে:
- স্থানান্তর-সম্পত্তি: এটি যেকোন CSS সম্পত্তিতে রূপান্তর সেট করতে ব্যবহার করা হয়। যেমন প্রস্থ, উচ্চতা, অস্বচ্ছতা এবং আরও অনেক কিছু।
- রূপান্তর সময়কাল: এটি স্থানান্তরের সময়কাল নির্দিষ্ট করতে ব্যবহৃত হয়।
- ট্রানজিশন-টাইমিং-ফাংশন: এটি পরিবর্তনের গতি সেট করতে ব্যবহার করা হয়।
- স্থানান্তর-বিলম্ব: এটি স্থানান্তর শুরু বা বিলম্বের সময় নির্দিষ্ট করে।
আসুন একটি উদাহরণ নেওয়া যাক যেখানে আমরা ডিভ দেখাব এবং লুকাব ' স্থানান্তর CSS এর সম্পত্তি। এই উদ্দেশ্যে, প্রথমে, আমরা একটি তৈরি করি ' div ' এবং একটি ইনপুট প্রকার ' চেকবক্স ”
ধাপ 1: ডিভ তৈরি করুন এবং স্টাইল করুন
এইচটিএমএল
<কেন্দ্র ><লেবেল > ডিভ > <ইনপুট প্রকার = 'চেকবক্স' >
>
অতঃপর, আমরা ব্যাকগ্রাউন্ড-কালার প্রপার্টি ব্যবহার করে ডিভকে স্টাইল করব এবং ব্যাকগ্রাউন্ডের কালার হিসেবে সেট করব “ rgb(238, 190, 118) ” আমরা ডিভের উচ্চতা হিসাবে সেট করব ' 150px 'এবং এটির চারপাশে সীমানা সামঞ্জস্য করুন' হিসাবে 10px ', ' রিজ ', এবং ' rgb(6, 56, 2) ” শেষ পর্যন্ত, আমরা ফন্ট-আকারটি হিসাবে নির্দিষ্ট করব ' 50px ”
সিএসএস
div {পেছনের রং : rgb ( 238 , 190 , 118 ) ;
উচ্চতা : 150px ;
সীমান্ত : 10px রিজ rgb ( 6 , 56 , দুই ) ;
অক্ষরের আকার : 50px ;
}
উপরে বর্ণিত কোডের আউটপুট নীচে দেওয়া হল। এখানে, আপনি দেখতে পাচ্ছেন যে div এবং চেকবক্স সফলভাবে তৈরি হয়েছে:
এখন, পরবর্তী ধাপে যান যেখানে আমরা ট্রানজিশন প্রপার্টি ব্যবহার করে ডিভি লুকাই এবং দেখাই।
ধাপ 2: রূপান্তর সহ একটি ডিভ দেখান এবং লুকান
এটি করার জন্য, আমরা 'সেটিং করে রূপান্তর প্রভাব সেট করব অস্বচ্ছতা ', এর সময়কাল হিসাবে ' 2 সে ', এবং অস্বচ্ছতার মান হিসাবে ' 0 'ডিভ ক্লাসে আমরা CSS এ তৈরি করেছি:
স্থানান্তর : অস্বচ্ছতা 2 সে ;অস্বচ্ছতা : 0 ;
বিঃদ্রঃ: আমরা 'এ রূপান্তর প্রয়োগ করব অস্বচ্ছতা উপাদানের স্বচ্ছতা সেট করার জন্য সম্পত্তি। এখানে, আমরা এর মান উল্লেখ করব ' 0 ”, যার মানে যখন ট্রানজিশন শুরু হবে, ডিভটি দুই সেকেন্ডের জন্য লুকানো থাকবে।
রূপান্তর মান সেট করার পরে, আমরা ব্যবহার করব ' ইনপুট HTML ফাইলে তৈরি করা ইনপুট টাইপ অ্যাক্সেস করতে এবং ইনপুট উপাদানটির ছদ্ম-শ্রেণী সেট করতে ' : চেক করা হয়েছে ” তারপরে, আমরা তৈরি করা ডিভ অ্যাক্সেস করব এবং ' + ” অপারেটর ডিভ-এর সাথে চেকবক্স যুক্ত করতে ব্যবহার করা হবে। এইভাবে, চেকবক্সে একটি অপারেশন সঞ্চালিত হলে, এর ব্যবহার div-কে প্রভাবিত করবে। এর পরে, আমরা অস্বচ্ছতার মান সেট করব ' 1 ”:
ইনপুট : চেক করা + div {অস্বচ্ছতা : 1
}
বিঃদ্রঃ: আমরা অস্বচ্ছতার মান উল্লেখ করব ' 1 ”, যার অর্থ হল যখন চেকবক্সটি চিহ্নিত করা হবে, তৈরি করা ডিভ দেখানো হবে। তাছাড়া, div লুকানোর জন্য এটিকে আনমার্ক করুন
আপনি দেখতে পাচ্ছেন, ডিভটি দেখানো হয়েছে এবং লুকানো হয়েছে ' স্থানান্তর 'সম্পত্তি এবং' : চেক করা হয়েছে 'ছদ্ম-শ্রেণীর উপাদান:
আমরা সিএসএস-এ ট্রানজিশন প্রপার্টি সহ একটি ডিভ লুকানোর এবং দেখানোর পদ্ধতি ব্যাখ্যা করেছি।
উপসংহার
একটি ডিভ দেখাতে এবং লুকানোর জন্য, ' স্থানান্তর 'সম্পত্তি এবং' : চেক করা হয়েছে ছদ্ম-শ্রেণির উপাদান এমনভাবে ব্যবহার করা হয় যাতে ডিভ অপাসিটির মান হিসাবে সেট করা হয় ' 0 ', এবং ইন : চেক সিউডো-ক্লাস উপাদান, অস্বচ্ছতা ' হিসাবে সেট করুন 1 ” ব্যবহারকারী চেকবক্সে ক্লিক করলে, ডিভি প্রদর্শিত হবে, এবং যখন এটি আনচেক করা হবে, তখন ডিভিটি লুকিয়ে যাবে। এই ম্যানুয়ালটিতে, আমরা ট্রানজিশন প্রপার্টি ব্যবহার করে div লুকানোর এবং দেখানোর পদ্ধতি বর্ণনা করেছি।