اخبار سایت
در زندگی وقتی کاری برای انجام یا چیزی برای عشق ورزیدن یا بارقه ای برای امیدوار بودن داشتید ، آن گاه بدانید فرد شادی خواهید بود - ارسطو
مجموعه آموزش های ویدیویی به زبان فارسی
خانه / آموزش CSS / آموزش سایه دادن به متن در css3
css-textshadow-cover

آموزش سایه دادن به متن در css3

سلام. در اینجا با  آموزش سایه دادن به متن در css3 آشنا میشوید.

حتما تا به حال در دنیای وب نوشته هایی را دیده اید که سایه دار هستند و زیبایی خاصی به بعضی کلمات میدهند. ما در این آموزش میخواهیم به شما نشان دهیم که چگونه میتوان این جلوه را با استفاده از سی اس اس ایجاد کنید و آن را در سایت یا وبلاگ خوداستفاده کنید. برای این کار باید از تکنیک text shadow در css3 استفاده کرد.

در تصویر زیر سازگاری این تکنیک را با مرورگرهای مختلف مشاهده میکنید

css-text-shadow-01

(همان طور که در تصویر بالا مشاهده میکنید،این تکنیک با مرورگرهای IE 8.0 و IE 9.0 سازگاری ندارد ولی در اکثر مروگرهای دیگر به خوبی اجرا میشود)

در اینجا من نمونه کد مورد نظر برای سایه دادن به متن در css را برای شما نوشته ام که در حالت نرمال این کد به این صورت نوشته میشود:

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

حالا به توضیح تک تک مقادیر این کد و نحوه ویرایش و استفاده از آن ها میپردازیم:

css-text-shadow-02

۱-عدد اول این کد یعنیh-shadow)4px): مربوط به درجه قرار گیری سایه در جهت افقی می باشد. اگر عدد – (منفی) در کنار این عدد قرار دهید سایه مورد نظر به سمت چپ نوشته هدایت میشود وهر چه عدد بزرگتر باشد سایه از متن اصلی در جهت افقی دورتر میشود.

عدد دوم v-shadow) 4px): مربوط به درجه قرار گیری سایه در جهت عمودی میباشد. اگر عدد – ( منفی) در کنار این اعداد قرار دهید سایه مورد نظر به بالای متن هدایت میشود. هر چه عدد بزرگتر باشد سایه از متن اصلی در جهت عمودی دورتر میشود.

۲-عدد سوم یعنی ۲px میزان تار بودن و پخش شدن (blur) سایه را مشخص میکند هر چه عدد بزرگتر باشد، سایه تار تر و پخش تر میشود و هرچه عدد کوچکتری انتخاب کنید(مثلا ۰) سایه پر رنگ و واضع تر نمایش داده میشود

۳- (rgba(150, 150, 150, 1 مربوط به رنگ سایه مورد نظر میباشد

برای بدست آوردن رنگ مورد نظر شما باید آشنایی با کد های rgb داشته باشید، این کد ها را میتوان در بخش رنگ نرم افزار فتوشاپ نیز به دست آورد و در اینجا به کار برد. با این حال من در اینجا تعدادی از رنگ های پر کاربرد همراه با کد رنگ rgb آن ها را نوشته ام:

رنگ قرمز:۲۵۵,۴۵,۳۸

رنگ آبی:۰,۷۵,۲۵۵

رنگ سایه:۰,۰,۰

رنگ سفید:۲۵۵,۲۵۵,۲۵۵

شما میتوانید عدد های بالا را به جای اعداد (rgba(150, 150, 150, 1 که مربوط به رنگ سایه هستند استفاده کنید

همچنین اگر میخواهید ساده تر رنگ مورد نظر را تغییر دهید کافیست به جای کد (rgba(150, 150, 150, 1 اسم رنگ مورد نظر خود را بنویسید

به طور مثال:red (قرمز)،blue (آبی)،black (سیاه)، white (سفید) و…

۳-مقدار ۱ انتهایی کد: این مقدار برای میزان پدیدار بودن سایه به کار میرود (opacity) و عدد آن باید از ۱ تا ۰ تنظیم شود.عدد ۱ به معنای دیداری کامل سایه و کوچکتر از ۱ مثلا ۰ یا ۰.۲ برای کم رنگ شدن سایه به کار میرود.

چگونه میتوان از این کد در وبسایت یا وبلاگ استفاده کرد؟

به طور مثال من در اینجا برای استفاده از این کد برای عنوان های مطالب از کد زیر در فایل css اصلی قالب وبسایت استفاده کرده ام:

h2
{
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}

در این کد ما تعریف کرده ایم که باید به عناوین مطالب (h2) سایه داده شود.

همچنین به تنهایی میتوانید در زیر class یا id مورد نظر خود این کد را به کار ببرید تا نوشته های آن قسمت از قالب سایه دار شود، بطور مثال من در تصویر پایین برای تمام نوشته های قسمت زیرین سایت یا فوتر (footer) این سایه را به کار برده ام

css-text-shadow-03

برای استفاده از این کد در وبلاگ، اول به قسمت ویرایش قالب در مدیریت وبلاگتان رجوع کنید بعد از اینکه کدهای قالبتان نمایش داده شد، بعد از تگ <style> و قبل از <style/> این کد را وارد کنید تا عنوان نوشته های وبلاگتان سایه دار شود.

نمونه نهایی ساخته شده کد css برای سایه دادن به متن را در تصویر زیر مشاهده میکنید:

css-text-shadow-04

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

موفق باشید

در صورت نیاز به راهنمایی بیشتر برای استفاده از کد های css و html اینجا کلیک کنید

درباره admin

۱ دیدگاه

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شدبخش های مورد نیاز علامت گذاری شده است *

*