এই ব্লগটি HTML উপাদানগুলিতে ছায়া প্রভাব প্রয়োগ করার পদ্ধতি নিয়ে আলোচনা করবে।
সিএসএস ব্যবহার করে এইচটিএমএল এলিমেন্টে শ্যাডো ইফেক্ট কিভাবে ড্রপ করবেন?
দ্য ' বক্স-ছায়া ” সম্পত্তি একটি উপাদানের চারপাশে একটি ছায়া যোগ করে যেখানে দুই বা ততোধিক যুক্ত প্রভাব মান কমা দ্বারা পৃথক করা যেতে পারে।
বক্স-শ্যাডো সম্পত্তির সিনট্যাক্স নীচে বর্ণিত হয়েছে।
বাক্য গঠন
বক্স-ছায়া : কোনটি |h-অফসেট v-অফসেট ব্লার স্প্রেড রঙ | ইনসেট | প্রাথমিক | উত্তরাধিকারী ;
উপরে উল্লিখিত সিনট্যাক্সের বিবরণ নীচে তালিকাভুক্ত করা হয়েছে:
- ' কোনটি ”: এটি বক্স-শ্যাডো সম্পত্তির ডিফল্ট মান।
- ' h-অফসেট ”: এই মান অনুভূমিক দূরত্ব প্রতিনিধিত্ব করে।
- ' v-অফসেট ”: এই মানটি উল্লম্ব দূরত্ব নির্ধারণ করে।
- ' ঝাপসা ”: তৃতীয় মানটি একটি অস্পষ্টতা। এর মান সর্বাধিক করা অস্পষ্ট প্রভাবকে সর্বাধিক করবে।
- ' ছড়িয়ে পড়া ”: চতুর্থ মান ছায়া বিস্তার প্রতিনিধিত্ব করে. এটি ইতিবাচক বা নেতিবাচক মান ধারণ করতে পারে, যেখানে ধনাত্মক মান স্প্রেড বাড়ায় এবং একটি নেতিবাচক মান এটি হ্রাস করে।
- ' রঙ ”: এই মানটি ঐচ্ছিক, বর্তমান রঙের প্রতিনিধিত্ব করে।
- ' প্রাথমিক ”: এই মানটি তার প্রাথমিক মানের বৈশিষ্ট্য নির্ধারণ করে।
- ' উত্তরাধিকারী ”: এই মানটি তার মূল উপাদানের সম্পত্তির উত্তরাধিকারী হয়।
- ' ইনসেট ”: ইনসেট মান বাক্সের ভিতরে ছায়া তৈরি করতে ব্যবহৃত হয়।
একটি ব্যবহারিক উদাহরণের মাধ্যমে ছায়ার প্রভাবটি কেমন দেখায় তা দেখা যাক।
উদাহরণ
HTML ফাইলে, প্রথমে একটি যোগ করুন ' ট্যাগ যোগ করুন। এখন, যোগ করা HTML উপাদানগুলিতে CSS বৈশিষ্ট্যগুলি প্রয়োগ করুন। div উপাদানটি বৈশিষ্ট্যের সাথে প্রয়োগ করা হয় ' বক্স-ছায়া 'মান সহ' 3px 8px ”, যা অনুভূমিক অফসেট এবং উল্লম্ব অফসেট প্রতিনিধিত্ব করে। আউটপুট পরবর্তী বিভাগে, এইচটিএমএল উপাদানগুলি বিভিন্ন বৈশিষ্ট্য সহ স্টাইল করা হবে। নিম্নলিখিত অতিরিক্ত CSS বৈশিষ্ট্য div উপাদান প্রয়োগ করা হয়: উপরে প্রদত্ত কোডটি নীচের মত div উপাদান প্রদর্শন করবে: এখন, পরবর্তী বিভাগে, দুটি ডিভ উপাদানের প্রতিনিধিত্বকারী দুটি বাক্স তৈরি করুন। আমরা প্রতিটিকে বিভিন্ন একাধিক বক্স-শ্যাডো মান দিয়ে দেব এবং ফলাফলগুলি পর্যবেক্ষণ করব। এখানে: এটা লক্ষ্য করা যায় যে আমরা একই বৈশিষ্ট্য সহ box2 div স্টাইল করেছি: দ্য ' বক্স-ছায়া একটি HTML এলিমেন্টে একাধিক শ্যাডো ইফেক্ট যোগ করতে প্রপার্টি ব্যবহার করা যেতে পারে। নীচের উদাহরণে দেখানো প্রতিটি ছায়ার মধ্যে কমা ব্যবহার করে এটি করা যেতে পারে: আপনি দেখতে পাচ্ছেন, একাধিক ছায়া সফলভাবে প্রয়োগ করা হয়েছে: যে সব CSS সীমানা ছায়া ব্যবহার সম্পর্কে ছিল. দ্য ' বক্স-ছায়া HTML উপাদানগুলিতে ছায়া প্রভাব প্রয়োগ করতে CSS-এর সম্পত্তি ব্যবহার করা হয়। এই বৈশিষ্ট্যটি প্রধানত দুটি মান নিয়ে গঠিত যা অনুভূমিক অফসেট এবং উল্লম্ব অফসেটের জন্য, তবে একাধিক মান থাকতে পারে যেমন ব্লার প্রভাব, স্প্রেড রেডিয়াস প্রভাব, রঙ এবং আরও অনেক কিছু। তাছাড়া, আপনি প্রতিটি বক্স-শ্যাডো সম্পত্তির মধ্যে কমা ব্যবহার করে উপাদানগুলিতে একাধিক ছায়া যোগ করতে পারেন। এই নিবন্ধটি ব্যবহারিক উদাহরণ সহ CSS বক্স-শ্যাডো বৈশিষ্ট্য ব্যাখ্যা করেছে। এবং
এইচটিএমএল
< div >
< h1 > বক্স ছায়া < / h1 >
< পি > বক্স-ছায়া: 3px 8px < / পি >
< / div >
সিএসএস
div {
বক্স-ছায়া : 3px 8px ;
}
সিএসএস
div {
সীমান্ত : 5px কঠিন rgb ( 255 , 111 , 1 ) ;
বক্স-ছায়া : 3px 8px 9px 4px #f4af1b ;
}
এইচটিএমএল
>
>
শৈলী বক্স1 ডিভ
#বক্স১ {
প্রস্থ : 40% ;
উচ্চতা : 140px ;
সীমান্ত : 5px কঠিন #ff9c83 ;
বক্স-ছায়া : 8px 10px 15px 20px #807f7f ;
}
শৈলী বক্স2 ডিভ
#বক্স২ {
প্রস্থ : 40% ;
উচ্চতা : 140px ;
সীমান্ত : 5px কঠিন rgb ( 255 , 111 , 1 ) ;
বক্স-ছায়া : ইনসেট 4px 8px #f4af1b ;
মার্জিন-বাম : 350px ;
}
বোনাস টিপ: HTML এলিমেন্টে একাধিক ছায়া যোগ করা
উপসংহার