تشخیص خودکار رنگ - تجربه تیم Yandex. نحوه تغییر رنگ مرورگر Yandex آیا می توان چیزی "از خود" را در پس زمینه تنظیم کرد

در حال حاضر ، برای دریافت یک طرح بندی سایت معتبر ، توصیه می کنم هنگام تنظیم کد رنگ از CSS استفاده کنید. به طور کلی ، قوانین درج کدهای رنگی در CSS با آنچه در بالا بحث شد تفاوتی ندارند.

www.bestseoblog.ru

سلام به خوانندگان عزیز سایت وبلاگ. من همچنان به انتشار مقالات تحت عنوان "" ادامه می دهم. امروز می خواهم در مورد رنگها در کد HTML و CSS صحبت کنم ، برای کسانی که هنوز نمی دانند چگونه آنها را تنظیم کنند ، نحوه شکل گیری آنها ، نحوه استفاده از برنامه های مخصوص طراحی شده برای جستجو یا گرفتن رنگ مورد نظر ، و موارد دیگر توضیح دهم.

سوال در مورد تنظیم سایه مورد نظر می تواند به ویژه برای مدیران وب مبتدی نگران باشد ، درصورتی که کدهای آنها در سند وب کاملاً مشخص نباشد (به عنوان مثال ، # f3af6c) و مشخص نیست که چگونه و از کجا می توان این اطلاعات را بدست آورد (جداول رنگی Html و CSS را از کجا می توان پیدا کرد) ، و چگونگی استفاده از آنها برای طراحی متن یا هر بلوک دیگر از یک سند وب.

یادآوری می کنم که ما قبلاً توانسته ایم با اصول اساسی مورد استفاده آشنا شویم. ما همچنین به برچسب ها نگاه کردیم و چیزهای زیادی و چگونگی آن را یاد گرفتیم.

کدهای پایه RGB و جدول

کاملاً منطقی است که در زبان نشانه گذاری ابر متن و سبک های آبشار امکان طراحی رنگ اسناد وجود داشته باشد ، زیرا در غیر این صورت سایت ها بسیار کسل کننده و از همان نوع هستند. برای این کار ، آنها معمولاً از مدلی به نام RGB (مخفف شده از سه کلمه انگلیسی برای قرمز ، سبز و آبی) استفاده می کنند.

در RGB فقط از سه رنگ استفاده شده است (واضح است که اینها قرمز ، سبز و آبی هستند) که هر یک از آنها می توانند با سطح دیگری از روشنایی نشان داده شوند. برای هر یک از کانال ها (قرمز ، سبز و آبی) می توانید یکی از 256 درجه بندی روشنایی ممکن را انتخاب کنید. عدد 256 به این دلیل گرفته شده است که مقدار زیادی سایه را می توان در یک بایت اطلاعات رمزگذاری کرد.

بر این اساس ، برای سند وب خود ، می توانیم از بین تعداد زیادی سایه ممکن (256 * 256 * 256) سایه ای انتخاب کنیم. به عنوان مثال ، برای بدست آوردن رنگ مشکی ، هر سه کانال طرح رنگ باید درخشندگی صفر داشته باشند و برای بدست آوردن رنگ های سفید ، قرمز ، سبز و آبی باید حداکثر درخشندگی داشته باشند.

بیایید اکنون سعی کنیم بفهمیم که چگونه روشنایی را در هر کانال تنظیم کنیم و چند امکان برای این کار داریم؟

در واقع ، وجود دارد دو راه اصلی:

1. تنظیم با ضبط روشنایی برای هر یک از کانال ها (قرمز ، سبز و آبی) در سیستم اعداد هگزادسیمال
2. با وارد کردن نام رنگ در کد سند وب ، کار را انجام دهید

بیایید با یکی از روی حیله و تزویر شروع کنیم و سعی کنیم بفهمیم چگونه می توان رنگ ها را با کد هگزادسیمال نوشت. برای مثال ، اگر می خواستیم کد سفید را در سیستم اعشاری بنویسیم ، کد 256 256 256 را می گیریم ، و برای رنگ سیاه - 0 0 0. احتمالاً همه چیز در اینجا روشن است.

اما در سیستم اعداد هگزادسیمال ، علاوه بر اعداد عربی ، شش حرف اول الفبای لاتین نیز استفاده می شود ، خوب ، ویژگی خاصی در شکل گیری اعداد وجود دارد. من فکر نمی کنم ارزش این را داشته باشد که وارد این موضوع شوید ، اما به عنوان مثال ، من می گویم که رنگ سفید برای Html را می توان به این صورت تنظیم کرد: #ffffff ، و سیاه را به این شکل: # 000000. آنهایی که 00 برابر 0 اعشاری و ff برابر 256 است.

آنهایی که برای هر کانال رنگی RGB در کد CSS ، دو رقم هگزادسیمال اختصاص داده شده است ، بنابراین ورودی های مقدار رنگ از شش رقم (یا حروف معادل رقم هگزادسیمال) تشکیل شده اند ، قبل از آنها یک علامت هش "#" وجود دارد. خیلی ساده است.

به عنوان مثال ، در جدول فوق برای ساده ترین سایه ها ، نمادهای شانزده ساله آنها به این شکل است:

طبیعتاً لازم نیست کدهای سایه هگزادسیمال را با کدی که می خواهید در پروژه اینترنت خود ببینید ، مقایسه کنید. می توانید در هر ویرایشگر گرافیکی (حتی در) ، جایی که رکوردی از این سایه در قالب RGB به شما نشان داده شود ، یک رنگ برای سایت انتخاب کنید یا جداولی از رنگ های HTML پیدا کنید و کد مورد نیاز خود را از آنجا کپی کنید.

Yandex Colors - انتخاب پالت رنگ RGB در نتایج جستجوی Yandex

آیا نمی خواهید برای این منظور از ویرایشگر گرافیک استفاده کنید یا به دنبال جدولی با کدها نیستید؟ مشکلی نیست. در این صفحه کمی به پایین پیمایش کنید و بسیاری از برنامه های مشخص و مشخص را برای کار با رنگ در کد HTML یا CSS پیدا خواهید کرد.

اگر این مورد مناسب شما نیست ، به سادگی باز کنید و وارد نوار جستجو شوید با نام آن سایه درخواست کنید، که به آن علاقه دارید (اگرچه ، می توانید به راحتی وارد کنید: خاکستری قهوه ای).

در نتیجه ، در بالای نتایج جستجو ، یک جدول پالت بسیار مناسب Yandex.Colors برای انتخاب رنگ برای سایت خود مشاهده خواهید کرد. در گوشه پایین سمت راست این پالت ، می توانید کد هگزادسیمال سایه مورد نیاز خود را کپی کنید (یک مشبک در جلوی آن قرار دارد) ، که فقط باید آن را در جای مناسب در سند وب خود قرار دهید.

همه اینها به لطف اصطلاحاتی که برای کمک به طراحان و طراحان آرایش طراحی شده است ، تحقق می یابند.

تو می توانی رنگ را در نوار جستجوی Yandex تنظیم کنید، هم به شکل نام آن و هم به صورت کد - در نتیجه ، خواهید دید که روی صفحه چگونه به نظر می رسد و در صورت لزوم ، می توانید نماد هگزادسیمال آن را بدست آورید.

در واقع ، این ابزار می تواند برای کاربران عادی اینترنت مفید باشد ، به عنوان مثال ، به منظور درک اینکه مبلمان در سایه خاکستری-تمشک خالدار چگونه به نظر می رسد. همچنین می توانید ویدیویی درباره استفاده از این جادوگر Yandex مشاهده کنید:

برخی از رنگ ها به زبان علامت گذاری متن فرامتنی است می توان با استفاده از کلمات دادبه عنوان مثال "سیاه" به معنی سیاه است ، "سفید" به معنای سفید است ، و غیره. اما در اینجا یک تفاوت جزئی وجود دارد. تخصیص رنگ بنابراین فقط برای تعداد محدودی از آنها امکان پذیر است.

خوب ، اول از همه ، احتمالاً روشن است که شما نمی توانید تمام 16 میلیون سایه ممکن را در طرح RGB با کمک کلمات موجود در هر جدول نشان دهید (از پیمایش خسته خواهید شد).

در مرحله دوم ، در اعتبارسنج W3C برای مشخصات زبان علامت گذاری متن فرمت 4.01 (که در حال حاضر توسط تمام مرورگرهای ممکن پشتیبانی می شود) ، فقط 16 رنگ تعریف شده است ، که در کد HTML یا CSS می توانند با کلمات مشخص شوند:

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

بنابراین ، علاوه بر جدول 16 سایه اصلی که دقیقاً در بالا آورده شده است ، تمام رنگ های دیگر باید در کد اسناد وب با استفاده از تنها علامت گذاری شانزده ساله تنظیم شود ، تا از افراط و تفریط بی مورد جلوگیری شود.

استفاده از کد رنگ و نام در وب مسترینگ

در حال حاضر ، تمام طراحی های خارجی صفحات وب به لطف CSS (شیوه نامه های آبشار) است و تعیین کد رنگ مستقیم در Html بسیار نادر است ، اما هنوز هم وجود دارد. علاوه بر این ، شرایطی وجود دارد که شما به یک دلیل یا دلیل دیگر نمی توانید از برگه های سبک CSS خارجی استفاده کنید (به عنوان مثال ، در صورت انتشار).

بنابراین ، من همچنان مثالی از تنظیم رنگ در Html می آورم ، اگرچه این مورد قبلاً استفاده خواهد شد برچسب ها توسط اعتبار سنج W3C توصیه نمی شوند... به عنوان مثال ، در گذشته ، رنگ پس زمینه در برچسب BODY از طریق ویژگی bgcolor تنظیم می شد و متن با استفاده از ویژگی text در کل صفحه وب رنگ آمیزی می شد.

در این حالت ، تنظیم سایه های مورد نیاز می تواند به صورت زیر باشد:

محتوای سند

در نتیجه ، شما یک صفحه وب با پس زمینه بژ و فونت آبی تیره دریافت خواهید کرد. قبل از استفاده از CSS ، برچسب "FONT" ، که اکنون توسط اعتبار سنج W3C توصیه نمی شود ، به طور گسترده ای برای تغییر رنگ قلم در هر بخش خاص از متن ، که شامل ویژگی "رنگ" به همان نام برای تنظیم رنگ بود ، مورد استفاده قرار گرفت:

قطعه ای از متن که باید آبی رنگ باشد

برای دیدن نتیجه کار کد نوشته شده بر روی صفحه ، باید این فایل را با پسوند html ذخیره کرده و سپس آن را در هر مرورگری که برای شما مناسب است باز کنید.

اکنون ، برای اینکه طرح سایت شما معتبر شناخته شود ، آنها توصیه می کنند رنگ عناصر را در یک صفحه سبک آبشار تنظیم کنید از طریق قوانین و خواص مناسب قوانین چنین درج شده ای در CSS با آنچه در بالا توضیح داده شد تفاوتی ندارد.

همانطور که می بینید ، گاهی اوقات از شش کاراکتر برای کوتاه کردن رکورد سایه استفاده نمی شود ، اما فقط سه کاراکتر ، اگر برای هر کانال مطابقت داشته باشند - "# 6c0" به جای "# 66cc00".

انتخاب یک رنگ از پالت یک برنامه خاص یا گرفتن آن از صفحه

همانطور که در بالا نوشتم ، از رنگ بندی RGB (قرمز ، سبز ، آبی) بسیار استفاده می شود. برای هر یک از سه رنگ اصلی ، 256 درجه بندی - از 0 تا 255 در نظر گرفته شده است (اگر این مقادیر را به یک سیستم اعداد هگزادسیمال ترجمه کنید ، از 00 به FF بدست می آوریم).

زیرا ما سه رنگ اصلی داریم که از ترکیب آن سایه های دیگر تشکیل شده و سپس نماد هگزادسیمال چیزی شبیه به این خواهد بود: 99FF66 (سایه سبز). با افزودن # در مقابل آن ، کد # 99FF66 را بدست می آوریم که می تواند هم در Html و هم در پرونده های سبک استفاده شود. ناگفته نماند که شما خودتان نیازی به محاسبه و به خاطر سپردن این سخنان ناخوشایند ندارید.

برای این کار می توانید از یک برنامه ویژه استفاده کنید که به شما امکان می دهد سایه مورد نظر را روی پالت انتخاب کنید (یا آن را از روی صفحه بگیرید با ابزار قطره چکان) و بلافاصله کد آن را دریافت کنید. شما ممکن است برنامه ای نداشته باشید ، اما به Yandex بروید و در خط پرس و جو نام هر رنگ را تایپ کنید (من در این مورد کمی بالاتر نوشتم).

در اینجا لیستی از برنامه ها وجود دارد که به شما امکان می دهد همه این موارد را به طور کامل پیاده سازی کنید:

موفق باشی! به زودی در صفحات سایت وبلاگ می بینیم

شاید برای شما جالب باشد

لیست ها در کد Html - برچسب های UL، OL، LI و DL
نحوه قرار دادن پیوند و تصویر (عکس) در HTML - برچسب های IMG و A
نحوه ایجاد یک پیوند (A ، Href ، Target خالی) ، نحوه باز کردن آن در یک پنجره جدید در سایت ، و همچنین ایجاد یک تصویر به یک لینک در کد HTML
قلم (صورت ، اندازه و رنگ) ، Blockquote و برچسب های Pre قالب بندی متن قدیمی در HTML خالص (بدون CSS) هستند
جداول در Html - برچسب های Table ، Tr و Td و همچنین Colspan ، Cellpadding ، Cellspacing و Rowspan برای ایجاد آنها
فرم های HTML برای سایت - برچسب ها فرم ، ورودی و انتخاب ، گزینه ، Textarea ، Label و موارد دیگر برای ایجاد عناصر فرم های وب انتخاب ، گزینه ، Textarea ، Label ، Fieldset ، Legend - HTML برچسب های کشویی و جعبه متن
Img - برچسب HTML برای درج تصویر (Src) ، ترازبندی و بسته بندی آن با متن (ترازبندی) و همچنین تنظیم پس زمینه (پس زمینه)
دستورالعمل ها و Doctype در کد HTML ، و همچنین مفهوم عناصر بلوک و درون خطی (برچسب ها)
زبان علامت گذاری متن فرمت HTML چیست و چگونه می توان لیستی از همه برچسب ها را در اعتبار سنج W3C مشاهده کرد
نویسه های فضای خالی و قالب بندی کد آنها در Html ، و همچنین نویسه های فضایی خاص و نشکننده و سایر اسامی دیگر

هنگام ایجاد Yandex ، توسعه دهندگان اطمینان حاصل کردند که استفاده از آن آسان و قابل درک است.

هیچ چیز اضافی در طراحی و تنظیمات قلم وجود ندارد ، بنابراین کاربران می توانند به سرعت بفهمند چه چیزی چیست.

هر نسخه از مرورگر Yandex به زیبایی طراحی شده است ، بهترین متخصصان در طراحی مشغول هستند. اما برخی از کاربران هستند که یکنواختی را دوست ندارند. آنها حتی از زیباترین منظره به سرعت خسته خواهند شد ، آنها می خواهند برای کار با یک مرورگر وب "تغییر وضعیت" ، "دمیدن روح" بدهند.

هیچ مشکلی وجود ندارد ، در غیر این صورت چرا توسعه دهندگان عملکرد تغییر رابط را معرفی کردند؟ به طوری که هر کسی که پس زمینه استاندارد را دوست ندارد یا از یکنواختی خسته شده است ، می تواند ظاهر برنامه خود را تغییر دهد.

برای تغییر ظاهر مرورگر Yandex ، فقط باید چند دقیقه حواس خود را پرت کنید:

• مرورگر وب خود را روشن کنید.
• یک برگه جدید باز کنید (این کار را می توانید در تنظیمات کنار نوار نشانک ها انجام دهید).
• Express Panel در مقابل شما ظاهر می شود. باید به پایین صفحه بروید و روی نماد "تغییر پس زمینه" کلیک کنید.
• سپس لیستی با انواع طرح های مرورگر باز می شود که در این بین شما باید یکی از موارد مورد علاقه خود را انتخاب کنید. پس از انتخاب تصویر مناسب ، بر روی دکمه "پایان" کلیک کنید.

لازم نیست هر بار نگران تغییر پس زمینه باشید - نیازی نیست. اکنون ، هر بار که وارد پنل Express می شوید (حتی اگر Yandex را بسته و دوباره باز کنید) از یک تصویر دلپذیر لذت خواهید برد. و کار با روحیه بسیار جالب تر و جالب تر است!

آیا می توان چیزی "از خود" را در پس زمینه تنظیم کرد؟

مطمئناً ، توسعه دهندگان Yandex نمی توانند با استفاده از تصاویر ارائه شده برای تغییر پس زمینه ، هر کاربری را راضی کنند. پس از جستجوی لیست کامل نقاشی های موجود و یافتن مورد مناسب ، ناامید نشوید.

چنین مواردی توسط سازندگان مرورگر Yandex ارائه شده است: شما می توانید تصاویر شخصی موجود در رایانه خود را بارگیری کنید. این باعث می شود که تخیل کاملا آزاد باشد. به عنوان مثال ، چه خوب خواهد بود اگر هر وقت وارد پنل Express می شوید ، قطعه ای زنده از زندگی خود یا عکس یک کودک کوچک را می بینید؟

برای تنظیم یک تصویر از دستگاه خود به پس زمینه ، به موارد زیر نیاز دارید:

• yandex را فعال کنید
• زیر پنجره جدیدی را باز کنید ؛
• عملکرد "تغییر پس زمینه" را پیدا کرده و روی آن کلیک کنید.
• در پشت آخرین تصویر علامت "+" قرار دارد ، باید روی آن کلیک کنید.
• عکسی را که می خواهید در مرورگر مشاهده کنید انتخاب کرده و enter را فشار دهید (Enter).

اکنون می توانید کاملاً هر تصویری را که تا تغییر بعدی ذخیره شده تنظیم کنید.

الگوریتم جدید تطبیق رنگ برای کارت های تبلیغاتی برنامه در Yandex Launcher.

سرویس های مختلف Yandex برای حل مشکلات رابط با رنگ کار می کنند: برجسته سازی بلوک های اطلاعاتی و پاسخ های اشیا ، مدیریت توجه و ایجاد سلسله مراتب بصری.

نمونه هایی از استفاده از الگوریتم های تطبیق رنگ در جستجو و Yandex.Music

تطبیق رنگ بسته به نوع کاربرد می تواند محاسبات پیچیده ای باشد. اما این اتفاق می افتد که گرفتن نتیجه مطلوب بسیار آسان تر است.

در Yandex Launcher ، کارتهای تبلیغاتی برنامه داریم: رتبه بندی ، توضیحات و دکمه "نصب". اینها توصیه های متنی هستند - آنها در بالای لیست برنامه یا در پوشه ای روی دسک تاپ باز می شوند.

اجرای اولیه

رنگ پس زمینه کارت براساس نماد به طور خودکار انتخاب شد ، دکمه سفید شفاف بود. الگوریتم سعی کرد با مرتب سازی پیکسل ها بر اساس رنگ ، رنگ اصلی نماد را تعیین کند. این روش همیشه نتیجه زیبایی ندارد ، اما دارای اشکالاتی است:

• تعریف رنگ نادرست ؛
• رنگهای "کثیف" به دلیل میانگین گیری ؛
• دکمه های کسل کننده ، کارت های خسته کننده.

نمونه هایی از کارت های مشکل

آنچه واقعاً می خواستم

قرار بود این کارت ادامه واقعی نماد باشد و رنگ ها آبدار و درخشان بودند. من می خواستم این تصور را ایجاد کنم که کارت به دقت با دست ساخته شده است و به چیزی که به طور خودکار تولید می شود ، نمی خورد.

من همیشه می خواهم آن را زیبا تر کنم ، اما منابع بی حد و حصر نیستند. قرار نبود تیمی برای نوشتن کتابخانه ای معجزه آسا برای تعیین رنگ اختصاص یابد. بنابراین وظیفه این است که الگوریتم تعیین رنگها را با حداقل تلاش بهبود بخشیم ، تا بفهمیم چگونه کارت را بدون اختراع سفینه فضایی به زیبایی رنگ می کنیم.

شنبه ، گرد و غبار را ویرایشگر کد کردم ، HTML5 و Canvas را کشف کردم و شروع به اختراع کردم. روز دوشنبه با پیشنهادی به تیم آمدم.

الگوریتم جدید تشخیص رنگ

مرحله 1 ما آیکون را می گیریم. بیرون انداختن پیکسل های سفید ، سیاه و شفاف.

نماد اصلی → Pixel Square فیلتر شده

گام 2. تصویر حاصل را به اندازه 2 × 2 پیکسل کاهش دهید (ضد Aliasing غیرفعال است). در نتیجه ، چهار رنگ نماد به دست ما می رسد. اگر تصویر اصلی یکنواخت باشد ، می توان آنها را تکرار کرد - مسئله بزرگی نیست.

بعد از مرحله دوم نتیجه بگیرید. نماد اصلی. رنگها

ما ضد-بیگانه سازی را غیرفعال کرده ایم تا رنگها مخلوط نشوند ، "کثیف" نشوند.

در حقیقت ، اینطور به نظر می رسد: مربع به چهار قسمت تقسیم شده است ، ما پیکسل میانی را از ردیف بالای هر سه ماهه می گیریم. اجرای آن ساده است: ما حتی نیازی به نمونه نمونه واقعی تصویر نداریم و به طور کلی با گرافیک کار می کنیم. ما پیکسل هایی را با موقعیت لازم از آرایه یک بعدی به دست آمده پس از مرحله اول می گیریم.

مرحله 3 تقریباً همه چیز آماده است. فقط اندکی باقی مانده است: رنگهای حاصل را بدست آورید ، آنها را به HSL ترجمه کنید ، مرتب سازی بر اساس سبک بودن (L). کارت را رنگ می کنیم.

طرح نور:

• زمینه روشن ترین رنگ است.
• دکمه - نزدیکترین به نور ؛
• متن تاریک ترین است.

طرح تیره (اگر دو یا چند رنگ تیره باشد):

• زمینه تیره ترین رنگ است.
• دکمه - نزدیکترین به تاریکی ؛
• متن سبک ترین است.

با استفاده از رنگ ها ، کنتراست را بررسی می کنیم: تفاوت سبک بین پس زمینه و دکمه 20 ≥ ؛ بین پس زمینه و متن 60 ≥. اگر مطابقت نداشته باشد ، آن را تصحیح می کنیم.

کارتهای بدست آمده نماد اصلی → رنگها → کارت

و چند کارت دیگر به عنوان مثال:

نتیجه

ما کارت های رنگارنگ ، از رنگ واقعی نماد ، بدون ناخالصی های "کثیف" دریافت کرده ایم. با استفاده از چندین رنگ ، کارت بسیار پر جنب و جوش تر به نظر می رسد. مخصوصاً خوشایند است که با پس زمینه یکنواخت آیکون ، کارت ادامه مستقیم آن می شود: مرز بین آنها به هیچ وجه قابل مشاهده نیست.

و مهمتر از همه: دو روز پس از پیشنهاد الگوریتم جدید ، اولین پیاده سازی از قبل در ساخت dev موجود بود. ما آن را در داخل تیم آزمایش کردیم ، در اولین مرحله آستانه فیلتر را تنظیم کردیم ، در موارد خاص ارائه شده است:

• نماد یک رنگ - پس زمینه را کمی تیره تر کنید تا ادغام نشود.
• نماد پس زمینه - به پیکسل های لبه ها نگاه کنید. اگر همه یکسان هستند ، پس زمینه کارت را یکسان تنظیم کنید.

الگوریتم بهبود یافته در نسخه بعدی گنجانده شد. با تشکر ویژه از رئیس گروه توسعه پرتاب Yandex دیما اوچاروف - برای علاقه ، تمایل و صبر او. در آخر ، مثالهای بیشتری.