لقد مررنا عبر سلسلة من المنشورات الآن حول الأساليب الشيقة لتأثيرات التمرير في CSS. بدأنا بـ مجموعة من الأمثلة التي تستخدم CSS background
HAS، ثم انتقل إلى text-shadow
حيث الملكية نحن من الناحية الفنية لم نستخدم أي ظلال. قمنا أيضًا بدمجها مع متغيرات CSS و calc()
لتحسين الشفرة وتسهيل إدارتها.
في هذه المقالة ، سنبني هاتين المقالتين لإنشاء رسوم متحركة أكثر تعقيدًا في CSS. نحن نتحدث عن قص الخلفية وأقنعة 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. يجب احصل على النشرة الإخبارية.
- "
- 2D
- 3d
- a
- من نحن
- متقدم
- قدما
- الكل
- السماح
- يسمح
- ألفا
- سابقا
- كمية
- آخر
- تطبيقي
- التقديم
- اقتراب
- المنطقة
- حول
- البند
- مقالات
- خلفية
- لان
- ما بين
- قطعة
- الحدود
- انهيار
- نساعدك في بناء
- ابني
- تحدى
- تغيير
- الكروم
- أقرب
- إغلاق
- الكود
- مجموعة شتاء XNUMX
- مجموعة
- الجمع بين
- مقارنة
- تكملة
- مجمع
- تتألف
- الاعداد
- محتوى
- استمر
- رابطة
- بهيكل
- خلق
- يخلق
- على
- اندفاع
- تأخير
- التفاصيل
- فعل
- مختلف
- لا
- بسهولة
- تأثير
- الآثار
- عناصر
- إلخ
- كل شىء
- مثال
- أمثلة
- إلا
- تجربة
- اكتشف
- العناية بالقدم
- الشكل
- برنامج فايرفوكس
- الاسم الأول
- متابعيك
- متابعات
- شكل
- تبدأ من
- إضافي
- الحصول على
- إعطاء
- لمحة
- هدف
- الذهاب
- خير
- أخضر
- يحدث
- مساعدة
- هنا
- إخفاء
- كيفية
- كيفية
- لكن
- HTTPS
- صور
- مستحيل
- في أخرى
- في ازدياد
- بشكل مستقل
- إلهام
- لحظة
- التفاعل
- مسائل
- IT
- علم
- معروف
- تعلم
- تعلم
- تعلم
- ومستوياتها
- على الأرجح
- خط
- وصلات
- القليل
- طويل
- بحث
- بدا
- أبحث
- صنع
- جعل
- يصنع
- القيام ب
- إدارة
- تمكن
- قناع
- ماسكات
- أمر
- يعني
- ربما
- الأكثر من ذلك
- أكثر
- خطوة
- حركة
- موزيلا
- متعدد
- جاكيت
- الأمثل
- أخرى
- جزء
- وجهات نظر
- بلايستشن
- نقاط
- المنشورات
- ممارسة
- جميل
- سابق
- الإنتــاج
- HAS
- الملكية
- الوصول
- أدرك
- تخفيض
- يجري
- سفاري
- نفسه
- مسلسلات
- طقم
- شادو
- الشكل
- مماثل
- الاشارات
- عزباء
- المقاس
- So
- الصلبة
- بعض
- شيء
- الفضاء
- مراحل
- بداية
- بدأت
- المحافظة
- لا يزال
- الدعم
- المساحة
- مفاتيح
- التكتيكات
- مع الأخذ
- حديث
- الحديث
- تقنيات
- •
- شيء
- الأشياء
- تفكير
- ثلاثة
- عبر
- الوقت
- مرات
- سويا
- تيشرت
- تواصل
- انتقال
- الشفافية
- شفاف
- فهم
- فهم
- تحديث
- us
- تستخدم
- قيمنا
- مرئي
- مطلوب
- الموقع الإلكتروني
- ابحث عن
- ما هي تفاصيل
- في حين
- بدون
- كلمات
- للعمل
- أعمال
- سوف
- حل متجر العقارات الشامل الخاص بك في جورجيا