توهج خارجي ناعم يضاف إلى عنصر على صفحة الويب الخاصة بك يجعل العنصر بارزًا للمشاهد. يستخدم CSS3 و HTML لتطبيق توهج حول الحواف الخارجية لكائن مهم. التأثير مشابه للتوهج الخارجي المضاف إلى كائن في محل تصوير.
قم بإنشاء عنصر للتوهج
تعمل تأثيرات التوهج على أي خلفية ، لكنها تبدو أفضل على الخلفيات المظلمة لأنه بعد ذلك يبدو التوهج أكثر وميضًا. في مثال مربع مستطيل الزاوية مستدير الزوايا ، يتم وضع عنصر DIV في عنصر DIV آخر بخلفية سوداء. عنصر DIV الخارجي ليس ضروريًا للتوهج ، ولكن من الصعب رؤية التوهج على خلفية بيضاء.
اضبط حجم العنصر ولونه
بعد أن تختار العنصر الذي ستزينه بالوهج ، أضف الأنماط إليها ، مثل لون الخلفية والحجم والخطوط.
هذا المثال مستطيل أزرق. تم ضبط الحجم على 147 بكسل × 90 بكسل ؛ ويتم ضبط لون الخلفية على # 1f5afe ، وهو أزرق ملكي. يتضمن هامشًا لوضع العنصر في منتصف عنصر الحاوية السوداء.
جولة الزوايا
يعد إنشاء مستطيل بزوايا مستديرة أمرًا سهلاً باستخدام CSS3. أضف خاصية نمط border-radius إلى فئة التوهج الخاصة بك. فقط تذكر استخدام
–webkit- و - موز - البادئات لأعلى توافق.-webkit-border-radius: 15px؛
-موز حدود نصف قطرها: 15 بكسل ؛
نصف قطر الحدود: 15 بكسل ؛
أضف الوهج مع مربع الظل
يتم إنشاء التوهج نفسه بظل مربع. نظرًا لأنه يحيط بالعنصر بأكمله بدون إسقاط التوهج من جانب واحد مثل الظل ، اضبط الأطوال الأفقية والرأسية على 0 بكسل.
في هذا المثال ، تم ضبط نصف قطر التمويه على 15 بكسل وانتشار التمويه 5 بكسل ، ولكن يمكنك العبث بهذه الإعدادات لتحديد مدى انتشار التوهج الذي تريده. اللون RGB (255،255،190) هو لون أصفر مع ضبط شفافية RGBa alpha على 75 بالمائة—rgba (255،255،190، .75). اختر لونًا متوهجًا يناسب مشروعك بشكل أفضل. كما هو الحال مع تقريب الزوايا ، لا تنس استخدام بادئات المتصفح (–webkit- و - موز -) للحصول على أفضل توافق.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255، 255، 190، .75) ؛
-moz-box-shadow: 0px 0px 15px 5px rgba (255، 255، 190، .75) ؛
مربع الظل: 0px 0px 15px 5px rgba (255 ، 255 ، 190 ، .75) ؛