Latest web development tutorials

تأثيرات النص CSS3

تأثيرات النص CSS3

ويتضمن النص CSS3 العديد من الميزات الجديدة.

في هذا الفصل سوف تتعلم سمات النص التالي:

  • نص الظل
  • مربع الظل
  • تجاوز النص
  • كلمة ختامية
  • كلمة كسر

دعم المتصفح

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

وCSS3 ظل نص

في CSS3، تنطبق خاصية النص الظل إلى نص الظلال.

تأثير الظل النص!

عليك تحديد الظل الأفقي، ظل الرأسي أو اللون أو طمس المسافة والظلال:

OperaSafariChromeFirefoxInternet Explorer

أمثلة

إضافة الظل إلى العنوان:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

محاولة »


CSS3 الملكية مربع الظل

في CSS3 تنطبق الملكية CSS3 مربع الظل مربع الظل

أمثلة

شعبة {
مربع الظل: 10px 10px؛
}

محاولة »


المقبل، إضافة اللون إلى الظل

أمثلة

شعبة {
مربع الظل: 10px 10px الرمادي.
}

محاولة »


المقبل، إضافة الظل إلى طمس الأثر

أمثلة

شعبة {
مربع الظل: 10px 10px 5px الرمادي.
}

محاولة »


يمكنك أيضا إضافة تأثير الظل في اثنين :: قبل احتساب و:: بعد العناصر الزائفة

أمثلة

# Boxshadow {
موقع: نسبي.
ب ثور الظل: 1PX 2px 4PX رغبا (0، 0، 0، 0.5)؛
السلطة الفلسطينية dding: 10px؛
البكالوريا kground: أبيض؛
}
#boxshadow IMG {
عرض: 100٪؛
الحدود: 1PX الصلبة # 8a4419.
على غرار الحدود: أقحم.
}
# B oxshadow :: بعد {
المحتوى: ''؛
الموقف: مطلقة؛
ض الفهرس: -1؛ / * اخفاء الظل وراء صورة * /
مربع الظل: 0 15px 20px رغبا (0، 0، 0، 0.3)؛
العرض: 70٪؛
اليسار: 15٪؛ / * نصف ما تبقى من 30٪ * /
الطول: 100px؛
أسفل: 0؛
}

محاولة »


وهناك حالة خاصة هو استخدام تأثير بطاقة الظل

أمثلة

div.card {
العرض: 250px؛
مربع الظل: 0 4PX 8px 0 رغبا (0، 0، 0، 0.2)، 0 6px 20px 0 رغبا (0، 0، 0، 0.19)؛
مواءمة النصوص: المركز؛
}
}

بطاقات النص >> صورة بطاقة >>


CSS3 الملكية تجاوز النص

تحدد السمة CSS3 نص تجاوز كيف ينبغي للمستخدمين عرض محتوى تجاوز

أمثلة

p.test1 {
أبيض الفضاء: بلا التفاف.
العرض: 200px؛
الحدود: 1PX الصلبة # 000000؛
تجاوز: مخفي.
تجاوز النص: كليب.
}

p.test2 {
أبيض الفضاء: بلا التفاف.
العرض: 200px؛
الحدود: 1PX الصلبة # 000000؛
تجاوز: مخفي.
تجاوز النص: القطع.
}

محاولة »


CSS3 السطر الجديد

وإذا كانت الكلمة طويلة جدا لتناسب في المنطقة التي تمتد إلى خارج:

CSS3، الخاصية تسمح لك التفاف التفاف النص إلزامي - حتى لو كان ذلك يعني تقسيم في وسط الكلمة:

رمز المغلق هو على النحو التالي:

OperaSafariChromeFirefoxInternet Explorer

أمثلة

يسمح التفاف النص الطويل:

p {word-wrap:break-word;}

محاولة »


CSS3 كلمة يكسر

السمة CSS3 كلمة يكسر لتحديد خط كسر القواعد:

رمز المغلق هو على النحو التالي:

أمثلة

p.test1 {
كلمة كسر: المحافظة على جميع؛
}

p.test2 {
كلمة كسر: كسر جميع؛
}

محاولة »


سمات النص الجديد

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