css3 তে বেশ কিছুই নতুন টেক্সট ইফেক্টস আছে।
এই অধ্যায়ে আপনারা নিচের অধ্যায়গুলো সম্পর্কে জানবেন-
- text-shadow
- word-wrap
ব্রাউজার সাপোর্ট (Browser Support)
এই প্রপার্টি দুটো css3 ভার্সন, তাই সকল নতুন বা latest version এর ব্রাউজার গুলো সাপোর্ট করবে।
নিম্নে দেয়া browser version গুলি প্রাথমিক version যা এই property কে সম্পূর্ণ সমর্থন করে।
সংখ্যা -o- দ্বারা browser version নির্দেশ করা হয়েছে-
| প্রোপার্টি |
 |
 |
 |
 |
 |
 |
| text-overflow |
4.0 |
12.0 |
6.0 |
7.0 |
3.1 |
11.0 |
| word-wrap |
23.0 |
12.0 |
5.5 |
3.5 |
6.1 |
12.1 |
| word-break |
4.0 |
12.0 |
5.5 |
15.0 |
3.1 |
15.0 |
text-shadow
কোন কিছুর Shadow বা ছায়া তৈরি করতে আপনাকে চারটা জিনিস ব্যাখ্যা করে দিতে হবে যথা- horizontal shadow, the vertical shadow, the blur distance, এবং the color of the shadow বা ছায়াটির রং কি হবে।
উদাহরণ-
h1{
text-shadow: 5px 5px 5px #ff0000;
}
আপনি color code এবং value গুলো পরিবর্তন করে কোন value এর কারনে কোন পরিবর্তন আসছে তা দেখে নিতে পারেন।
CSS3 Word Wrapping
যখন একটা word বা শব্দ অনেক বড় হয়, যা এরিয়ার ভিতর আঁটানো যায়না তখন শব্দটা বাইরে চলে যায়।
css3 তে word wrap প্রপার্টিটা শব্দটিকে তার area এর ভিতরে চেপে ঢুকতে বাধ্য করে, এতে যদি অন্য কোন শব্দের মাঝখানে ঢুকে যায় তবুও।
উদাহরণ-
P{
word-wrap: break-word;
}
নিম্নে কিছু টেক্সট প্রপার্টি (CSS3 Text Properties) দেয়া হল
- hanging-punctuation = এটি ব্যাখ্যা করে যে কোন punctuation charecter কে বক্স এর বাইরে অবস্থান করান যায় কি না। কিন্তু এই প্রপার্টি কোন ব্রাউজার এখনো সাপোর্ট করে না।
- punctuation-trim = কোন punctuation character কে ছাটার ক্ষেত্রে এটি ব্যবহার করা যায়। কিন্তু এই প্রপার্টি কোন ব্রাউজার এখনো সাপোর্ট করে না।
- text-overflow = যখন কোন প্রপার্টি overflow করে তখন এই প্রপার্টি ব্যবহার করা যায়।
- text-shadow = এই প্রপার্টি টি যে কোন text বা শব্দের shadow বা ছায়া ৈরি করে।
- word-break = এটি সাধারণত লাইন ভাঙার কাজ করে।
- word-wrap = খুব বড় শব্দগুলোকে ভেঙে পরের লাইন তৈরি করে।
