روش مدیریت رنگ در طراحی های وب خود در شرف تغییر است. شاید از زمانی که یک وب بیبی کوچک بودید، با مقادیر رنگ هگزادسیمال بازی می کردید. اگر بودید، برای سریع بزرگ شدن آماده شوید. CSS3 وارد شده است و پالت شما در شرف بزرگتر شدن است.
در مقایسه با آنچه که در راه است، بسیار خوب است که طراحان کور رنگ بوده اند و تنها با بخش کوچکی از طیف رنگی کار می کنند. خیر، رنگ های جدید به رنگین کمان اضافه نمی شود.
آنچه اتفاق خواهد افتاد این است که مقادیر رنگ به روش‌های جدیدی تعریف می‌شوند، کل طیف سطوح کدورت اضافه می‌شود و گرادیان‌های مبتنی بر CSS خالص به جای تصاویر نیز وارد می‌شوند.
برخی از وب سایت های آینده نگر، مانند 24 روش برای تحت تأثیر قرار دادن دوستان خود ، در حال حاضر با RGBa برای جلوه‌های رنگ متن و پس‌زمینه بازی می‌کنند—و نتایج عالی هستند.
24ways.org از opacity و RGBa برای ایجاد یک طرح لایه ای جالب استفاده می کند.
حقیقت درباره HEX
علیرغم آنچه ممکن است برخی از توسعه دهندگانی که اخیراً با آنها درگیر بوده ام فکر کنند، RGB برای مدتی در وب وجود داشته است. مقادیر رنگ RGB در هر مرورگری که فکرش را بکنید پشتیبانی می شود، بنابراین چیز جدیدی نیستند. فقط بیشتر توسعه دهندگان (و طراحان) به تعریف رنگ ها در HEX عادت کرده اند و دلیلی برای تغییر نداشته اند. اکنون آنها انجام می دهند.
سیستم‌های HEX و RGB می‌توانند میلیون‌ها رنگ موجود روی صفحه‌نمایش شما را به یک اندازه خوب تعریف کنند:
همه این تنظیمات مقدار رنگ نتیجه یکسانی دارند.
با این وجود، من ترجیح می دهم رنگ ها را در RGB امتحان کنم. من انسانی با 10 انگشت هستم، بنابراین تصور رنگ هایی که از مقادیر پایه 10 استفاده می کنند آسان تر از تصور رنگ هایی است که از مقادیر پایه شانزده استفاده می کنند. من از این طریق خنده دار هستم: می توانم رنگی را با مقادیر 0-255 یا 0-100٪ خیلی سریع تر از رنگی با مقادیر 00-99 یا aa-ff تشخیص دهم.
HEX یک مزیت جزئی نسبت به RGB دارد: جمع و جور است—حتی اگر از کوتاه‌نویسی استفاده می‌کنید (سه مقدار به جای شش). اگرچه این فقط در صورتی مهم است که در مورد بهینه سازی کد سختگیر باشید. تنها چیزی که مختصر HEX برای آن خوب است، رنگ‌های ایمن برای وب است. اما اگر خود را به رنگ‌های ایمن برای وب محدود می‌کنید، وقت آن است که به هر حال ادامه دهید.
RGB جدید و بهبود یافته: اکنون با آلفا!
در اینجا دلیلی برای شروع استفاده از مقادیر RGB وجود دارد: آنها می توانند یک مقدار آلفا برای ایجاد کدورت داشته باشند. افزودن مقدار آلفا به رنگ RGB خود سادگی است:
رنگ پس‌زمینه: rgba (100٪، 0، 0، 0.5)
یا:
رنگ پس‌زمینه: rgba(255، 0، 0، 0.5)
هر دوی این مقادیر قرمز را با کدورت 50 درصد تولید می کنند. هنگامی که از RGBa استفاده می کنید، حتماً rgba() را به عنوان مقدار مشخص کنید (به a توجه کنید)، و سپس مقدار آلفا را به عنوان چهارمین مقدار جدا شده با کاما، در محدوده اضافه کنید. از 0 (شفاف) تا 1.0 (مادر). مقدار 0 معادل مقدار رنگ transparent است.
مقادیر رنگ، از مات تا شفاف.
چرا HEX نمی تواند یک نحو مشابه را پشتیبانی کند؟ خوب، در واقع می تواند، همانطور که کمی بعد خواهیم دید، اما W3C هیچ برنامه ای برای اضافه کردن آن به مشخصات رنگی خود ندارد. ممکن است تغییر کند، اما در حال حاضر RGB آینده رنگ در وب است.
تا زمانی که مرورگر کاربر از CSS3 پشتیبانی می‌کند، می‌توانید از یک مقدار RGBa برای دریافت شفافیت در هر جایی که مقدار رنگی وجود دارد استفاده کنید: در متن، پس‌زمینه، حاشیه‌ها، خطوط کلی، سایه‌های متن، سایه‌های کادر – در هر جایی.
تنها سوالی که باقی می ماند این است که مرورگرهایی که از RGBa پشتیبانی نمی کنند چطور؟ من شنیده‌ام که مرورگری که چند نفر هنوز از آن استفاده می‌کنند (مثلاً 70 تا 75٪ از کاربران عمومی) هنوز از هیچ CSS3 از جمله RGBa پشتیبانی نمی‌کند. چرا، اینترنت اکسپلورر خواهد بود!
با IE چه کنیم؟
اگر مرورگر با مقداری مواجه شد که آن را درک نمی‌کند، باید آن را نادیده بگیرد و هر مقدار دیگری را که برای آن ویژگی تنظیم شده است ارائه کند. CSS زیر باید IE و همه افراد دیگر را پوشش دهد:
color: rgb(255, 0 , 0);
color: rgba(255, 0, 0, .5);
تنظیم رنگ ها در IE به گونه ای که بیشتر شبیه رنگ های شفاف به نظر برسند امکان پذیر است. برای مثال، اگر می‌دانید که یک بلوک متن روی پس‌زمینه سفید ظاهر می‌شود، می‌توانید از مقدار rgb(255, 127, 127) استفاده کنید تا حدود 50% شفاف به نظر برسد. با این حال، وقتی پس‌زمینه تغییر می‌کند، تفاوت مشخص می‌شود:
مقدار صورتی رنگ قرمز شفاف 50% را شبیه‌سازی می‌کند. اما به محض اینکه متن را روی پس زمینه تاریک قرار می دهید، این توهم آشکار می شود.
خوب، این راه حل کاملی نیست زیرا واقعاً شفاف نیست. من نمی توانم آن را درست کنم. اما من می توانم نکته ای را در مورد نحوه قرار دادن رنگ های شفاف در پس زمینه هر عنصر در هر مرورگر وب مدرن به اشتراک بگذارم.
پشت صحنه، قسمت 1: رنگ‌های شفاف در پس‌زمینه شما
یک ویژگی عجیب اینترنت اکسپلورر این است که شامل چندین “فیلتر” است. فیلترهای اینترنت اکسپلورر بخشی از زبان استاندارد CSS نیستند و هرگز هم نخواهند بود، اما ما می‌توانیم از آنها به روش‌های جالبی برای دریافت نتایجی مشابه نتایج برخی از ویژگی‌های CSS3 استفاده کنیم.
با یکی از این فیلترهای مخصوص اینترنت اکسپلورر، می‌توانیم یک گرادیان به پس‌زمینه یک عنصر اضافه کنیم و رنگ‌های شفاف را با استفاده از نماد هگزا دسیمال اضافه کنیم. اولین مقدار در رشته هگز برای تیرگی رنگ است و از 00 (مادر) تا ff (شفاف) متغیر است. این یک حفره کوچک جالب ایجاد می کند، زیرا با تنظیم مقادیر شروع و پایان گرادیان به یک رنگ، می توانیم به طور موثر یک رنگ پس زمینه شفاف اضافه کنیم:
/* برای CSS3 */ رنگ پس‌زمینه: rgba(255,0,0,.5); /* برای lt IE8 */ فیلتر: progid:DXImageTransform.Microsoft.gradient
(gradientype=0,startColorstr=’#88ff0000′, endColorstr=’#88ff0000′);/* برای gte IE8 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientype=0,startColorstr='#88ff0000', endColorstr='#88ff0000');
ما باید دو بار از فیلتر استفاده کنیم: یک بار برای نسخه های قدیمی IE (lt مخفف “کمتر از” است) و دوباره برای IE8 و بعد (gte مخفف “بیشتر یا مساوی با”)، که از پیشوند -ms جدید برای شناسایی خود به عنوان افزونه های مایکروسافت استفاده می کنند. این یک پس‌زمینه شفاف 50% به مرورگرهای سازگار با استانداردها و اینترنت اکسپلورر اضافه می‌کند که به نسخه 5.5 باز می‌گردد.
اینها باید در اکثر مرورگرها یکسان به نظر برسند. این مثال زنده را ببینید.
پشت صحنه، قسمت 2: گرادیان ها در پس زمینه شما
یک دقیقه صبر کنید! آیا من فقط نگفتم که می توانید با استفاده از فیلتر گرادیان، گرادینت ها را به پس زمینه در اینترنت اکسپلورر اضافه کنید؟ در واقع، من انجام دادم. و آیا نمی توانید با استفاده از CSS3 به پس زمینه ها گرادینت اضافه کنید؟ خب، یه جورایی بنابراین، آنچه ما به آن نگاه می کنیم، یک راه حل متقابل مرورگر است که به ما امکان می دهد با استفاده از چیزی جز CSS، گرادینت ها را در پس زمینه اضافه کنیم: بدون گرافیک، بدون PNG شفاف، بدون سر و کله زدن در فتوشاپ هر بار که مشتری شما می خواهد یک سایه ایجاد کند. بنفش کمی بیشتر آبی می توانید این کار را با Firefox 3.6، Safari 4 و Chrome 5 انجام دهید.
مبادا فکر کنید استفاده از گرادیان ها آسان است، یک مشکل جزئی وجود دارد که چه باور کنید چه نه، از اینترنت اکسپلورر نمی آید. W3C اخیراً کار بر روی یک سینتکس گرادیان برای CSS را آغاز کرده است، و تقریباً کامل نشده است، اما موزیلا (Firefox) و Webkit (Safari) قبلاً نسخه‌های خاص مرورگر (متضاد) خود را اضافه کرده‌اند. این «برنامه‌های افزودنی» مرورگر با افزودن ویژگی‌های مطلوب و ضروری قبل از نسخه‌های تحریم شده از W3C، صنعت را به جلو سوق می‌دهند.
همه چیز گم نشده است. هر نسخه پیشوند افزونه مرورگر خود را دارد، بنابراین اگر تمام دستورات گرادیان را به کد خود اضافه کنیم، همه مرورگرها به خوبی پخش خواهند شد:
/* برای WebKit */ پس‌زمینه: -webkit-gradient(خطی، بالا سمت چپ، پایین سمت چپ، from(rgba(255 ,0,0,1)), to(rgba(0,0,255,.25)));/* برای موزیلا */ زمینه: -moz-linear-gradient(top, rgba(255,0,0,1), rgba(0,0,255,.25));
* برای lt IE8 */ فیلتر: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000 ', endColorstr='#3300ff00');/* برای gt IE8 */ -moz-filter : progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');
این یک گرادیان خطی عمودی است که در IE 5.5+، Firefox 3.6+، Chrome 5+ و Safari 4 کار می‌کند. این را ببینید نمونه زنده.
این یک گرادیان عمودی خطی در اکثر مرورگرهای مدرن ایجاد می کند. استثنای بزرگ اپرا است. دستور شیب را معرفی نکرده است، به احتمال زیاد به این دلیل که سازندگان آن منتظرند ببینند W3C چه می کند.
برای اینکه بتوانید جهت گرادیان را تغییر دهید، Webkit گوشه های شروع و توقف را تعریف می کند، موزیلا سمت یا گوشه ای را که گرادیان شروع می شود، و IE به سادگی 0 (عمودی) یا 1 (افقی) را تعریف می کند. بنابراین، برای اینکه گرادیان خود را 90 درجه بچرخانیم، به این صورت کد می کنیم:
/* برای WebKit */ پس‌زمینه: -webkit-gradient(خطی، بالا سمت چپ، بالا سمت راست، from(rgba(255 ,0,0,1)), to(rgba(0,255,0,.25)));/* برای Mozilla */ زمینه: -moz-linear-gradient(left, rgba(255,0,0,1), rgba(0,255,0,.25));
* برای lt IE8 */ فیلتر: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000 ', endColorstr='#3300ff00');/* برای gt IE8 */ -ms-filter : progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
startColorstr='#88ff0000', endColorstr='#3300ff00');
در اینجا یک گرادیان خطی افقی است که در اینترنت اکسپلورر، فایرفاکس، کروم و سافاری کار می کند. این مثال زنده را ببینید .
هر دو Webkit و Mozilla تغییرات زیادی را در شیب های خود، از جمله گرادیان های شعاعی و رنگ های متعدد، اجازه می دهند. سینتکس ها می توانند بسیار پیچیده باشند، اما ما فعلاً آن را ساده نگه می داریم زیرا IE فقط از گرادیان های خطی عمودی و افقی پشتیبانی می کند.
به زندگی خود رنگ اضافه کنید
باز شدن پیش روی ما چیزی کمتر از یک انقلاب در نحوه برخورد ما با رنگ در طراحی وب نیست. کلاچ هایی که اکنون برای به دست آوردن رنگ شفاف استفاده می کنیم ناپدید می شوند. با تکیه بر RGBa و ویژگی opacity از قبل ایجاد شده، طرح های بسیار بیشتری را مشاهده خواهیم کرد که عناصر لایه بندی می کنند.
ادامه مطلب
جیسون کرانفورد تیگ نویسنده، معلم و طراح است. کتاب بعدی او، CSS3 Visual راهنمای شروع سریع، پاییز امسال منتشر خواهد شد. در وب‌سایت او، JasonSpeaking اطلاعات بیشتری درباره جیسون پیدا کنید، یا او را در توییتر دنبال کنید (@jasonspeaking).
بدون دیدگاه