مجموعة من الأكواد من موقع Codepen

تاريخ النشر : الأحد. 03 مايو 2020

نبذة عامة

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

 

CSS Card Hover Effects

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

رابط المعاينة

CSS Card Hover Effects

 

Social Link

إذا كنت تريد عرض مواقع التواصل الإجتماعى عبر موقعك ، يمكنك إستخدام هذه الأكواد ،وايضاََ يمكنك الإستفاده منها فى تطوير نفسك ، فهى مكتوبة بواسطة HTML + CSS  فقط بالإضافة إلى إستخدام الانيميشن الموجود فى CSS3

رابط المعاينة  – تعلم Css3

Social Links

 

Day Night Simulation

كود رائع وجميل ، ويعطيك الكثير من الإلهام انصحك بشدة برؤيته !

HTML + CSS + jQuery

رابط المعاينة

Day Night simulation

 

PureCSS Tabs

كثيراََ ما نحتاج في مواقعنا إلى تصميم خاص عبارة عن Tabs وربما نقوم بالبحث عن مكتبات jQuery أو Css جاهزة للقيام بذلك ،

هذا كود سهل وبسيط ويمكنك استخدامه بسهولة في كيفية عمل Tabs بواسطة الـ CSS  فقط .

رابط المعاينة

PureCSS Tabs

 

CSS3 Loading animations

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

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

رابط المعاينةتعلم كيف أقوم بإنشاء Spinner Loading

 

Messaging App UI with Dark Mode

لربما تعمل الان على مشروع يحتوى على نظام محادثة ، هنا كود جميل وواضح وايضاََ متجاوب على جميع الشاشات ، ويحتوى على النظام الليلي .

رابط المعاينة

Messaging App UI with Dark Mode

 

MY ACCORDION

إنشاء أكوردين مع أنيميشن جميل ، بواسطة الـ HTML + CSS فقط .

رابط المعاينة

ACCORDION

 

Modal CSS

كود عبارة عن Modal أو ما يسمى أيضاََ بـ PopUp مبني بواسطة الـ HTML + CSS فقط ، ربما تستفيد منه في مشاريعك أو التعلم منه .

رابط المعاينة

 

مجموعة من الأكواد الخاصة بصفحة 404

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

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

 

 1- Fargo 404

رابط المعاينة

Fargo 404

 

2- No Vacancy 404

رابط المعاينة

 

3- 404 – Lost In Space

رابط المعاينة

404 - Lost In Space

 

5- 404 page

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

رابط المعاينة

404

 

Direction-aware hover effect

إذا كان لديك قسم في موقعك عبارة عن مجموعة من الـ Blocks ، ربما يكون عبارة عن عرض الأعمال ، أو عرص صور معينة أو أي كان ، هذا قد يساعدك كثيراََ .

رابط المعاينة

محتويات المقالة