Get best of the week

Pure CSS: 4 طرق لتحريك ألوان الوصلات

يقترح مؤلف المقالة ، الذي ننشر ترجمته اليوم ، باستخدام CSS خالص ، لإنشاء آلية لتغيير لون نص الرابط عند المرور فوقه. ولكن لا ينبغي أن يكون هذا تغييرًا عاديًا في اللون. يجب أن يملأ اللون الجديد الرابط من اليسار إلى اليمين ، ليحل محل اللون القديم.


للقيام بذلك ، يمكنك اللجوء إلى إحدى الطرق الأربع الموضحة في هذه المادة. ضع في اعتبارك هذه الطرق ، مع إيلاء اهتمام خاص لأشياء مهمة مختلفة مثل إمكانية الوصول إلى المحتوى ، وأداء الحل ، ودعم المتصفح.

الطريقة # 1: استخدام مقطع الخلفية: النص


في وقت كتابة هذه السطور ، كان مقطع الخلفية: خاصية النص تجريبية. لا يتم دعمه في Internet Explorer 11 والإصدارات الأحدث. تتضمن هذه الطريقة إنشاء ما يسمى " نص الضربة القاضية " (النص الذي يبدو أنه مقطوع على سطح معين والخلفية شفافة منه) مع تدرج حاد . يتكون ترميز HTML من عنصر واحد <a>يصف ارتباط تشعبي.

<a href="#">Link Hover</a>

لنبدأ بإنشاء أنماط للرابط. overflow: hiddenسيؤدي الاستخدام إلى حقيقة أنه عند تغيير مظهر الارتباط ، يتم قطع كل ما يتجاوز نطاق هذا العنصر.

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

سنحتاج إلى استخدام تدرج خطي حاد بقيمة 50٪ لألوان البداية والنهاية للرابط.

a {
  /*  ,    */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

استخدم الخاصية background-clipلقص التدرج. دعنا نعطيه قيمة textلعرض النص. سوف نستخدم خصائص background-sizeو background-position. يتم ذلك لعرض اللون الأولي.

a {
  /*  ,    */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

وأخيرًا ، أضف خاصية CSS إلى النمط والنمط transitionللفئة الزائفة للارتباط التشعبي :hover. لكي يملأ اللون الجديد الرابط من اليسار إلى اليمين عند التمرير فوق الارتباط ، استخدم الخاصية background-position.

a {
  /*  ,    */
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

هنا مثال على CodePen. ورغم أن هذا الأسلوب يسمح لك لتحقيق التأثير المطلوب، وسفاري وكروم قلص عناصر النص والظل. هذا يعني أنها لن تظهر. لن يعمل تطبيق أنماط النص ، مثل تسطير النص باستخدام خاصية CSS text-decoration. لذلك ، إذا كنت تريد تسطير الروابط ، فيجب عليك التفكير في طرق أخرى لتخصيص التسطير .


الطريقة رقم 2: تطبيق العرض / الارتفاع


تعتمد هذه الطريقة على استخدام سمة البيانات * التي تحتوي على نفس النص مثل العلامة <a>. هنا تستخدم إدارة الممتلكات width(لملء الرابط باللون من اليسار إلى اليمين أو من اليمين إلى اليسار) أو الملكية height(لتطبيق التأثير من أعلى إلى أسفل أو من أسفل إلى أعلى). على سبيل المثال ، في حالتنا ، يتم تطبيق تأثير على خاصية width، والتي عندما تقوم بتمرير الماوس فوق ارتباط ، تتغير من 0 إلى 100٪. فيما يلي الترميز:

<a href="#" data-content="Link Hover">Link Hover</a>

تشبه CSS تلك المستخدمة في المثال السابق ، باستثناء إعدادات خاصية الخلفية. هنا ، بالإضافة إلى ذلك ، ستعمل الخاصية بشكل جيد text-decoration:

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: royalblue;
  font-weight: 800;
  text-decoration: underline;
  overflow: hidden;
}

هذا هو المكان الذي نحتاج فيه إلى استخدام النص من السمة data-content. سيتم وضع هذا النص أعلى محتوى العلامة <a>. يمكننا استخدام حيلة صغيرة مثيرة للاهتمام هنا ، والتي تتكون من نسخ نص من سمة واشتقاقها باستخدام وظيفة attr()في خاصية contentعنصر زائف للارتباط ::before.

a::before {
  position: absolute;
  content: attr(data-content); /*    */
  top: 0;
  left: 0;
  color: midnightblue;
  text-decoration: underline;
  overflow: hidden;
  transition: width 275ms ease;
}

لكي لا ينتقل النص إلى سطر جديد ، سيتم تطبيق نمط على العنصر الزائف white-space: nowrap. لتغيير لون الارتباط ، قم بتعيين قيمة خاصية CSS colorللعنصر الزائف واجعله ::beforeبحيث تكون قيمة الخاصية في البداية width0:

a::before {
  /*  ,    */
  width: 0;
  white-space: nowrap;
}

قم بزيادة قيمة widthالعنصر الزائف ::beforeإلى 100٪ لتطبيق التأثير عند التمرير فوق رابط الماوس:

a:hover::before {
  width: 100%;
}

هنا هو مثال على تطبيق هذه الطريقة على الرغم من أننا، بناء على خصائص العنصر widthو heightتحقيق ما نحتاج إليه، وهذا الأسلوب هو ملحوظ لفي انخفاض الإنتاجية . للحصول على تغيير سلس للون بمعدل 60 إطارًا في الثانية - من الأفضل استخدام الخصائص transformأو. يسمح لك استخدام opacityالخاصية text-decorationباستخدام أنماط مختلفة للتأكيد على النص في الروابط المتحركة. هنا مثال يوضح هذا ، تم إنشاؤه باستخدام التقنية الثالثة ، التي سننظر فيها الآن. وهو يعتمد على استخدام خاصية CSS لمسار المقطع .



الطريقة الثالثة: استخدام مسار القصاصة


هنا سنستخدم خاصية CSS clip-pathوالمضلع ، في هذه الحالة ، المستطيل. يحتوي المستطيل على أربع زوايا ، ويزيد طول جانبين عند تحريك الماوس فوق الرابط. يتوسع الشكل ، ينتقل أحد جانبيه من اليسار إلى اليمين.


يستخدم الترميز نفسه كما في المثال السابق:

<a href="#" data-content="Link Hover">Link Hover</a>

سنستخدم ، مرة أخرى ، العنصر الزائف ::before. لكن CSS مختلفة هنا:

a::before {
  position: absolute;
  content: attr(data-content);
  color: midnightblue;
  text-decoration: underline;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 275ms ease;
}

بخلاف الطريقة السابقة ، text-decoration: underlineيجب هنا تعيين الخاصية للعنصر الزائف ::before. يعد ذلك ضروريًا حتى لا يؤثر تغيير اللون على نص الرابط فقط ، بل يؤثر أيضًا على الخط الذي يبرز الرابط. فلنلقِ الآن نظرة على رمز CSS الخاص بالموقع clip-path:

clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

يتم تحديد مواقع رؤوس المضلع في الخاصية clip-pathكنسبة مئوية ، وهي تحدد الإحداثيات بالترتيب المقابل لموضعها على المضلع:

  • 0 0 = الزاوية اليسرى العليا
  • 0 0 = الزاوية اليمنى العليا
  • 0 100% = الزاوية اليمنى السفلى
  • 0 100% = الزاوية اليسرى السفلى

يمكن تغيير اتجاه تطبيق تأثير التعبئة بتعديل الإحداثيات. الآن بعد أن عرفنا الإحداثيات ، يمكننا جعل الشكل ينمو عن طريق الانتقال من اليسار إلى اليمين عند التمرير فوق رابط الماوس:

a:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

في ما يلي نسخة فعالة من هذا المثال. تعمل تقنية ألوان الوان الرسوم المتحركة بشكل جيد للغاية ، ولكن قبل استخدامه ، ضع في اعتبارك دعم الخاصية في clip-pathمتصفحات مختلفة. إنشاء انتقالات CSS باستخدام clip-pathأفضل من استخدام تقنية الارتفاع / العرض. ومع ذلك ، يؤدي استخدامه إلى حقيقة أن المستعرض يقوم بعمليات طلاء ( موارد) كثيفة الاستخدام للموارد .

الطريقة الرابعة: استخدام التحويل


يستخدم الترميز المستخدم هنا تقنية إخفاء العناصر <span>. نظرًا لأننا سنستخدم <span>المحتوى الذي يكرر محتوى الرابط في العنصر ، فسوف نستخدم السمة لتحسين توفر المحتوى aria-hidden="true". سيؤدي هذا إلى إخفاء النص المتكرر من برامج قراءة الشاشة.

لن يتم التعبير عن هذا النص مرتين:

<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

يحتوي CSS للعنصر <span>على وصف للانتقال ، الذي يبدأ على اليسار:

span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 275ms ease;
}

تحتاج الآن إلى تنظيم حركة العنصر <span>إلى اليمين ، كما هو موضح أدناه.


للقيام بذلك ، استخدم ::beforeالعنصر الزائف العنصر <span>. وكما كان الحال من قبل ، سنلجأ إلى استخدام السمة data-content. دعونا نغير موضع العنصر ، بتطبيق التحول transform: translateX(100%)، وتحريكه على طول المحور X.

span::before { 
  display: inline-block;
  content: attr(data-content);
  color: midnightblue;
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}

كما هو الحال مع العنصر <span>، ::beforeسيتم تعيين موضع العنصر الزائف باستخدام البناء transform: translateX(0):

a:hover span::before {
  transform: translateX(0);
}

في ما يلي مثال على CodePen. على الرغم من أن هذه الطريقة تتمتع بأفضل دعم عبر المتصفح لما سبق ، إلا أنها تحتاج إلى المزيد من HTML و CSS لتنفيذه. ومع ذلك ، فإن استخدام خصائص CSS transform لا يضر بالأداء ، ولا يؤدي استخدامه إلى إعادة رسم العناصر ، ونتيجة لذلك ، يؤدي إلى تكوين انتقالات CSS سلسة بمعدل 60 إطارًا في الثانية.


ملخص


لقد اطلعنا للتو على أربع طرق مختلفة لتحقيق نفس التأثير باستخدام CSS. على الرغم من أن كل واحد منهم له إيجابياته وسلبياته ، يمكنك أن ترى أنه لا يوجد شيء مستحيل في تنظيم الرسوم المتحركة للون نص الروابط عند المرور فوقها. هذا تأثير لطيف صغير ، يؤدي استخدامه إلى حقيقة أن الروابط تعتبر أكثر تفاعلية.

القراء الأعزاء! هل تحرك الروابط في مشاريعك؟

More articles:


All Articles