এলিমেন্টে শ্যাডো যোগ করা একটি আকর্ষণীয় হেডার তৈরির একটি অংশ। উদাহরণস্বরূপ, আপনি যদি একটি ওয়েবসাইট ডিজাইন করেন, তবে আপনি প্রতিটি টপ হেডারে শ্যাডো যোগ করতে চাইতে পারেন যাতে হেডারটি ওই ওয়েব পেজের অন্যান্য হেডার টেক্সট থেকে আলাদা দেখা যায়।
এখানেই সিএসএস text-shadow প্রপার্টি কাজে আসে। text-shadow প্রপার্টি আপনাকে একটি টেক্সট এলিমেন্টে শ্যাডো ইফেক্ট যোগ করতে দেয়। এই টিউটোরিয়াল উদাহরণসহ টেক্সট শ্যাডোর বেসিক এবং text-shadow প্রপার্টি কীভাবে ব্যবহার করে একটি ওয়েব পেজে টেক্সটে শ্যাডো যোগ করবেন সে সম্পর্কে আলোচনা করবে।
সিএসএস টেক্সট শ্যাডো
শ্যাডো একটি ওয়েব পেজে একটি এলিমেন্টকে আলাদা করার একটি উপায়। উদাহরণস্বরূপ, সবুজ শ্যাডো সহ একটি টেক্সট লাইন, স্ট্যান্ডার্ড ব্ল্যাক টেক্সটের একটি লাইনের চেয়ে ব্যবহারকারীর চোখ আরও ধরে রাখবে।
text-shadow প্রপার্টি আপনাকে সিএসএসে একটি টেক্সট এলিমেন্টের চারপাশে শ্যাডো যোগ করতে দেয়। আপনি text-shadow এলিমেন্টটি হেডার, প্যারাগ্রাফ টেক্সট, এবং এইচটিএমএলে অন্যান্য টেক্সট-ভিত্তিক এলিমেন্টে প্রয়োগ করতে পারেন।
text-shadow প্রপার্টির বেসিক সিন্ট্যাক্স নিচের মতো:
text-shadow: offset-x offset-y blur-radius color;
text-shadow প্রপার্টির সিন্ট্যাক্স box-shadow প্রপার্টির সিন্ট্যাক্সের সাথে মিলত জুলত, যা বক্স-ভিত্তিক এইচটিএমএল এলিমেন্টে শ্যাডো প্রয়োগ করতে ব্যবহৃত হয়। সিএসএস বক্স শ্যাডো সম্পর্কে আরও জানতে আমাদের সিএসএস বক্স শ্যাডোর বিগিনার গাইড পড়ুন।
text-shadow প্রপার্টির সিন্ট্যাক্সের প্রধান কম্পোনেন্টগুলো নিচে দেওয়া হলো:
offset-xহলো শ্যাডোর হরিজন্টাল (x অক্ষ) অফসেট (প্রয়োজনীয়)।offset-yহলো শ্যাডোর ভার্টিকেল (y অক্ষ) অফসেট (প্রয়োজনীয়)।blur-radiusহলো শ্যাডোর ব্লার ইফেক্টের ব্যাসার্ধ (ঐচ্ছিক)।colorহলো শ্যাডোর রঙ। টেক্সট-শ্যাডোর ডিফল্ট রঙ কালো (ঐচ্ছিক)।
চলুন text-shadow প্রপার্টির কিছু উদাহরণ দেখি কীভাবে এই প্রপার্টি ব্যবহার করে আপনার নিজস্ব টেক্সট শ্যাডো তৈরি করতে পারেন। এই টিউটোরিয়ালের উদ্দেশ্যে, আমরা নিচের এইচটিএমএল এলিমেন্টটি ব্যবহার করব:
<html> <h1>Career Karma</h1> <style> h1 { color: lightblue; }
উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।
আমাদের কোড রান করালে, একটি <h1> এলিমেন্ট রেন্ডার হবে যা স্ক্রিনে Career Karma টেক্সটটি প্রেজেন্ট করবে। <h1> হলো এইচটিএমএল দ্বারা সমর্থিত সবচেয়ে বড় হেডার এলিমেন্ট। আমাদের সিএসএস কোড আমাদের হেডারের color প্রপার্টির মান lightblue সেট করে। এর মানে আমাদের হেডার লাইট ব্লু টেক্সটে প্রদর্শিত হবে।
বেসিক টেক্সট শ্যাডো
text-shadow প্রপার্টি নিয়ে কাজ করার সময় আপনাকে শুধু দুটি রিকোয়ার্ড অ্যাট্রিবিউট নির্দিষ্ট করতে হবে: offset-x এবং offset-y। আপনি যদি এই দুটি প্রপার্টি নির্দিষ্ট করেন, তবে আপনি হরিজন্টাল এবং ভার্টিকাল শ্যাডোযুক্ত টেক্সট তৈরি করতে পারেন।
এখানে এই দুটি মান নির্দিষ্ট করে text-shadow প্রপার্টির একটি উদাহরণ দেওয়া হলো:
<html> <h1>Career Karma</h1> <style> h1 { text-shadow: 1px 1px; }
উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।
আমাদের কোডে, আমরা আমাদের হেডারে একটি সিম্পল text-shadow প্রয়োগ করেছি। এই শ্যাডো হরিজন্টাল এবং ভার্টিকেল অক্ষ উভয়েই 1px অফসেট। আপনি যদি আমাদের কোডের রেজাল্ট দেখেন, তবে আপনি আমাদের টেক্সটের নিচে একটি হালকা কালো শ্যাডো প্রয়োগ করা থাকা দেখতে পাবেন। কালো শ্যাডোর ডিফল্ট রঙ।
শ্যাডো রঙ
যখন আপনি একটি টেক্সট-শ্যাডো ডিজাইন করেন, তবে আপনি besluit নিতে পারেন যে আপনি আপনার শ্যাডোর জন্য একটি কাস্টম রঙ নির্দিষ্ট করবেন। সেখানে color অ্যাট্রিবিউট কাজে আসে।
মান লেইয়া আমরা আমাদের শ্যাডোকে লাইট পিংক করতে চাই। আমরা নিচের কোড ব্যবহার করে আমাদের শ্যাডোর রঙ পিংকে পরিবর্তন করতে পারি:
<html> <h1>Career Karma</h1> <style> h1 { text-shadow: 1px 1px pink; }
উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।
আমাদের কোডে, আমরা color অ্যাট্রিবিউট নির্দিষ্ট করেছি এবং এর মান pink সেট করেছি। এর ফলে আমরা আমাদের টেক্সটের নিচে একটি পিংক শ্যাডো তৈরি করতে পেরেছি। আমাদের প্রথম উদাহরণের মতো, আমাদের শ্যাডো হরিজন্টাল এবং ভার্টিকেল অক্ষ উভয়েই 1px অফসেট।
ব্লার্ড শ্যাডো
text-shadow প্রপার্টি blur-radius অ্যাট্রিবিউটের সাথে কম্বাইন করে একটি ব্লার্ড শ্যাডো তৈরি করতে ব্যবহার করা যায়।
এখন, মান লেইয়া আমরা একটি শ্যাডো তৈরি করতে চাই যা হরিজন্টাল এবং ভার্টিকেল অক্ষ উভয়েই 3px অফসেট এবং শ্যাডোর চারপাশে 2px ব্লার ইফেক্ট থাকে। আমরা নিচের কোড ব্যবহার করে এই শ্যাডোটি তৈরি করতে পারি:
<html> <h1>Career Karma</h1> <style> h1 { text-shadow: 3px 3px 2px pink; }
উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।
আপনি দেখতে পাচ্ছেন, আমাদের শ্যাডো উভয় অক্ষেই 3px অফসেট, এবং আমাদের শ্যাডোর চারপাশে একটি ব্লার ইফেক্ট রয়েছে। আমাদের ব্লার ইফেক্ট আরও तीক্ষ্ণ করতে, আমরা blur-radius অ্যাট্রিবিউটের মান বাড়াতে পারি। যদি আমরা আরও ব্লার শ্যাডো চাই, তবে আমরা blur-radius-এর মান 5px, বা 10px, বা আরও বেশি সেট করতে পারি, আমাদের কাঙ্ক্ষিত ব্লারের উপর নির্ভর করে। এই উদাহরণে, আমাদের শ্যাডো পিংক।
একাধিক শ্যাডো
এখন পর্যন্ত, আমরা text-shadow প্রপার্টি ব্যবহার করে একটি টেক্সট ব্লকে একটি শ্যাডো প্রয়োগ করার কথা আলোচনা করেছি। যাইহোক, text-shadow প্রপার্টিটি একটি টেক্সট এলিমেন্টে একাধিক শ্যাডো যোগ করার জন্যও ব্যবহার করা যায়।
একটি টেক্সট ব্লকে একাধিক শ্যাডো যোগ করতে, আপনাকে শ্যাডোর একটি কমা-সেপারেটেড লিস্ট তৈরি করতে হবে। একাধিক টেক্সট শ্যাডো তৈরির সিন্ট্যাক্স নিচের মতো:
text-shadow: shadowOne, shadowTwo;
আপনি যতই চান ততগুলো শ্যাডো নির্দিষ্ট করতে পারেন, যতক্ষণ না প্রতিটি শ্যাডো কমা দিয়ে আলাদা করা থাকে। যাইহোক, আপনি প্রতিটি শ্যাডোর জন্য যা x-offset এবং y-offset মান নির্দিষ্ট করবেন সেগুলো সময়ের সাথে সাথে বেড়তে হবে, অন্যথায় আপনার শ্যাডোগুলো ওভারল্যাপ হবে এবং দেখা যাবে না।
শ্যাডোগুলো নির্দিষ্ট করা ক্রমেই প্রদর্শিত হবে। সুতরাং, shadowOne shadowTwo-এর আগে দেখাবে।
মান লেইয়া আমরা পিংক এবং অরেঞ্জ শ্যাডোযুক্ত একটি টেক্সট ব্যানার তৈরি করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
<html> <h1>Career Karma</h1> <style> h1 { text-shadow: 3px 3px 2px pink, 6px 6px 5px orange; }
উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।
আমাদের কোডে, আমরা দুটি শ্যাডো নির্দিষ্ট করেছি। এখানে আমরা আমাদের দুটি শ্যাডোর জন্য যে মানগুলো নির্দিষ্ট করেছি সেগুলো:
| প্রপার্টি নাম | শ্যাডো এক | শ্যাডো দুই |
| offset-x | 3px | 6px |
| offset-y | 3px | 6px |
| blur-radius | 2px | 5px |
| color | pink | orange |
আপনি দেখতে পাচ্ছেন, আমরা আমাদের কোডে দুটি শ্যাডো তৈরি করেছি, প্রতিটির ভিন্ন ভিন্ন মান রয়েছে।
উপসংহার
text-shadow প্রপার্টি এইচটিএমএলে একটি টেক্সট ব্লকে শ্যাডো যোগ করতে ব্যবহৃত হয়। টেক্সট শ্যাডো যেকোনো টেক্সট-ভিত্তিক এলিমেন্টে প্রয়োগ করা যেতে পারে যেমন হেডার এবং প্যারাগ্রাফ।
এই টিউটোরিয়াল উদাহরণসহ টেক্সট শ্যাডোর বেসিক এবং text-shadow প্রপার্টি ব্যবহার করে একটি কাস্টম টেক্সট-শ্যাডো তৈরি করার পদ্ধতি আলোচনা করেছে। এখন আপনার নিজস্ব সিএসএস টেক্সট শ্যাডো ডিজাইন করার মতো এক্সপার্ট ওয়েব ডিজাইনারের জ্ঞান আপনার হাতে!
