وب دیزاینر

ارائه دهنده خدمات تحت وب

WebDesigner
الآن اینجا هستید:
صفحه اصلی » بانک کد » گرادینت متن با CSS

تبلیغات

گرادینت متن با CSS

استفاده از رنگ ترکیبی یا گرادینت برای رنگ پس زمینه المان ها در CSS3 امکان پذیر است. شما قادر خواهید بود تنها با یک خط کد رنگ میتواند هر تعداد هاله رنگ که بخواهید برای رنگ پس زمینه خود انتخاب کنید. اما استفاده از این تکنیک برای متن به این راحتی‌ها نیست. در این پست با آموزش گرادینت متن تنها با کد CSS با شما خواهیم بود.

برای این کار، راه‌های متفاوتی وجود دارد. ممکن است این افکت را با فوتوشاپ طراحی کرده و از عکس استفاده کنید. اما اگر می‌خواهید این کار را سریع و راحت و با کاهش حجم صفحه خود انجام دهید و یا متن قابلیت انتخاب داشته باشد استفاده از این مناسب شماست. در این روش بدون نیاز به SVG و تنها با استفاده از کد CSS رنگ های داخواه خود را انتخاب کنید. روش‌های پیشین تنها WebKit را ساپورت می‌کرد. اما این روش تمام مرورگرهای بروز و پراستفاده را ساپورت می‌کند. البته بخاطر عدم پشتیبانی اینترنت اکسپلورر از CSS blending این افکت در IE قابل مشاهده نیست.

در این روش درواقع اول رنگ متن را سیاه قرار می‌دهیم. سپس متن را با پس زمینه رنگ جدید و با دستور mix-blend-mode: screen پوشش می‌دهیم. بعد یک کپی از همان متن را با همان پس زمینه کل صفحه با کد mix-blend-mode: multiply پوشش می‌دهیم.

لذت آموزش با وب دیزاینر

 

فایل پروژه
برچسب ها:
اشتراک گذاری:
مطالب مرتبط :
درباره نویسنده: محمدی نژاد

نظرات: