Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

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

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

Post Pic

8 تأثيرات مميزة للنصوص بواسطة Text-shadow و css3

بدأ منذ فترة الكثير من المصممين و انا منهم إدخال تأثيرات على التصميم بواسطة ما يوفره Css3 قد لا تظهر للجميع لكنها تضفي لمسة جميله لمن تظهر له . في هذا الموضوع سأعرض ٨ طرق باستخدام Text-shadow للحصول على تأثيرات مميزة .

ملاحظة: كتبت هذا الموضوع في الأساس بالانجليزية في مجلة The MegaMag و ارتايت ان اترجمه هنا للفائدة .

فلنبدأ

خاصية Text-shadow ثم إضافتها في Css3 و هي تتيح لك إضافة ظل أو أكثر من ظل للنصوص .

بناء الجملة

  • مسافية افقية و مسافة رأسية : يمكن ان يحمل قيم سالبة أو موجبة كما يمكن أن يحمل القيمة صفر .
  • blur radius : و هي درجة تشتتت الظل مثلا صفر سيعطيك ظل حاد أو محدد أما القيمة ١٠ ستظهر ظل مشتت او غير معروف الأطراف ( أنا أحاول و بشدة أن اصيغ هذا بالعربية هل تلاحظ ؟؟ :) )
  • لون الظل : لو لم يتم تحديده فإن لون الظل سيكون بنفس لون النص .
دعم المتصفحات
  • Opera 9.5+(استخدام color: transparent غير مدعوم )
  • Firefox 3.5+
  • Safari 1.0+
  • Google Chrome

مثال

لمشاهدة مثال حي للأمثلة في الأسفل شاهد صفحة الامثلة .

١- نص مشع … و إشعاع مضاعف

للحصول على النص المشع


.glow {

 color:#FFFFFF ;

 text-shadow:0 0 20px  yellow ;

 }

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


.extraGlow {

 color:white;

 text-shadow:0 0 30px  yellow , 0 0 70px  yellow ;

 }

2- نص على طريقة أبل


اشتهرت أبل بهذا التاثير على النصوص و هو ما يطلق عليه التأثير النظيف .

.applestyle{

 background:#666

 color: #000;

 text-shadow: 0px 1px 1px  #fff;

 }

3- نص بارز Emboss على طريقة الفوتوشوب

.Emboss  {

 background:#ccc ;

 color:#ccc;

 text-shadow: -1px -1px white, 1px 1px  #333;

 }

هنا اضفنا ظلين احدهما في الأعلى على اليمين و الاخر في الاسفل على اليسار . مشكلة واحدة في هذ الـتأثير ان لون الخلفية و النص واحد لكن لون الظل هو ما سيظهر او يحدد هذا النص لكن لو كان المتصفح لا يدعم Text-shadow فإن النص لن يظهر .

٤- نص مغمور pillow emboss على طريقة الفوتوشوب


مرة أخرى أكثر من ظل

.PillowEmboss {

 background:#ccc;

 color:#ddd;

 text-shadow: 1px 1px white,

 -1px -1px #444;

 }

5- نص مشتت


حصلت على هذه الحيلة من Simurai Website و هي حيلة ذكية بجعل لون النص شفاف و إضافة ظل مشتت.في المثال حددنا القيمة ١٠ لدرجة التشتيت لكن كلما زادت القيمة كان النص اقل وضوحا .


.blurytext {

 color: transparent;

 text-shadow: #fff 0 0  10px;

 }

6- نص بارز أو مغمور لا أعرف ..

وجدت هذه الفكرة في StylizedWeb . هذا التأثير قد لا يكون كبيرا و لكن يضيف لمسة جميلة للنصوص .


.insettext{

color: #344251;

text-shadow: 1px 1px 0px #bad3ed;

font-weight: bold;

background:#bad3ed;

}

لون النص ولون الخلفية واحد .

٧- نص محوط

سأعترف أن هذا التأثير ليس الأفضل فالخط المحيط لا يحيط بالنص بشكل كامل لكن قررت ان اشارككم الفكرة على أي حال


.Stroke{

 color:red;

 font-weight: bold;

 text-shadow: 1px 1px 0px  #000,

 -1px -1px 0px #000;

 }

قمت بإضافة ظلين حادين بدون تشتيت حيث قيمة التشتيت صفر و اضفت الظلين في اتجاهين متضادين .

٨- نص ثلاثي الأبعاد

اعجبتني هذه الفكرة كثيرا لا يمكنني ان افكر في الكثير من التطبيقات العملية لها لكنها اعجبتني و جربت استخدام الكثير من القيم و صاحب الفكرة يستخدمها في صفحتة بشكل جميل و بدون ان يبدو مبالغا فيه و جدت هذه الفكرة في Css-trick.

الفكرة تكمن باختصار بإضافة اكثر من ظل و تحريك كل ظل بمقدار واحد بمعنى الظل الاول سيكون في ٢ و ٢ و الظل الثاني سيكون في النقطة ٣ و ٣ و الرابع في ٤و ٤ و هكذا .

.effect3D {
 color:rgba(255,255,0,.7) ;
 font-weight: bold;
 text-shadow: 1px 1px rgba(255,128,0,.7),
 2px 2px rgba(255,128,0,.7),
 3px 3px rgba(255,128,0,.7),
 4px 4px rgba(255,128,0,.7),
 5px 5px rgba(255,128,0,.7);
 }

ملاحظة

انا استخدم هذه المرة الخاصية RGBA لتحديد الالوان وهي أحد الافكار الجديدة التي سأتحدث عنها قريبا و لكن يمكن بالطبع وضع اللون كما في الطريقة العادية بواسطة مثلا #fffff او باستخدام اسم اللون مثلا White وهكذا .

بقلم : فاطمة العمادي

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

أوسمة : , , , ,

تعليقات الزوار (20)

[+] أضف تعليقك من فضلك



  1. احمد بدوي كتب:

    رائع لكن للاسف لا يغني عن ان بعض الكتابات يتم عملها بالفوتوشوب

    افضل طريقة اراها هي النص المشتت هي اللي بدقة عالية

    البقية تعطي احساس انها غير احترافية للاسف

    هذا رأيي ممكن الاخرين يروها بشكل مختلف


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


  2. ماشاء اللة أستاذة فاطمة ,
    تأثيرات رائعة وتضيف لمسة فنية جميلة على الخطوط , وخصوصا تأثير النصوص على طريقة أبل ..

    وفقك الله ….


  3. Ahmed Bolica كتب:

    للامام دائما اخت فاطمه


  4. عيسى المهندي كتب:

    تاثيرات جميلة ولكن دائما مايعطل استخدامها متصفح اكسبلور وخصوصا ان اكثر المستخدمين العرب مازالوا يستخدمون متصفح اكسبلور 6


  5. abu-nawal كتب:

    الله يعطيك العافيه اخوي الدكتور ولاهنت على الشرح

    لكن اخي الكريم هذه الطريقه يوجد فيها اخطاء

    فعند فحصهااا
    http://jigsaw.w3.org/css-validator/

    تعطيك ان هذه الطريقه خاطئ

    هل يوجد تعديل بحيث تكون متوافقه وغير خاطئه ؟


    • هذا خيار يجب أن يتخده المصمم .. انا مثلا اتخذت قرار ان استخدم بضع الادوات الغير متوافقة مع فاحص المعايير و ليس المعايير ..
      انا اتبع المعايير الاساسية لكن للأسف css3 غير مدعومة من قبل الفاليديتور و بالتالي حتى يتم ترقية الفاحص سيكون عليك اتخاذ قرارك هل بالضرورة ان تمر صفحتك ١٠٠٪ ام ستكتفي بتجنب الاخطاء الاساسية و تجاهل ملاحظاته حول ادوات css3 .
      بالتوفيق


  6. شكرا لك رائع جدا


  7. أبو أسامة كتب:

    أختي فاطمة جزاك الله خيرا

    كيف الحل مع المتصفحات القديمة لإظهار هذه الحركات الجميلة


  8. بدر كتب:

    تسلم ايدك اخى


  9. نانا كتب:

    بجد موقع تحفه


  10. ta3'reed كتب:

    فعلا الموضوع ده اكثر من رائع
    المدونه ممتازه مووووووووووووووت
    لكم منى اجمل تحيه


  11. السلام عليكم
    شكرا جزيلا على المعلومات والمجهود الرائع


  12. شكرا اخي العزيز على هده المعلومات القيمة
    css يجد دائما حلول غاية في الروعة


  13. يسمينة كتب:

    شكرًا على المجهود… والموضوع رائع… هذه الطرق سوف تضفي لمسات رائعة على النصوص…