সিএসএস(৩) shadow ব্যবহার করে আপনি যেকোনো এলিমেন্টে বা এলিমেন্টের টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন।

নিম্নে যথাক্রমে text-shadow এবং box-shadow প্রোপার্টির ব্যবহার দেখানো হলোঃ

এক নজরে সিএসএস(৩) স্যাডো প্রোপার্টি

সিএসএস(৩) text-shadow প্রোপার্টি

সিএসএস(৩)text-shadow প্রোপার্টি ব্যবহার করে আপনি যেকোনো টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন।

একটি এলিমেন্টে একাধিক স্যাডো ইফেক্ট যুক্ত করতে চাইলে এগুলোকে কমা(,) চিহ্ন দ্বারা পৃথক করতে হবে। স্যাডো ইফেক্টের ডিফল্ট কালার কালো থাকে।

/* 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 প্রোপার্টির একাধিক স্যাডোকে কমা(,) চিহ্ন দ্বারা আলাদা করতে হয়।

• প্রত্যেকটি স্যাডোর মধ্যে দুই বা তিনটি length ভ্যালু থাকে এবং এর পরেই color ভ্যালু থাকে। প্রথম দুটি length ভ্যালু হলো offset-x এবং offset-y অর্থাৎ x অক্ষ এবং y অক্ষ থেকে টেক্সট স্যাডোর অবস্থান
• এবং তৃতীয় ঐচ্ছিক length ভ্যালু হলো blur-radius। blur-radius এর ভ্যালু যত বেশী হবে blur ও তত বড় হবে; টেক্সট স্যাডোর বিস্তৃতি বাড়বে এবং স্যাডো হালকা হবে।
• আর color ভ্যালু হলো স্যাডোর কালার। ডিফল্ট কালার কালো।

যখন একের অধিক স্যাডো দেওয়া হয় তখন front-to-back অর্থাৎ সামনে থেকে পিছনে স্যাডোর প্রয়োগ ঘটে, যেখানে প্রথম নির্ধারিত স্যাডো সবার উপরে বা সম্মুখে থাকে।

এই প্রোপার্টিটি ::first-line এবং ::first-letter সুডো(pseudo) এলিমেন্টেও প্রয়োগ করা যায়।

নিম্নের উদাহরণে বিভিন্ন প্রকার স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1500

একাধিক স্যাডো

একটি টেক্সটে একাধিক স্যাডো যুক্ত করার জন্য আপনাকে text-shadow প্রোপার্টিতে স্যাডো ইফেক্টের ভ্যালুগুলো ক্রমান্বয়ে একাধিক বার লিখতে হবে এবং ভ্যালু গুলোকে আলাদা করার জন্য কমা(,) চিহ্ন ব্যবহার করতে হবে।

নিম্নের উদাহরণে একাধিক স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1508

3D-Text Effect

নিম্নের উদাহরণে একাধিক স্যাডো ইফেক্ট ব্যবহার করে 3D-Text তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=1510

সিএসএস(৩) box-shadow প্রোপার্টি

সিএসএস(৩) box-shadow প্রোপার্টি ব্যবহার করে আপনি যে কোনো এলিমেন্টে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন। একাধিক স্যাডো ইফেক্টকে কমা দ্বারা পৃ্থক করতে হয়।

বক্স-স্যাডোর বিভিন্ন সিনট্যাক্স

/* 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 | offset-x | offset-y |blur-radius | color */
box-shadow: inset 2px 2px 1em red;
/* একাধিক স্যাডোকে কমা(,) চিহ্ন দ্বারা পৃথক করতে হয় */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

একটি একক box-shadow তৈরি করার জন্য নিম্নোক্ত প্যারামিটার বা ভ্যালুগুলো ব্যবহার করতে হয়।

• দুই, তিন বা ৪টি length ভ্যালু দেওয়া যেতে পারেঃ
  • যদি শুধুমাত্র দুটি ভ্যালু দেওয়া হয় তাহলে ভ্যালু দুটি যথাক্রমে offset-x(অনুূভূমিক) এবং offset-y(উলম্ব) ভ্যালুকে নির্দেশ করে।
  • যদি ৩য় ভ্যালু দেওয়া হয় তাহলে এটি blur-radius কে নির্দেশ করে।
  • যদি ৪র্থ ভ্যালু দেওয়া হয় তাহলে এটি spread-radius কে নির্দেশ করে।
• ঐচ্ছিক inset কীওয়ার্ড। এটি না ব্যবহার করলে এমন স্যাডো তৈরি হবে যেন মনে হবে বক্স সামনের দিকে বৃদ্ধি পাচ্ছে। আর এটি বিদ্যমান থাকলে বর্ডারের ভিতরে স্যাডো তৈরি হবে।
• ঐচ্ছিক color ভ্যালু। এটি দ্বারা স্যাডোর জন্য কালার নির্ধারণ করা হয়। ডিফিল্ট কালার কালো।

নিম্নের উদাহরণে বিভিন্ন প্রকার বক্স স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1521

::before এবং ::after এর ব্যবহার

আরও আকর্ষনীয় ইফেক্ট তৈরি করতে আপনি স্যাডোর সাথে ::before এবং ::after সুডো-ক্লাস(pseudo-class) যুক্ত করতে পারেনঃ

kt_satt_skill_example_id=1526

বক্স-স্যাডোর মাধ্যমে কার্ড তৈরি

আপনি box-shadow প্রোপার্টি ব্যবহার করে যেকোনো এলিমেন্টকে কার্ডে রুপান্তর করাতে পারবেন।

নিম্নে বিভিন্ন প্রকার কার্ড তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=1530

ব্রাউজার সাপোর্ট