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



সিএসএস ৩ এর text-shadow এবং box-shadow নামে ২টি প্রপার্টি ব্যবহার করে যেকোনো এলিমেন্টে বা এলিমেন্টের টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করা যায়।


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

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


প্রত্যেকটি স্যাডোর মধ্যে দুই বা তিনটি length ভ্যালু থাকে এবং এর পরেই color ভ্যালু থাকে। প্রথম দুটি length ভ্যালু হলো offset-x এবং offset-y অর্থাৎ x অক্ষ এবং y অক্ষ থেকে টেক্সট স্যাডোর অবস্থান।

তৃতীয় ঐচ্ছিক length ভ্যালু হলো blur-radius, blur-radius এর ভ্যালু যত বেশী হবে blur ও তত বড় হবে। টেক্সট স্যাডোর বিস্তৃতি বাড়বে এবং স্যাডো হালকা হবে ও

color ভ্যালু হলো স্যাডোর কালার, এর ডিফল্ট রঙ হল কালো।

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

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

নোট - ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্ববর্তী ভার্সনে text-shadow প্রোপার্টি সাপোর্ট করে না।


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

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

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

উদাহরণ

h1{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}


নিচে একটি উদাহরণ দেখুন যেখানে কয়েকটি স্যাডো ইফেক্ট ব্যবহার করে 3D-Text তৈরি করা হয়েছে।

উদাহরণ

h1{
font-size:55px;
color:#6666ff;
background-color:#66cc66;
font-weight:bold;
text-align:center;
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 প্রোপার্টি

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

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 তৈরি করার জন্য নিচের প্যারামিটারগুলো ব্যবহার করতে হয়। দুই, তিন বা ৪টি প্যারামিটার ব্যবহার করে box-shadow তৈরি করা যায় -

যদি শুধুমাত্র দুটি ভ্যালু দেওয়া হয় তাহলে ভ্যালু দুটি যথাক্রমে offset-x(অনুূভূমিক) এবং offset-y(উলম্ব) ভ্যালুকে নির্দেশ করে। যদি ৩টি প্যারামিটার উল্লেখ করা হয় তবে ৩য় ভ্যালুটি blur-radius নির্ধারণ করে। যদি ৪টি প্যারামিটার উল্লেখ করা হয় তবে ৪র্থ প্যারামিটারটি spread-radius নির্ধারণ করে।

inset একটি ঐচ্ছিক কীওয়ার্ড। এটি ব্যবহার না করলে এমন স্যাডো তৈরি হবে যেন মনে হবে বক্স সামনের দিকে বৃদ্ধি পাচ্ছে। আর এটি বিদ্যমান থাকলে বর্ডারের ভিতরে স্যাডো তৈরি হবে।

color একটি ঐচ্ছিক ভ্যালু। এটি দ্বারা স্যাডোর জন্য রঙ বা color নির্ধারণ করা হয়। এর ডিফিল্ট কালার কালো।

নিচে box-shadow প্রপার্টির উদাহরণ দেখুন -

উদাহরণ

#example-01{box-shadow: 12px 12px teal;}

#example-02{box-shadow: 12px 12px 5px red;}

#example-03{box-shadow: inset 2px 2px 1em gold;}




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

টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সাপোর্ট করে। এছাড়াও এর পরের লাইন -webkit- বা -moz- যুক্ত ভার্সন গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম ভার্সন যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
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একটি এলিমেন্টে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করে।






এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.