ایجاد سایه و افکت های زیبا برای متن توسط CSS

CSS3 امکانات زیادی را برای طراحان وب سایت ها به ارمغان آورد . از آن جمله انداختن سایه برای متن در صفحات وب می باشد که طراحان را از بسیاری کارهای اضافی در نرم افزارهای طراحی مانند فتوشاپ بی نیاز می کند . به کمک دستورات سایه در CSS3 شما می توانید به سادگی به متن خود عمق و ابعاد دهید و یا آنها را به شکل برجسته و یا خارج از صفحه نشان دهید . توسط پارامترهایی که دستور سایه در CSS3 در اختیار شما قرار میدهد ، میتوانید متون بسیاری را با جلوه های بصری زیبا ایجاد کنید . فقط کافیست پارامترهای Color ، Offset و Blur را تغییر دهید تا به نتایج جدید دست یابید .

برای دستیابی به نمونه های ایجاد شده در این آموزش ، کافیست دستور نوشته شده را در دستورات CSS خود کپی کنید . به یاد داشته باشید مرورگرهای Chrome ، Safari ، Firefox و IE9 از دستورات سایه پشتیبانی میکنند .
● مشاهده دمو سایه ها و افکت ها

شرح دستور Text-Shadow و پارامترهای آن


مثال متن سایه دار با css

X-Offest و Y-Offset برای تعیین موقعیت سایه نسبت به متن در محور افقی و عمودی به کار گرفته می شود . از Blur برای محوکردن سایه استفاده می شود و رنگ سایه توسط Color مشخص می شود. شما میتوانید چندین سایه برای یک متن ایجاد کنید .


سایه انداختن برای متن با CSS
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

در این متن ما از دو سایه برای ایجاد این جلوه استفاده کرده ایم . سایه اول را همرنگ با رنگ پس زمینه انتخاب کرده ایم و سایه دوم را همرنگ با متن . مختصات را چنان تعیین کرده ایم که سایه ای که همرنگ پس زمینه است طوری روی سایه دوم قرار گیرد که یک حاشیه نازک از سایه دوم نمایان باشد . بنابراین متن دارای ابعاد و به صورت برجسته جلوه میکند.
● مشاهده دمو


سایه در صفحات وب
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

افکت نئون با 8 مرحله نور پردازی ایجاد شده است . متن اصلی با رنگ سفید پر شده است و سپس هر کدام از لایه ها با سایز به مراتب بزرگتر از قبلی و مقدار تاری بیشتر به سمت تیرگی می روند. این طیف رنگی از رنگ های نزدیک به سفید شروع و به هاله های بنفش ختم می شود.
● مشاهده دمو


سایه های زیبا برای متن
text-shadow: 0px 2px 3px #666;

این سایه یکی از رایجترین طرح های استفاده شده در وب سایت ها است . در کد این سایه ، با تغییر ناچیز مقدار Y-offset و یک رنگ روشن تر از متن ، یک برجستگی نرم ایجاد میکنیم . در این نوع سایه زنی ، چنانچه پس زمینه تیره داشته باشیم ، باید سایه در زیر متن با یک رنگ روشن ایجاد شود و چنانچه پس زمینه روشن داشته باشیم ، سایه باید در بالای متن و با یک رنگ تیره پدیدار شود.
● مشاهده دمو


آموزش انداختن سایه در زیر متن
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

این سایه مانند متن های سه بُعدی در کامپیوترهای قدیمی طراحی شده است . برای ایجاد این سایه از ترکیب و رنگ بندی RGB کمک میگیریم . توسط کلمه RGBa می توانیم رنگ های ایجاد شده توسط سیستم RGB را 50% شفاف تر کنیم تا سایر لایه ها و رنگ های زیرین آنها نیز نمایان شود.
● مشاهده دمو


ساخت متن آتش به وسیله CSS
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

افکت آتش یکی از زیباترین طرح هایی است که توسط CSS قابل پیاده سازی است .برای ایجاد این نوع افکت از لایه های چندگانه با مقادیر متفاوت استفاده می کنیم . هر لایه دارای مقدار offset متفاوت با تنظیمات Blur مختلف و طیفی از رنگ های گرم ساخته شده است . این رنگ ها از سفید شروع شده و به سمت رنگ زرد ، نارنجی و مراتب تیره تر این خانواده رنگی پیش می روند.
● مشاهده دمو


چگونه برای متن سایه ایجاد کنیم
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

این نوع افکت به سادگی توسط لایه های چند گانه که با افزایش مقدار offset و تغییر رنگ در هر لایه نسبت به متن اصلی همراه است ، به وجود می آید . در این نوع افکت هیچ مقداری برای Blur برای زنده تر کردن و یا محو کردن در نظر نمیگیریم و هر لایه به صورت عادی با رنگی که برای آن انتخاب میکنیم نمایش داده میشود .
● مشاهده دمو

نظرات (14) -

  • محمد

    07/02/1390 11:11:46 ق.ظ | پاسخ به این نظر

    تو خود نمره بیستی
    این آموزشت بی نظیره
    خیلی کاربرد داره
    متشکرم

  • bahar

    09/07/1390 05:00:16 ق.ظ | پاسخ به این نظر

    bi naziiiiiriiiiiiiiiiiiiiiiiiiiiiii
    shak nakon

    • Admin

      09/07/1390 05:30:09 ق.ظ | پاسخ به این نظر

      خیلی ممنونم از شما و نظر لطفتون، خوشحالم که مطالب مورد توجه واقع شده

  • ابراهیمی

    11/26/1390 07:16:01 ب.ظ | پاسخ به این نظر

    hi
    site khubi dari
    amuzeshe bala rie hame mururgar ejra nemishe (IE B)goftane in nokte khali az lotf nist.
    in entekhabe keshvaram vase comment dadan bimored o mskharas.
    good night

    • Admin

      11/27/1390 11:27:44 ب.ظ | پاسخ به این نظر

      سلام جناب ابراهیمی
      من تصورم این بوده که وجود کلمه CSS3 در ابتدای پست دلیل و نشان دهنده این هست که سایه ها فقط در مرورگرهای مدرن اجرا میشن. اما خب کاملا حق با شماست و گفتنش خالی از لطف نیست و بهتر بود این رو بصورت نکته عنوان میکردم.
      در مورد انتخاب کشور هم با نظرتون موافقم و مدتیه قصد برداشتنش رو داشتم که با امر شما در اسرا وقت اقدام به حذفش خواهم کرد.
      از پیشنهاد و انتقادات سازندتون ممنونم و ازتون می خوام که بازهم اگر موردی هست بی نصیب نگذارید.
      موفق باشید...

  • Maryam

    09/22/1391 07:35:49 ب.ظ | پاسخ به این نظر

    وای دستتون در نکنه،من برای  پروژم تمام سایت تا رفتم ولی تنها سایتی هستین که به آدم به این خوبی آموزش میدین،قربون همتون،خسته نباشین

Loading