সিএসএস৩ স্যাডো এফেক্ট - Css3 Shadow Effects


সিএসএস 3.0 এর text-shadowbox-shadow প্রোপার্টি ব্যাবহার করে লেখা বা text কে স্টাইল করা যায়। নিচে text-shadowbox-shadow প্রোপার্টি ব্যাবহার করে ২টি বাবহারিক উদাহরন দেখুন।

text-shadow প্রোপার্টি

CSS
Text Shadow

box-shadow প্রোপার্টি


মাউস হোভার করুন


text-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;
   }

কোড এডিটর



3D Text বা ত্রিমাত্রিক লেখা

সিএসএস এর text-shadow প্রোপার্টিতে একাধিক মান বা value ব্যাবহার করে 3D Text বা ত্রিমাত্রিক লেখা তৈরি করা যায়। নিচে 3D Text এর একটি ব্যাবহারিক উদাহরন দেখুন।

websSchool.com


নিচে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে 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);
   }

কোড এডিটর



box-shadow প্রোপার্টি

সিএসএস 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;

কোড এডিটর


ব্যাখ্যা -


inset কিওয়ার্ড

সিএসএস এর 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