ڈراپ شیڈو ایک ایسا اثر ہے جو ویب پیج پر پیش کیے جانے پر منتخب HTML عناصر کے پیچھے سایہ ڈالتا ہے یا شامل کرتا ہے۔ یہ اثر استعمال کرتے ہوئے حاصل کیا جا سکتا ہے ' ڈراپ شیڈو() 'سی ایس ایس کی قدر کے طور پر طریقہ' فلٹر 'پراپرٹی یا استعمال کرتے ہوئے' باکس شیڈو ' جائیداد. 'باکس شیڈو' کی خاصیت کو استعمال کرتے ہوئے، بصری اضافہ، صارف کا تجربہ، زور، اور توجہ کو ایک مخصوص ہدف والے HTML عنصر کی طرف مبذول کیا جا سکتا ہے۔
یہ گائیڈ باکس شیڈو پراپرٹی کا استعمال کرتے ہوئے ڈراپ شیڈو اثر بنانے کے طریقہ کار کو ظاہر کرتا ہے:
-
- باکس شیڈو پراپرٹی کا استعمال کرتے ہوئے ٹھوس ڈراپ شیڈو بنائیں
- باکس شیڈو پراپرٹی کا استعمال کرتے ہوئے ایک دھندلا ڈراپ شیڈو بنائیں
- ڈراپ شیڈو ایریا کو پھیلائیں۔
باکس شیڈو پراپرٹی کا استعمال کرتے ہوئے CSS3 میں ڈراپ شیڈو کیسے بنائیں؟
' باکس شیڈو پراپرٹی ڈویلپر کو صفحہ پر عناصر کی نسبتہ پوزیشن کی نشاندہی کرکے ایک بصری درجہ بندی قائم کرنے کی اجازت دیتی ہے۔ اس کے استعمال سے، ویب صفحہ بنانے والے عناصر کو زیادہ انٹرایکٹو احساس دیتے ہوئے، سطحوں پر سایہ ڈالنے والی اشیاء کا بھرم پیدا کر سکتے ہیں۔
نحو
'باکس شیڈو' پراپرٹی کا ایک نحو ہے:
باکس شیڈو: [ افقی آفسیٹ ] [ عمودی آفسیٹ ] [ دھندلا رداس ] [ پھیلاؤ رداس ] [ رنگ ] ;
مندرجہ بالا نحو میں استعمال شدہ اصطلاحات کی وضاحت:
-
- ابتدائی طور پر، ' افقی آفسیٹ 'X-axis پوزیشن کو بازیافت/محفوظ کرتا ہے، اور' منفی ” قدر سائے کو بائیں اور اس کے برعکس سیٹ کرتی ہے۔
- ' عمودی آفسیٹ ' ویلیو Y-axis پوزیشن کو اسٹور کرتی ہے، ' مثبت 'قدر نیچے کی سمت میں سائے کو سیٹ کرتی ہے، اور اس کے برعکس' کے معاملے میں منفی ' قدر.
- اگلا، ' دھندلا رداس ” قدر جیسا کہ نام سے ہے سائے کی دھندلاپن کا تعین کرتا ہے۔
- ' پھیلاؤ رداس ” قدر بتاتی ہے کہ سائے کو کتنا رداس پھیلانا چاہیے۔
- ' رنگ 'سائے کا رنگ سیٹ کرتا ہے، یہ اس میں ہو سکتا ہے' ایچ ایس ایل 'یا' آر جی بی ' فارمیٹ بھی۔
اب، آئیے بہتر تفہیم کے لیے چند مثالوں پر غور کریں:
مثال 1: باکس شیڈو پراپرٹی کا استعمال کرتے ہوئے سالڈ ڈراپ شیڈو کا اطلاق کریں۔
ٹھوس ڈراپ شیڈو کو ترتیب دینے کے لیے، صرف سمتوں اور سائے کا رنگ ایک قدر کے طور پر ڈالا جاتا ہے۔ باکس شیڈو جائیداد:
< انداز >.boxShadowExample {
چوڑائی: 210px؛
بارڈر: 2px ٹھوس کارنسلک؛
اونچائی: 210px؛
پس منظر کا رنگ: #f0f0f0;
باکس شیڈو: 10px 10px جنگلاتی سبز؛
}
انداز >
مندرجہ بالا کوڈ میں:
-
- سب سے پہلے، HTML عنصر کا انتخاب کیا جاتا ہے جس کی کلاس ' باکس شیڈو کی مثال ' اور قدر ' 210px 'کو فراہم کیا جاتا ہے' اونچائی 'اور' چوڑائی خصوصیات اس کے علاوہ، استعمال کریں ' سرحد 'اور' پس منظر کا رنگ بہتر تصور کے لیے خصوصیات۔
- اگلا، 'کی قدر مقرر کریں 10px 10px جنگلاتی سبز ' کرنے کے لئے ' باکس شیڈو سی ایس ایس پراپرٹی۔ ' 10px ” افقی اور عمودی آفسیٹ ہے جو اس جگہ کا تعین کرتا ہے جہاں سائے کو لاگو کرنے کی ضرورت ہے۔ اور ' جنگل سبز 'سائے کا رنگ ہے۔
تالیف کے بعد، ویب صفحہ اس طرح ظاہر ہوتا ہے:
آؤٹ پٹ اس بات کی تصدیق کرتا ہے کہ باکس شیڈو پراپرٹی کا استعمال کرتے ہوئے ٹھوس قسم کا ڈراپ شیڈو رکھا گیا ہے۔
مثال 2: باکس شیڈو پراپرٹی کا استعمال کرتے ہوئے بلری ڈراپ شیڈو کا اطلاق کریں۔
پہلے سے لاگو سائے کو دھندلا بنانے کے لیے، رنگ سے پہلے ایک اور عددی قدر ڈالی جاتی ہے۔ باکس شیڈو ' جائیداد. ذیل میں اپ ڈیٹ کردہ کوڈ ملاحظہ کریں:
< انداز >.boxShadowExample {
چوڑائی: 210px؛
بارڈر: 2px ٹھوس کارنسلک؛
اونچائی: 210px؛
پس منظر کا رنگ: سفید دھواں؛
باکس شیڈو: 10px 10px 15px جنگلاتی سبز؛
}
انداز >
مندرجہ بالا کوڈ کے مطابق، سایہ اب ہے ' 15px 'دھندلا ہوا. تالیف کے مرحلے کے اختتام کے بعد، ویب صفحہ اس طرح نظر آتا ہے:
مندرجہ بالا اعداد و شمار سے پتہ چلتا ہے کہ سایہ اب دھندلا ہوا ہے۔
مثال 3: ڈراپ شیڈو ایریا کو بڑھانا
اسپریڈ ویلیو کو فراہم کیا جاتا ہے ' باکس شیڈو سائے کے علاقے کو پھیلانے کے لیے پراپرٹی۔ پھیلاؤ کی قدر عددی شکل میں ہونی چاہیے۔ نیچے دیئے گئے کوڈ کے ٹکڑوں کی طرح، شیڈو ریجن کو بڑھا کر ' 20px ”:
< انداز >.boxShadowExample {
چوڑائی: 210px؛
بارڈر: 2px ٹھوس کارنسلک؛
اونچائی: 210px؛
پس منظر کا رنگ: سفید دھواں؛
باکس شیڈو: 10px 10px 15px 20px جنگلاتی سبز؛
}
انداز >
پھانسی کے بعد، ڈراپ شیڈو اب اس طرح ظاہر ہوتا ہے:
جیسا کہ آپ دیکھ سکتے ہیں کہ سائے کا علاقہ اب 20px تک بڑھ گیا ہے۔
نتیجہ
' باکس شیڈو ' جائیداد کو تخلیق کے لیے استعمال کیا جاتا ہے ' ڈراپ شیڈو منتخب HTML عناصر پر اثر۔ ' ڈراپ شیڈو جائیداد پانچ اقدار کو قبول کرتی ہے، افقی آفسیٹ '،' عمودی آفسیٹ '،' دھندلا رداس '،' پھیلاؤ رداس 'اور' رنگ ' 'افقی آفسیٹ' اور 'عمودی آفسیٹ' قدریں سائے کے لیے طول و عرض کا تعین کرتی ہیں جہاں سے ڈراپ شیڈو ابھرنا چاہیے۔ 'بلر ریڈیئس' ویلیو شیڈو کو دھندلا بناتی ہے اور 'اسپریڈ ریڈیس' ویلیو سائے کے علاقے کو پھیلا دیتی ہے۔