إضافة جميلة يمكنك إضافتها إلى موقعك

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

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

و الأن إليك هذه الإضافات الرائعة (يمكنك أخد الأكواد و وضعها في موقعك أو مدونتك على بلوجر مثلا) :

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

إقرأ المزيد

مشاريع لمبدعين على موقع كودبين #4

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

1 - Movie card / hover effect :

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

2 - Bootstrap Mega menu with CSS :

قبل مدة طلبني شخص لكيفية عمل قائمة ميجا (mega menu)، هاهي أخي الكريم ماعليك سوى أخد الكود و تخصيصها كما تريد، يمكن أن العمل لايظهر بالكامل، قم بالضغط على Edit on Codepen حتى يظهر كامل و بشكل جيد.

3 - SVG catmull-rom animations :

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

4 - A bike :

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

5 - `linear` timing function (interactive) : 

العمل إبداع و لانقاش فيه !

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

إقرأ المزيد

مشاريع لمبدعين على موقع كودبين #3

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

1 -  Plexus - بليكسو

من أروع الأعمال، ثأثير جميل يتجاوب مع الماوس، يمكنك التحكم في حجم النقاط فقط باستعمال الـcurseur الموجود فوق.

2 - تحميل الصفحة - Loader

كما تعلمون أننا سبق و شرح في درس سابق كيف نبرمج "أداة تحميل الصفحة" أو ما يسمى بالـLoader، يمكنك مشاهدة الدرس و تخصيص التصميم كما تريد، كما تلاحظ في هذا العمل فهو جد أنيق و يعطي جمالية للموقع.

3 - View Slide Dual 

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

4 -Pen - Sublime

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

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

إقرأ المزيد

مشاريع لمبدعين على موقع كودبين #2

السلام عليكم أحبابي في الله، تتمة لسلسلة #مشاريع لمبدعين على موقع كودبين و الذي سبق و شرحناه، على العموم بعد أن قمت بنشر أول موضوع حول هذه السلسلة من هنا.

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

1 - 

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

2 - 

كما يمكننا أن نستنتج اسم المشروع "Winding Road Poem Form" "لف طريق نموذج قصيدة"، يمكنك من كتابة و ترتيب أبيات شعرية، رغم أن هذا المشروع لن ينال إعجاب الكثير منكم، وذالك لانه لايصلج لاي شيء تقريبا :v لكن أعجبني التصميم و الألوان و كذالك طريقة عمله.

3 -

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

4- 

عبارة عن خريطة للولايات المتحدة و تحتوي على جميع الجهات، التصميم احترافي و جميل.

5 -

مشروع عبارة عن سكربت صغير لرفع الصور بتصميم لابأس به.

6 -

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

7 -

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

8 -

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

9 - 

بدون تعليق :)

10 -

غني عن التعليق هذا المشروع، حقيقة جد رائع و بتأثير أنيق، من بين الأعمال التي نالت إعجابي كثيراً.

ملاحظة : يمكنك أن تكون مساحة مشاهدة بعض الأعمال صغيرة، يمكنك الضغط على "Edit on CODEPEN" لتتوجه بعد ذالك إلى صفحة كل مشروع لمشاهدته بشكل واضح.

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

إقرأ المزيد