خاصية position من أهم الخواص في CSS وعن طريقها تستطيع عمل حيل رائعة وخاصةً بإستخدام الجافاسكربت وأيضاً عمل تصاميم رائعة الشكل وبتأثيرات هذه الخاصية كما نشاهدها في بعض التصاميم الموجودة ضمن معارض CSS المنتشرة وأيضاً إستخدامها مع لغة Javascript ومكتباتها مثل jQuery ، MooTools ، وغيره .. ، وكما وعدكم سابقاً بكتابة هذا الدرس والذي سيشرح بشكل بسيطة طريقة عملها والخواص الأخرى المتعلقة بها مثل z-index الموجودة في CSS ، وسننتقل بعدها لبعض الأمثلة العملية في إستخدام هذه الخاصية.
درس CSS: حول خاصية position
02 فبراير 2009
درس CSS: عمل حواف دائرية للصندوق
20 يناير 2009
الفكرة واضحة من العنوان (ومعروفة للجميع ) فقط أحببت مشاركتكم به ولمن لا يعرف طريقة عملها ، وهي عمل الحواف الدائرية الجميلة والتي نراها في معارض تصاميم CSS المختلفة ، أحب أن أذكر أني كتبت درس سابق لطريقة عمل حواف دائرية في الفوتوشوب سهلة جداً ،ولكن هذا الدرس يتحدث عن طريقة عملها في CSS أي ربط الصور أو تقسيمها وعرضها في صفحة الويب على شكل صندوق.
- تحميل الأمثلة
- لمشاهدة الأمثلة موجودة أسفل الصفحة
النماذج في XHTML – الجزء الثاني
24 ديسمبر 2008
ذكرنا في الجزء الأول من حديثنا حول النماذج في XHTML طريقة كتابة النماذج ومحتوياتها وركزنا على حقول من الوسم input مع بعض خصائصها المهمة ، سنفصل أكثر في الحقول وأنواعها وإنشاء المساحات النصية ، وعمل قائمة الإختيارات مع بعض الملاحظات التي سنذكرها في نهاية الموضوع.
.. أكمل قراءة بقية الموضوع »
النماذج في XHTML – الجزء الأول
19 ديسمبر 2008
موضوعنا اليوم يتحدث عن النماذج(Forms) في XHTML ، النماذج لها إستخدامات كثيرة في الصفحات مثل نموذج مراسلة ، نموذج تسجيل أو تسجيل دخول ، .. إلخ .. سنتحدث عن كيفية كتابتها في XHTML وخاصة الأوسمة المتعلقة بها التي تستطيع عمل عناصر عن طريقها.
عند عمل نموذج في XHTML يكون ذلك في البداية عن طريق الوسم form والذي سيحتوي على بقية محتويات النموذج هناك طرق أسهل لعمل النماذج ولكن سنخصص هذا الموضوع بالتفصيل قليلاً سنشرح الخصائص المتعلقة بكل وسم نريده وأشكال لنماذج وكيفية عملها بإستخدام CSS ( سيأتي لاحقاً).
.. أكمل قراءة بقية الموضوع »
درس CSS: إستبدال عنوان أو نص بصورة
01 ديسمبر 2008
درس بسيط حول كيفية إستبدال أو تحويل عنوان أو نص مكتوب إلى صورة ، هناك أمثلة كثيرة فمثلاً يمكنك أن تضع صورة الشعار بدلاً من عنوان الموقع في الأعلى أو إذا أردت إستبدال صورة تكتب فيها عنوان فقرة أو عنوان قائمة بدلاً من وضعها بكتابة نصية ، درس سهل وبسيط جداً.
درس: تصميم صفحة ويب بواسطة XHTML و CSS
26 نوفمبر 2008
درس للمبتدئين يشرح كيفية تصميم صفحة ويب بـ XHTML و CSS ، سيكون بسيط وسهل وموجه لمن يريد معرفة كيفية تصميم المواقع وبالأخص الطريقة الصحيحة والمعايير الحديثة ، سأركز فقط على أشياء أساسية يعني لن أطيل في الدرس كثيراً فقط تفاصيل صغيرة في CSS ، كما أن هذا الدرس بداية لدروس قادمة في نفس الموضوع إن شاء الله ولكن ستكون منها متوسطة ومنها متقدمة.
درس فوتوشوب: إستخدام أداة القلم Pen Tool
30 يونيو 2008
لعلكم تعرفون هذه الأداة الموجودة في عدة برامج التصميم مثل الفوتوشوب واليستريتر والفايروركس و غيره ، هذا درس سهل ويتحدث عن طريقة إستخدامه وهناك من يجد إستخدام هذه الأداة صعب للغاية! ولكن في الحقيقة سهل جداً وهذا الدرس موجهة للمبدئين بالخصوص.
دقة أداة القلم تختلف من برنامج إلى برنامج فمثلاً في برنامج الفايروركس يكون إتقان ودقة أداة القلم أفضل من الفوتوشوب ، وكذلك برنامج اليستريتر الذي يضيف إلى هذه الأداة مرونة أكثر. .. أكمل قراءة بقية الموضوع »
درس فوتوشوب: عمل تقويس لأطراف صندوق بطريقة سهلة
29 مايو 2008
هذا الدرس مخصص لعمل تقويس لحدود أي صندوق في التصميم يتم عمله ببرنامج الفوتوشوب ، يمكنك إستخدامها في أي عمل سواء كان في تصميم موقع ويب أو تصميم جرافك [المثال موجود في أسفل الدرس]
إفتح ملف جديد بأي قياس تريده عن طريق File -> new أو عن طريق لوحة المفاتيح Ctrl+N ، أضف طبقة جديدة لقائمة الطبقات أو عن طريق لوحة المفاتيح Shift+Ctrl+n ، إستخدم أداة التحديد 
أو المسماه باللغة الإنجليزية Rectangular Marquee Tool عن طريق لوحة المفاتيح بالضغط على حرف M وحدد الصندوق الذي تريد إنشاءه: .. أكمل قراءة بقية الموضوع »
