يسعى تصميم الويب الحديث دائما إلى أن يكون مشرقا وجذابا وتفاعليا. تتمثل إحدى طرق تحقيق ذلك في وجود أزرار متوهجة تجذب انتباه المستخدمين وتجعل واجهة المستخدم أكثر جاذبية. في هذه المقالة ، سوف نلقي نظرة مفصلة على كيفية إنشاء أزرار متوهجة على صفحة ويب باستخدام هتمل و كس.
الخطوة الأولى هي إنشاء زر باستخدام علامة في هتمل. على سبيل المثال:
انقر لي
الخطوة الثانية هي إضافة تأثير توهج إلى الزر باستخدام كس. للقيام بذلك ، نستخدم خاصية مربع الظل. على سبيل المثال ، يمكنك إضافة التعليمات البرمجية التالية إلى أنماط كس:
زر {
مربع الظل: 0 0 10 بكسل رغبا (255 ، 255 ، 0 ، 0.8);
}
يضيف هذا الرمز ظلا أصفر حول الزر ، مما يخلق تأثير توهج. نحن نستخدم قيمة رغبا لتعيين شفافية الظل لخلق تأثير أكثر سلاسة وأكثر طبيعية.
- إنشاء أزرار متوهجة: خطوة بخطوة
- اختيار إطار كس الصحيح
- تطبيق تأثير متوهج على زر
- سؤال وجواب
- كيف يمكنني جعل أزرار توهج?
- كيف يمكنني تخصيص أزرار متوهجة تروق لي?
إنشاء أزرار متوهجة: خطوة بخطوة
إذا كنت ترغب في إضافة تأثير مثير للاهتمام وجذاب إلى الأزرار الموجودة على موقع الويب الخاص بك ، فيمكنك جعلها تتوهج. لإنشاء أزرار متوهجة ، سوف تحتاج إلى بعض المعرفة الأساسية من هتمل و كس. في هذه المقالة ، سنخبرك كيف يمكنك إنشاء أزرار متوهجة خطوة بخطوة.
- إنشاء بنية هتمل للزر: ابدأ بإنشاء عنصر زر باستخدام علامة. لهذا الزر ، يمكنك إضافة أي نص داخل العلامات.
- إضافة أنماط كس للزر: يمكن تخصيص مظهر الزر باستخدام أنماط كس. إضافة فئة للزر وتحديد أنماط لهذه الفئة بحيث يصبح تأثير متوهجة مرئية.
- إنشاء الرسوم المتحركة كس لتأثير متوهجة: لخلق تأثير متوهجة ، تحتاج إلى إنشاء الرسوم المتحركة على أساس كس. يمكنك استخدام خصائص الانتقال أو الرسوم المتحركة لإضافة رسوم متحركة إلى الزر. على سبيل المثال ، يمكنك تغيير لون خلفية الزر أو التعتيم عند تحريك المؤشر.
- تطبيق الأنماط والرسوم المتحركة على الزر: استخدم محدد كس لتحديد الزر حسب فئته وتطبيق أنماط ورسوم متحركة معينة باستخدام خاصية الرسوم المتحركة أو الانتقال.
لقد تعلمت الآن الخطوات الأساسية لإنشاء أزرار متوهجة على موقع الويب الخاص بك. محاولة تجريب خصائص المغلق مختلفة والرسوم المتحركة لخلق تأثيرات متوهجة فريدة من نوعها للأزرار الخاصة بك.
اختيار إطار كس الصحيح
هناك عدد كبير من أطر كس التي توفر أنماط ومكونات جاهزة لإنشاء أزرار وعناصر واجهة أخرى بسرعة. عند اختيار إطار مناسب ، يجب مراعاة العوامل التالية:
- الغرض من المشروع: إذا كان مشروعك صغيرا ومجموعة صغيرة من الأنماط الجاهزة تناسبك ، فيمكنك اختيار إطار مع الحد الأدنى من مجموعة المكونات. على سبيل المثال ، أطر مثل الهيكل العظمي أو بوريكس.
- تعقيد المشروع: إذا كان المشروع يتطلب عددا كبيرا من المكونات وبنية معقدة ، فإن الأمر يستحق اختيار إطار مع مجموعة واسعة من الأنماط والمكونات الجاهزة. على سبيل المثال ، التمهيد أو الأساس.
- نمط التصميم: إذا كان المشروع يتطلب نمط تصميم معين ، فأنت بحاجة إلى اختيار إطار يلبي هذه المتطلبات. على سبيل المثال ، واجهة المستخدم المادية لتصميم المواد.
- المرونة: إذا كنت بحاجة إلى القدرة على تخصيص أنماط الإطار وتوسيعها ، فمن الأفضل اختيار إطار عمل به وثائق جيدة وقاعدة مستخدمين كبيرة. على سبيل المثال ، التمهيد.
من المهم أن نتذكر أن استخدام إطار كس يبسط تطوير واجهة ويزيد من سرعة التنمية ، ولكن يمكن أن يؤدي إلى تكرار التعليمات البرمجية والمشاكل المحتملة مع دمج التعليمات البرمجية الموجودة.
قبل اختيار إطار كس ، يجب عليك مراجعة وثائقها ، وأمثلة الاستخدام والتأكد من أنها تلبي متطلبات المشروع الخاص بك. من المفيد أيضا الاطلاع على المراجعات والتوصيات من مطورين آخرين.
| العنوان | الرابط | الهدف | التعقيد | أسلوب التصميم | المرونة |
|---|---|---|---|---|---|
| هيكل عظمي | http://getskeleton.com/ | المشاريع الصغيرة | منخفض | العالمي | منخفض |
| بوريكس | https://purecss.io / | المشاريع الصغيرة | منخفض | العالمي | متوسطة |
| التمهيد | https://getbootstrap.com/ | أي مشاريع | عالية | العالمي | عالية |
| مؤسسة | https://foundation.zurb.com/ | مشاريع معقدة | عالية | العالمي | عالية |
| المواد-واجهة المستخدم | https://material-ui.com/ | مشاريع في أسلوب تصميم المواد | المتوسط | تصميم المواد | المتوسط |
اختيار إطار كس الصحيح يعتمد على متطلبات المشروع الخاص بك وتفضيلاتك. كل إطار له مزاياه وقيوده الخاصة ، لذلك من المهم دراستها وتقييمها بعناية قبل اتخاذ القرار النهائي.
تطبيق تأثير متوهج على زر
يعد التأثير المتوهج على الزر طريقة رائعة لجذب انتباه المستخدم وجعل تفاعل موقع الويب الخاص بك أكثر جاذبية. في هذا القسم ، سنوضح لك كيفية تطبيق تأثير متوهج على زر باستخدام هتمل و كس.
هنا تعليمات خطوة بخطوة:
- . اكتب النص داخل العلامة التي يجب عرضها على الزر.
- إضافة فئة أو معرف إلى الزر بحيث يمكن تحديدها باستخدام كس.
- إنشاء أنماط كس للزر باستخدام الفئة أو المعرف المحدد. قم بتعيين لون الخلفية ولون النص والحدود وجميع خصائص النمط الضرورية الأخرى.
- في نمط كس الخاص بك للزر. حدد قيم خصائص النمط الجديد التي سيتم تطبيقها عندما يحوم المؤشر فوق الزر.
- لإنشاء تأثيرات مختلفة عند الضغط على زر أو عند التركيز عليه من لوحة المفاتيح.
مثال على كود هتمل:
انقر لي
مثال على أنماط كس:
.متوهجة-زر {
لون الخلفية: # وما يليها 9900;
اللون: # ففف;
الحدود: 2 بكسل الصلبة # فف 9900;
الحشو: 10 بكسل 20 بكسل;
}
.متوهجة-زر: تحوم {
لون الخلفية: # ففك 00;
اللون: #000000;
}
في هذا المثال ، سيكون للزر خلفية برتقالية ونص أبيض. عندما تحوم فوق الزر ، ستتحول الخلفية إلى اللون البرتقالي الفاتح ، وسيتغير لون النص إلى الأسود.
استخدم هذه التعليمات لتطبيق تأثير متوهج على زر على موقع الويب الخاص بك وجعله أكثر جاذبية وتفاعلية للمستخدمين.
سؤال وجواب
كيف يمكنني جعل أزرار توهج?
لجعل الأزرار توهج ، يمكنك استخدام مربع الخاصية المغلق-الظل أو النص-الظل لخلق تأثير توهج. يمكنك أيضا استخدام جافا سكريبت لإضافة وإزالة الفئات التي ستحدد تأثير التوهج عند التمرير أو النقر فوق الزر.
كيف يمكنني تخصيص أزرار متوهجة تروق لي?
لتخصيص أزرار متوهجة ترضيك ، يمكنك استخدام خصائص المغلق من مربع الظل والنص الظل لضبط قيم الظلال والألوان توهج. يمكنك تجربة قيم مختلفة لتحقيق التأثير المطلوب.