تُضيف المتصفحات تلقائيًا بعض الأنماط على عناصر HTML، وتختلف هذه الأنماط باختلاف المتصفح مما يتسبب في ظهور الصفحة بأشكال مختلفة عند عرضها على متصفحات مختلفة، ولتفادي هذا الأمر يجب توحيد أنماط المتصفحات، ومن الشائع استخدام مكتبة normalize.css والتي تضبط بعض الأنماط وتُصحح بعض الأخطاء الشائعة في بعض …
الدوال (Functions) الدالة ()calc تسمح الدالة ()calc بإجراء عمليات حسابية على قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات و و و و و . استخدام دالة ()calc لحساب عرض الحاوية #div1 { position: absolute; left: 50px; width: calc(100% - 10…
تسمح استعلامات الوسائط (media queries) بتطبيق أنماط CSS مختلفة بناءً على نوع جهاز العرض (شاشة أو طابعة أو غير ذلك) وحجمه، فيُحدَّد نوع الجهاز عن طريق نوع الوسط media type، بينما تُحدد مواصفات الجهاز الأخرى مثل اللون وأبعاد شاشة العرض باستخدام خصائص الوسط media features. الصيغة العامة لكتابة وس…
الانتقالات عبر الخاصية transition الخاصية الوصف transition-property تُستعمل لتحديد خصائص CSS التي ستخضع لتأثير الانتقال. transition-duration تُحدِّد الزمن الذي سيستغرقه تأثير الانتقال للوصول إلى القيمة النهائية للخاصية، والقيم…
تعويم نص حول صورة من أبسط استعمالات خاصية float تعويم نص حول صورة، كما هو موضح بالمثال التالي: ملف HTML Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.…
المُرشِّحات (Filters) تُستخدم الخاصية filter لتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على الصور والخلفيات والإطارات. الدالة الوصف ()blur تُطَبِق تأثير الضبابية على الصورة المُحدَّدة. (brightness(x تُغيِّر سطوع الصورة…
تُمكنك CSS من وضع ألوان، أو تدرجات لونية، أو صور كخلفيات للعناصر، والتحكم في حجمها، وموضعها، وعدد مرات تكرارها. إضافة الألوان كخلفيات للعناصر تُستعمل الخاصية background-color لإضافة خلفية بلون معين للعنصر، وتقبل القيم transparent، و inherit، و initial أيضًا، ويمكن تطبيقها على العناصر و الع…
تأخذ الخاصية position التي تضبط موضع العنصر في الصفحة القيم الموضحة في الجدول التالي والتي سنشرح كل واحدة منها بالتفصيل مع أمثلة. المعامل الوصف static تعرض العناصر بنفس ترتيبها كتابتها على ملف HTML. relative تُحدد موضع العنصر …
ما هو النموذج الصندوقي؟ ترسم المتصفحات مستطيلًا حول كل عنصر في صفحة HTML ويصف النموذج الصندوقي كيف تُضاف الحواشي والإطارات والهوامش للمحتوى لرسم هذا المستطيل. الرسم التخطيطي من CSS2.2 Working Draft. يسمى محيط كل مساحة من المساحات الأربع مُحدِّد، كل مُحدِّد يحدد صندوقًا معينًا. …
المنهجية الأكثر منطقية لتنسيق شيفرة ملفات CSS وSASS المصطلحات التصريح عن قاعدة التصريح عن قاعدة (rule declaration): هو الاسم المختار لمحدّد معين (أو لمجموعة من المحددات) مع مجموعة من الخاصيات المصاحبة. إليك مثالًا لتوضيح الأمر: .listing { font-size: 18px; line-height: 1.2; } …
هل تساءلت عن كيفية عرض صفحة الويب على مختلف أحجام الشاشات؟ لتسهيل الأمر لنفكك السؤال باستخدام المثال التالي: لنتخيل أن تصميم صفحة الويب هو مخطط هندسي لمنزل جديد وجميل. الأساس الّذي يستند عليه المنزل يمثل استعلامات الوسائط (Media queries)، يليه الطابق الأرضي الذي يُحدد كيف ستُبنى بقية المنزل. ه…
سيُزار موقعك الإلكتروني هذه الأيام من مجموعةٍ واسعةٍ من الأجهزة: أجهزة الحواسيب المكتبيّة ذات الشاشات الكبيرة وأجهزة الحواسيب المحمولة متوسطة الحجم والأجهزة اللوحيّة والهواتف الذكيّة وغيرها. يتوجب على موقعك من أجل تحقيق تجربة المستخدم المثلى كمطوّر واجهة أماميّة (front-end engineer) ضبط تخطيط …
لنستخدم CSS لرسم شخصية بيماكس (Baymax) من فيلم Big Hero 6. سنحرّك في هذا المنشور صورة خلفية، بالإضافة إلى تأثير حركة بتوقيت دقيق، ونقوم بإجراء عرض تجريبي CSS من عنصر HTML واحد. تجربة حية. عنصر واحد سنكون قادرين باستخدام العنصر الزائف على إنشاء أجزاء الوجه بعنصر HTML واحد.…
سنُأحاول في هذا المنشور الإشادة بجهاز حاسوب Mac Plus الجميل من خلال إنشائه باستخدام CSS. عن تصميم الجهاز دعنا نبني (تقريبًا) جهاز حاسوب. ليس فقط أي حاسوب قديم، ولكن حاسوبًا كان بالنسبة للكثير منا مقدمة في عالم Apple. كانت بداية إطلالة جهاز Macintosh Plus (الاسم المختصرMr. T) لأول مرة في عا…
يعد WebKit مُحرِّك متصفح ويب (web browser engine) يستخدمه كلٌّ من Safari، و Mail، و App Store، وغيرها من التطبيقات والمتصفحات التي تعمل على macOS، و iOS، ولينكس. ويعرض Webkit صفحات الويب التي تحتوي على تعليمات مكتوبة بِشيفرات Javascript و HTML و XML، ويدير أيضًا تاريخ الصفحات التي تمت زيارتها مؤخر…
يجب أن يحتوي كل موقع ويب و صفحة هبوط على زر «دعوة إلى إجراء» (Call to action، ويختصر إلى CTA) واضح. هذا يشجع المستخدِم على النقر على الحدث وتنفيذه، سواء كان ذلك لإجراء عملية شراء، أو بدء تجربة، أو إنشاء حساب. لا توجد طريقة واحدة مفضلة لتصميم CTA ويمكنك استخدام العديد من الأنماط المختلفة، من ال…