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

[mk21 56]

با سلام

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

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

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

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% شفاف تر کنیم تا سایر لایه ها و رنگ های زیرین آنها نیز نمایان شود.

--------------------------------------------

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

امیدوارم از این آموزش استفاده کافی را برده باشید.