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