CSS3 کے ساتھ تیزی سے اور آسانی سے چمکتا اثرات کو کیسے شامل کریں

زور کے لئے ایک ویب پیج عنصر پر ایک گلو شامل کریں

آپ کے ویب صفحے پر ایک عنصر میں ایک نرم باہر چمک شامل کرنے کا سبب بنتا ہے کہ عنصر کو ناظرین کے سامنے کھڑا ہونا پڑتا ہے. ایک اہم اعتراض کے باہر کناروں کے ارد گرد ایک چمک کو لاگو کرنے کے لئے CSS3 اور ایچ ٹی ایم ایل کا استعمال کریں. اثر فوٹوشاپشاپ میں ایک اعتراض میں شامل بیرونی چمک کی طرح ہے.

سب سے پہلے عنصر کی روشنی میں بنائیں

کسی بھی رنگ کے پس منظر پر گلو اثرات کئے جا سکتے ہیں، لیکن وہ سیاہ پس منظر پر بہترین نظر آتے ہیں کیونکہ اس کے بعد چمک زیادہ چمکتا ہے. اس گول کونے آئتاکارک باکس مثال کے طور پر، ایک ڈیوی ای عنصر کسی دوسرے ڈیوی ای عنصر میں سیاہ پس منظر کے ساتھ رکھی جاتی ہے. بیرونی ڈیوی چمک کے لئے ضروری نہیں ہے، لیکن سفید پس منظر پر چمک دیکھنے کے لئے مشکل ہے.

ڈیوی گلو کی ایک کلاس دے دو


عنصر کا سائز اور رنگ مقرر کریں

جب آپ اس عنصر کو منتخب کرتے ہیں جو آپ چمک کے ساتھ متحرک ہو جائیں گے، آگے بڑھیں اور کسی بھی شیلیوں کو جو آپ چاہتے ہیں شامل کریں ، جیسے پس منظر کا رنگ، سائز، اور فونٹ. یہ مثال نیلے آئتاکار ہے. سائز 147px تک 90px تک مقرر کیا جاتا ہے؛ اور پس منظر کا رنگ # 1f5afe، ایک شاہی نیلے پر مقرر کیا گیا ہے. یہ سیاہ کنٹینر عنصر کے وسط میں عنصر رکھنے کے لئے ایک مارجن شامل ہے.

<سٹائل>
.گلو {
مارجن: آٹو؛
چوڑائی: 147px؛
اونچائی: 90px؛
پس منظر کا رنگ: # 1f5afe؛
}

کارنوں کو گول

گول کونوں کے ساتھ آئتاکار بنانا CSS3 کے ساتھ آسان ہے. سرحد کے ردعمل سٹائل کی جائیداد کو اپنی چمک کلاس میں شامل کریں. سب سے زیادہ مطابقت کے لئے ویب کےٹ-اور -میز-ضمیمہ کا استعمال کرنے کے لئے یاد رکھیں.

ویب کی سرحد-ردعمل: 15px؛
-موز سرحدی ریڈیو: 15px؛
سرحدی ریڈیو: 15px؛

ایک شیڈو شیڈو کے ساتھ گلو شامل کریں

چمک خود کو باکس کی سائے کے ساتھ بنایا جاتا ہے. کیونکہ آپ چاہتے ہیں کہ یہ پورے عنصر کو ہالوو اور ایک سایہ کی طرح ایک طرف چمک نہ ڈالو، آپ افقی اور عمودی لمبائی 0px پر مقرر کرتے ہیں. اس مثال میں، بلور ردعمل 15px پر مقرر کیا جاتا ہے اور دھندلا پھیلا ہوا ہے 5px ہے، لیکن آپ ان کی ترتیبات کے ساتھ فکس کرسکتے ہیں کہ یہ اندازہ کیا جاسکتا ہے کہ آپ کس طرح وسیع اور آپ کو پھیلانا چاہتے ہیں. رنگ آرجیبی (255،255،190) آرجیجیہ الفا شفافیت کے ساتھ 75 فیصد رگبا (255،255،190، .75) پر مشتمل ایک پیلا رنگ ہے. ایک چمک کا رنگ منتخب کریں جو آپ کے منصوبے کے لئے بہترین کام کرتا ہے. کونوں کو راؤنڈ کرنے کے ساتھ، بہترین مطابقت کے لئے براؤزر کے سابقہ ​​(-webkit- and -oz-) استعمال کرنے کے لئے مت بھولنا.

ویبٹ باکس - سائے: 0px 0px 15px 5px rgba (255، 255، 190، .75)؛
مووم باکس - سائے: 0px 0px 15px 5px rgba (255، 255، 190، .75)؛
باکس - سائے: 0 پی ایکس 0 پی ایکس 15px 5px rgba (255، 255، 190، .75)؛

چمک باکس کی جانچ پڑتال کریں

ایک یا زیادہ براؤزرز میں چمک باکس کو آزمائیں اور چمک اثر دینے کے لئے ضروری ایڈجسٹمنٹ بنائیں جو آپ کے ویب صفحہ کے لئے بہترین کام کرتی ہیں.