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