CSS Box Shadow پراپرٹی کی بنیادی تفہیم
ویب ڈیزائننگ میں عناصر کو گہرائی اور حقیقت پسندی دینے کے لیے box-shadow ایک بنیادی CSS پراپرٹی ہے۔ یہ پراپرٹی کسی بھی HTML عنصر کے فریم کے گرد ایک یا ایک سے زیادہ سائے بنانے کی سہولت دیتی ہے۔ ایک عام سایہ عنصر کے باہر گرتا ہے، جیسے کسی ابھرے ہوئے کارڈ کے پیچھے روشنی ہو۔ اس کے برعکس، جب ڈیزائن میں اندرونی سائے کی ضرورت ہو تو یہ پراپرٹی سائے کو عنصر کے اندرونی حصے میں منتقل کر دیتی ہے۔
سائے کا درست استعمال ویب پیج پر موجود عناصر کے درمیان بصری درجہ بندی (visual hierarchy) قائم کرنے میں مدد دیتا ہے۔ مثال کے طور پر، ہلکے اور چوڑے سائے کسی عنصر کو صفحے سے اوپر اٹھا ہوا دکھاتے ہیں، جبکہ گہرے اور چوڑے سائے قریبی تعلق کو ظاہر کرتے ہیں۔
آفسیٹ، بلر اور اسپرینڈ کے اثرات
باکس شیڈو کی ساخت کو کنٹرول کرنے کے لیے چار بنیادی عددی اقدار استعمال ہوتی ہیں جنہیں سلائیڈرز کی مدد سے ایڈجسٹ کیا جاتا ہے:
- افقی آفسیٹ: یہ سلائیڈ سائے کو بائیں یا دائیں جانب منتقل کرتی ہے۔ اس کی رینج -50px سے 50px تک ہے۔ منفی قدر سائے کو بائیں طرف اور مثبت قدر دائیں طرف لے جاتی ہے۔
- عمودی آفسیٹ: یہ سلائیڈ سائے کو اوپر یا نیچے منتقل کرتی ہے۔ اس کی رینج -50px سے 50px تک ہے۔ منفی قدر سائے کو اوپر اور مثبت قدر نیچے کی طرف منتقل کرتی ہے۔
- دھندلا پن (Blur): یہ سلائیڈ سائے کے کناروں کو نرم کرتی ہے۔ اس کی رینج 0px سے 100px تک ہے۔ 0px پر سائے کے کنارے بالکل تیز اور ٹھوس ہوتے ہیں، جبکہ قدر بڑھانے سے کنارے دھندلے اور نرم ہو جاتے ہیں۔
- پھیلاؤ: یہ سلائیڈ دھندلا کرنے سے پہلے سائے کو پھیلاتی یا سکیڑتی ہے۔ اس کی رینج -50px سے 50px تک ہے۔ مثبت قدر سائے کا سائز بڑھاتی ہے، جبکہ منفی پھیلاؤ سائے کو اندر کی طرف کھینچتا ہے۔
ان سلائیڈرز کے ساتھ سائے کا رنگ (color picker) اور شفافیت (Opacity) کو بھی کنٹرول کیا جاتا ہے تاکہ سائے کو پس منظر کے ساتھ ہم آہنگ کیا جا سکے۔
اندرونی سایہ (Inset) بمقابلہ بیرونی سایہ
عام طور پر box-shadow عنصر کے بیرونی کناروں پر لاگو ہوتا ہے جس سے وہ صفحے سے ابھرا ہوا محسوس ہوتا ہے۔ لیکن جب انٹرفیس میں کسی عنصر کو دبا ہوا دکھانا مقصود ہو، تو اندرونی سایہ (Inset) کا استعمال کیا جاتا ہے۔
جب "اندرونی سایہ (Inset)" کا آپشن فعال کیا جاتا ہے، تو یہ سائے کو عنصر کے اندر کی طرف موڑ دیتا ہے۔ یہ اثر خاص طور پر درج ذیل ڈیزائنز کے لیے کارآمد ہے:
- دھنسے ہوئے ان پٹ فیلڈز (sunken inputs) بنانے کے لیے۔
- دبائے گئے بٹنوں (pressed buttons) کی حالت کو ظاہر کرنے کے لیے۔
- فریم کے اندر گہرائی کا احساس پیدا کرنے کے لیے۔
متعدد لیئرز کے ذریعے گہرائی اور حقیقت پسندی پیدا کرنا
حقیقی زندگی میں سائے کبھی بھی ایک یکساں پرت کی شکل میں نہیں ہوتے۔ ایک واحد سایہ ایک خاص سائز کے بعد سپاٹ (flat) نظر آتا ہے۔ حقیقی بلندی اور گہرائی کا اثر حاصل کرنے کے لیے متعدد سائے کی لیئرز کو ایک دوسرے کے اوپر اسٹیک (stack) کیا جاتا ہے۔
یہ ٹول پہلے سے پانچ لیئرز رینڈر کرتا ہے۔ ان میں سے پہلی لیئر فعال ہوتی ہے جس کی ڈیفالٹ اقدار درج ذیل ہیں:
- افقی آفسیٹ:
0 - عمودی آفسیٹ:
8 - دھندلا پن:
24 - پھیلاؤ:
-4 - رنگ اور شفافیت: 18% transparent black
باقی چار لیئرز ابتدا میں پوشیدہ ہوتی ہیں۔ جب آپ "لیئر شامل کریں" پر کلک کرتے ہیں تو ڈیفالٹ اقدار کے ساتھ ایک نئی لیئر شامل ہو جاتی ہے۔ متعدد لیئرز کا استعمال کرتے ہوئے، آپ ایک گہرا چست سایہ اور ایک ہلکا چوڑا سایہ ملا کر انتہائی حقیقت پسندانہ اثرات تیار کر سکتے ہیں۔ جب متعدد لیئرز موجود ہوں تو تیار شدہ CSS کوڈ میں ان کی اقدار کو کوما (comma) سے الگ کر کے پیش کیا جاتا ہے۔ کسی بھی غیر ضروری پرت کو "لیئر ہٹائیں" بٹن کے ذریعے ختم کیا جا سکتا ہے۔
ڈیٹا پروسیسنگ اور رازداری کی معلومات
اس ٹول کا استعمال مکمل طور پر مقامی سطح پر ہوتا ہے۔ ہر سایہ آپ کے براؤزر میں رینڈر ہوتا ہے۔ آپ کی سیٹ کی ہوئی کوئی بھی چیز BroBroGo پر اپ لوڈ نہیں کی جاتی، جس سے آپ کے ڈیزائن پیرامیٹرز آپ کے مقامی براؤزر تک ہی محدود رہتے ہیں۔
عام سوالات (FAQ)
offset، blur اور spread اصل میں کس چیز کو کنٹرول کرتے ہیں؟
Offset سائے کو بائیں/دائیں اور اوپر/نیچے منتقل کرتا ہے، blur اس کے کناروں کو نرم کرتا ہے، اور spread دھندلا کرنے سے پہلے اسے پھیلاتا یا سکیڑتا ہے۔ منفی spread سائے کو اندر کی طرف کھینچتا ہے، جو کہ ایک چست اور قریبی سائے کے لیے مفید ہے۔
inset آپشن کیا کرتا ہے؟
ایک عام سایہ عنصر کے باہر گرتا ہے، جیسے کسی ابھرے ہوئے کارڈ کے پیچھے روشنی ہو۔ Inset اسے اندر کی طرف موڑ دیتا ہے، جس سے عنصر دبا ہوا محسوس ہوتا ہے — یہ دھنسے ہوئے ان پٹس یا دبائے گئے بٹنوں کے لیے کارآمد ہے۔
ایک سے زیادہ سائے کی لیئرز کیوں استعمال کریں؟
ایک واحد سایہ ایک خاص سائز کے بعد سپاٹ (flat) نظر آتا ہے۔ حقیقی بلندی عام طور پر ایک گہرے سائے اور ایک ہلکے، چوڑے سائے کا مجموعہ ہوتی ہے — یہ اثر حاصل کرنے کے لیے دوسری لیئر شامل کریں اور دونوں کو الگ الگ ایڈجسٹ کریں۔
منفی پھیلاؤ (negative spread) کا کیا فائدہ ہے؟
منفی پھیلاؤ سائے کے حجم کو عنصر کے اصل سائز سے چھوٹا کر دیتا ہے۔ یہ تکنیک تب انتہائی مفید ثابت ہوتی ہے جب آپ کو کسی عنصر کے بالکل نیچے ایک باریک اور چست سایہ بنانا ہو، جس سے وہ سطح کے انتہائی قریب محسوس ہو۔