تطبيق على خاصية position: تأثير الروابط + واجهة إستخدام
سبق كتبت درس حول خاصية position ، وأردت كتابة دروس أخرى حول هذه الخاصية وسأكتفي به لأني المصادر المتعلقة بها متوفرة وبكثرة جداً بالمواقع الأجنبية فلا حاجة لإعادة الدروس مرة أخرى! ، درس اليوم سيكون عن تطبيق على تأثير المحدد hover ، سواء كنت تريد عمل قائمة روابط أو ملاحة (Navigation) ، أو بنفس الطريقة ولكن على واجهة تستطيع من خلالها التحكم في ظهور الصور التي تريدها بتأثير مؤشر الفأره عليه.
- مثال على الدرس ، تأثير بسيط على كلمة (إشترك الآن) وظهور عبارة الخصم ..
- تحميل الأمثلة.
كيف تصبح مطور مواقع ويب
هذه التدوينة خاصة للإجابة على أسئلة أحد المعلقين في المدونة وأحببت أن أجيب عليها في تدوينة خاصة والأجوبة عموماً هي من وجهة نظري وحسب تجربتي التي لازلت أمارسها لتحسين مستواي ، إسم هذه التدوينة بالأحرى ماذا أحتاج لكي أكون مطور مواقع ويب ، بالطبع أنا أقسّم هذه المهنة على مستويات أو غالباً ما يتم تقسيمها بهذا الشكل: مبتديء – محترف.
أفضل +20 معرض أعمال لمصممين جرافك
هذه التدوينة الثانية حول أفضل أعمال مصممي الجرافك (Graphic Design) ( بعد التدوينة الأولى حول أفضل 30 معرض أعمال لتطوير مواقع الويب) ، سأعرض فيها أسماء المصممين أو ألقابهم أو أسمائهم المستعاره مع رابط لمواقعهم الشخصية إضافةً إلى ذلك صور لمواقعهم أو أعمالهم قبل زيارتها ، من أسباب كتابة هذه التدوينة أيضاً قلة مواضيع في مدونتي التي تتحدث عن جرافك ديزاين (Graphic Design)! لذا إحتمال المواضيع القادمة تكون متخصصة في هذا القسم.
Fabien Barral
أفضل +30 معرض أعمال مواقع الويب
الكثير منا يهتم بجمع أعمال مطوري مواقع الويب الآخرين و أكثر الأشياء التي تدعوك لمشاهدة هذه الأعمال هي زيادة فهمك لعمل مثل هذه التصاميم ، معرفة طريقة عملها ، دراسة عناصر الصفحة وتنسيقها ، أفكار لواجهات الإستخدام User Interfaces ، .. بإختصار مصدر إلهام لكل مطور ومصمم ، هذه مجموعة من مفضلتي لأفضل وأكثر من 20 معرض للأعمال إحتفظت بها سابقاً وأحببت مشاركتكم بها مع الروابط والصور.
Authentic Style
متى ستحتاج إلى هذه المصادر أو الروابط؟
عن طريق متابعتي للمدونات الأجنبية المتخصصة سواء في التصميم أو تطوير المواقع ، كنت أتابعها عن طريق الشبكات الإجتماعية ولكن مع الوقت إكتفيت بمدونات حددتها تفي بالغرض بدلاً من متابعة أكثر من 10 تدوينات يومياً بجانب المدونات الأخرى! وبهذه الطريقة ستحاول تنظيم الروابط التي تتابعها عن طريق قاريء RSS.
تطبيق على درس النماذج + إستخدام Javascript
هذا الدرس تطبيق للدرس السابق حول تنسيق النماذج ، ولكن سيكون عملي أكثر بشفرة HTML و CSS وأيضاً إستخدام Javascript في إضافة ميزتين للنموذج ، وهما ملاحطة حول الحقول المهمة بمجرد الضغط على الحقل (بإستخدام الحدث onFocus و onBlur ) وأيضاً التأكد من الحقول المهمة التي نسقناها ، سأحاول شرح النقاط المهمة في الدرس مع وجود مثال قبل قراءة الدرس وإن أعجبك تستطيع أيضاً تحميل ملف الدرس.
- مثال على الدرس (التأكد عن طريق النوافذ)
- مثال على الدرس 2 (التأكد عن طريق إضافة تعليق بجانب الحقل وتغيير لون الحقل والنص إلى اللون الأحمر)
- تحميل الأمثلة
درس CSS: حول خاصية position
خاصية position من أهم الخواص في CSS وعن طريقها تستطيع عمل حيل رائعة وخاصةً بإستخدام الجافاسكربت وأيضاً عمل تصاميم رائعة الشكل وبتأثيرات هذه الخاصية كما نشاهدها في بعض التصاميم الموجودة ضمن معارض CSS المنتشرة وأيضاً إستخدامها مع لغة Javascript ومكتباتها مثل jQuery ، MooTools ، وغيره .. ، وكما وعدكم سابقاً بكتابة هذا الدرس والذي سيشرح بشكل بسيطة طريقة عملها والخواص الأخرى المتعلقة بها مثل z-index الموجودة في CSS ، وسننتقل بعدها لبعض الأمثلة العملية في إستخدام هذه الخاصية.
