15 حيل CSS مفيدة قد تغفلها

إذا كنت مطور ويب للواجهة الأمامية لفترة من الوقت ، فهناك فرصة كبيرة أن تكون قد حظيت بلحظة عندما كنت تحاول معرفة كيفية ترميز شيء ما وتحقيقه بعد قليل من googling ، “هناك CSS لذلك”. إذا لم تقم بذلك ، فأنت على وشك أن تفعل ذلك.

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

1. ترقيم العناوين والعناوين الفرعية

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

2. التوابل حتى تسطير عادي

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

   لم يحدد CSS3 واحدًا أو ثلاثة خصائص جديدة لتزيين النص النص الديكور اللون, النص الديكور خط, و على غرار وسام النص والتي يمكن اختزالها في حسن البالغ من العمر النص الديكور.

   يمكنك استخدام تلك الأزرار لنمط تسطير ، تراكب ، وجعل وميض النص ، وأكثر من ذلك. اعتبارًا من أبريل 2015 ، يدعم Firefox فقط هذه الخاصية ، ولكن يمكنك تمكينها “ميزات منصة الويب التجريبية” لاستخدامها على كروم.

3. نقلا عن اقتباس

   بادئ ذي بدء ، ليست هناك حاجة إلى عناء كتابة اقتباسات مجعد الصحيحة للاقتباسات القصيرة لأن هناك HTML لذلك: العلامة التي تشير إلى الاقتباسات المضمنة.

   ال تتولى العلامة أيضًا اقتباس علامات الاقتباس الداخلية بعلامات اقتباس مفردة. لذلك ، أين هو “هناك "CSS" لذلك” لحظة في هذا?

   لنفترض أنك لا تريد علامات الاقتباس المزدوجة الافتراضية أو أن لديك أكثر من مستوى من علامات الاقتباس المتداخلة ، يمكنك تحديد تفضيلات الاقتباس الخاصة بعنصر الاقتباس باستخدام CSS باستخدام CSS2 يقتبس خاصية.

4. إدارة الجداول الجامحة

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

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

5. اجعلها لزجة

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

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

6. الحصول على النص الخاص بك في الشكل

   هل تريد أن ينحني النص الموجود في صفحتك بشكل جيد فوق بعض الصور التي قمت بعرضها بجانبها؟ يمكنك المحاولة الأشكال المغلق. لتطبيق أشكال CSS ، يمكننا الاستفادة من ثلاث خصائص تشكيل خارج, شكل الهامش و شكل صورة عتبة. اعتبارًا من أبريل ، 2015 ، يتم دعم أشكال CSS بواسطة متصفحات الويب.

7. الحقول الإلزامية

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

8. من الصعب إرضاءه مع الألوان

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

9. هل تحقق ذلك?

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

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

10. مثل القصص القصيرة

    ثم ، لن يكون لطيفا إذا كان الأول “O” في ال “في يوم من الأيام” تبدو جميلة؟ يمكننا أن نجعلها تبدو جميلة ، بعد كل شيء هناك CSS لذلك. هنا هو المكان ::الرسالة الأولى عنصر الزائفة يأتي لانقاذ. ويستهدف الحرف الأول من السطر الأول من العنصر المستهدف. قراءة المزيد عنها هنا.

11. هل ترغب في معرفة المزيد?

    قد يحتوي العنصر على الفئة X أو بيانات Y أو بعض القيم الأخرى لسمة. إذا احتجنا أبدًا إلى عرض قيمة سمة لعنصر بالقرب منه ، فيمكننا استخدام المحتوى: ATTR (X). يسترجع قيمة السمة X للعنصر ، ثم يمكننا إظهارها بجانب العنصر.

12. أكثر قليلا إلى اليسار

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

13. الكشف عن تنسيق ملف الروابط

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

14. الزناد المنظر تأثير

    تأثير المنظر هو تأثير يستخدم لوصف حركة الخلفية البطيئة على ما يبدو بالنسبة إلى المقدمة. هذا التأثير شائع في مواقع الويب التي تنفذ تمرير المنظر. هناك طرق مختلفة لتنفيذه ، المثال التالي يعمل في Firefox الخلفية مرفق: ثابت..

15. قوة الرسوم المتحركة CSS

    ربما ليست ضخمة “هناك CSS لذلك” لحظة ، لأنك جميعًا على الأرجح تدرك الرسوم المتحركة لـ CSS الآن. ولكن القليل من التذكير هو عدم وجود ضرر. هناك العديد من الاستخدامات للرسوم المتحركة لـ CSS ، ولكن يوجد هنا لممارسة التلوين البسيطة.

اقرأ الآن: 50 قصاصة CSS مفيدة يجب أن يمتلكها كل مصمم