سلام. در اینجا با آموزش سایه دادن به متن در css3 آشنا میشوید.
حتما تا به حال در دنیای وب نوشته هایی را دیده اید که سایه دار هستند و زیبایی خاصی به بعضی کلمات میدهند. ما در این آموزش میخواهیم به شما نشان دهیم که چگونه میتوان این جلوه را با استفاده از سی اس اس ایجاد کنید و آن را در سایت یا وبلاگ خوداستفاده کنید. برای این کار باید از تکنیک text shadow در css3 استفاده کرد.
در تصویر زیر سازگاری این تکنیک را با مرورگرهای مختلف مشاهده میکنید
(همان طور که در تصویر بالا مشاهده میکنید،این تکنیک با مرورگرهای IE 8.0 و IE 9.0 سازگاری ندارد ولی در اکثر مروگرهای دیگر به خوبی اجرا میشود)
در اینجا من نمونه کد مورد نظر برای سایه دادن به متن در css را برای شما نوشته ام که در حالت نرمال این کد به این صورت نوشته میشود:
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
حالا به توضیح تک تک مقادیر این کد و نحوه ویرایش و استفاده از آن ها میپردازیم:
1-عدد اول این کد یعنیh-shadow)4px): مربوط به درجه قرار گیری سایه در جهت افقی می باشد. اگر عدد – (منفی) در کنار این عدد قرار دهید سایه مورد نظر به سمت چپ نوشته هدایت میشود وهر چه عدد بزرگتر باشد سایه از متن اصلی در جهت افقی دورتر میشود.
عدد دوم v-shadow) 4px): مربوط به درجه قرار گیری سایه در جهت عمودی میباشد. اگر عدد – ( منفی) در کنار این اعداد قرار دهید سایه مورد نظر به بالای متن هدایت میشود. هر چه عدد بزرگتر باشد سایه از متن اصلی در جهت عمودی دورتر میشود.
2-عدد سوم یعنی 2px میزان تار بودن و پخش شدن (blur) سایه را مشخص میکند هر چه عدد بزرگتر باشد، سایه تار تر و پخش تر میشود و هرچه عدد کوچکتری انتخاب کنید(مثلا 0) سایه پر رنگ و واضع تر نمایش داده میشود
3- (rgba(150, 150, 150, 1 مربوط به رنگ سایه مورد نظر میباشد
برای بدست آوردن رنگ مورد نظر شما باید آشنایی با کد های rgb داشته باشید، این کد ها را میتوان در بخش رنگ نرم افزار فتوشاپ نیز به دست آورد و در اینجا به کار برد. با این حال من در اینجا تعدادی از رنگ های پر کاربرد همراه با کد رنگ rgb آن ها را نوشته ام:
رنگ قرمز:255,45,38
رنگ آبی:0,75,255
رنگ سایه:0,0,0
رنگ سفید:255,255,255
شما میتوانید عدد های بالا را به جای اعداد (rgba(150, 150, 150, 1 که مربوط به رنگ سایه هستند استفاده کنید
همچنین اگر میخواهید ساده تر رنگ مورد نظر را تغییر دهید کافیست به جای کد (rgba(150, 150, 150, 1 اسم رنگ مورد نظر خود را بنویسید
به طور مثال:red (قرمز)،blue (آبی)،black (سیاه)، white (سفید) و…
3-مقدار 1 انتهایی کد: این مقدار برای میزان پدیدار بودن سایه به کار میرود (opacity) و عدد آن باید از 1 تا 0 تنظیم شود.عدد 1 به معنای دیداری کامل سایه و کوچکتر از 1 مثلا 0 یا 0.2 برای کم رنگ شدن سایه به کار میرود.
چگونه میتوان از این کد در وبسایت یا وبلاگ استفاده کرد؟
به طور مثال من در اینجا برای استفاده از این کد برای عنوان های مطالب از کد زیر در فایل css اصلی قالب وبسایت استفاده کرده ام:
h2
{
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
در این کد ما تعریف کرده ایم که باید به عناوین مطالب (h2) سایه داده شود.
همچنین به تنهایی میتوانید در زیر class یا id مورد نظر خود این کد را به کار ببرید تا نوشته های آن قسمت از قالب سایه دار شود، بطور مثال من در تصویر پایین برای تمام نوشته های قسمت زیرین سایت یا فوتر (footer) این سایه را به کار برده ام
برای استفاده از این کد در وبلاگ، اول به قسمت ویرایش قالب در مدیریت وبلاگتان رجوع کنید بعد از اینکه کدهای قالبتان نمایش داده شد، بعد از تگ <style> و قبل از <style/> این کد را وارد کنید تا عنوان نوشته های وبلاگتان سایه دار شود.
نمونه نهایی ساخته شده کد css برای سایه دادن به متن را در تصویر زیر مشاهده میکنید:
امیدوارم از این آموزش استفاده لازم را برده باشید
موفق باشید
در صورت نیاز به راهنمایی بیشتر برای استفاده از کد های css و html اینجا کلیک کنید
سایت عالیی دارین ایول
سلام خسته نباشید ممنون بابت آموزش سایه دار کردن متن خیلی جالب بود