10 حيل لا تصدق في CSS لتحويل تخطيطات الويب الخاصة بك

من المحتمل أن يكون أي شخص لديه خبرة في تصميم الويب ، سواء كنت قد استخدمت أدوات إنشاء مواقع الويب DIY أو أنشأت موقعًا من الصفر ، قد سمع عن CSS من قبل. يمكن استخدام هذه الأداة القوية بشكل لا يصدق لتحويل تخطيطات الويب الخاصة بك ، مما يمنحك القدرة على التحكم في موقع الويب الخاص بك وتحقيق رؤيتك الإبداعية. ولكن كيف يمكنك استخدام أوراق الأنماط المتتالية لإطلاق العنان لإمكانيات موقع الويب التالي الخاص بك؟

سيوضح هذا الدليل بالتفصيل مجموعة من خصائص CSS التي تم استخدامها جميعًا لإنشاء الرأس الذي يمكنك رؤيته في الصورة أعلاه. يمكنك العثور على هذا المشروع هنا على كود، مما يمنحك الفرصة لتجربته بنفسك.

معالجة صور CSS

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

1. CSS صورة الخلفية

نريد الحصول على صورة خلفية بملء الشاشة لرأسنا ، وتكون خاصية CSS لصورة الخلفية مثالية. أولاً ، نحتاج إلى إنشاء حاوية لصورتنا (وبقية العناصر داخل الرأس).

بدأنا بإضافة علامة div مع "header" كفئة لها ، متبوعة بتعيينها ارتفاع إلى 100vh وله العرض إلى 100vw; هذا يعطينا مربعًا بنفس حجم منفذ العرض تمامًا. أضفنا أيضًا قاعدة CSS لنص الصفحة ، مع تم ضبط الفائض على المخفي وله تم ضبط الهوامش على 0 بكسل.

مع وجود الحاوية في مكانها ، يمكننا إضافة صورة خلفية ، وهناك ثلاث قواعد CSS مختلفة نحتاجها لتحقيق هذا الهدف. تحتاج الصورة الأولى ، صورة الخلفية ، إلى عنوان URL ليعمل كمصدر لصورة الخلفية ، وقد استخدمنا كتالوج Unsplash المفيد لهذا الغرض. نحتاج أيضًا إلى ضبط حجم الخلفية المراد تغطيتها و ال وضع الخلفية لأسفل، ولكن قد ترغب في تجربة هذه للحصول على أفضل النتائج.

2. وضع دمج الخلفية في CSS

تتيح أوضاع المزج CSS إمكانية مزج الصور والنصوص ، تمامًا مثل ميزة المزج في برامج مثل Adobe Photoshop. لجعل أوضاع المزج تعمل مع صورة الخلفية الخاصة بنا ، قمنا بتعيين ملف لون الخلفية إلى أبيض شبه شفاف قبل إضافة وضع الدمج الذي أردنا استخدامه.

تتبع هذا، تم ضبط وضع دمج الخلفية على ضوء خافت، مما يسمح لنا بتنعيم الصورة.

3. مسار مقطع CSS

في خدعتنا التالية ، سنستخدم قاعدة تسمى مسار المقطع. عند استخدام علامات img HTML ، يمكنك تعيين مسار يخفي أجزاء من الصور التي تعمل بها. يمكنك اختيار استخدام الأشكال العامة لهذا الغرض ، ولكن يمكنك أيضًا استخدام تطبيق إنشاء SVG لإنشاء تصميم أكثر تعقيدًا.

أضفنا علامة div مع "flex_image_box" لتعمل كحاوية لثلاث صور ، باستخدام خاصية display CSS لتحويلها إلى flexbox (سنتحدث عن هذا لاحقًا). تمت إضافة ثلاث علامات img داخل علامة div ، مع تعيين المعرفات كـ "img1" و "img2" و "img3". وضع عرض كل صورة 600 بكسل، نحن قادرون على اترك خاصية الارتفاع فارغة دون تغيير نسبة العرض إلى الارتفاع للصور ؛ حان الوقت الآن لإضافة مسار الكليب الخاص بنا!

لإنشاء مثلثاتنا الثلاثة ، استخدمنا نفس مسار مقطع المضلع لـ img1 و img3 ، مع وجود نسخة مقلوبة في مكانها لـ img2. كان علينا أيضًا أن نلعب مع وضع حاوية الصندوق المرن للتأكد من أن الصور موضوعة في الموضع الصحيح على الشاشة. يمكن رؤية قواعد مسار القصاصة لدينا أدناه.

4. تعتيم CSS

يحدد التعتيم مستوى الشفافية لأي عنصر HTML. وضعنا عتامة صورنا حتى 90٪، مما يجعلها معتمة بعض الشيء بحيث تمتزج بشكل جيد مع الخلفية.

نصوص وصور مستجيبة لـ CSS

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

1. الوحدات المستجيبة / النسبية لـ CSS

وحدات CSS مثل px و pt و cm هي وحدات مطلقة ، وهذا يعني أن متصفح الويب سيعرضها بالحجم نفسه بغض النظر عن عرض النافذة التي يشغلونها وارتفاعها. الوحدات النسبية مختلفة ، وتنتج ارتفاعات وأطوالًا مرتبطة بالقياسات الأخرى ، مثل نافذة المتصفح أو العنصر الأصلي. تُستخدم الوحدات النسبية أدناه بشكل شائع وهي ضرورية لتصميم الويب سريع الاستجابة.

• م: تستخدم هذه الوحدة عادة مع النص. إنه نسبي لحجم الخط للعنصر الحالي ، مما يجعل 4em أكبر بأربعة أضعاف من حجم الخط الذي تم تعيينه.
• rem: مثل em ، rem متعلق بحجم الخط للعنصر ؛ يُستخدم عنصر الجذر في التسلسل الهرمي لتحديد حجم الإخراج.
• فولكس فاجن / ف: تحديد العرض والارتفاع بناءً على حجم إطار العرض ، 2vw يساوي 2٪ من عرض المتصفح بينما 2vh يساوي 2٪ من ارتفاع المتصفح.
• %: تحسب الوحدة٪ الأبعاد بناءً على حجم أصل العنصر.
• vmin / vmax: تنتج هذه الوحدات أبعادًا نسبة إلى 1٪ من أبعاد منفذ العرض الأصغر أو الأكبر ، مما يوفر للعناصر وسائل الاستجابة مباشرة لحجم نافذة المتصفح.

2. حجم خط CSS

يمكن تعيين هذه الخاصية باستخدام القيم الافتراضية التي تم تحديدها مسبقًا إما بواسطة ورقة الأنماط الرئيسية لموقع الويب أو مستعرض الويب الخاص بالمستخدم. تتضمن هذه القيم المتوسطة و xx-small و x-small و small و large و x-large و xx-large ، مع تعيين الوسيط باعتباره الإعداد الافتراضي لأي نص يفتقر إلى علامة CSS بحجم الخط. بدلاً من ذلك ، يمكن استخدام القيم النسبية عند استخدام خاصية حجم الخط في CSS ، وهذا هو ملف الطريقة التي استخدمناها للتأكد من أن النص الموجود في قسم الرأس لدينا يتناسب مع حجم أي منها منفذ العرض.

أضفنا علامتي عنوان إلى HTML ، مما يمكننا من إضافة نص إلى المشروع. أحدهما رأس رئيسي كبير ، والآخر رأس فرعي ، وكلاهما يستخدم وحدات نسبية.

متعلق ب: كيفية تغيير حجم خط HTML في CSS

3. عرض وارتفاع CSS

تأتي جميع عناصر HTML بأبعاد ارتفاع وعرض ، سواء كانت div أو img أو a أو أي نوع آخر من العلامات. يمكن تعيين هذه الأبعاد تلقائيًا على القيم الافتراضية ، ولكن يمكن أيضًا لمصممي الويب إملاءها باستخدام القواعد الصحيحة ؛ لقد استخدمنا كلتا الطريقتين لهذا العنوان.

تم استخدام الوحدات المتجاوبة لصورة الخلفية ، مع ضبط الارتفاع على 100vh والعرض مضبوطًا على 100vw ، لكننا استخدمنا أيضًا الوحدات المطلقة لصورنا الثلاث. من الجدير الاستكشاف والتجربة مع وحدات عرض وارتفاع CSS ، مع توفير خيارات مثل "توريث" يعني تبني أبعاد العنصر الأصلي ، وهناك الكثير من الحيل الأخرى التي يمكنك استخدامها.

4. وضع مزيج CSS

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

يجدر بك استكشاف خيارات المزج المختلفة التي لديك عند التعامل مع النص ، لأن الخلفيات ذات ملفات تعريف الألوان الفريدة ستستجيب بشكل مختلف للإعدادات التي تستخدمها.

5. تحويل نص CSS

تحويل النص في CSS هو خاصية ذكية تمكن المصممين من تغيير حالة النص على مواقعهم على الويب دون التأثير على طريقة قراءته لمحركات البحث. على سبيل المثال ، لدينا تعيين تحويل النص إلى أحرف كبيرة في عنوان H1 ، مما يجعل كل حرف كبيرًا بغض النظر عن كيفية إدخاله في HTML الخاص بنا.

خصائص تجاوز CSS

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

تجاوز CSS وتجاوز النص

يعد تجاوز وتجاوز النص خصائص CSS متشابهة جدًا. يمكن تطبيق Overflow على أي عنصر ، مما يمنحك التحكم في المحتوى القادر على الخروج من حدوده. يتشابه تدفق النص ، على الرغم من أنه ينطبق فقط على النص ، ويمنحك القدرة على إضافة معلمات إضافية إلى القواعد الخاصة بك. لقد استخدمنا الفائض فقط لهذا المشروع (استخدمناه لتقييد حجم جسم صفحتنا) ، ولكن يمكنك أن تقرأ عن تجاوز النص في W3Schools موقع الكتروني.

استخدام CSS لتخطيطات الويب الخاصة بك

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

8 نصائح وحيل أساسية لـ CSS يجب على كل مطور معرفتها

هل تستخدم طرق CSS الرئيسية هذه لسير عمل سريع وتصميم ويب جميل؟

اقرأ التالي

عن المؤلف