সিএসএস 3.0 এর text-shadow ও box-shadow প্রোপার্টি ব্যবহার করে লেখা বা text কে স্টাইল করা যায়। নিচে text-shadow ও box-shadow প্রোপার্টি ব্যাবহার করে ২টি বাবহারিক উদাহরন দেখুন।
সিএসএস 3.0 এর text-shadow প্রোপার্টি ব্যবহার করে কোন text element যেমন - <h1>, <h2>, <p> ইত্যাদি ট্যাগের মধ্যস্থিত লেখা বা text এ ছায়া বা shadow র মত ডিজাইন বা স্টাইল করা যায়।
text-shadow প্রোপার্টিকে বিভিন্ন ভাবে সিএসএস স্টাইল কোডে লেখা যায়। নিচে text-shadow প্রোপার্টিতে বিভিন্ন ভাবে মান বা value লেখার পদ্ধতি গুলোর সিনট্যাক্স উদাহরন সহ দেখুন।
/* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px orange; /* color | offset-x | offset-y | blur-radius */ text-shadow: #C0A 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558ABB; /* color | offset-x | offset-y */ text-shadow: green 2px 5px; /* offset-x | offset-y /* color এবং blur-radius ডিফল্টভাবে ব্যবহৃত হবে*/ text-shadow: 5px 10px;
নোট - কোন এইচটিএমএল এলিমেন্টে একাধিক স্যাডো ইফেক্ট যুক্ত করতে চাইলে এগুলোকে কমা(,) চিহ্ন দিয়ে পৃথক করতে হয়। text-shadow প্রোপার্টি পূর্ব-নির্ধারিত বা default রঙের মান হল কালো।
নোট - ইন্টারনেট এক্সপ্লোরার ৯ এবং এর পূর্ববর্তী সংস্করণ বা version গুলো text-shadow প্রোপার্টি সমর্থন বা support করে না।
text-shadow প্রোপার্টি ব্যাবহার করে লেখা বা text এলিমেন্টে একাধিক ছায়া বা shadow তৈরি করা যায়। এর জন্য প্রোপার্টিতে একটি ছায়ার জন্য মান লেখার পর কমা বা comma অর্থাৎ " , " ছিনহ ব্যাবহার করে আরও অন্য ছায়ার জন্য মান গুলো লেখতে হয়। এভাবে দুই বা ততোধিক মান গুলোর মাঝে কমা বা comma অর্থাৎ " , " ছিনহ ব্যাবহার করে মান গুলোকে পৃথক করা হয়।
নিচে কিছু সিএসএস স্টাইল দেখুন, যেখানে একাধিক ছায়া তৈরি করা হয়েছে।
h1 { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red; }
সিএসএস এর text-shadow প্রোপার্টিতে একাধিক মান বা value ব্যাবহার করে 3D Text বা ত্রিমাত্রিক লেখা তৈরি করা যায়। নিচে 3D Text এর একটি ব্যাবহারিক উদাহরন দেখুন।
নিচে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে text-shadow প্রোপার্টি ব্যাবহার করে একটি 3D Text তৈরি করা হয়েছে।
h1 { font-size: 55px; color: #6666ff; background-color: #66cc66; font-weight: bold; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #ffffff, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }
সিএসএস 3.0 এর box-shadow প্রোপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট, যেমন - div এলিমেন্ট অর্থাৎ <div> ট্যাগ ইত্যাদির চারিপাশে ছায়া বা shadow তৈরি করা যায়।
box-shadow প্রোপার্টিকে বিভিন্ন ভাবে সিএসএস স্টাইল কোডে লেখা যায়। নিচে box-shadow প্রোপার্টিতে বিভিন্ন ভাবে মান বা value লেখার পদ্ধতি গুলোর সিনট্যাক্স সহ উদাহরন দেখুন।
/* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(100, 100, 100, 0.4); /* offset-x | offset-y | blur-radius | color */ box-shadow: 5px 5px 5px green; /* offset-x | offset-y | color */ box-shadow: 15px -10px orange; /* default color */ /* offset-x | offset-y */ box-shadow: 15px -10px;
সিএসএস এর box-shadow প্রোপার্টিতে inset কিওয়ার্ড ব্যাবহার করে ছায়া কে, কোন এইচটিএমএল এলিমেন্টের ভেতরের দিকে দেখানো যায়। box-shadow প্রোপার্টিতে inset কিওয়ার্ড ব্যাবহার করলে এলিমেন্টের ভেতর দিকে ছায়া তৈরি হয়, আর ব্যাবহার না করলে, মনে হবে যেন এলিমেন্টটি ক্রমান্বয়য়ে সামনের দিকে বৃদ্ধি পাচ্ছে।
inset কিওয়ার্ড ব্যাবহার করে নিচে সিএসএস সিনট্যাক্স ও স্টাইল কোড দেখুন।
/* inset | offset-x | offset-y |blur-radius | color */ box-shadow: inset 2px 2px 1em red;
box-shadow প্রোপার্টি ব্যাবহার করে কোন এইচটিএমএল এলিমেন্টে একাধিক ছায়া বা shadow তৈরি করা যায়। এর জন্য প্রোপার্টিতে একটি ছায়ার জন্য মান লেখার পর কমা বা comma অর্থাৎ " , " ছিনহ ব্যাবহার করে আরও অন্য ছায়ার জন্য মান গুলো লেখতে হয়। এভাবে দুই বা ততোধিক মান গুলোর মাঝে কমা বা comma অর্থাৎ " , " ছিনহ ব্যাবহার করে মান গুলোকে পৃথক করা হয়।
নিচে কিছু সিএসএস সিনট্যাক্স ও স্টাইল কোড দেখুন, যেখানে একাধিক ছায়া তৈরি করা হয়েছে।
/* একাধিক স্যাডোকে কমা(,) চিহ্ন দ্বারা পৃথক করতে হয় */ box-shadow: 3px 3px red, -1em 0 0.4em olive;
নিচের টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সমর্থন বা support করে। এছাড়াও এর পরের লাইন -webkit- বা -moz- যুক্ত সংস্করণ বা version গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম সংস্করণ বা version যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।
প্রপার্টি | |||||
---|---|---|---|---|---|
text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
প্রোপার্টি | বর্ণনা |
---|---|
text-shadow | |
box-shadow |