اذهب إلى المحتوى

CSS

التصنيفات الفرعية

  1. Sass

    6
    مقالات البرمجة

  2. إطار عمل Bootstrap

    19
    مقالات البرمجة
تعرّفنا في الجزء الأول من هذا الدرس على ما يقدّمه نظام التخطيط الشبكي Grid layout في CSS وقدّمنا ماهيّة الشبكة Grid ومساراتها Tracks. نكمل في هذا الجزء المفاهيم الأساسيّة لنظام التخطيط الشبكي. خطوط الشبكة Grid Lines …

مفاهيم أساسية في التعامل مع تخطيط الشبكة Grid Layout

بواسطة Lujain Maaz، في CSS، ‏

يضيف التخطيط الشبكي Grid layout في CSS نظامَ شبكةٍ ثنائي الأبعاد إلى الأنماط لاستخدامه في تخطيط مساحة رئيسية لصفحة ويب أو عناصر صغيرة في واجهة المستخدم. سنتعرّف في هذه المقالة على نظام التخطيط الشبكي في CSS مع شرح أمثلة …

كيف تتحقّق من الخصائص المدعومة في المتصفحات

بواسطة محمد طاهر5، في CSS، ‏

بناء المواقع الإلكترونية أمر ممتع ومحبط في نفس الوقت، وعادة ما يكون سبب الإحباط هو السعي لتوحيد مظهر وأداء الموقع الإلكتروني في جميع المتصفحات، ولا شكّ أن مصمّمي الواجهات الأمامية قد مرّوا بحالة الإحباط هذه بشكل أو بآخر. …

كيف تنظّم شفرة CSS لتجربة تطوير أفضل وأداء أحسن

بواسطة محمد طاهر5، في CSS، ‏

إن قدرتك على كتابة شفرة HTML وCSS مع فهم عميق لما تكتبه يعني امتلاكك لمهارة كبيرة ومتميّزة، وعند ازدياد حجم شفرات الموقع الإلكتروني وكذلك عدد زوّاره، تظهر الحاجة إلى مجموعة جديدة من المهارات المهمّة والضرورية لتوفير الوقت أثن…

تأثيرات الانتقال والحركة في CSS

بواسطة محمد طاهر5، في CSS، ‏

كانت القدرة على التحكم بتأثيرات الانتقال Transitions والحركة Animations من إحدى الميزات التي أتت بها CSS3، وقد كان مطورو الواجهات الأمامية بحاجة كبيرة إلى مثل هذه الميزة لتصميم هذه التأثيرات باستخدام HTML و CSS فقط دون الحاجة…

كيف تنشئ ساعة ذات عقارب باستخدام تحريكات CSS و JavaScript

بواسطة عبد اللطيف ايمش، في CSS، ‏

سنستعمل في هذا الدرس تحريكات CSS بسيطة إضافةً إلى بعض شفرات JavaScript لإنشاء ساعة متحركة. سنُنشِئ هذه الساعة باستخدام HTML و CSS وخلفية SVG إضافةً إلى بعض أسطر JavaScript. سنستعمل التحريكات Animations أو الانتقالات Transit…

أمثلة نموذجية لاستخدام flexbox في CSS3

بواسطة عبد اللطيف ايمش، في CSS، ‏

سنستعرض في هذا الدرس أمثلةً عن مختلف حالات استعمال flexbox في CSS3، سنجعل الشرح مختصرًا قدر الإمكان وستُوضَّح الفكرة عبر قراءة الشيفرة؛ لذا تمعّن فيها كثيرًا، وانظر إلى ناتجها (لا تغفل أهميّة تجربتها عندك). لمزيد…

تحديد مواقع العناصر في CSS باستخدام fixed و sticky

بواسطة عبد اللطيف ايمش، في CSS، ‏

رأينا في الدرس السابق أكثر ثلاثة أنماط شيوعًا لتحديد مواقع العناصر في صفحات HTML عبر CSS، وهي static و relative و absolute. سننظر في هذا الدرس إلى fixed و sticky، ثم سنناقش طريقة ترتيب العناصر فوق بعضها عبر z-index. …

تحديد مواقع العناصر في CSS باستخدام static و relative و absolute

بواسطة عبد اللطيف ايمش، في CSS، ‏

يهرع الكثير من المبتدئين إلى طرائق تحديد مواقع العناصر في CSS معتقدين أنها ستحل لهم جميع المشاكل التي يواجهونها في تخطيط الصفحة، لكن هذا ليس صحيحًا بالمطلق: هنالك جوانب أخرى في CSS مسؤولةٌ عن تخطيط الصفحة. وصحيحٌ أنَّ طرائق ت…

تقنيات كتابة شيفرات CSS احترافية وسهلة الصّيانة

بواسطة عبد اللطيف ايمش، في CSS، ‏

رأيتُ في الآونة الأخيرة الكثير من الأشخاص يشقون طريقهم بصعوبة في CSS، انطلاقًا من المبتدئين إلى المبرمجين المحترفين؛ بعضهم لا يحب طريقة عمل CSS، ويرون أنَّ استبدال لغة أخرى بلغة CSS هو أمرٌ حسن، وكانت هذه هي نقطة انطلاق مفسرا…
مضت فترةٌ لا بأس بها على ظهور إطارات العمل، وازدادت شهرتها في مجال تطوير واجهات المواقع. توفِّر تلك الإطارات مقتطفاتٍ من الشيفرات التي تستطيع نسخها ولصقها في موقعك لبناء تخطيط الصفحة وواجهة المستخدم. ربما قرأت مقالاتٍ كثيرة…

مدخل إلى شبكات CSS العصرية (CSS Grids)

بواسطة حسام برهان، في CSS، ‏

لم يعد إنشاء تصاميم متجاوبة اختياريًّا، فلقد أصبحت شبكات CSS وعلى نحو سريع الخيّار المفضّل لإنشاء بنى منسجمة لمواقع ويب تبدو بمظهر رائع على مختلف أنواع الأجهزة.  تزوّدنا شبكات CSS بطريقة سريعة لبناء أيّ موقع. فلا بدّ …

التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS

بواسطة محمد فواز عرابي، في CSS، ‏

هذا هو الدّرس الأخير في سلسلة تعلّم CSS، ولقد كان اهتمامنا في الدّروس السابقة مُنصبًّا على خصائص CSS وقيمها التي يمكن استخدامها للتأثير في عرض المستند؛ وفي هذا الدّرس سنُعيد النّظر في غايات استخدام CSS وبنية ورقة الأنماط. …

تعرف على الصناديق (Boxes) في CSS

بواسطة محمد فواز عرابي، في CSS، ‏

في هذا الدّرس من سلسلة تعلّم CSS، سنشرح كيف يمكن استخدام CSS للتحكّم بالمساحة الّتي تحتلّها العناصر عندما تُعرض في الصّفحة، وسنتدرّب على ذلك بتغيير المساحة وإضافة بعض القواعد الّتي تؤثر على هيئة العناصر. فهرس السلسل…

الجداول (Tables) في CSS

بواسطة محمد فواز عرابي، في CSS، ‏

في هذا الدرس من سلسلة تعلّم CSS، سنشرح استخدام المُحدّدات المُتقدّمة، وبعض طرق تنسيق الجداول؛ وسنتدرّب على ذلك بإنشاء مستند جديد يحوي جدولًا، ثمّ نُرفقه بورقة أنماط. فهرس السلسلة: مدخل إلى أوراق الأنماط المتت…

رصف العناصر (Layout) في CSS

بواسطة محمد فواز عرابي، في CSS، ‏

في هذا الدّرس من سلسلة تعلّم CSS، سنشرح بعض طرق تغيير طريقة رصف العناصر في المستند، ونتدرّب على ذلك. فهرس السلسلة:  مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. ا…

تنسيق القوائم (Lists) في CSS

بواسطة محمد فواز عرابي، في CSS، ‏

في هذا الدرس من سلسلة تعلّم CSS، سنشرح كيف يمكن استخدام CSS لتحديد مظهر القوائم؛ وسنتدرّب على ذلك بإنشاء مستند جديد يحوي قوائم، ونُرفقه بورقة أنماط جديدة تُنسّق القوائم الّتي أنشأناها. فهرس السلسلة: مدخل إلى …

إضافة محتوى إلى صفحة ويب باستخدام CSS

بواسطة محمد فواز عرابي، في CSS، ‏

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

التعامل مع الألوان في CSS

بواسطة محمد فواز عرابي، في CSS، ‏

في هذا الدّرس من سلسلة تعلّم CSS؛ سنشرح كيفيّة تحديد الألوان في أوراق الأنماط، وسنتدرّب على ذلك بتغيير لون الخلفيّة. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل ال…

تنسيق نصوص صفحات الويب باستخدام CSS

بواسطة محمد فواز عرابي، في CSS، ‏

في هذا الجزء من سلسلة تعلّم CSS، سنطّلع على أمثلة أكثر عن تنسيق الخطوط، ثم نطبّق ما تعلّمناه على ورقة أنماطنا. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات.…
×
×
  • أضف...