چند نمونه جالب از text-shadow در طراحی سایت

حتما شما هم دوست دارید یک طراحی سایت متفاوت داشته باشید مثل نظری که ما در ساین وب داریم از سایت های شکل هم یا به قولی قالب آماده واقعا خوشمان نمی آید هر روز دنبال این هستیم که چیزی را به مشتری ارائه کنیم که مشتری ما شگفت زده شود چیزی که باید یک طراح در کارهای خودش انجام دهد

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

خیلی خودمانی متن سایه دار می شود text shadow که یکی از ویژگی های css3  هست که شما می توانید در سایت خود از آنها استفاده کنید تا سایت شما هم جذاب تر شود هم خاص مثل همان چیزی که در فتوشاپ هست برای اینکه بتوانید طرح خودتان را جذاب تر کنید وقتی مرورگرها از این تکنیک ساپورت می کنند چرا نباید استفاده کرد در این مطلب چند نمونه جالب از text-shadow انتخاب کردیم که شما می توانید فقط با کپی و پیست کردن از آنها در سایت های خودتان استفاده کنید

یک نمونه ساده که به خودی خود جذاب هست

    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

اگر به نمونه زیر دقت کنید رنگ بک گراند تیره چون این سایه بیشتر در رنگ های تیره خودش را نشان می دهد تا رنگ های روشن حالتی که ایجاد شده انگار متن در بک گراند فرو رفته و این کار جالبی هست

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

body {
    background: #222;
}
 
#text h1 {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

در نمونه بعدی اگر دقت کنید متن انگار روی هوا هست چون زیرش سایه دارد و این به مشتری این حس را می دهد که انگار متن ها روی هوا هستند

    text-shadow: 0px 3px 0px #b2a98f,
                 0px 14px 10px rgba(0,0,0,0.15),
                 0px 24px 2px rgba(0,0,0,0.1),
                 0px 34px 30px rgba(0,0,0,0.1);

در نمونه بعدی متن حالت ۳بعدی پیدا کرده است جوری شده است که انگار شما در سایت خودتان از یک نوشته ۳ بعدی استفاده کرده اید و اگر رنگ متن را روشن بگیرید خیلی جذاب تر می شود

text-shadow: 0 1px 0 #ccc, 
               ۰ ۲px 0 #c9c9c9,
               ۰ ۳px 0 #bbb,
               ۰ ۴px 0 #b9b9b9,
               ۰ ۵px 0 #aaa,
               ۰ ۶px 1px rgba(0,0,0,.1),
               ۰ ۰ ۵px rgba(0,0,0,.1),
               ۰ ۱px 3px rgba(0,0,0,.3),
               ۰ ۳px 5px rgba(0,0,0,.2),
               ۰ ۵px 10px rgba(0,0,0,.25),
               ۰ ۱۰px 10px rgba(0,0,0,.2),
               ۰ ۲۰px 20px rgba(0,0,0,.15);

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

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

حتما برای شما هم سوال شده است چرا ما در همه کدها از rgba  استفاده کردهایم چرا از rgb استفاده نکردیم چند دلیل دارد چون شما در rgba  می توانید تاری و رنگ سایه و شفافیت سایه و متن و بک گراند خودتان را تنظیم کنیم ولی در rgb  شما فقط یک رنگ ثابت دارید بدون هیچ شفافیتی می توانید با آلفا میزان روشنایی یا همان opacity متن یا بک گراند خود را تعیین کنید

خلاصه

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

موفق باشید