تأثيرات التحويم الرائعة في CSS التي تستخدم قصاصات الخلفية والأقنعة والأبعاد الثلاثية

لقد مررنا عبر سلسلة من المنشورات الآن حول الأساليب الشيقة لتأثيرات التمرير في CSS. بدأنا بـ مجموعة من الأمثلة التي تستخدم CSS background HAS، ثم انتقل إلى text-shadow حيث الملكية نحن من الناحية الفنية لم نستخدم أي ظلال. قمنا أيضًا بدمجها مع متغيرات CSS و calc() لتحسين الشفرة وتسهيل إدارتها.

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

---

هذا مجرد طعم لما نصنعه:

تحوم الآثار باستخدام background-clip

دعونا نتحدث عن background-clip. تقبل خاصية CSS هذه ملف text قيمة الكلمة الرئيسية يسمح لنا بتطبيق التدرجات على نص من عنصر بدلاً من الفعلي خلفية.

لذلك ، على سبيل المثال ، يمكننا تغيير لون النص عند المرور بالماوس كما نستخدم ملف color الخاصية ، ولكن بهذه الطريقة نقوم بتحريك تغيير اللون:

كل ما فعلته هو الإضافة background-clip: text للعنصر و transition ال background-position. لا يجب أن يكون الأمر أكثر تعقيدًا من ذلك!

ولكن يمكننا أن نفعل ما هو أفضل إذا قمنا بدمج تدرجات متعددة مع قيم قطع خلفية مختلفة.

في هذا المثال ، أستخدم تدرجين مختلفين وقيمتين مع background-clip. يتم قص تدرج الخلفية الأول في النص (بفضل تنسيق text value) لتعيين اللون عند التمرير ، بينما ينشئ تدرج الخلفية الثاني تسطيرًا سفليًا (بفضل ملف padding-box القيمة). كل شيء آخر يتم نسخه مباشرة من العمل الذي قمنا به في المقال الأول من هذه السلسلة.

ماذا عن تأثير التمرير حيث ينزلق الشريط من أعلى إلى أسفل بطريقة تبدو وكأن النص يتم مسحه ضوئيًا ، ثم تلوينه:

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

لقد خدشنا فقط سطح ما يمكننا فعله مع background-clipقوى بينغ! ومع ذلك ، من المحتمل أن تكون هذه التقنية شيئًا تريد تجنب استخدامه في الإنتاج ، حيث من المعروف أن Firefox يحتوي على ملف تم الإبلاغ عن الكثير من الأخطاء المتصلة background-clip. Safari به مشكلات دعم أيضًا. هذا يترك فقط Chrome مع دعم قوي لهذه الأشياء ، لذلك ربما يكون مفتوحًا ونحن نواصل.

دعنا ننتقل إلى تأثير التمرير الآخر باستخدام background-clip:

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

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

رائع ، أليس كذلك؟ لنفحص الكود:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

لدينا ثلاث طبقات خلفية - اثنان من التدرجات و background-color المعرفة باستخدام --_c المتغير الذي تم ضبطه في البداية على شفاف (#0000). عند التمرير ، نقوم بتغيير اللون إلى الأبيض و --_c متغير إلى اللون الرئيسي (--c).

إليكم ما يحدث بشأن ذلك transition: أولاً ، نطبق الانتقال على كل شيء ولكننا نؤخر color و background-color by 0.5s لخلق تأثير انزلاق. بعد ذلك مباشرة ، نقوم بتغيير color و background-color. قد لا تلاحظ أي تغييرات بصرية لأن النص أصبح أبيض بالفعل (بفضل التدرج الأول) والخلفية مضبوطة بالفعل على اللون الرئيسي (بفضل التدرج الثاني).

بعد ذلك ، عند الخروج من الماوس ، نطبق تغييرًا فوريًا على كل شيء (لاحظ 0s تأخير) ، باستثناء color و background-color التي لديها انتقال. هذا يعني أننا نعيد كل التدرجات إلى حالتها الأولية. مرة أخرى ، ربما لن ترى أي تغييرات بصرية بسبب النص color و background-color تغيرت بالفعل على تحوم.

أخيرًا ، نطبق التلاشي على اللون و a background-color لإنشاء الجزء الذي يتم إخراج الماوس منه من الرسم المتحرك. أعلم أنه قد يكون من الصعب فهم الحيلة ولكن يمكنك تصور الخدعة بشكل أفضل باستخدام ألوان مختلفة:

مرر فوق ما سبق عدة مرات وسترى الخصائص التي يتم تحريكها عند التمرير والخصائص المتحركة عند تمرير الماوس للخارج. يمكنك بعد ذلك فهم كيف وصلنا إلى رسمتين مختلفتين لنفس تأثير التمرير.

دعونا لا ننسى تقنية التبديل الجاف التي استخدمناها في المقالات السابقة من هذه السلسلة للمساعدة في تقليل مقدار الكود باستخدام متغير واحد فقط للمحول:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

إذا كنت تتساءل لماذا توصلت إلى بناء جملة RGB للون الرئيسي ، فذلك لأنني كنت بحاجة للعب بشفافية ألفا. أنا أيضا أستخدم المتغير --_t لتقليل الحسابات الزائدة المستخدمة في transition خاصية.

قبل أن ننتقل إلى الجزء التالي ، إليك المزيد من الأمثلة على تأثيرات التمرير التي قمت بها منذ فترة والتي تعتمد عليها background-clip. قد يستغرق الأمر وقتًا طويلاً لتفصيل كل واحد ولكن مع ما تعلمناه حتى الآن يمكنك بسهولة فهم الكود. يمكن أن يكون مصدر إلهام جيد لتجربة بعضها بمفردك دون النظر إلى الكود.

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

تأثيرات التمرير باستخدام CSS mask

خمين ما؟ CSS mask تستخدم الخاصية التدرجات بنفس الطريقة التي يستخدمها background الخاصية تفعل ذلك ، لذا سترى أن ما نقوم به بعد ذلك واضح ومباشر.

لنبدأ ببناء تسطير خيالي.

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

أدخل CSS mask.

قد يبدو الرمز غريبًا ولكن المنطق لا يزال هو نفسه كما فعلنا مع جميع الرسوم المتحركة السابقة في الخلفية. ال mask يتكون من اثنين من التدرجات. يتم تعريف التدرج الأول بلون معتم يغطي منطقة المحتوى (بفضل تنسيق content-box القيمة). هذا التدرج الأول يجعل النص مرئيًا ويخفي الحد السفلي المتعرج. content-box هل mask-clip القيمة التي تتصرف مثل background-clip

linear-gradient(#000 0 0) content-box

سيغطي التدرج الثاني المنطقة بأكملها (بفضل padding-box). هذا العرض له عرض محدد باستخدام --_p متغير ، وسيتم وضعه على الجانب الأيسر من العنصر.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

الآن ، كل ما علينا فعله هو تغيير قيمة --_p عند التمرير لإنشاء تأثير انزلاقي للتدرج الثاني وكشف التسطير.

.hover:hover { --_p: 100%; color: var(--c);
}

يستخدم العرض التوضيحي التالي مع طبقات القناع كخلفيات لرؤية الخدعة تحدث بشكل أفضل. تخيل أن الأجزاء الخضراء والحمراء هي الأجزاء المرئية للعنصر بينما يكون كل شيء آخر شفافًا. هذا ما سيفعله القناع إذا استخدمنا نفس التدرجات اللونية معه.

باستخدام هذه الحيلة ، يمكننا بسهولة إنشاء الكثير من التباين ببساطة عن طريق استخدام تكوين تدرج مختلف مع mask خاصية:

يستخدم كل مثال في هذا العرض التوضيحي تكوينًا متدرجًا مختلفًا قليلاً لـ mask. لاحظ أيضًا الفصل في الكود بين تكوين الخلفية وتكوين القناع. يمكن إدارتها وصيانتها بشكل مستقل.

دعنا نغير تكوين الخلفية عن طريق استبدال التسطير المتعرج بتسطير متموج بدلاً من ذلك:

مجموعة أخرى من تأثيرات التحويم! احتفظت بجميع تكوينات القناع وغيرت الخلفية لإنشاء شكل مختلف. الآن ، يمكنك أن تفهم كيف كنت قادرًا للوصول إلى 400 تأثير تحوم بدون عناصر زائفة - ولا يزال بإمكاننا الحصول على المزيد!

مثل ، لماذا لا شيء مثل هذا:

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

تحوم آثار في 3D

قد تعتقد أنه من المستحيل إنشاء تأثير ثلاثي الأبعاد باستخدام عنصر واحد (وبدون اللجوء إلى العناصر الزائفة!) ولكن CSS لديها طريقة لتحقيق ذلك.

ما تراه ليس تأثيرًا حقيقيًا ثلاثي الأبعاد ، ولكن بالأحرى وهم مثالي للثلاثي الأبعاد في الفضاء ثنائي الأبعاد الذي يجمع بين CSS background, clip-pathو transform خصائص.

أول شيء نقوم به هو تحديد المتغيرات الخاصة بنا:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

ثم نقوم بإنشاء حد شفاف بعروض تستخدم المتغيرات المذكورة أعلاه:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

يجب أن يتساوى الجانبان العلوي والأيمن من العنصر مع --b القيمة بينما يحتاج الجانب السفلي والجانب الأيسر إلى مساوٍ لمجموع --b و --d (وهو --_s متغير).

بالنسبة للجزء الثاني من الحيلة ، نحتاج إلى تحديد تدرج واحد يغطي جميع المناطق الحدودية التي حددناها مسبقًا. أ conic-gradient سيعمل من أجل ذلك:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

نضيف تدرجًا آخر للجزء الثالث من الحيلة. سيستخدم هذا قيمتي لون أبيض شبه شفاف تتداخلان مع التدرج اللوني السابق الأول لإنشاء ظلال مختلفة من اللون الرئيسي ، مما يمنحنا وهم التظليل والعمق.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

الخطوة الأخيرة هي تطبيق أ CSS clip-path لقطع الزوايا لإحساس الظل الطويل هذا:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

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

لاحظ الإحداثيات من الشكل السابق (المشار إليه باللون الأحمر). دعنا نقوم بتحديثها لإنشاء الرسوم المتحركة:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

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

هذا القلم يعزل clip-path جزء من الرسم المتحرك لمعرفة ما يفعله:

اللمسة الأخيرة هي تحريك العنصر في الاتجاه المعاكس باستخدام translate - والوهم كامل! إليك التأثير باستخدام قيم خصائص مخصصة مختلفة لأعماق مختلفة:

يتبع تأثير التمرير الثاني نفس الهيكل. كل ما فعلته هو تحديث بعض القيم لإنشاء حركة أعلى يسارًا بدلاً من حركة أعلى يمينًا.

الجمع بين التأثيرات!

الشيء الرائع في كل ما قمنا بتغطيته هو أنهم جميعًا يكملون بعضهم البعض. هنا مثال حيث أقوم بإضافة ال text-shadow تأثير من المادة الثانية في السلسلة إلى background تقنية الرسوم المتحركة من المقالة الأولى أثناء استخدام الحيلة ثلاثية الأبعاد التي غطيناها للتو:

قد يكون الكود الفعلي محيرًا في البداية ، لكن انطلق وقم بتشريحه قليلاً - ستلاحظ أنه مجرد مزيج من هذه التأثيرات الثلاثة المختلفة ، متماسكة إلى حد كبير معًا.

اسمحوا لي أن أنهي هذه المقالة بتأثير التمرير الأخير حيث أقوم بدمج الخلفية ومسار المقطع وشرطة perspective لمحاكاة تأثير ثلاثي الأبعاد آخر:

لقد قمت بتطبيق نفس التأثير على الصور وكانت النتيجة جيدة جدًا لمحاكاة ثلاثية الأبعاد بعنصر واحد:

هل تريد إلقاء نظرة فاحصة على كيفية عمل العرض التوضيحي الأخير؟ لقد كتبت شيئًا عنها.

اختتام

عفوًا ، انتهينا! أعلم أن هناك الكثير من CSS المخادعة ولكن (1) نحن على الموقع الصحيح لهذا النوع من الأشياء ، و (2) الهدف هو دفع فهمنا لخصائص CSS المختلفة إلى مستويات جديدة من خلال السماح لهم بالتفاعل معها واحد اخر.

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

---

تأثيرات التحويم الرائعة في CSS التي تستخدم قصاصات الخلفية والأقنعة والأبعاد الثلاثية نشرت أصلا في حيل CSS. يجب احصل على النشرة الإخبارية.

• كوينسمارت. أفضل بورصة للبيتكوين والعملات المشفرة في أوروبا.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. دخول مجاني.
• كريبتوهوك. الرادار. تجربة مجانية.
• المصدر: https://css-tricks.com/css-hover-effacts-background-masks-3d/