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

نویسنده: حامد میرزایی 21. أفريل 2011 23:33

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 برای زنده تر کردن و یا محو کردن در نظر نمیگیریم و هر لایه به صورت عادی با رنگی که برای آن انتخاب میکنیم نمایش داده میشود .
● مشاهده دمو

نظرات (13) -

محمد
محمد Iran
09/24/2011 11:11:46 ق.ظ | لینک نظر |

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

bahar
bahar Iran
11/28/2011 05:00:16 ق.ظ | لینک نظر |

bi naziiiiiriiiiiiiiiiiiiiiiiiiiiiii
shak nakon

Admin
Admin Iran
11/28/2011 05:30:09 ق.ظ | لینک نظر |

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

احسان
احسان Iran
12/01/2011 05:57:54 ب.ظ | لینک نظر |

واقعا علی بود .مرسی

ابراهیمی
ابراهیمی United States
02/15/2012 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
Admin Iran
02/16/2012 11:27:44 ب.ظ | لینک نظر |

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

علی
علی United States
03/23/2012 07:50:46 ب.ظ | لینک نظر |

می بوسمت

مینو
مینو United States
07/05/2012 04:16:15 ب.ظ | لینک نظر |

عالیییییییییه واقعا خسته نباشید

youngprayers
youngprayers Iran
08/23/2012 04:45:46 ب.ظ | لینک نظر |

واقعا کارتون درسته
باتشکر

hesam
hesam Iran
08/27/2012 11:16:12 ب.ظ | لینک نظر |

عالی بود

Maryam
Maryam Iran
12/12/2012 07:35:49 ب.ظ | لینک نظر |

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

سعید
سعید Thailand
05/29/2013 01:13:49 ق.ظ | لینک نظر |

خوب بود بد نبود

جولیک
جولیک Iran
06/29/2013 04:15:27 ب.ظ | لینک نظر |

ممنون، کاربردی و مفید!Smile

سرویس plus one گوگل

تازه ترین ارسال ها

تبلیغات متنی

طراحي سايت
گروه طراحی سایت وب طراح
طراحی وب سایت
زفره مدیا، طراحی وب سایت
طراحي سايت
مقالات مفيد طراحي سايت,سئو وبرنامه نويسي

تبلیغات

تازه ترین نظرات

Comment RSS

استفاده از مطالب این سایت تنها با درج لینک فعال به مقالۀ مبدا، مجاز است.    Copyright © 2010-2012 Websiteha طراحی حامد میرزایی Powered by BlogEngine.NET 2.5.0.6