رتبها

بعد تخريب و تجريب أستطيع القول:
I made this using only CSS 😎
و لكنكم تحبون الأجانب
كيف تسوي شيء شبيه؟ هنا الخطوات..👇🏻

في البداية لعمل صورة البروفايل بالشكل الموضح بإمكانك استخدام هذا الموقع في التغريدة المقتبسة الذي تحدثت عنه سابقا و الذي يحول لك صورتك الشخصية إلى شكل مرسوم..
وفي حال حاجتك لإزالة الخلفية لاستخدام صورة png يمكنك استخدام هذا الموقع: remove.bg

www.remove.bg

بعدها يمكنك الاستعانة بأداة clippy لإنشاء شكل الخماسي أو أي شكل آخر بحيث تنتج لك أكواد css لل path المطلوب و توفر عليك وقت كبير في حساب نقاط ال path، هنا تكلمت عن الأداة بشكل أوسع 👇🏻

طبعا أنا قمت باستخدام أداة clippy لبناء شكلين خماسيين الأول هو الظاهر باللون البنفسجي الفاتح و الثاني باللون البنفسجي الغامق و الذي يكون مختبئا خلف الأول و يظهر عند عمل ال hover

و حتى تقوم بإظهارهم فوق بعضهم، فلابد أن يكون ال position الخاص فيهم قيمته: absolute و يكون ال z-index للخماسي الفاتح أكبر منه في الغامق. و أخيرا تكون المسافات الأفقية و العمودية (top - left) لهما متساوية تماما حتى ينطبقا على بعضيهما تماما.

طبعا لاحظ أنني لجأت لاستخدام التدرج اللوني في لون الخماسي الأساسي عن طريق استخدام خاصية linear gradient، و يمكنك العثور على تدرجات لونية جميلة من هذا الموقع:
#Hazel" target="_blank" rel="noopener" onclick="event.stopPropagation()">uigradients.com

uigradients.com

و بداخل الخماسي الخارجي وضعت الصورة بحيث تظهر فوقه، مع الأخذ بعين الاعتبار أن ال z-index الخاص بها يجب أن يكون الأكبر.

الآن نأتي للخطوة الأهم و هو ال animation الذي يظهر عند ال hover على الخماسي الأمامي، طبعا حتى يكون لكل التغيرات ظهور متدرج ك animation لاحظ أنني استخدمت في ال style الخاص بالخماسي الأمامي خاصية transition و كذلك في الخلفي لكن جعلت مدة ال animation مختلفة حتى يكون التأثير أجمل

عند حدوث ال hover تتحرك كل العناصر كالتالي:
١- أقوم بتدوير الخماسي الأمامي بمقدار ٢٠ درجة باتجاه عقارب الساعة مع إضافة ظل بسيط
٢- أقوم بتدوير الخماسي الخلفي بمقدار ٢٠ درجة بعكس اتجاه عقارب الساعة
٣- هذه الخطوة كان لها تأثير كبير في تحسين الشكل و هي كالتالي..

الخطوة الثالثة: هي تدوير صورة ال profile بعكس اتجاه دوران الخماسي الأساسي (الأمامي) الذي يحويها لكن بحيث تكون مدة ال transition طويلة بعض الشيء، بحيث تبدو الصورة و كأنها تدور مع دوران الخماسي في البداية.. لكنها تعود لتصحح اتجاهها بالدوران في الاتجاه العكسي ليظهر الشكل مستقيما

و نتيجة لدمج التأثيرات المختلفة للخماسي الأمامي و الخلفي مع الصورة مع بعض الاختلافات في مدة ال transition تظهر النتيجة بهذا الشكل ✅

أخيرا بالنسبة للنصوص لدي نصين: الأول هو الذي يظهر في البداية و هو الاسم (يعرب) و الثاني هو حساب تويتر @yarhmm لكنه يكون مخفيا عن طريق جعل خاصية ال opacity تساوي 0 في البداية، و عند ال hover على الخماسي أقوم بعكس العملية بين النصين