1. 4
    مقالات
  2. 7
    مقالات
بناء المواقع الإلكترونية أمر ممتع ومحبط في نفس الوقت، وعادة ما يكون سبب الإحباط هو السعي لتوحيد مظهر وأداء الموقع الإلكتروني في جميع المتصفحات، ولا شكّ أن مصمّمي الواجهات الأمامية قد مرّوا بحالة الإحباط هذه بشكل أو بآخر. ولكن الحقيقة تقول بأنه ما من ضرورة تدعو إلى توحيد مظهر وأداء الموقع الإلك…
إن قدرتك على كتابة شفرة HTML وCSS مع فهم عميق لما تكتبه يعني امتلاكك لمهارة كبيرة ومتميّزة، وعند ازدياد حجم شفرات الموقع الإلكتروني وكذلك عدد زوّاره، تظهر الحاجة إلى مجموعة جديدة من المهارات المهمّة والضرورية لتوفير الوقت أثناء التطوير ولتحسين تجربة المستخدم؛ لذا فإن معرفة أساسيات تحسين أداء الموق…
كانت القدرة على التحكم بتأثيرات الانتقال Transitions والحركة Animations من إحدى الميزات التي أتت بها CSS3، وقد كان مطورو الواجهات الأمامية بحاجة كبيرة إلى مثل هذه الميزة لتصميم هذه التأثيرات باستخدام HTML و CSS فقط دون الحاجة إلى استخدام Javascript أو Flash، وقد تحققت رغبتهم أخيرًا وبعد سنوات عديد…
سنستعمل في هذا الدرس تحريكات CSS بسيطة إضافةً إلى بعض شفرات JavaScript لإنشاء ساعة متحركة. سنُنشِئ هذه الساعة باستخدام HTML و CSS وخلفية SVG إضافةً إلى بعض أسطر JavaScript. سنستعمل التحريكات Animations أو الانتقالات Transitions في CSS، وسنعتمد على JavaScript لضبط التوقيت الابتدائي. ملحوظة…
سنستعرض في هذا الدرس أمثلةً عن مختلف حالات استعمال flexbox في CSS3، سنجعل الشرح مختصرًا قدر الإمكان وستُوضَّح الفكرة عبر قراءة الشيفرة؛ لذا تمعّن فيها كثيرًا، وانظر إلى ناتجها (لا تغفل أهميّة تجربتها عندك). لمزيدٍ من المعلومات حول flexbox، فانظر درس «تعرف على CSS Flexbox وأساسيات استعمال…
رأينا في الدرس السابق أكثر ثلاثة أنماط شيوعًا لتحديد مواقع العناصر في صفحات HTML عبر CSS، وهي static و relative و absolute. سننظر في هذا الدرس إلى fixed و sticky، ثم سنناقش طريقة ترتيب العناصر فوق بعضها عبر z-index. طريقة fixed لتحديد مواقع العناصر هنالك قاعدة background-attachment: fi…
يهرع الكثير من المبتدئين إلى طرائق تحديد مواقع العناصر في CSS معتقدين أنها ستحل لهم جميع المشاكل التي يواجهونها في تخطيط الصفحة، لكن هذا ليس صحيحًا بالمطلق: هنالك جوانب أخرى في CSS مسؤولةٌ عن تخطيط الصفحة. وصحيحٌ أنَّ طرائق تحديد المواقع العناصر لها دورٌ لتلعبه في تخطيط الصفحة، لكن من الأحسن أن تع…
رأيتُ في الآونة الأخيرة الكثير من الأشخاص يشقون طريقهم بصعوبة في CSS، انطلاقًا من المبتدئين إلى المبرمجين المحترفين؛ بعضهم لا يحب طريقة عمل CSS، ويرون أنَّ استبدال لغة أخرى بلغة CSS هو أمرٌ حسن، وكانت هذه هي نقطة انطلاق مفسرات CSS (مثل Sass و Less)؛ وبعضهم الآخر يستخدم إطارات العمل على أمل أنَّ ذل…
مضت فترةٌ لا بأس بها على ظهور إطارات العمل، وازدادت شهرتها في مجال تطوير واجهات المواقع. توفِّر تلك الإطارات مقتطفاتٍ من الشيفرات التي تستطيع نسخها ولصقها في موقعك لبناء تخطيط الصفحة وواجهة المستخدم. ربما قرأت مقالاتٍ كثيرة عن كيفية الاستفادة من تلك الإطارات في مشاريعك، لكنني هنا لأفعل العكس: أنو…
لم يعد إنشاء تصاميم متجاوبة اختياريًّا، فلقد أصبحت شبكات CSS وعلى نحو سريع الخيّار المفضّل لإنشاء بنى منسجمة لمواقع ويب تبدو بمظهر رائع على مختلف أنواع الأجهزة.  تزوّدنا شبكات CSS بطريقة سريعة لبناء أيّ موقع. فلا بدّ أن تكون قد عانيت مع خصائص التموضع والتعويم float في CSS من قبل. كل هذه …
هذا هو الدّرس الأخير في سلسلة تعلّم CSS، ولقد كان اهتمامنا في الدّروس السابقة مُنصبًّا على خصائص CSS وقيمها التي يمكن استخدامها للتأثير في عرض المستند؛ وفي هذا الدّرس سنُعيد النّظر في غايات استخدام CSS وبنية ورقة الأنماط. للتذكير، هذا هو فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية…
في هذا الدّرس من سلسلة تعلّم CSS، سنشرح كيف يمكن استخدام CSS للتحكّم بالمساحة الّتي تحتلّها العناصر عندما تُعرض في الصّفحة، وسنتدرّب على ذلك بتغيير المساحة وإضافة بعض القواعد الّتي تؤثر على هيئة العناصر. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CS…
في هذا الدرس من سلسلة تعلّم CSS، سنشرح استخدام المُحدّدات المُتقدّمة، وبعض طرق تنسيق الجداول؛ وسنتدرّب على ذلك بإنشاء مستند جديد يحوي جدولًا، ثمّ نُرفقه بورقة أنماط. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Sel…
في هذا الدّرس من سلسلة تعلّم CSS، سنشرح بعض طرق تغيير طريقة رصف العناصر في المستند، ونتدرّب على ذلك. فهرس السلسلة:  مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. …
في هذا الدرس من سلسلة تعلّم CSS، سنشرح كيف يمكن استخدام CSS لتحديد مظهر القوائم؛ وسنتدرّب على ذلك بإنشاء مستند جديد يحوي قوائم، ونُرفقه بورقة أنماط جديدة تُنسّق القوائم الّتي أنشأناها. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. …
سنشرح في هذا الدرس من سلسلة تعلم CSS كيف نستخدم CSS لإضافة محتوى إلى المستند عند عرضه. سنتدّرب على ذلك بإضافة بعض الجمل وصورة في ورقة الأنماط الّتي نعمل عليها. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors…
 في هذا الدّرس من سلسلة تعلّم CSS؛ سنشرح كيفيّة تحديد الألوان في أوراق الأنماط، وسنتدرّب على ذلك بتغيير لون الخلفيّة. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS ي…
في هذا الجزء من سلسلة تعلّم CSS، سنطّلع على أمثلة أكثر عن تنسيق الخطوط، ثم نطبّق ما تعلّمناه على ورقة أنماطنا. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قرا…
لكتابة تنسيقات CSS يمكن قراءتها بسهولة بإمكانك إضافة مسافات فارغة وتعليقات في ورقة الأنماط لجعلها أسهل قراءة. بالإمكان أيضًا جمع المُحدّدات معًا، عندما تريد تطبيق نفس القاعدة على أكثر من هدف. هذا الدرس جزء من سلسلة تعلم CSS: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعل…
في هذا الدرس من سلسلة تعلّم CSS، سنتطرق إلى كيفيّة تطبيق الأنماط على العناصر بطريقة انتقائية، وكيف يكون للمحدّدات المختلفة درجات مختلفة من الأولويّة. سنضيف بعض الخواص (attributes) إلى المستند ثم نستخدمها في ورقة الأنماط. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آل…