تتمثل إحدى طرق جعل موقع الويب تفاعليا وفعالا في تغيير لون الصورة عند تحريك المؤشر فوقه. هذه تقنية بسيطة ولكنها فعالة يمكنها جذب انتباه الزوار وإنشاء تأثيرات بصرية إضافية.
لتحقيق هذا التأثير ، يمكننا استخدام كس ، وهي واحدة من لغات النمط الأكثر شيوعا والتي يسهل تعلمها. باستخدام كس ، يمكننا تعيين اللون الرئيسي للصورة ، وكذلك تحديد لون جديد عند تحوم المؤشر.
كيف نفعل ذلك? بادئ ذي بدء ، تحتاج إلى تحديد الفئة أو المعرف الذي سيتم تطبيقه على الصورة المقابلة. ثم نستخدم الفئة الزائفة:تحوم لتحديد لون جديد عند تحريك المؤشر. على سبيل المثال:
.الصورة: تحوم {
تصفية: الرمادي (100٪);
}
في هذا المثال ، استخدمنا خاصية تصفية كس لتطبيق تأثير سب (أبيض وأسود)على الصورة عند تحريك المؤشر. يمكنك تخصيص خصائص التصفية وفقا لتفضيلاتك ومتطلبات التصميم.
الآن ، في بضعة أسطر من التعليمات البرمجية ، يمكنك بسهولة تغيير لون الصورة عند تحريك المؤشر باستخدام كس. تتيح لك هذه الطريقة البسيطة والفعالة إضافة التفاعل والأناقة إلى موقع الويب الخاص بك ، وجذب انتباه المستخدمين وإنشاء واجهة أكثر سهولة في الاستخدام ولا تنسى.
- تغيير لون الصورة على تحوم: لماذا هذا ضروري?
- طريقة سهلة لتغيير لون الصورة من خلال كس
- طريقة فعالة لتغيير لون الصورة باستخدام مرشحات كس
- تغيير لون الصورة عند التمرير على الأجهزة المحمولة
- كيفية اختيار اللون المناسب لتغيير الصورة عند التمرير
- خيارات إضافية لتغيير لون الصورة عند التمرير
- سؤال وجواب
- كيف يمكنني تغيير لون صورة على تحوم باستخدام المغلق?
- ما بناء الجملة يجب أن تستخدم لتغيير لون صورة على تحوم?
- ما هي الخصائص الأخرى التي يمكن تغييرها عند التمرير فوق صورة?
- كيفية إجراء انتقال سلس للون عند التمرير فوق صورة?
تغيير لون الصورة عند التمرير: لماذا هذا ضروري?
يعد تغيير لون الصورة عند التمرير أحد التأثيرات الشائعة المستخدمة على نطاق واسع على مواقع الويب. يساعد هذا التأثير على إضافة التفاعل والجاذبية إلى العناصر المرئية للصفحة.
في كثير من الأحيان ، يتم استخدام تغيير لون الصورة عند التمرير من أجل:
- تسليط الضوء على العناصر التفاعلية. عند التمرير فوق صورة ، قد يتغير اللون للإشارة إلى المستخدم أنه يمكنه النقر فوق هذا العنصر أو عرض معلومات أكثر تفصيلا عنه.
- تسليط الضوء على المحتوى. إذا كانت هناك عدة صور على الصفحة ، فإن تغيير اللون عند التمرير يساعد في جذب انتباه المستخدم إلى صور معينة.
- زيادة المشاركة. القدرة على تغيير اللون على تحوم يخلق التفاعل وعنصر اللعبة ، والتي يمكن أن تزيد من مستوى تفاعل المستخدم مع صفحة الويب.
من المهم ملاحظة أنه عند تغيير لون الصورة عند التمرير ، يجب الحفاظ على تناسق التصميم ومزاج الصفحة. وينبغي الجمع بين الألوان مع النمط العام والغلاف الجوي للموقع. أيضا ، لا تسيء استخدام هذا التأثير لتجنب التحميل الزائد على التأثيرات المرئية وإرهاق المستخدم.
طريقة سهلة لتغيير لون الصورة من خلال كس
يهتم العديد من المطورين والمصممين بجعل الصورة على صفحة الويب الخاصة بهم تغير لونها عند التمرير فوقها. هذا يمكن أن يجذب انتباه الزوار ويضيف التفاعل إلى التصميم.
لتحقيق هذا الهدف ، يمكنك استخدام طريقة بسيطة وفعالة باستخدام كس. أولا ، يجب أن يكون لديك صورة يتغير لونها عند تحريك المؤشر.
- قم بإنشاء العنصر حيث تريد وضع الصورة.
- إضافة فئة كس أو معرف لهذا العنصر لتعيين الأنماط بسهولة.
- استخدم كس لتعيين اللون الأولي للعنصر عند تحميل الصفحة.
- إضافة عنصر زائف :تحوم لهذا العنصر ، حيث يمكنك تحديد لون صورة جديد.
هنا مثال على رمز كس الذي يوضح هذا النهج:
. صورتي {
اللون: أحمر ؛ / * اللون الأصلي للعنصر */
}
. صورتي: تحوم {
اللون: أزرق ؛ / * اللون الجديد للعنصر عند التمرير */
}
نتيجة لهذه الخطوات ، ستغير الصورة لونها إلى اللون المحدد في كس عند التمرير فوق المؤشر. لن تحتاج إلى إنشاء صور منفصلة لكل ولاية.
يمكنك الآن استخدام هذه الطريقة البسيطة لتغيير لون الصورة عند التمرير فوق موقع الويب الخاص بك أو تطبيق الويب. تذكر أنها مجرد واحدة من الطرق العديدة لتحقيق هذا الهدف ويمكن استكمالها أو تعديلها حسب احتياجاتك. حظاً موفّقاً!
طريقة فعالة لتغيير لون الصورة باستخدام مرشحات كس
مقدمة:
مرشحات كس هي أداة قوية تسمح لك بتطبيق تأثيرات مختلفة على عناصر صفحة الويب ، بما في ذلك تغيير لون الصورة. واحدة من أكثر الطرق فعالية لتغيير لون صورة على تحوم هو استخدام مرشحات كس.
الخطوات:
- إنشاء صفحة ويب مع العنصر الذي تريد تطبيق تأثير تغيير لون الصورة على تحوم.
- إضافة فئة أو معرف لهذا العنصر.
- حدد الأنماط لهذه الفئة أو المعرف في ورقة أنماط كس.
- أضف خاصية" التصفية "والقيمة" السطوع(0.7) " لفئة أو معرف للحد من سطوع الصورة.
- أضف المحدد": تحوم "بعد الفئة أو المعرف وحدد قيمة جديدة لخاصية" التصفية " لتغيير لون الصورة عند التمرير.
مثال:
|
.الصورة: تحوم {
مرشح: لا شيء;
}
الشرح:
في هذا المثال ، يتم إنشاء كتلة مع فئة "صورة" ، والتي لها الأبعاد المحددة وصورة الخلفية. في البداية ، باستخدام خاصية" التصفية "ووظيفة" السطوع(0.7) " ، تصبح الصورة أقل سطوعا.
@شاشة الوسائط فقط و (أقصى عرض: 768 بكسل) {
/ * أنماط للأجهزة المحمولة */
}
يمكنك إضافة أنماط داخل استعلام الوسائط التي سيتم تطبيقها فقط على الأجهزة المحمولة. لتغيير لون الصورة عند التمرير ، يمكنك استخدام فئة زائفة
: تحوم
. داخل فئة زائفة
@شاشة الوسائط فقط و (أقصى عرض: 768 بكسل) {
}
}
في هذا المثال ، عند التمرير فوق صورة باستخدام فئة زائفة
: تحوم
- سوف يتغير اللون إلى اللون الأحمر. يمكنك استبدال
- القيمة الحمراء
- مع اللون المطلوب.
- وبالتالي ، عن طريق إضافة استعلام وسائط وأنماط مع الزائفة
- - فئة: تحوم
بداخله ، يمكنك تغيير لون الصورة عند التمرير على الأجهزة المحمولة.
كيفية اختيار اللون المناسب لتغيير الصورة عند التمرير
يعد تغيير لون الصورة عند التمرير فوقها بمؤشر الماوس أحد أكثر تأثيرات تصميم الويب شيوعا. لإنشاء تأثير جذاب وفعال ، تحتاج إلى اختيار اللون المناسب لاستخدامه عند التمرير.
فيما يلي بعض النصائح لمساعدتك في اختيار اللون المناسب:
مطابقة العلامة التجارية: إذا كانت لديك علامة تجارية بألوان معينة ، فمن المستحسن اختيار أحد هذه الألوان لتغيير الصورة عند التمرير. سيساعد هذا في التأكيد على العلامة التجارية وإنشاء نمط موحد.
نسبة التباين: يجب أن يكون اللون الذي تختاره متناقضا بما فيه الكفاية فيما يتعلق باللون الأصلي للصورة. سيسمح هذا للمستخدمين بملاحظة التغيير بسهولة وجذب انتباههم.
التأثير العاطفي: يمكن أن تثير الألوان المختلفة مشاعر مختلفة. اختر اللون الذي يناسب أهدافك والمزاج الذي تريد نقله. على سبيل المثال ، يمكن أن يرتبط اللون الأحمر بالطاقة والعاطفة ، بينما يمكن أن يرتبط اللون الأزرق بالثقة والهدوء.
انتبه إلى السياق: ضع في الاعتبار لون الخلفية أو العناصر الأخرى التي ستتفاعل معها الصورة. يجب أن يتطابق اللون جيدا ويبرز على الخلفية.
استخدم أدوات مطابقة الألوان: هناك العديد من الأدوات عبر الإنترنت التي ستساعدك على اختيار اللون المناسب ، مثل اللوحات أو مولدات الألوان. أنها تسمح لك لعرض مجموعات مختلفة وتجربة مع نظام الألوان.
نتيجة لذلك ، سيساعدك اختيار اللون المناسب لتغيير الصورة عند التمرير على إنشاء تأثير جذاب وفعال يجذب انتباه المستخدمين ويجعل موقع الويب الخاص بك أكثر تفاعلية.
خيارات إضافية لتغيير لون الصورة عند التمرير
كما سبق ذكره ، باستخدام كس ، يمكنك تغيير لون الصورة عند تحريك المؤشر فوقها. ولكن بعد ذلك ، هناك العديد من الطرق الأخرى التي يمكن أن تعطي تأثيرا أكثر إثارة وإبداعا.
واحدة من هذه الطرق هي استخدام مرشحات كس. باستخدام مرشحات كس ، يمكنك تغيير ليس فقط اللون ، ولكن أيضا خصائص الصورة الأخرى مثل السطوع والتشبع والتباين ، الخ. هذا يسمح لك لخلق تأثيرات غير عادية التي تعطي الصور الأصالة والحيوية.
ميزة أخرى مثيرة للاهتمام هي إنشاء الرسوم المتحركة عند تغيير لون الصورة. باستخدام كس الرسوم المتحركة ، يمكنك تعيين حالة الانتقال السلس للون الصورة عند تحوم ، والتي سوف تخلق تأثير تغيير اللون على نحو سلس.
تجدر الإشارة أيضا إلى أنه باستخدام جافا سكريبت ، يمكنك تنفيذ تأثيرات أكثر تعقيدا لتغيير لون الصورة عند تحريك المؤشر. على سبيل المثال ، يمكنك إنشاء تأثير إزاحة أو تغيير الشفافية ، وكذلك استخدام تقنيات متقدمة أخرى لتغيير اللون.
تتيح لك كل هذه الميزات إنشاء تأثيرات فريدة ومبتكرة عند تغيير لون الصورة عند تحريك المؤشر. إنها تسمح لك بلفت انتباه المستخدم إلى عناصر معينة من الصفحة وجعلها أكثر تفاعلية وجاذبية.