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

يجب أن يعرف كل مطور حيل CSS هذه لتطوير مشاريعهم بسرعة وكفاءة. إنهم متأكدون من زيادة إنتاجيتك إلى المستوى التالي - فلنبدأ.

1. تأثيرات تحوم

يمكنك إضافة تأثير التمرير إلى عنصر HTML باستخدام امتداد :يحوم محدد.

مثال: إضافة تأثير التمرير إلى عنصر زر.

كود HTML:

كود CSS:

الزر: تحوم {
اللون: # 0062FF ؛
الحد: # 0062FF صلب 1 بكسل ؛
الخلفية: # FFFF99 ؛
}

يمكنك اللعب بهذا الرمز وإضافة تأثيرات مثل اختفي،تنمو في, انحراف، وما إلى ذلك وهلم جرا. جعله خاصا بك!

تأثير CSS Fade-in على التحويم

زر{
العتامة: 0.5 ؛
}
الزر: تحوم {
العتامة: 1 ؛
}

تأثير نمو CSS على التحويم

الزر: تحوم {
-webkit- تحويل: مقياس (1.2) ؛
-ms- تحويل: مقياس (1.2) ؛
تحويل: مقياس (1.2) ؛
}

2. قم بتغيير حجم الصور لتلائم حاوية div

يمكنك تغيير حجم الصورة لتلائم حاوية div باستخدام ارتفاع, العرض، و الكائن المناسب الخصائص.

كود HTML:

كود CSS:

.صورة عشوائية {
الارتفاع: 100٪؛
العرض: 100٪؛
الكائن المناسب: يحتوي ؛
}

3. تجاوز كل الأنماط

instagram viewer

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

كود HTML:


مرحبا بالعالم!

كود CSS:

ص {
لون الخلفية: أصفر.
}
.className {
لون الخلفية: أزرق! مهم ؛
}
#idName {
لون الخلفية: أخضر ؛
}

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

4. اقتطاع النص مع القطع الناقص

يمكنك اقتطاع النص الفائض بعلامة حذف (...) باستخدام تجاوز النص خاصية CSS.

كود HTML:


Lorem ipsum dolor sit amet consectetur adipisicing elit، sed do eiusmod tempor.

كود CSS:

.نص {
مساحة بيضاء: نوراراب.
إخفاء الفائض؛
تجاوز النص: القطع.
العرض: 200 بكسل ؛
}

متعلق ب: شرح نموذج مربع CSS بأمثلة

5. استخدام تحويل النص

يمكنك إجبار النص على أن يكون أحرفًا كبيرة أو صغيرة أو كبيرة باستخدام الامتداد تحويل النص خاصية CSS.

الأحرف الكبيرة

كود HTML:


Lorem ipsum dolor sit amet، consectetur adipisicing elit.

كود CSS:

.الأحرف الكبيرة {
تحويل النص: الأحرف الكبيرة ؛
}

أحرف صغيرة

كود HTML:


Lorem ipsum dolor sit amet، consectetur adipisicing elit.

كود CSS:

.أحرف صغيرة {
تحويل النص: حرف صغير ؛
}

تكبير

كود HTML:


Lorem ipsum dolor sit amet، consectetur adipisicing elit.

كود CSS:

.capitalize {
تحويل النص:
}

6. استخدام تصريح الملكية أحادي السطر

يمكنك استخدام خصائص الاختزال في CSS لجعل شفرتك موجزة وسهلة القراءة.

على سبيل المثال ، CSS معرفتي هي خاصية اختصار تسمح لك بتحديد قيم لون الخلفية, الصورة الخلفية, تكرار الخلفية، و خلفية الموقف. وبالمثل ، يمكنك تحديد خصائص الخط, الحدود, هامش، و حشوة.

إعلان خاصية الخلفية أحادي السطر

لون الخلفية: أسود ؛
صورة الخلفية: url (images / xyz.png) ؛
تكرار الخلفية: لا تكرار ؛
موضع الخلفية: أعلى اليسار ؛

يمكنك تبسيط الإعلان أعلاه إلى سطر واحد:

الخلفية: عنوان url أسود (images / xyz.png) بدون تكرار أعلى اليسار ؛

تعتبر خصائص الاختزال ملائمة جدًا للاستخدام ، ولكن عليك التفكير في بعضها حالات حافة صعبة (كما هو موضح في MDN Web Docs) أثناء استخدامها.

تعد تلميحات الأدوات طريقة لتوفير مزيد من المعلومات حول عنصر عندما يحرك المستخدم مؤشر الماوس فوق العنصر.

كود HTML:

تلميح أداة الحق
هذا هو نص تلميح الأدوات

كود CSS:

الجسم {
محاذاة النص: مركز ؛
}
.tooltip_div {
الموقف: نسبي ؛
عرض: مضمنة كتلة ؛
}
.tooltip_div. تلميح الأداة {
الرؤية: مخفي
العرض: 170 بكسل ؛
لون الخلفية: أزرق ؛
اللون: #fff ؛
محاذاة النص: مركز ؛
نصف قطر الحدود: 6 بكسل ؛
الحشو: 5 بكسل 0 ؛
/ * وضع تلميح الأداة * /
الموقف: مطلق.
مؤشر z: 1 ؛
أعلى: -5 بكسل ؛
اليسار: 105٪؛
}
.tooltip_div: التمرير فوق. تلميح الأداة {
الرؤية: مرئي
}

كود HTML:

تلميح أداة اليسار
هذا هو نص تلميح الأدوات

كود CSS:

الجسم {
محاذاة النص: مركز ؛
}
.tooltip_div {
الموقف: نسبي ؛
عرض: مضمنة كتلة ؛
}
.tooltip_div. تلميح الأداة {
الرؤية: مخفي
العرض: 170 بكسل ؛
لون الخلفية: أزرق ؛
اللون: #fff ؛
محاذاة النص: مركز ؛
نصف قطر الحدود: 6 بكسل ؛
الحشو: 5 بكسل 0 ؛
/ * وضع تلميح الأداة * /
الموقف: مطلق.
مؤشر z: 1 ؛
أعلى: -5 بكسل ؛
اليمين: 105٪ ؛
}
.tooltip_div: التمرير فوق. تلميح الأداة {
الرؤية: مرئي
}

كود HTML:

أعلى تلميح
هذا هو نص تلميح الأدوات

كود CSS:

الجسم {
محاذاة النص: مركز ؛
}
.tooltip_div {
أعلى الهامش: 100 بكسل ؛
الموقف: نسبي ؛
عرض: مضمنة كتلة ؛
}
.tooltip_div. تلميح الأداة {
الرؤية: مخفي
العرض: 170 بكسل ؛
لون الخلفية: أزرق ؛
اللون: #fff ؛
محاذاة النص: مركز ؛
نصف قطر الحدود: 6 بكسل ؛
الحشو: 5 بكسل 0 ؛
/ * وضع تلميح الأداة * /
الموقف: مطلق.
مؤشر z: 1 ؛
أسفل: 100٪ ؛
اليسار: 50٪؛
الهامش الأيسر: -60 بكسل ؛
}
.tooltip_div: التمرير فوق. تلميح الأداة {
الرؤية: مرئي
}

كود HTML:

تلميح الأداة السفلي
هذا هو نص تلميح الأدوات

كود CSS:

الجسم {
محاذاة النص: مركز ؛
}
.tooltip_div {
أعلى الهامش: 100 بكسل ؛
الموقف: نسبي ؛
عرض: مضمنة كتلة ؛
}
.tooltip_div. تلميح الأداة {
الرؤية: مخفي
العرض: 170 بكسل ؛
لون الخلفية: أزرق ؛
اللون: #fff ؛
محاذاة النص: مركز ؛
نصف قطر الحدود: 6 بكسل ؛
الحشو: 5 بكسل 0 ؛
/ * ضع تلميح الأداة * /
الموقف: مطلق.
مؤشر z: 1 ؛
أفضل 100٪؛
اليسار: 50٪؛
الهامش الأيسر: -60 بكسل ؛
}
.tooltip_div: التمرير فوق. تلميح الأداة {
الرؤية: مرئي
}

يمكنك أيضًا استخدام مكتبة Bootstrap لإنشاء ملفات مخصصة تلميحات أدوات Bootstrap.

8. أضف تأثيرات الظل

يمكنك إضافة تأثيرات ظل CSS إلى النصوص والعناصر باستخدام امتداد ظل النص و ال مربع الظل خصائص CSS على التوالي.

ظل نص CSS

ال ظل النص تضيف خاصية CSS الظلال والطبقات إلى النص. ال ظل النص تقبل الخاصية قائمة الظلال مفصولة بفواصل ليتم تطبيقها على النص.

بناء جملة خاصية text-shadow CSS:

/ * يمكنك استخدام 4 وسيطات مع خاصية text-shadow CSS:
offset-x و offset-y و blur-radius واللون * /
/ * offset-x | تعويض ص | نصف قطر ضبابي | اللون */
ظل النص: 2 بكسل 2 بكسل 4 بكسل أحمر ؛
/ * اللون | الأوفست- x | تعويض ص | نصف قطر طمس * /
ظل النص: # 18fa3e 1px 2px 10px ؛

ملحوظة: الوسيطات color and blur-radius اختيارية.

متعلق ب: كيفية استخدام ظل النص CSS: الحيل والأمثلة

فمثلا:

الخلفية: # e74c3c؛
اللون: #fff ؛
عائلة الخطوط: لاتو ؛
ظل النص: 1 بكسل 1 بكسل rgba (123 ، 25 ، 15 ، 0.5) ، 2 بكسل 2 بكسل ، rgba (129 ، 28 ، 18 ، 0.51) ، 3 بكسل 3 بكسل rgba (135 ، 31 ، 20 ، 0.52) ، 4 بكسل 4 بكسل rgba (140 ، 33 ، 22 ، 0.53) ، 5 بكسل 5 بكسل ، rgba (145 ، 36 ، 24 ، 0.54) ، 6 بكسل 6 بكسل rgba (150 ، 38 ، 26 ، 0.55) ، 7 بكسل 7 بكسل ، rgba (154 ، 40 ، 28 ، 0.56) ، 8 بكسل 8 بكسل ، rgba (158 ، 42 ، 30 ، 0.57) ، 9 بكسل 9 بكسل ، rgba (162 ، 44 ، 31 ، 0.58) ، 10 بكسل 10 بكسل rgba (166 ، 45 ، 33 ، 0.59) ، 11 بكسل 11 بكسل ، rgba (169 ، 47 ، 34 ، 0.6) ، 12 بكسل 12 بكسل rgba (173 ، 48 ، 36 ، 0.61) ، 13 بكسل 13 بكسل ، rgba (176 ، 50 ، 37 ، 0.62) ، 14 بكسل 14 بكسل rgba (178 ، 51 ، 38 ، 0.63) ، 15 بكسل 15 بكسل rgba (181 ، 52 ، 39 ، 0.64) ، 16 بكسل 16 بكسل ، rgba (184 ، 54 ، 40 ، 0.65) ، 17 بكسل 17 بكسل ، rgba (186 ، 55 ، 41 ، 0.66) ، 18 بكسل 18 بكسل ، rgba (189 ، 56 ، 42 ، 0.67) ، 19 بكسل 19 بكسل rgba (191 ، 57 ، 43 ، 0.68) ، 20 بكسل 20 بكسل ، rgba (193 ، 58 ، 44 ، 0.69) ، 21 بكسل 21 بكسل rgba ( 195 ، 59 ، 45 ، 0.7) ، 22 بكسل 22 بكسل ، rgba (197 ، 60 ، 46 ، 0.71) ، 23 بكسل 23 بكسل rgba (199 ، 61 ، 47 ، 0.72) ، 24 بكسل 24 بكسل ، rgba (201 ، 62 ، 47 ، 0.73) ، 25 بكسل 25 بكسل ، rgba (202 ، 62 ، 48 ، 0.74) ، 26 بكسل 26 بكسل rgba (204 ، 63 ، 49 ، 0.75) ، 27 بكسل 27 بكسل ، rgba (206 ، 64 ، 49 ، 0.76) ، 28 بكسل 28 بكسل ، rgba (207 ، 65 ، 50 ، 0.77) ، 29 بكسل 29 بكسل ، rgba (209 ، 65 ، 51 ، 0.78) ، 30 بكسل 30 بكسل rgba (210 ، 66 ، 51 ، 0.79) ، 31 بكسل 31 بكسل ، rgba (211 ، 67 ، 52 ، 0.8) ، 32 بكسل 32 بكسل rgba ( 213 ، 67 ، 52 ، 0.81) ، 33 بكسل 33 بكسل ، rgba (214 ، 68 ، 53 ، 0.82) ، 34 بكسل 34 بكسل rgba (215 ، 69 ، 53 ، 0.83) ، 35 بكسل 35 بكسل ، rgba (216 ، 69 ، 54 ، 0.84) ، 36 بكسل 36 بكسل ، rgba (218 ، 70 ، 54 ، 0.85) ، 37 بكسل 37 بكسل rgba (219 ، 70 ، 55 ، 0.86) ، 38 بكسل 38 بكسل ، rgba (220 ، 71 ، 55 ، 0.87) ، 39 بكسل 39 بكسل ، rgba (221 ، 71 ، 56 ، 0.88) ، 40 بكسل 40 بكسل ، rgba (222 ، 72 ، 56 ، 0.89) ، 41 بكسل 41 بكسل ، rgba (223 ، 72 ، 57 ، 0.9) ، 42 بكسل 42 بكسل ، rgba (224 ، 73 ، 57 ، 0.91) ، 43 بكسل 43 بكسل rgba ( 225 ، 73 ، 57 ، 0.92) ، 44 بكسل 44 بكسل ، rgba (225 ، 73 ، 58 ، 0.93) ، 45 بكسل 45 بكسل rgba (226 ، 74 ، 58 ، 0.94) ، 46 بكسل 46 بكسل ، rgba (227 ، 74 ، 58 ، 0.95) ، 47 بكسل 47 بكسل ، rgba (228 ، 75 ، 59 ، 0.96) ، 48 بكسل 48 بكسل ، rgba (229 ، 75 ، 59 ، 0.97) ، 49 بكسل 49 بكسل ، rgba (230 ، 75 ، 59 ، 0.98) ، 50 بكسل 50 بكسل ، rgba (230 ، 76, 60, 0.99);

ظل مربع CSS

ال مربع الظل تُستخدم الخاصية لتطبيق الظل على عناصر HTML.

بناء جملة خاصية box-shadow CSS

ظل الصندوق: [إزاحة أفقية] [إزاحة رأسية] [نصف قطر طمس] [نصف قطر انتشار اختياري] [لون] ؛

ملحوظة: معلمات التمويه والانتشار واللون اختيارية.

متعلق ب: كيفية استخدام CSS box-shadow: الحيل والأمثلة

فمثلا:

مربع الظل: rgba (0 ، 0 ، 0 ، 0.35) 0 بكسل 5 بكسل 15 بكسل ؛

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

صمم موقع الويب الخاص بك باستخدام حيل CSS الحديثة

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

11 أمثلة على ظل نص CSS يمكنك تجربتها على موقع الويب الخاص بك

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

اقرأ التالي

شاركسقسقةبريد الالكتروني
مواضيع ذات صلة
  • برمجة
  • CSS
  • تصميم المواقع
  • تطوير الشبكة
عن المؤلف
يوفراج شاندرا (81 مقالة منشورة)

يوفراج طالب جامعي في علوم الكمبيوتر بجامعة دلهي بالهند. إنه متحمس لتطوير الويب Full Stack. عندما لا يكتب ، فإنه يستكشف عمق التقنيات المختلفة.

المزيد من Yuvraj Chandra

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك