Hover

تحوم.css

مجموعة من تأثيرات التمرير المدعومة بـ CSS3 ليتم تطبيقها على الروابط والأزرار والشعارات وSVG والصور المميزة وما إلى ذلك. يمكنك تطبيقه بسهولة على العناصر الخاصة بك أو تعديلها أو استخدامها فقط للإلهام. متوفر في CSS، Sass، وLESS.

تجريبي | درس تعليمي

محتويات

• تنزيل/تثبيت
• كيفية الاستخدام
  • أ. نسخ التأثير ولصقه
  • ب. المرجع Hover.css
  • ملاحظة حول خاصية العرض
  • استخدام تأثيرات الأيقونات
• ما هو مدرج؟
  • المغلق
  • سسس / أقل
  • آخر
• دعم المتصفح
• استخدام الناخر للتنمية
• استخدام Sass/LESS للتطوير
  • _hacks
  • _mixins
  • _خيارات
• المساهمة في Hover.css
• التراخيص
  • رخصة تجارية
  • ترخيص مفتوح المصدر
• استأجر إيان لون

تنزيل/تثبيت

• NPM: npm install hover.css --save
• باور: bower install hover --save
• تحميل الرمز البريدي

كيفية الاستخدام

يمكن استخدام Hover.css بعدة طرق؛ قم إما بنسخ التأثير الذي ترغب في استخدامه ولصقه في ورقة الأنماط الخاصة بك أو الرجوع إلى ورقة الأنماط. ثم قم فقط بإضافة اسم فئة التأثير إلى العنصر الذي تريد تطبيقه عليه.

أ. نسخ التأثير ولصقه

إذا كنت تخطط لاستخدام تأثير واحد أو عدة تأثيرات فقط، فمن الأفضل نسخ التأثير ولصقه في ورقة الأنماط الخاصة بك، حتى لا يضطر المستخدم إلى تنزيل css/hover.css بالكامل.

بافتراض أنك تريد استخدام تأثير Grow:

1. تحميل Hover.css

2. في css/hover.css ، ابحث عن Grow CSS (يتم تسمية كل تأثير باستخدام تعليق فوقه):

    /* Grow */
   . hvr-grow {
       display : inline-block;
       vertical-align : middle;
       transform : translateZ ( 0 );
       box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0 );
       backface-visibility : hidden;
       -moz-osx-font-smoothing : grayscale;
       transition-duration : 0.3 s ;
       transition-property : transform;
   }
   
   . hvr-grow : hover ,
   . hvr-grow : focus ,
   . hvr-grow : active {
       transform : scale ( 1.1 );
   }

3. انسخ هذا التأثير ثم الصقه في ورقة الأنماط الخاصة بك.

4. في ملف HTML الذي ترغب في ظهور التأثير فيه، قم بإضافة فئة .hvr-grow إلى العنصر الذي اخترته.

عنصر مثال قبل تطبيق تأثير Hover.css:

 < a href =" # " > Add to Basket  a >

عنصر المثال بعد تطبيق تأثير Hover.css:

 < a href =" # " class =" hvr-grow " > Add to Basket  a >

ملاحظة : اعتبارًا من 2.0.0 أصبحت جميع أسماء فئات Hover.css مسبوقة بـ hvr- لمنع التعارضات مع المكتبات/أوراق الأنماط الأخرى. إذا كنت تستخدم Sass/LESS، فيمكن تغيير ذلك بسهولة باستخدام المتغير $nameSpace / @nameSpace في scss/_options.scss أو less/_options.less .

ب. المرجع Hover.css

إذا كنت تخطط لاستخدام العديد من تأثيرات Hover.css، فقد ترغب في الرجوع إلى ورقة أنماط Hover.css بأكملها.

1. تحميل hover-min.css
2. أضف hover-min.css إلى ملفات مواقع الويب الخاصة بك، في دليل يسمى css على سبيل المثال
3. قم بالإشارة إلى hover-min.css في بصفحة HTML التي ترغب في إضافة تأثيرات Hover.css إليها:

 < head >
	< link href =" css/hover-min.css " rel =" stylesheet " >
 head >

وبدلاً من ذلك، يمكنك إضافة مرجع إلى ورقة أنماط موجودة مثل ذلك (قد يكون هذا مفيدًا لمستخدمي WordPress الذين لا يستطيعون تحرير HTML):

 @import url ( "hover-min.css" );

4. بافتراض أنك تريد استخدام تأثير Grow، في ملف HTML الذي ترغب في استخدام هذا التأثير فيه، قم بإضافة فئة .hvr-grow إلى العنصر الذي اخترته.

عنصر مثال قبل تطبيق تأثير Hover.css:

 < a href =" # " class =" button " > Add to Basket  a >

عنصر المثال بعد تطبيق تأثير Hover.css:

 < a href =" # " class =" button hvr-grow " > Add to Basket  a >

ملاحظة حول خاصية display

لجعل عنصر "قابلاً للتحويل"، يوفر Hover.css ما يلي لجميع العناصر التي يتم تطبيقه عليها:

 display : inline-block;
vertical-align : middle;

إذا كنت ترغب في تجاوز هذا السلوك، قم بإزالة CSS أعلاه من Hover.css أو قم بتغيير خاصية display للعنصر. تأكد من إعلان التجاوز بعد إعلانات Hover.css حتى تصبح سلسلة CSS سارية المفعول. وبدلاً من ذلك، إذا كنت تستخدم إصدار Sass/LESS من Hover.css، فيمكنك إزالة/التعليق على مزيج forceBlockLevel() الموجود في scss/_hacks.scss أو less/_hacks.less .

لمزيد من المعلومات حول العناصر القابلة للتحويل، راجع وحدة تحويلات CSS.

استخدام تأثيرات الأيقونات

لإضافة رمز Hover.css، ضع رمز HTML داخل العنصر الذي يتم تطبيق تأثير Hover.css عليه. على سبيل المثال:

 
  Icon Forward
  

في الكود أعلاه، أعطينا عنصر الرابط فئة hvr-icon-forward والتي ستجعل الرمز يتحرك للأمام عند تحريك مؤشر الماوس فوق الرابط. يتم إعطاء الرمز نفسه فئة hvr-icon للسماح لـ Hover.css بمعرفة أن هذا هو الرمز الذي نريد تحريكه. في هذا المثال، الرمز الخاص بنا هو من FontAwesome، والذي قمنا بتحميله في لصفحة الويب الخاصة بنا وفقًا لتعليمات FontAwesome، كما يلي:

 < link href =" //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css " rel =" stylesheet " media =" all " >

ملاحظة: اعتبارًا من الإصدار Hover.css v2.3.0، يمكنك استخدام أي طريقة تريدها لإضافة الأيقونات (في السابق، كان FontAwesome فقط مدعومًا خارج الصندوق.) على سبيل المثال، يمكنك استخدام مكتبة أيقونات أخرى أو بدلاً من ذلك، استخدام مكتبة أيقونات أخرى. الصورة هكذا:

 
  Icon Spin
  

هنا، ستعمل الصورة كأيقونة لأنها تحتوي على فئة hvr-icon مطبقة عليها، وعند تمرير مؤشر الماوس فوقها، ستدور الأيقونة كما هو محدد بواسطة فئة hvr-icon-spin على العنصر الأصلي.

موضع الأيقونة تحت سيطرتك بالكامل. يمكنك وضعه قبل النص كما يلي:

 
  
  Icon Spin

أو استخدم CSS مخصصًا لوضع الأيقونة بالشكل الذي تراه مناسبًا.

ما هو مدرج؟

يتكون المشروع من المجلدات والملفات التالية:

المغلق

• demo-page.css - يحتوي على أنماط لإظهار التحويم. غير مطلوب في مشاريعك
• hover-min.css - النسخة المصغرة/الإنتاجية من Hover.css
• hover.css - النسخة التطويرية من Hover.css

سسس / أقل

• التأثيرات - تحتوي على كل تأثير فردي مصنف في مجلدات مصنفة
• _hacks.scss/_hacks.less، _mixins.scss/_mixins.less، _options.scss/_options.less - أدوات Sass/LESS
• hover.scss/hover.less - نسخة تطويرية من Hover.css بنكهتي Sass وLESS

آخر

تتضمن الملفات الأخرى الجديرة بالملاحظة ما يلي:

• Index.html - يوضح جميع تأثيرات Hover.css
• Gruntfile.js - يُستخدم لتطوير Hover.css عبر Grunt.

دعم المتصفح

تعتمد العديد من تأثيرات Hover.css على ميزات CSS3 مثل التحولات والرسوم المتحركة والتحويلات والعناصر الزائفة، ولهذا السبب، قد لا تعمل التأثيرات بشكل كامل في المتصفحات القديمة.

• الانتقالات والرسوم المتحركة - غير مدعومة في Internet Explorer 10
• التحويلات - غير مدعومة تحت Internet Explorer 9
• المحتوى الذي تم إنشاؤه (العناصر الزائفة) - غير مدعوم تحت Internet Explorer 8

وبصرف النظر عن المتصفحات المذكورة أعلاه، يتم دعم Hover.css عبر جميع المتصفحات الرئيسية. يرجى مراجعة caniuse.com للحصول على الدعم الكامل للعديد من تقنيات الويب واختبار صفحات الويب الخاصة بك وفقًا لذلك. يوصى بتطبيق التأثيرات الاحتياطية على المتصفحات الأقدم، باستخدام CSS المدعومة من قبل تلك المتصفحات أو مكتبة اختبار الميزات مثل Modernizr.

استخدام الناخر للتنمية

النخر ليس ضروريًا ولكنه يمكن أن يسرع عملية التطوير. بعد تثبيت Grunt، قم بتشغيل grunt من سطر الأوامر لإعداد خادم تطوير يمكن الوصول إليه على http://127.0.0.1:8000/ أو عنوان IP المحلي الخاص بك لاختبار الشبكة. مع تشغيل Grunt، ستتم معالجة Sass أو LESS مسبقًا (اعتمادًا على ما إذا كنت تعمل من مجلد scss أو مجلد less ) وسيتم تصغير ملفات CSS.

ملاحظة: تم إعداد Grunt في الأصل لإصلاح خصائص CSS تلقائيًا، ولكن لجعل المشروع قابلاً للوصول قدر الإمكان، لم يعد هذا هو الحال. يجب استخدام مزيج Sass/LESS prefixed(property, value) لبادئة المتصفح بدلاً من ذلك. راجع استخدام Sass/LESS للتطوير و[استخدام LESS للتطوير].

استخدام Sass/LESS للتطوير

تعتبر Sass/LESS غير ضرورية ولكنها يمكنها تسريع عملية التطوير. المعالجة المسبقة لـ Sass/LESS باستخدام برنامجك المفضل أو البيئة المتوفرة عبر Grunt.

يتم استخدام Sass/LESS في مشروع Hover.css لفصل CSS المتنوع إلى ملفات محددة. كل تأثير موجود ضمن ملفه الخاص في دليل effects . يستخدم Hover.css أيضًا ملفات .scss و .less التالية:

_hacks

يحتوي على اختراقات (أسطر تعليمات برمجية غير مرغوب فيها ولكنها ضرورية عادةً) يتم تطبيقها على تأثيرات معينة. شرح الاختراقات هنا .

_mixins

يحتوي على مزيج prefixed keyframes التي تطبق البادئات الضرورية التي تحددها في _options.scss / _options.less على الخصائص والإطارات الرئيسية.

يمكن أن تكون البادئة للخصائص مثل هذا:

• ساس:

 @include prefixed(transition-duration , .3s);

• أقل:

. prefixed ( transition-duration , .3 s );

يتم تمرير mixin prefixed الخاصية التي تريد أن تكون بادئة، تليها قيمتها.

يمكن أن تكون الإطارات المفتاحية مسبوقة على النحو التالي:

• ساس:

 @include keyframes(my-animation) {
    to {
        color : red;
    }
}

يتم تمرير اسم الإطار الرئيسي إلى مزيج keyframes ، متبوعًا بالمحتوى باستخدام التوجيه @content.

• أقل:

. keyframes ( my-animation , {
    to {
        color : red;
    }
});

يتم تمرير اسم الإطار الرئيسي، متبوعًا بالمحتوى، إلى مزيج keyframes .

_خيارات

يحتوي على الخيارات الافتراضية وخيارات التأثير المتنوعة وبادئات المتصفح التي ترغب في استخدامها مع المزيج prefixed . افتراضيًا، يتم تعيين البادئة -webkit- فقط على true (نظرًا لأن معظم المتصفحات لا تتطلب بادئات الآن).

اعتبارًا من 2.0.0 ، تتضمن _options أيضًا خيار $nameSpace / @nameSpace الذي يسمح لك بتغيير الاسم الذي تبدأ به جميع الفئات. مساحة الاسم الافتراضية هي hvr .

يتم تعيين الخيار $includeClasses / @includeClasses افتراضيًا على true وسيقوم بإنشاء جميع تأثيرات Hover.css تحت أسماء الفئات الخاصة بها، hvr-grow على سبيل المثال. إذا كنت ترغب في إضافة الخصائص التي تشكل تأثيرات Hover.css إلى أسماء الفئات الخاصة بك، فاضبط هذا الخيار على false .

المساهمة في Hover.css

إذا كنت ترغب في المساهمة بتأثيراتك الخاصة، فيرجى الاطلاع على دليل المساهمة.

التراخيص

يتم توفير Hover.css بموجب تراخيص شخصية/مفتوحة المصدر مجانية أو تراخيص تجارية مدفوعة وفقًا لمتطلباتك. لمقارنة التراخيص، يرجى زيارة متجر Ian Lunn Design Limited Store وشراء ترخيص تجاري هنا.

شخصي/مفتوح المصدر

للاستخدام الشخصي/مفتوح المصدر، يتم توفير Hover.css بموجب ترخيص MIT

• استخدم في التطبيقات الشخصية غير المحدودة
• لا يمكن بيع التطبيق الخاص بك
• تظل تعديلاتك مفتوحة المصدر
• تحديثات مجانية

قراءة الترخيص الكامل

تجاري

للاستخدام التجاري، يتم توفير Hover.css بموجب التراخيص التجارية والتجارية الممتدة وتراخيص OEM التجارية.

رخصة تجارية

• استخدم في تطبيق واحد
• بيع تطبيقك مرة واحدة فقط (على سبيل المثال، موقع ويب تم بيعه للعميل)
• يتم الاحتفاظ بالرمز الخاص بك كملكية لنفسك
• تحديثات مجانية للإصدار الرئيسي

شراء | قراءة الترخيص الكامل

رخصة تجارية ممتدة

• استخدم في تطبيقات غير محدودة
• بيع تطبيقاتك لعدد غير محدود من المرات (على سبيل المثال، قالب موقع ويب يُباع في أحد متاجر السمات)*
• يتم الاحتفاظ بالرمز الخاص بك كملكية لنفسك
• تحديثات مجانية للإصدار الرئيسي

*باستثناء التطبيقات التي تسمح للمستخدمين النهائيين بإنتاج تطبيقات منفصلة. راجع الترخيص التجاري لـ OEM.

شراء | قراءة الترخيص الكامل

الترخيص التجاري OEM

إذا كان تطبيقك يمكّن المستخدمين النهائيين من إنتاج تطبيقات منفصلة تتضمن برنامج Ian Lunn Design Limited، على سبيل المثال، مجموعة أدوات التطوير أو المكتبة أو منشئ التطبيقات، فيجب عليك الحصول على ترخيص تجاري من OEM. يرجى الاتصال بنا للحصول على مزيد من المعلومات حول الترخيص التجاري لـ OEM.

ترخيص MIT (الإصدار السابق 2.2.0 / 24 مارس 2017)

تم توفير Hover.css مسبقًا بموجب ترخيص MIT للاستخدام التجاري وغير التجاري. يجوز لأي شخص حصل على ترخيص MIT للاستخدام التجاري قبل الإصدار 2.2.0 (24 مارس 2017) الاستمرار في استخدام إصدارات Hover.css السابقة للإصدار 2.2.0 بموجب نفس الترخيص.

إذا كنت ترغب في الترقية إلى الإصدار 2.2.0 أو أعلى، أو ترغب ببساطة في إظهار دعمك لـ Hover.css (ونحن نقدر ذلك كثيرًا!)، فيرجى شراء ترخيص تجاري حديث. شراء رخصة تجارية.

استأجر إيان لون

إيان لون هو مطور الواجهة الأمامية المستقل ومؤلف كتاب أسس CSS3.

قم بتعيين Ian لمواقع الويب سريعة الاستجابة ومواقع WordPress وجافا سكريبت والرسوم المتحركة والتحسين.