5 تأثيرات تحوم CSS أنيقة لموقعك على الويب [2023]
تستخدم معظم مواقع الويب الحديثة أوراق الأنماط المتتالية (CSS). تستخدم بعض المواقع ميزات CSS الأساسية ، بينما يستخدم البعض الآخر ميزات متقدمة لجعل تطبيقات الويب الخاصة بهم أكثر جاذبية.
يمكن أن تؤدي إضافة تأثيرات لافتة للنظر إلى تحسين معدل النقر على موقع الويب الخاص بك ، أو حث المستخدمين على اتخاذ إجراء ، أو حتى زيادة مقدار الوقت الذي يقضيه المستخدمون على موقع الويب الخاص بك.
في هذه المقالة ، سنناقش ماهية تأثيرات CSS hover ، وكيف يمكن أن تجعل موقع الويب الخاص بك ملفتًا للنظر ، وكيف يمكنك تنفيذ هذه التأثيرات ، وإعطاء أمثلة لمواقع الويب التي تنفذ تأثيرات تحويم CSS أنيقة.
ما هو تأثير CSS hover؟
يحدث تأثير التمرير في CSS عندما يقوم مستخدم موقع الويب بالتمرير فوق عنصر باستخدام المؤشر (مؤشر الماوس). يمكن أن تكون النتيجة تغييرًا في اللون أو النص أو تأثيرات متحركة أخرى. تتم إضافة هذه التأثيرات إلى موقع ويب لتحسين التفاعل وجعله أكثر قابلية للتنقل.
يمكن أن تظهر تأثيرات التحويم في CSS إما على هيئة انتقالات أو رسوم متحركة.
الانتقالات
تسمح لك هذه التأثيرات بتغيير مظهر أو سلوك عنصر ما على صفحة الويب. ومع ذلك ، يجب أن يكون هناك مشغل ، مثل تمرير المستخدم فوق عنصر معين. تنتقل الانتقالات من الحالة الأولية إلى الحالة النهائية بعد الزناد. يتم تشغيل الانتقال مرة واحدة فقط ولا يسمح لك بتحديد نقاط وسيطة.
الرسوم المتحركة
تحتوي هذه التأثيرات على إطارات مفتاحية تسمح لها بالتكرار للخلف والتكرار والانتقال من الحالة الأولية إلى الحالة النهائية. هذه التأثيرات لها أيضًا حالة وسيطة. يشير الإطار الرئيسي إلى كيفية عرض العناصر المتحركة في وقت معين في تسلسل الرسوم المتحركة.
أنواع تأثيرات التحويم في CSS
يمكن تطبيق تأثيرات التمرير في CSS على النصوص أو الصور أو مقاطع الفيديو أو الروابط أو الأزرار. فيما يلي بعض التطبيقات الرئيسية:
# 1. تأثيرات تمرير النص
تكون هذه التأثيرات مناسبة عندما تريد إنشاء موقع ويب بسيط. يجب أن يكون التصميم بسيطًا ولكن لا يزال ينقل الرسالة. يمكن أن يأتي في الأشكال التالية:
- تأثير النص الطرفي: يحاكي هذا التأثير الكتابة على معالج النصوص. ستومض الكلمات ، ولكن يجب أن تكون السرعة مناسبة بما يكفي للسماح للمستخدمين بالقراءة.
- الرسوم المتحركة للنص: يمكن أن يتدفق النص في هذا التأثير لأعلى أو لأسفل أو جانبيًا.
# 2. رابط تأثيرات التمرير
يحتوي موقع الويب النموذجي على ارتباطات تشعبية متنوعة تعيد توجيه المستخدمين إلى صفحات مختلفة. تستمر هذه الروابط في الازدياد مع نمو الموقع. يمكن أن تأتي تأثيرات تمرير الروابط بهذه الأشكال ؛
- تغيير لون الرابط: لون الارتباط من اللون الأزرق إلى الأحمر.
- تغيير لون الخلفية: يغير هذا التأثير لون خلفية الارتباط.
- تبديل النص: يغير هذا التأثير محتويات أيقونة الرابط.
# 3. تأثيرات تحوم الزر
الأزرار مهمة في مواقع الويب لأنها تسمح لنا بإرسال النماذج والوصول إلى أقسام مختلفة من صفحة الويب. يمكن تنفيذ تأثيرات التمرير على الأزرار في شكل:
- تغيير لون النص: يمكن أن يتغير لون النص الموجود على الزر “انقر فوقي” من الأحمر إلى الأخضر عند التمرير.
- تغيير لون الخلفية: أزرار HTML شفافة بشكل افتراضي. يمكن للمطورين إضافة لون خلفية لهذه الأزرار. عند التمرير ، يمكن أن يتغير لون الخلفية من اللون البني إلى الأخضر.
- تأثير الارتداد: يمكنك إضافة جاذبية مرئية للمستخدم من خلال تصميم الزر للارتداد عند التمرير.
# 4. تأثيرات تحوم الصور
- تبادل الصور: يمكنك إنشاء مجموعة من الصور يتم تبديلها عند المرور فوقها.
- تتلاشى الصور للداخل / الخارج: هذا التأثير يجعل الصور أكثر وضوحًا وأنت تحوم فوقها.
اختبار المبادلة: من الشائع جدًا العثور على مواقع الويب التي تخفي أوصافًا مختلفة على صورها. على سبيل المثال ، يمكن لموقع السفر أن يجعل تفاصيل الفندق مرئية بعد مرور المستخدم.
يمكننا الآن شرح بعض تأثيرات تحويم CSS الأنيقة لموقعك على الويب.
تغيير لون الخلفية على Hover
يمكن تطبيق هذا التأثير على الأزرار أو الروابط أو النص المعروض على صفحة الويب. بمجرد أن يلمس مؤشر الماوس الهدف ، يتغير لون الخلفية.
يمكنك تغيير خلفية النص الخاص بك في هذه الخطوات ؛
- الاستخدام: تحوم فوق الطبقة الزائفة لتحقيق أهدافك
- أنشئ عنصرًا مثل div أو الزر أو الرابط حيث ستنفذ تأثير التمرير.
هذا نموذج تعليمة برمجية لتطبيق هذه التأثيرات.
ملف HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> Hover and see me change!!!!! </div </body> </html>
ملف CSS
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
قبل التمرير ، سيكون الخارج ؛
بعد التمرير ، سيكون الناتج ؛
تغيير لون الارتباط عند التمرير
الروابط هي عناصر مهمة على صفحة الويب لأنها تساعدنا على الانتقال من صفحة إلى أخرى. نستخدم علامات HTML لإنشاء ارتباطات تشعبية. يؤدي تغيير لون الارتباط عند التمرير إلى زيادة رؤية الروابط.
نحتاج إلى ما يلي لإثبات هذا التأثير:
- قم بإنشاء علامة محدد على: علامة الرأس أو علامة الجسم
- تعريف: تحوم فئة زائفة
يمكنك استخدام نموذج التعليمات البرمجية هذا لعرض ارتباط يتغير من الأخضر إلى البرتقالي عند التمرير.
ملف HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> <a href="#">Hover over me and see the magic</a> </div </body> </html>
ملف CSS:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}
الإخراج قبل التمرير ؛
الإخراج بعد تأثير التمرير ؛
انزلاق تسليط الضوء على Hover
عندما يقوم المستخدم بالمرور ، فإن هذا التأثير سيضيف ظل مربع إلى الارتباط المضمن. سيتم تغيير لون الارتباط في العملية. لتحقيق ذلك ، يمكنك اتباع هذه الخطوات كدليل لك ؛
- أضف حشوة حول الرابط (شيء مثل 0 .25rem يمكن أن يعمل)
- أضف هامشًا بقيمة مماثلة. هذا يمنع الحشو من تعطيل تدفق النص.
يمكنك الحصول على هذا كملف html بسيط:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <a href="#">admingate.org</a> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> </body> </html>
يمكن أن يكون هذا ملف CSS الخاص بك ؛
a {
box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
color: #ff4000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
color: #ff4000;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
}
قبل تأثير التمرير ؛
بعد تأثير التمرير ؛
تسطير قوس قزح عند التمرير
يضيف هذا التأثير تسطيرًا بألوان متعددة إلى النص عند التمرير.
- استخدم: فئة زائفة للتدرج الخطي لإنشاء انتقال سلس بين الألوان المختلفة.
- الاستخدام: تحوم فوق الطبقة الزائفة لتحقيق أهدافك.
- قم بإنشاء عنصر ارتباط حيث ستقوم بتنفيذ تأثير التمرير.
هذا نموذج من التعليمات البرمجية لتنفيذ تسطير قوس قزح عند التمرير:
ملف HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <div> <p>This is <a href="#">Rainbow</a> hover effect. </p> </div </body> </html>
ملف CSS:
p {
max-width: 800px;
margin: auto 15%;
line-height: 1.1;
font-size: 78px;
font-weight: 700;
letter-spacing: .0125em;
color: black;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
z-index: 1;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: .07em;
height: .1em;
width: 100%;
background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
z-index: -1;
transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
height: .2em;
}
p {
font-size: 58px;
}
قبل التمرير
بعد تحوم
تبادل النص عند التمرير
اختبار المبادلة هو عندما يتم تبديل النص بجزء آخر من المحتوى أو النص عندما يقوم المستخدم بالتمرير فوق الهدف. وخير مثال على ذلك هو المكان الذي يحتوي فيه موقع الويب على رابط “تعليقات”. بعد التمرير ، يمكن أن يتغير نص الرابط إلى “تعليق”.
لتنفيذ تبديل النص عند التمرير ، تحتاج إلى ما يلي:
- :: before and :: after pseudo-element- هذه تُنشئ عنصرًا منفصلاً للنص ليتم تبديله بعد التمرير.
- : التمرير فوق عنصر زائف يغير موضع أو رؤية المحتوى عند التمرير
هذا توضيح لكيفية تنفيذ هذا التأثير:
ملف HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css"> </head> <body> <button><span>99 comments</span></button> </body> </html>
ملف CSS:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }
قبل التمرير
بعد تحوم
مواقع الويب ذات تأثيرات التحويم الرائعة
إذا كنت ترغب في استعارة الأفكار والحصول على بعض الإلهام ، فهذه بعض المواقع التي يمكنك التحقق منها.
# 1. كانفا
يعد Canva اسمًا ضخمًا في عالم التصميم لأنه يساعد غير المصممين على إنشاء تصميمات جميلة. يحتوي موقع الويب هذا على تأثيرات تحوم رائعة ، من الصفحة الرئيسية إلى صفحات المنتج. يبدأ كل شيء بخلفية ضبابية داكنة على الصفحة الرئيسية. ومع ذلك ، يتم مسح الخلفية عند التمرير وتصبح الصور مرئية. تظهر تأثيرات التمرير أيضًا عند اختيار قوالب تصميم مختلفة.
# 2. هاوس
يعد Haus مثالاً ممتازًا على موقع يقوم بتنفيذ التسطير عند التمرير ، وتبديل النص عند التمرير ، وتغيير لون الخلفية عند التمرير.
# 3. مينوركس
تنفذ Mainworks كلاً من الحركات والانتقالات لتأثيرات التحويم الخاصة بها. تتمثل بعض التأثيرات الملحوظة في تبديل النص عند التمرير وتغيير لون النص وتكبير النص والصور عند التمرير.
خاتمة
يعتمد اختيار تأثيرات التمرير لإضافتها إلى موقع الويب الخاص بك على نوع موقع الويب الخاص بك ومهاراتك وذوقك وتفضيلاتك. قد ترحب بعض المواقع ، مثل منصات الفن والقسائم ، بتأثيرات التحويم الفائقة البراقة. من ناحية أخرى ، قد تختار المواقع القانونية والطبية الحد الأدنى من تأثيرات التحويم.
وبالتالي ، يجب عليك معرفة ما يصلح لموقع الويب الخاص بك. ومع ذلك ، تأكد من أن هذه التأثيرات تتوافق مع ألوان علامتك التجارية. تحقق من أفضل موارد CSS لدينا لصقل مهاراتك في CSS.
