أرشيف الوسم: css

إصنع قائمة أزرار منزلقة بإستخدام jQuery

smooth-animatedتطبيق متميز لعمل قوائم تتمدد بشكل منزلق عند مرور الماوس .. بإستخدام مكتبة jQuery .. يمكنك رؤية نماذج لمواقع إستخدمت فيها التطبيق بزيارة  مدونة صوت الفؤاد أو مدونة عبدالله السعيد أو شاهد هذا الديمو ..

أكمل القراءة

[ أفكار ] إصنع ساعة بإستخدام CSS , javascript

css-clock

فكرة و تطبيق لصنع ساعة بإستخدام CSS و Javascript أعجبتني الفكرة و طريقة التنفيذ فاردت مشاركتكم بها …

لمشاهدة مثال تجريبي

للاطلاع على الفكرة و طريقة الاستخدام

[ فكرة للنقاش ] معرض CSS عربي ..

من فترة طويلة و انا أفكر في هذه الفكرة … معرض للمواقع العربية التي تستخدم CSS في توزيع التصميم … و لكن هل من الممكن أن يكون هذا المعرض مفيد .. في ظل قلة المواقع العربية التي تعتمد على CSS في تنظيم محتوياتها … أم أن تكون معايير الاضافة لا تعتمد فقط على استخدام الموقع لـ CSS .. لكن ربما جودة التصميم و فكرته … ترتيب الكود بعيداً عن هل هو مطابق للمعايير القياسية أم لا .. ما رأيكم ما هي المعايير التي يمكن أن يتم الاضافة على أساسها … ؟

الموقع لن يكون فقط معرض .. و لكن هناك أفكار أخرى مفيدة سأقوم بتطبيقها .. ان شاء الله .. و لكن ما يهمني الأن هو تحديد معايير الاضافة في المعرض ..

أتمنى من الجميع المشاركة بأفكاره …

طريقة تخطي فحص CSS مع الخواص الغير قياسية !

مطابق للمعايير القياسية
الهدف من اتباع المعايير القياسية في تصميم صفحات الويب هو أن تظهر هذه الصفحات بشكل سليم على كافة المستعرضات ( الداعمة للمعايير القياسية ) .. و لكن في كثير من الأحيان نلجأ إلى إستخدام بعض خواص CSS الخاصة بأحد المستعرضات لحل مشكلة في ظهور التصميم عليه مثل طرق حل مشاكل IE6 أو إستخدام بعض خواص CSS 3 كـ opacity و بالطبع فإن هذه الخواص غير قياسية في CSS 2.1 وعند فحص الصفحات بإستخدام فاحص W3C فسيظهر لك بأن الصفحة غير مطابقة للمعايير القياسية وأن هذه الخواص غير موجودة ..

بالطبع يمكنك تجاهل هذا الأمر فليس الهدف هو تجاوز إختبار CSS ولكن الهدف هو ظهور الموقع على كل المستعرضات بشكل سليم ولكن إن كنت أحد المهوسين برؤية الشريط الأخضر في صفحة فحص CSS و رؤية كلمة Congratulations! No Error Found :D و في نفس الوقت تريد استخدام هذه الخواص فإليك الطريقة : أكمل القراءة

[ أفكار ] لوحة مفاتيح باستخدام CSS

css-keyboard

لوحة مفاتيح تم بنائها بالكامل باستخدام CSS فقط دون استخدام اي صور او جداول .. الفكرة  و طريقة التطبيق أعجبتاني كثيراً ..  اطلع على الكود المصدري للصفحة لتفهم الفكرة ..

محتوى محاط بصور بإستخدام CSS

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


أكمل القراءة