تطبيق متميز لعمل قوائم تتمدد بشكل منزلق عند مرور الماوس .. بإستخدام مكتبة jQuery .. يمكنك رؤية نماذج لمواقع إستخدمت فيها التطبيق بزيارة مدونة صوت الفؤاد أو مدونة عبدالله السعيد أو شاهد هذا الديمو ..
التدوينات الموسومة بـ ‘css’
[ أفكار ] إصنع ساعة بإستخدام CSS , javascript
فكرة و تطبيق لصنع ساعة بإستخدام CSS و Javascript أعجبتني الفكرة و طريقة التنفيذ فاردت مشاركتكم بها …
[ فكرة للنقاش ] معرض CSS عربي ..
من فترة طويلة و انا أفكر في هذه الفكرة … معرض للمواقع العربية التي تستخدم CSS في توزيع التصميم … و لكن هل من الممكن أن يكون هذا المعرض مفيد .. في ظل قلة المواقع العربية التي تعتمد على CSS في تنظيم محتوياتها … أم أن تكون معايير الاضافة لا تعتمد فقط على استخدام الموقع لـ CSS .. لكن ربما جودة التصميم و فكرته … ترتيب الكود بعيداً عن هل هو مطابق للمعايير القياسية أم لا .. ما رأيكم ما هي المعايير التي يمكن أن يتم الاضافة على أساسها … ؟
الموقع لن يكون فقط معرض .. و لكن هناك أفكار أخرى مفيدة سأقوم بتطبيقها .. ان شاء الله .. و لكن ما يهمني الأن هو تحديد معايير الاضافة في المعرض ..
أتمنى من الجميع المشاركة بأفكاره …
طريقة تخطي فحص CSS مع الخواص الغير قياسية !
الهدف من اتباع المعايير القياسية في تصميم صفحات الويب هو أن تظهر هذه الصفحات بشكل سليم على كافة المستعرضات ( الداعمة للمعايير القياسية ) .. و لكن في كثير من الأحيان نلجأ إلى إستخدام بعض خواص CSS الخاصة بأحد المستعرضات لحل مشكلة في ظهور التصميم عليه مثل طرق حل مشاكل IE6 أو إستخدام بعض خواص CSS 3 كـ opacity و بالطبع فإن هذه الخواص غير قياسية في CSS 2.1 وعند فحص الصفحات بإستخدام فاحص W3C فسيظهر لك بأن الصفحة غير مطابقة للمعايير القياسية وأن هذه الخواص غير موجودة ..
بالطبع يمكنك تجاهل هذا الأمر فليس الهدف هو تجاوز إختبار CSS ولكن الهدف هو ظهور الموقع على كل المستعرضات بشكل سليم ولكن إن كنت أحد المهوسين برؤية الشريط الأخضر في صفحة فحص CSS و رؤية كلمة Congratulations! No Error Found 
و في نفس الوقت تريد استخدام هذه الخواص فإليك الطريقة : ( اكمل قراءة التدوينة )
[ أفكار ] لوحة مفاتيح باستخدام CSS
لوحة مفاتيح تم بنائها بالكامل باستخدام CSS فقط دون استخدام اي صور او جداول .. الفكرة و طريقة التطبيق أعجبتاني كثيراً .. اطلع على الكود المصدري للصفحة لتفهم الفكرة ..
محتوى محاط بصور بإستخدام CSS
أهلا بكم في درس جديد من دروس CSS هذا الدرس متقدم بعض الشئ عن الدروس السابقة و التي تناولت فيها أساسيات CSS … سنتناول في هذا الدرس طريقة عمل إطار قابل للتمدد من الصور لمجموعه من المحتويات باستخدام CSS فقط . بشكل أوضح نريد الوصول لتخطيط الشكل ليكون بهذه الطريقه :
تخصيص CSS للمستعرضات … باستخدام جافا سكريبت
تحدثت في تدونية سابقه عن تطبيق conditional-css .. لتخصيص أكواد css للمستعرضات باستخدام php .. في هذه التدوينة سأستعرض تطبيق أخر لتخصيص أكواد css للمستعرضات و لاكن هذه المره باستخدام الجافا سكريبت .
CSS Browser Selector
تطبيق صغير الحجم لا يتعدي الكيلو بايت مبني باستخدام جافا سكريبت .. التطبيق يتيح تخصيص اكواد CSS لتظهر بشكل مختلف على مستعرض دون الأخر أو على نظام تشغيل دون الأخر .
( اكمل قراءة التدوينة )
3 ادوات لتجريب أكواد Html / CSS اون لاين ..
أثناء بحثي عن محرر Html / CSS يتيح كتابة أكواد Html و CSS وتجربتها مباشرة لاستخدامه لعرض الأمثلة التي ساقوم باذن الله بطرحها في دروس CSS و Html القادمة و التي ستعتمد على الأمثلة بشكل رئيسي لتوضيح فائدة كل خاصية و عنصر و اتاحة الفرصة للزائر لكي يعدل على الكود و تطبيق تعديلاته و بالتالي تكون الاستفادة أكبر .. و هذه هي الطريقة المستخدمة في عرض الأمثلة في موقع w3cschools … بعد البحث و الاطلاع على الكثير من الصفحات و جدت عدد من الأدوات تفي بالغرض ولكن للأسف لا تتيح امكانية تحميلها و رفعها على موقعي و استخدامها لعرض أمثلتي … فأردت مشاركتكم بها إلى أن أجد ضالتي … 
Rendur
اداة توفر مربع ادخال قابل للتحريك وتغير الحجم .. قم بكتابة أكوادك وسيتم تطبيقها مباشرة ، ما يميز هذا المحرر هو ان تطبيق الاكواد سيكون في الصفحة كاملة وهذا ما يعطيك فرصة اكبر للمعاينة .
Real-time
صفحة الاداة مقسمه الى جزئين قم بكتابة اكوادك في الجزء العلوي من الصفحة وسيتم تطبيقها مباشرة في الجزء السفلي .
TryIt Editor
هذه الاداة هي المستخدمة في موقع w3cschools .. ما يعيب هذه الاداه صغر المساحة الخاصة بتطبيق الأكواد كما أن الأكواد لا يتم تطبيقها فور كتابتها ولكن عليك الضغط على زر ” Edit the text and click me ” ليتم تطبيقها .
اذا كان لديك اداة يمكنني استخدامها لعرض الأمثلة فلا تبخل علينا بالمساعدة
جاري التحميل ...
فؤاد بدوي شاب مصري ، طالب جامعي بكلية العلوم تخصص رياضيات وعلوم الحاسب ... مصمم مواقع حر Freelancer web designer.. أجيد Photoshop , Xhtml , CSS و لذلك ستجد ان هذه المدونة تتناول بشكل رئيسي تصميم و تطوير المواقع و المجتمعات الالكترونية و بعض المصادر التي تفيد المصممين و المطورين ..
أحدث التعليقات