التدوينات الموسومة بـ ‘CSS’
17
Jul

كثر في الأونة الأخيرة الحديث عن HTML5 خصوصا بعد صدور الاصدار الأخير من الفايرفوكس و كمصمم لمواقع الويب يري ما تقدمه CSS3 و HTML5 شيء مثير لذا قمت بتجربه اخراج قالب مجاني باستخدام CSS3 و HTML5
Free HTML5 CSS3 Template 300x235 Free HTML5 CSS3 Template
القالب يعمل بشكل جيد علي كل المتصفحات الحديثة و لكن للأسف لن تري تأثيرات CSS3 مع الانترنت اكسبلور و لكن حتي بدونها التصميم لازال جميلا icon smile Free HTML5 CSS3 Template
القالب متوافق مع المعايير القياسية لمنظمة W3C
Download Template
Live Demo

, , , ,

01
Dec

قسم جديد رايت انه حان الوقت لفتحه في المدونة و جاء القرار متزامنا مع قراري باعطاء كل روابط المدونة الخاصية Rel مع القيمة NoFollow لذا يمكنني وضع روابط كما اشاء icon smile أخبار و راوبط (1)

اخبار

روابط

, , , , , ,

27
Feb

كيف تغير الـ CSS IDs باستخدام الجافا اسكربت

يوجد طرق و تكنيكات متعددة لتغير الـ CSS باستخدام الجافا اسكربت منها ما ساذكره الان. و نحتاج لمثل هذه التكنيكات لاضافة مزيد من الديناميكية علي صفحاتنا.

كيفية الاستفادة منها

يمكننا مثلا و بكل سهولة اضافة DIV يحتوي علي اعلانات و جعل المستخدم للصفحة يتحكم في اظهار او اخفاء هذه الاعلانات او مثلا جعل المستخدم يختار حجم اكبر للخطوط الموجودة او مثلا يمكننا ان نصمم صفحاتنا علي اساس ان عرضها 800 بكسل و اضافة خاصية تمكن المستخدم من جعل عرض الصفحة 1024 بكسل لمستخدمي الشاشات ذات الدقة الاكبر

مثال علي ذلك

هذا هوا مثال علي ذلك و لتحميل الكود من هنـــــا
للعلم لقد وضعت هذا الكود تحت الرخصة Public Domain اي يمكنك ان تفعل به ما تريده .

شرح الكود المستخدم في المثال

Xhtml
انشئنا Div يحتوي علي الاعلانات سميناه adsbar و Div اخر يحتوي علي بقي عناصر الصفحة سميناه Body كما ضفنا زر لاغلاق هذا الشريط الجانبي و جعلنا تنسيقة يظهر و كانه ايقونة اغلاق.

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

function HideAds()
{
document.getElementById(“adsbar”).style.visibility=”hidden”
document.getElementById(“body”).style.width=”100%”

}

و كما ترون جعلتنا الجافا اسكربت قادرين علي اخبار المتصفح ان ال Div Id التي تسمي adsbar نريد ان تجعل للخاصية visibility قيمة جديدة و هي hidden
يعني باختصار ما حدث هوا ان الوضع الافتراضي لهذا الـ ID هو

Visibility: visible

قلنا للمتصفح اجعله

Visibility: hidden

و علي نفس المنوال يمكننا ان نخبر المتصفح مثلا او بتغيير اللون او ما نريد انت عرفت الان كيف تصطاد فاصطاد ما تحب.
و لكن عند اخفاء هذا الشريط الجانبي ستضل باقي الصفحة تمثل اربع اخماس الشاشة لذلك سنجعل الجافا اسكربت تخبر المتصفح ان يجعل الـ ID الذي يدعي body ذو عرض يمثل 100% من الشاشة عن طريق الامر

document.getElementById(“body”).style.width=”100%”

و علي هذا المنوال يمكنك ان تفعل ما تريد و تضيف دينامكية كبيرة لصفحتك.
صورة توضحية

js css تغير الـ Css باستخدام الـ JavaScript

و لا تنسي المثال علي ما سبق هنـــــا و لتحميل الكود من هنـــــا

,

31
Aug

atm visa2 كيف تستعمل الصراف الآلي ATM

للوهلة الاولي قد تعتقد انه ما كان يجب طرح موضوع مثل هذا فهو مضيعة لوقتي فقط و الكل يعلم كيف يسحب من الصرفات الآلية حتي الطفل يولد و في يده بطاقة ائتمانية ذهب و يمكنه ان يقوم بعملية السحب من ATMs بدون مساعدة من احد . حسناً انتم علي حق السحب من الصرفات الآلية ليس بالعملية الصعبة او المعقدة و لكن تذكر معي اول مرة تقوم بسحب اموالك من الصراف الآلي ألم تبحث عن صرافة لا يوجد حولها ناس حتي لا تشعر بالاحراج ان قمت بعملية السحب بطريقة خاطئة تجعل منك اضحوكة او طلبت من اي شخص مساعدك في كيفية السحب و لهذا قمت باعداد هذا الموضوع فهذه فائده الانترنت ان تجد كل ما تريده بلغتك الام فمثلا ان كتب شخص في محرك البحث “كيفية استعمال الصراف الآلي” لن يجد شيئا. شخصيا من قام بتعليمي عملية السحب و الايداع في الصرفات الآلية هو حارس الامن امام البنك الذي اتعامل معه ( ربنا يجازيه خيرا علي معروفه ) فقد كانت اول مرة اجرب عملية سحب الاموال و كانت الشاشات تعمل باللمس و انا ابحث عن اي زر لاضغط علية فلم اجد فاحسست اني صعيدي في الجامعة الامريكية و لكن لا باس فالحياة تجارب icon biggrin كيف تستعمل الصراف الآلي ATM و اذكر ايضا انني لم استعمل بطاقاتي الائتمانية بعد الحصول عليها بمده كبيرة لان طبيعة الانسان و فطرته تكون مترددة و متخوفة تجاة الاشياء الجديدة و هذا ينطبق علي كل شيء في الحياة و ساقول لك ابسط مثال علي ذلك فاذا دخلت مطعم لاول مرة لم تأكل فيه من قبل فتسأل نفسك هل يا تري هذا المطعم يقدم خدمة جيدة ؟ و ماذا عن قائمة الطعام ؟ هل ساجد ما اريده ؟ و ماذا عن الاسعار ؟ هل ساضطر الي انفاق كل اموالي هنا ؟! و ستجدد العديد من الاسئلة تتدفق الي دماغك .

المزيد »

, , , , , , ,

26
May

W3Schools CSS Quiz

css quiz اختبر نفسك في Css

اختبار ال W3Schools في ال Css و لا انكر ان هذا الاختبار من المرة الثانية حيث في الاختبار الاول حصلت علي 19 من 20 icon biggrin اختبر نفسك في Css
اختبــــــر نفســــــــــك مــــــــــن هنــــــــــــــا

هل من متحدي !!

هذه المقالة ستكون بداية لكورس كامل في ال Css سيستمر لمده سنة ان شاء الله و ستكون نواه ايضا لكتاب في ال Css و Xhtml مثل مقالات الروبي اون ريلز التي اكتبها ادعوكم للتفاعل و اضافة اقتراحاتك

, , , , ,