یہ بلاگ HTML عناصر پر شیڈو ایفیکٹس کو لاگو کرنے کے طریقہ کار پر بات کرے گا۔
سی ایس ایس کا استعمال کرتے ہوئے ایچ ٹی ایم ایل ایلیمنٹس پر شیڈو ایفیکٹ کیسے گرائیں؟
' باکس شیڈو ' پراپرٹی ایک عنصر کے ارد گرد ایک سایہ کا اضافہ کرتی ہے جہاں دو یا زیادہ اضافی اثر اقدار کو کوما کے ذریعہ الگ کیا جاسکتا ہے۔
باکس شیڈو پراپرٹی کا نحو ذیل میں بیان کیا گیا ہے۔
نحو
باکس شیڈو : کوئی نہیں |h-offset v-offset دھندلا پھیلاؤ رنگ | inset | ابتدائی | تم وارث ہو ;
مندرجہ بالا نحو کی تفصیل ذیل میں درج ہے:
- ' کوئی نہیں ”: یہ باکس شیڈو پراپرٹی کی ڈیفالٹ ویلیو ہے۔
- ' h-offset ”: یہ قدر افقی فاصلے کی نمائندگی کرتی ہے۔
- ' وی آفسیٹ ”: یہ قدر عمودی فاصلے کی وضاحت کرتی ہے۔
- ' دھندلا ”: تیسری قدر ایک دھندلا پن ہے۔ اس کی قدر کو زیادہ سے زیادہ کرنے سے دھندلا اثر زیادہ ہو جائے گا۔
- ' پھیلنے ”: چوتھی قدر شیڈو پھیلاؤ کی نمائندگی کرتی ہے۔ یہ مثبت یا منفی قدریں رکھ سکتا ہے، جہاں مثبت قدر پھیلاؤ کو بڑھاتی ہے، اور منفی قدر اسے کم کرتی ہے۔
- ' رنگ ”: یہ قدر اختیاری ہے، موجودہ رنگ کی نمائندگی کرتی ہے۔
- ' ابتدائی ”: یہ قدر اس کی ابتدائی قیمت کی خاصیت کا تعین کرتی ہے۔
- ' تم وارث ہو ”: یہ قدر اپنے بنیادی عنصر کی خاصیت کو وراثت میں دیتی ہے۔
- ' inset ”: انسیٹ ویلیو باکس کے اندر سائے بنانے کے لیے استعمال ہوتی ہے۔
آئیے دیکھتے ہیں کہ سائے کا اثر ایک عملی مثال کے ذریعے کیسا لگتا ہے۔
مثال
ایچ ٹی ایم ایل فائل میں، سب سے پہلے، ایک شامل کریں ' ٹیگز شامل کریں۔ اب، شامل کردہ HTML عناصر پر CSS کی خصوصیات کا اطلاق کریں۔ div عنصر پراپرٹی کے ساتھ لاگو ہوتا ہے ' باکس شیڈو 'قیمت کے ساتھ' 3px 8px ”، جو افقی آفسیٹ اور عمودی آفسیٹ کی نمائندگی کرتا ہے۔ آؤٹ پٹ اگلے حصے میں، HTML عناصر کو مختلف خصوصیات کے ساتھ اسٹائل کیا جائے گا۔ Div عنصر پر لاگو اضافی CSS خصوصیات درج ذیل ہیں: اوپر دیا گیا کوڈ div عنصر کو ظاہر کرے گا جیسا کہ ذیل میں دکھایا گیا ہے: اب، اگلے حصے میں، دو بکس بنائیں جو دو div عناصر کی نمائندگی کرتے ہیں۔ ہم ہر ایک کو مختلف متعدد باکس شیڈو اقدار کے ساتھ دیں گے اور نتائج کا مشاہدہ کریں گے۔ یہاں: یہ دیکھا جا سکتا ہے کہ ہم نے box2 div کو انہی خصوصیات کے ساتھ اسٹائل کیا ہے: ' باکس شیڈو HTML عنصر میں متعدد شیڈو اثرات شامل کرنے کے لیے پراپرٹی کا استعمال کیا جا سکتا ہے۔ یہ ہر سائے کے درمیان کوما کا استعمال کرتے ہوئے کیا جا سکتا ہے جیسا کہ ذیل کی مثال میں دکھایا گیا ہے۔ جیسا کہ آپ دیکھ سکتے ہیں، متعدد سائے کامیابی کے ساتھ لاگو کیے گئے ہیں: یہ سب سی ایس ایس بارڈر شیڈو کے استعمال کے بارے میں تھا۔ ' باکس شیڈو سی ایس ایس میں پراپرٹی کو ایچ ٹی ایم ایل عناصر پر شیڈو ایفیکٹ لگانے کے لیے استعمال کیا جاتا ہے۔ یہ خاصیت بنیادی طور پر دو قدروں پر مشتمل ہے جو افقی آفسیٹ اور عمودی آفسیٹ کے لیے ہیں، لیکن متعدد قدریں ہو سکتی ہیں جیسے کہ بلر اثر، پھیلاؤ رداس اثر، رنگ وغیرہ۔ مزید برآں، آپ ہر باکس شیڈو پراپرٹی کے درمیان کوما استعمال کرکے عناصر میں متعدد سائے بھی شامل کرسکتے ہیں۔ اس مضمون نے عملی مثالوں کے ساتھ CSS باکس شیڈو پراپرٹی کی وضاحت کی ہے۔ اور
ایچ ٹی ایم ایل
< div >
< h1 > باکس شیڈو < / h1 >
< ص > باکس شیڈو: 3px 8px < / ص >
< / div >
سی ایس ایس
div {
باکس شیڈو : 3px 8px ;
}
سی ایس ایس
div {
سرحد : 5px ٹھوس آر جی بی ( 255 , 111 , 1 ) ;
باکس شیڈو : 3px 8px 9px 4px #f4af1b ;
}
ایچ ٹی ایم ایل
>
>
سٹائل باکس 1 div
باکس1 {
چوڑائی : 40% ;
اونچائی : 140px ;
سرحد : 5px ٹھوس #ff9c83 ;
باکس شیڈو : 8px 10px 15px 20px #807f7f ;
}
سٹائل باکس 2 div
باکس2 {
چوڑائی : 40% ;
اونچائی : 140px ;
سرحد : 5px ٹھوس آر جی بی ( 255 , 111 , 1 ) ;
باکس شیڈو : inset 4px 8px #f4af1b ;
مارجن-بائیں : 350px ;
}
بونس ٹپ: HTML عنصر پر ایک سے زیادہ سائے شامل کرنا
نتیجہ