هذا الدرس ضمن سلسلة تطبيقات على CSS3، إستعرضت في الدرس السابق طريقة تحديد خط معين في CSS3، درس اليوم يتحدث عن ميزة عمل التدرجات في CSS3 والتي ستكون بديل لإستخدام الصور كتدرجات لعرض بعض العناصر.
كما أن في هذا الدرس سوف تتعرف على الخاصية التي تقوم بعمل التدرجات في CSS وتكتب الخاصية بأكثر من طريقة بسبب دعم المتصفحات لها مثل تطبيق خاصية التدرجات في متصفح Firefox الذي يستخدم محرك Gecko وفي متصفح Safari الذي يستخدم محرك Webkit. علماً بأن خاصية التدرجات Gradient تكتب في كقيمة في خاصية background-image، ومدعومة في المتصفحات التي تستخدم محرك Webkit و Gecko.
.. أكمل قراءة بقية الموضوع »
هذا الدرس ضمن سلسلة تطبيقات على CSS3، إستعرضت في المرة السابقة طريقة عرض تعدد للخلفيات في CSS3، درس اليوم يتحدث عن ميزة إختيار الخط الخاص من قبل المصمم والتي تطرقت لها في موضوع مصادر حول تقنية CSS3. يمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C كذلك.
إختيار خط خاص بالصفحة المنسقة موجودة من قبل ولكن مفعلة أكثر في CSS3. هذه الميزة لحل إشكاليات تناسب الخط من طرف المصمم وصاحب الموقع والأهم تناسب مستخدم الموقع. يمكن إختيار خطوط أخرى مناسبة للمصمم ومستخدم الموقع التي لاتوجد في جهاز المستخدم والذي تعود على الخطوط المعروفة مثل خط Arial و Tahoma وsans-serif وغيرها موجودة في جهازه أساساً. هذه الميزة مدعومة في محرك Webkit ومحرك Mozilla/Gecho ومحرك Presto.
.. أكمل قراءة بقية الموضوع »
هذا الدرس ضمن سلسلة تطبيقات عن CSS3، أستعرضت في المرة السابقة طريقة عمل الظلال في CSS3 ، درس اليوم يتحدث عن ميزة تعدد الخلفيات في CSS3 والتي شرحت عنها أيضاً في موضوع مصادر حول تقنية CSS3 الذي كتبته سابقاً، ويمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C كذلك.
ميزة تعدد الخلفيات في CSS3 إختصرت الكثير من تنسيقات CSS التي كانت تحتاج إلى أكثر من عنصر من وسم div لعمل أكثر من خلفية في عنصر واحد لعل أشهر مثال هو مثال الحواف الدائرية لكنها موجودة في CSS3 ولا تحتاج الآن إلى وجود الصور كخلفية ولكن هناك عناصر قد تحتاج إلى أكثر من صورة موجودة في الخلفية، كما أن تعدد الخلفيات في CSS3 يتم على خاصية background نفسها، هذه الميزة مدعومة في محرك Mozilla/Gecho و محرك Webkit إضافةً إلى متصفح Opera.
.. أكمل قراءة بقية الموضوع »
هذا الدرس ضمن سلسلة تطبيقات عن CSS3، أستعرضت في المرة السابقة طريقة تحريك العناصر في CSS3 ، درس اليوم يتحدث عن ميزة أخرى وهي ميزة الظلال في CSS3 والتي شرحت عنها أيضاً في موضوع مصادر حول تقنية CSS3 الذي كتبته سابقاً.
ميزة الظلال في CSS3 توفر للخطوط والعناصر HTML الأخرى وجود ظل محدد بلون معين إضافةً إلى وجود درجة تشتيت وأبعاد محددة وهي تكون عبر خاصية text-shadow خاصة بوجود الظلال في النصوص وخاصية box-shadow خاصة بوجود الظلال في العناصر HTML عموماً مثل أشكال الصناديق، ما زال دعم خصائص هذه الميزة محدود على المتصفحات التي تعمل على محرك webkit مثل متصفح Safari وChrome، متصفح Firefox إضافةً دعم متصفح Opera لميزة الظلال.
.. أكمل قراءة بقية الموضوع »
هذا الدرس ضمن سلسلة تطبيقات عن CSS3، أستعرضت في المرة السابقة طريقة عمل تعدد الأعمدة في CSS3 ، درس اليوم يتحدث عن ميزة تحريك العناصر في CSS3 والتي شرحت عنها أيضاً في موضوع مصادر حول تقنية CSS3 الذي كتبته سابقاً ويمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C كذلك.
ميزة التحريك في CSS3 تتيح إمكانية إعطاء خصائص CSS الأخرى فترة ظهور سواء كانت بطيئة أو سريعة وتحدد بالثواني، إضافةً إلى مدة لتأخير التحريك والظهور، ما زال دعم خصائص هذه الميزة محدود على المتصفحات التي تعمل على محرك webkit مثل متصفح Safari وChrome، متصفح Firefox يدعم خاصية transform فقط.
.. أكمل قراءة بقية الموضوع »
هذا الدرس ضمن سلسلة تطبيقات على CSS3، أستعرضت في المرة السابقة طريقة عمل الحواف الدائرية بواسطة خاصية border-radius والتي شرحت عنها أيضاً في موضوع مصادر حول تقنية CSS3 الذي كتبته سابقاً، ودرس اليوم يتحدث عن ميزة تعدد الأعمدة في CSS3 وتسمى أيضاً Multi-column ويمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C.
الأعمدة المتعددة تظهر عبر تقسيم فقرة طويلة واحدة أو عدة فقرات على عدة أعمدة بشكل مرتب كما نراها عند قراءة الصحف والمجلات، وتطبيق اليوم سيكون عن عدة خواص مثل خاصية column-count و column-gap وغيره، والتي تستخدم في عمل تعدد الاعمدة للفقرات لتظهر بشكل مرتب ومتناسق، غالباً ما يتم عملها على ذيل الصفحة لتنسيق معلومات قد لاتكون مهمة ولكن يتم ترتيبها وتنسيق على هذا النمط.
.. أكمل قراءة بقية الموضوع »
هذا الدرس ضمن سلسلة جديدة من دروس بسيطة عن CSS3 ومميزاتها الجديدة وهي سلسلة تطبيقات على CSS3، أستعرضها لكم بشرح خصائص CSS3 ومع أمثلة عليها، يمكنك معرفة المزيد عن CSS3 عبر موضوع مصادر حول تقنية CSS3 الذي كتبته سابقاً، ستكون هذه الدروس سهلة مع تطبيق الأمثلة المرفقة لها. هذا الدرس سيكون عن ميزة الحواف الدائرية في CSS3 ويمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C كذلك.
الحواف الدائرية التي يتم عملها على زوايا الشكل أو الصندوق، وتطبيق اليوم سيكون عن خاصية border-radius، والتي تستخدم في عمل الحواف الدائرية لبعض عناصر الصفحة لتظهر بشكل أجمل.
.. أكمل قراءة بقية الموضوع »
نجد الكثير من المواقع تطبق مميزات CSS3 في الوقت الحالي على تصاميمها حتى المواقع المشهورة والكبيرة تجد تصاميمها تستخدم خصائص CSS3. بالرغم من الدعم المحدود من بعض متصفحات الويب لها (مدعومة لمتصفح Firefox 3+ و Safari 3 و Google Crome في الوقت الحالي) إلا أن أولوية إستخدامها موجودة على الأقل كلمسات أخيره على التصميم.
ومن قبل مصممي المواقع العرب أيضاً نجد الكثير بدأ بإعتماد CSS3 على التصاميم منذ فترة، وقد يؤشر كل هذا إلى قرب إعتماد دعمه من قبل المتصفحات في الفترة القادمة مثل تدعيم الإصدار التاسع القادم من متصفح الإكسبلورر لخصائص CSS3. ستكون هذه التدوينة بداية سلسلة من الدروس البسيطة والخفيفة عن CSS3 سأقدمها لكم بجانب المواضيع التي أكتبها في المدونة.
.. أكمل قراءة بقية الموضوع »
إستكملت عدة مواضيع سابقة تتحدث عن النماذج في XHTML/HTML وتطرقنا فيها إلى كتابة النماذج ثم تنسيق النماذج البريدي وأخيراً إلى تطبيق واحد حول هذا الموضوع، ويمكنك الرجوع إليها عبر هذه الروابط:
اليوم سنتحدث أكثر عن بعض الأفكار حول نماذج html، سندخل في تحديد نمط تصميم نموذج HTML إضافة إلى نماذج مشهورة على الويب من المواقع العالمية، وبعد ذلك أفكار سريعة حول النماذج تتكون من أمثلة وحلول لبعض المشاكل التي تواجه المصممين في تنسيقهم لمناذج HTML.
.. أكمل قراءة بقية الموضوع »
مع سيطرة متصفح الفايرفوكس على سوق المتصفحات وإرتفاع نسبة إستخدامه عن نسبة إستخدام إصدارات متصفح إكسبلورر كما توضح إحصائيات موقع W3schools وإنخفاض عدد مستخدمين إكسبلورر 6 خاصة مع إعلان موقع يوتيوب التخلي عن دعم توافق موقعه مع الإصدار السادس لمتصفح إكسبلورر.
ربما قد يعارض الإنخفاض عدة أمور أهمها وجود الإصدار مع نسخ نظام تشغيل ويندوز الذي يستعمله أغلب المستخدمين إضافةً مع وجوده في أجهزة المقاهي والمدارس عموماً والمشكلة هنا عدم توعية المستخدمين بأن هناك إصدار حديث لنفس المتصفح أو وجود متصفحات أفضل.
لذلك سأكتب وسائل تساعد على ترك دعم إكسبلورر بالنسبة للمطورين والمصممين إضافةً إلى طريقة التعامل مع مستخدمين إكسبلورر 6 عند تصفحهم للموقع.
.. أكمل قراءة بقية الموضوع »
مع ظهور الإصدار الثالث لتقنية CSS منذ فترة من قبل منظمة W3c المستخدمة في تنسيق مواقع الويب بجانب تقنيات مثل HTML، XML والتي لازال فريق CSS WG في منظمة W3c يعمل على الإصدارة الثالثة والتي تدعمها بعض متصفحات التي تعتمد على محرك Gecko و Webkit مثل Firefox و Safari بإستثناء المتصفح Internet Explorer، مع دعمها بعض مميزات CSS3 وليست جميعها، يمكنك رؤية إختبار دعم CSS3 للمتصفحات.
سأعرض مميزات ومصادر الإصدارة الثالثة من تقنية CSS للإستفادة منها وخاصة أنها معتمدة ومستخدمة حالياً في عدة متصفحات ومواقع وبها مميزات يمكن أن توفر عليك والوقت وتضيف المزيد من الجودة والمرونة إلى عملك.
.. أكمل قراءة بقية الموضوع »
الدروس الكتابية تعتبر أحد مصادر التعلم والمنشرة بكثرة على الإنترنت بجانب الدروس الصوتية والمرئية الأخرى وأيضاً الدورات التي هي قد تكون أكثر فائدة وأفضل بالنسبة للمتعلم وحسب أسلوب التعلم الذي يتبعه ، أقصد هنا بالدروس المتعلقة بالتقنية بشكل عام سواء كانت تطوير مواقع ، تصميم ، برمجة ، .. إلخ ، وأيضاً أعني الدروس الكتابية بالتحديد دون غيرها لأنها هي المنشرة حالياً.
.. أكمل قراءة بقية الموضوع »
