حتما شما هم دوست دارید یک طراحی سایت متفاوت داشته باشید مثل نظری که ما در ساین وب داریم از سایت های شکل هم یا به قولی قالب آماده واقعا خوشمان نمی آید هر روز دنبال این هستیم که چیزی را به مشتری ارائه کنیم که مشتری ما شگفت زده شود چیزی که باید یک طراح در کارهای خودش انجام دهد
ولی متاسفانه خیلی این کار انجام نمی گیرد نمی دونم به دلیل دانش کم برنامه نویسان افراد خلاق کم هست یا مشتری پول کافی نمی دهد ولی اگر شما اسم خود را طراح وب گذاشتید باید سایتی متفاوت را به مشتری بدهید یک طراح برای پول کار نمی کند برای عشقش کار می کند چیزی که دوست دارد و هر کار خودش مثل بچه های خودش هست نمی تواند بگوید کدام بهتر هست چون برای کدام وقت گذاشته است و کلی ایده داده است با کمی خلاقیت و گشتن در وب می توانید انواع کدهایی را که باعث جذابیت سایت شما می شود را در سایت خود بگذارید
text-shadow چی هست؟
خیلی خودمانی متن سایه دار می شود text shadow که یکی از ویژگی های css3 هست که شما می توانید در سایت خود از آنها استفاده کنید تا سایت شما هم جذاب تر شود هم خاص مثل همان چیزی که در فتوشاپ هست برای اینکه بتوانید طرح خودتان را جذاب تر کنید وقتی مرورگرها از این تکنیک ساپورت می کنند چرا نباید استفاده کرد در این مطلب چند نمونه جالب از text-shadow انتخاب کردیم که شما می توانید فقط با کپی و پیست کردن از آنها در سایت های خودتان استفاده کنید
چند نمونه از text shadow در css
یک نمونه ساده که به خودی خود جذاب هست
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 استفاده کردیم
حتما برای شما هم سوال شده است چرا ما در همه کدها از rgba استفاده کردهایم چرا از rgb استفاده نکردیم چند دلیل دارد چون شما در rgba می توانید تاری و رنگ سایه و شفافیت سایه و متن و بک گراند خودتان را تنظیم کنیم ولی در rgb شما فقط یک رنگ ثابت دارید بدون هیچ شفافیتی می توانید با آلفا میزان روشنایی یا همان opacity متن یا بک گراند خود را تعیین کنید
خلاصه
توصیه می کنید با کپی کردن این کدها خیلی راحت متن های سایت خودتون را جذاب تر کنید تا سایتی که به مشتری می دهید یک سایت متفاوت باشد اینها هستند که باعث می شوند سایت از لحاظ خشکی در بیاد و شیک تر نمایش داده شود در طراحی سایت تهران از این کدها استفاده کنید
موفق باشید
پرسش و پاسخ 0
بحث درباره این مقاله را شما آغاز کنید!
ارسال دیدگاه