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

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

www.bestseoblog.ru.

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

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

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

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

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

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

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

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

در واقع، وجود دارد دو راه اساسی:

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

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

اما در یک سیستم شماره هگزادسیمال، علاوه بر اعداد عربی، شش حرف اول الفبای لاتین نیز استفاده می شود و خاصیت خود را از تشکیل اعداد وجود دارد. من فکر می کنم به آن، آن را به آن ارزش ندارد، اما به عنوان مثال، من می گویم که سفید برای HTML می تواند تنظیم شود: #fffffff، و سیاه و سفید بنابراین: # 000000. کسانی که. 00 مربوط به 0 در یک سیستم شماره دهدهی است، و FF مربوط به 256 است.

کسانی که. در هر رنگ کانال RGB در کد CSS، دو عدد هگزادسیمال داده می شود، بنابراین سوابق مقادیر رنگ شامل شش رقم (یا حروف که برابر با اعداد در یک سیستم هگزادسیمال) است که به شبکه "#" تنظیم شده است امضاء کردن. همه چیز کاملا ساده است.

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

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

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

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

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

به عنوان یک نتیجه، در بالا از نتایج جستجو، شما یک جدول جدول بسیار راحت از Yandex.The Tutor را برای انتخاب رنگ برای سایت خود خواهید دید. در گوشه پایین سمت راست این پالت، می توانید کد هگزادسیمال سایه ای که نیاز دارید کپی کنید (قبل از آن یک شبکه وجود دارد)، که پس از آن تنها در محل مورد نظر سند وب خود قرار می گیرد.

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

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

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

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

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

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

شما می توانید جداول سایه های دقیق تر را ملاقات کنید که می توانند در کد با کلمات تنظیم شوند، اما امکان وجود دارد که در برخی از مرورگر این رنگ به درستی نمایش داده نخواهد شد.

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

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

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

بنابراین، من هنوز نمونه ای از یک کار رنگی در HTML را ارائه خواهم داد، هرچند از آن استفاده خواهد شد برچسب های معتبر W3C توصیه نمی شود. به عنوان مثال، قبل از پس زمینه، رنگ برای پس زمینه در برچسب "بدن" از طریق ویژگی "BGColor" تنظیم شده است، و متن بلافاصله در کل ارسال کننده وب با استفاده از ویژگی "متن" رنگ شده است.

وظیفه سایه های لازم در این مورد می تواند به عنوان مثال، به نظر می رسد، بنابراین:

سند محتوا

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

متن متن شما نیاز به رنگ در رنگ آبی

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

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

همانطور که می بینید، گاهی اوقات شش کاراکتر برای کاهش ضبط سایه استفاده نمی شود، اما تنها سه نفر، اگر آنها برای هر کانال مطابقت داشته باشند - "# 6C0" به جای "# 66SS00".

رنگ را از یک پالت برنامه ویژه انتخاب کنید یا آن را از صفحه ضبط کنید

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

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

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

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

موفق باشی! به جلسات مبهم در وب سایت وب سایت وبلاگ

ممکن است علاقه مند باشید

لیست ها در کد HTML - ul، ol، li و dl برچسب ها
نحوه قرار دادن لینک HTML و تصویر (عکس) - IMG و برچسب ها
نحوه ایجاد یک hyperlink (a، href، target blank)، نحوه باز کردن آن را در یک پنجره جدید در سایت، و همچنین یک لینک تصویری در کد HTML ایجاد کنید
برچسب های فونت (صورت، اندازه، رنگ)، قالب بندی متن پیش بینی شده در HTML خالص (بدون استفاده از CSS)
جداول در HTML - برچسب ها جدول، TR و TD، و همچنین Colspan، Cellpanding، Cellspacing و Rowspan برای ایجاد آنها
اشکال HTML برای سایت - برچسب ها فرم، ورودی و انتخاب، گزینه، textarea، label و دیگران برای ایجاد آیتم های WebForm انتخاب، گزینه، Textarea، Label، FieldSet، Legend - تگ های HTML اشکال لیست کشویی و زمینه متن
img - تگ HTML برای قرار دادن تصاویر (src)، تراز کردن و ساده سازی آن با متن (align)، و همچنین وظایف پس زمینه (پس زمینه)
نظرات و دستورالعمل DOCTYPE در کد HTML، و همچنین مفهوم بلوک و عناصر حروف کوچک (برچسب ها)
زبان نشانه گذاری HTML Hypertext و نحوه دیدن لیست همه برچسب ها در Validator W3C چیست؟
نمادهای کور و کد قالب بندی در HTML، و همچنین فضاهای ویژه ویژه و دیگر mnemonics

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

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

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

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

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

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

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

آیا امکان نصب "پس زمینه" شما وجود دارد؟

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

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

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

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

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

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

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

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

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

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

پیاده سازی اولیه

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

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

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

چه چیزی واقعا می خواست

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

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

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

الگوریتم تعریف گل جدید

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

آیکون منبع → مربع از پیکسل های فیلتر شده

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

نتیجه بعد از مرحله دوم آیکون منبع → رنگ ها

این توسط Anti-Aliasing خاموش می شود تا رنگ ها مخلوط شوند، کثیف نبود.

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

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

طرح نور:

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

طرح تاریک (اگر دو رنگ و رنگ تیره تر):

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

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

کارت های دریافت شده آیکون منبع → رنگ → کارت

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

نتیجه

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

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

• آیکون از یک رنگ - ما پس زمینه را فقط تیره تر می کنیم، به طوری که نه ادغام؛
• آیکون با پس زمینه - ما به پیکسل ها در لبه ها نگاه می کنیم؛ اگر همه ی یکسان باشد، ما همان پس زمینه کارت را قرار داده ایم.

الگوریتم اصلاح شده نزدیک ترین نسخه را وارد کرد. با تشکر ویژه به رئیس گروه توسعه پرتاب Yandex Dime Ovcharov - برای علاقه، تمایل و صبر. در نهایت، نمونه های بیشتر.