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

CSS

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

  1. Sass

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

  2. إطار عمل Bootstrap

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

كيفية إنشاء معرض صور باستخدام CSS فقط

بواسطة Samaa Ramadan، في CSS، ‏

عند قيامك بتطبيق خصائص ‏CSS‏ المتعددة بشكل مرتب، سينتج لديك أشكال ومناظر ساحرة، خصوصًا إذا ‏كان مضافًا إليها بعض من الحِيَل ‏CSS3 Tricks‏. دعنا نلق نظرة على معرض الصور الفورية (‏Polaroid‏) ‏بتنسيق ‏CSS‏ خالص. (‏Polaroid‏ تعني…

صناعة عدة أشكال هندسية مختلفة بواسطة CSS

بواسطة Samaa Ramadan، في CSS، ‏

من أهم مميزات ‏CSS3‎‏ أنها تقلل من استخدام الصور في تصاميم الويب، وتسمح لك بإنشاء أشكال مختلفة ‏بواسطتها. فالأشكال الشائعة التي تراها عادة في ‏فوتوشوب أو ‏Illustrator‏ يمكنك عملها الآن بكل ‏سهولة مستخدمًا ‏CSS3‎‏. تقوم الخصائ…

تنبيهات منبثقة وموقوتة باستخدام حركيات CSS

بواسطة نذير صغير، في CSS، ‏

في هذا المقال القصير سوف نصنع تنبيها مؤقتا بسيطا عبر CSS animations. ما سنفعله بالتحديد هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفائها. وسوف سنعمل شريط تقدم (progress bar) لنعرف كم تبقى من الوقت ليختفي الت…

تحريك شبه العناصر (pseudo-elements) في CSS

بواسطة Mohamad Ibrahim3، في CSS، ‏

تُقدّم أشباه العناصر (pseudo-elements) عناصر DOM إضافيّة وبدون عناء يُذكر، فهي تَسمح للمُطوّر في إضافة مُحتوى إضافي إلى الصفحات وبدون إضافة أيًا من عناصر HTML على الصفحة، كما يُمكن لها أنّ تتحرّك (animated). ستتناول هذه …
حدّث تويتر مؤخرًا تصميم زر التفضيل "fave" الخاصّ به، وذلك بتقديم تحريكٍ جديد، وبدلًا من الاعتماد على التنقل transitions في CSS، فإن التحريك المُستخدم يعتمد على استخدام سلسلة من الصور، في هذا الشرح سيتمّ إعادة إنشاء التحريك با…

ضبط وتوسيط عناصر الترويسة (Header) عموديا باستخدام CSS

بواسطة محمد الحاج خلف، في CSS، ‏

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

ترقيم آلي للعناصر والصور باستخدام CSS Counters

بواسطة نذير صغير، في CSS، ‏

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

10 محددات CSS لا تليق البرمجة بدونها

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

نستخدِم المحدِّدات Selectors في كلّ مرّة نستخدم فيها CSS. تبقى محدِّدات CSS - رغم كثرة الاستخدام - أحد الأجزاء الأكثر إهمالًا في ملفّ المواصفة Specification. نتحدّث كثيرًا عن التّحويلات Transformations الكبرى في CSS3 لكنّنا …

مبادئ التحريك في صفحات الويب باستخدام CSS

بواسطة Mohamad Ibrahim3، في CSS، ‏

نستخدم نحن المطوّرين ومُصمّمي الواجهات CSS في التنسيق والتَمَوْضُع (positioning)، وفي إنشاء مواقع تتسم بالجماليّة والمظهر الخلّاب، ونستخدمها غالبًا في إضافة الحركة إلى الصفحات باستخدام التنقّل (transitions) أو التحريك (animat…
يُساهم إضافة بعض التحريك (animation) عندما تتغيّر أجزاء صفحة الويب، في مُساعدة المُستخدِم على إدراك ما الّذي يحدث في الصّفحة، فيُمكن للتحريك أنّ يَدل على وصول مُحتوى جديد، أو لفت نظره إلى المُحتوى الّذي هو طور الإزالة. س…
مواقع الويب الحديثة أصبحت أكثر ديناميكية مؤخرا، عبر استخدام Javascript لتزويد المستخدم بتحديثات مباشرة ومتحكمات أكثر سلاسة. أحد أكثر المميزات شيوعا هي إظهار وإخفاء المحتوى، سواءا كان على شكل تبويبات، مخفيا على جانب الصفحة، أو…

مقدمة إلى التأثيرات الرسومية ضمن CSS

بواسطة محمد الحاج خلف، في CSS، ‏

خلال العامين الأخيرين، قدَّمت CSS مجموعة جديدة من الخصائص التي تتيح إماكنية تطبيق تأثيرات مختلفة على الصور عبر متصفحات الويب. ومن خلال بضعة أسطر برمجية ودون الحاجة نهائيًا إلى برامج تحرير وتعديل الصور. بالتأكيد فإن هذا الموضو…
في بعض الأحيان وعوضاً عن الانتقال إلى صفحة جديدة، فإن الروابط (الوسم <a>) تنقلنا إلى فقرة أو عنصر آخر موجود ضمن نفس الصفحة، هذا الأسلوب هو المستخدم للتنقل ضمن مواقع الانترنت ذات الصفحة الواحدة. يستخدم المحدد target…

توسيع تعاقب القيمة اللونيّة باستخدام currentColor في CSS

بواسطة Mohamad Ibrahim3، في CSS، ‏

إنّ أي مطوّرٍ يَستخدم تقنيات Sass أو LESS، يعلم تمامًا ما هي المُتغيّرات (variables) وكيفيّة استخدامها في صفحات التنسيق CSS، ويَعلم أيضًا فائدتها وما يُمكن أنّ تُقدّم له، في المُقابل، ولمن لا يَستخدِم المُعالج المُسبق (prepro…

مدخل إلى تَموضُع الخلفيّة Background Positioning في CSS

بواسطة Mohamad Ibrahim3، في CSS، ‏

تطبيق صور الخلفيّة (background images) على العناصر هو أحد أكثر الميزات المُستخدمة في CSS، ولذلك يوجد العديد من الخصائص الّتي تَسمح بالتّحكم بخلفيّة العنصر وعلى أكثر من ناحية. يُمكن أنّ يَملك العنصر أكثر من صورة خلفيّة وا…

تعرّف على أساسيات CSS

بواسطة Ayman، في CSS، ‏

بعد التعرّف على كيفية تشكيل المحتوى باستخدام HTML. سيكون لِزامًا عليك -كمطور ويب- معرفة ماهية CSS (أوراق الأنماط المتتالية أو Cascading Style Sheets بالانجليزية) وكيفية إدراج التصميم مع صفحات HTML. يُعتبر CSS أحد التقنيات الت…

الدليل العملي لظلال الخطوط (text shadow) في CSS

بواسطة Mohamad Ibrahim3، في CSS، ‏

سنتناول في هذه المقالة بقليلٍ من التفصيل شرح خاصّيّة هامّة من خواصّ أوراق الأنماط المُتتالية CSS وهي "ظلال النصّ" text-shadows، وتجدرُ الإشارة إلى أنه يوجد خاصّيّة مُشابهة لهذه الخاصّيّة وهي "ظلّ الصندوق" box-shadow، والخاصّي…

أساسيّات التَمَوْضُع على صفحات الويب (CSS Positioning 101)

بواسطة Mohamad Ibrahim3، في CSS، ‏

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

إنشاء دليل الأنماط Style Guides لموقع أو تطبيق ويب

بواسطة Ibrahim Mansour Al-Shalafi، في CSS، ‏

لعدة سنوات مضت، كنت أعمل على تطبيق كبير ومعقد. كان مشروعًا عتيقًا نوعا ما: مصممون ومطورون كُثُر أتوا وذهبوا، وكل واحدٍ منهم قام بإضافة جزء جديد إلى التطبيق مترامي الأطراف. عندما التحقت بالفريق، كانت الـ CSS كبيرة، والأنماط كا…
×
×
  • أضف...