با سلام خدمت خوانندگان محترم سایت وبلاگ. من همچنان به انتشار مقالات در بخش "" ادامه می دهم. امروز می‌خواهم در مورد رنگ‌ها در کدهای 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 - انتخاب پالت های رنگی RGB در نتایج جستجوی Yandex

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

محتوای سند

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

www.livemaster.ru

کدها و جدول رنگ های اصلی 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 وجود دارد، بنابراین ورودی های ارزش رنگ از شش رقم (یا حروفی که برابر با اعداد هگزادسیمال هستند) تشکیل شده اند که قبل از آن علامت پوند "#" وجود دارد. همه چیز بسیار ساده است.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

محتوای سند

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

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

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

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

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

ktonanovenkogo.ru

پالت رنگ RGB، نحوه تنظیم صحیح رنگ ها در CSS و Html.

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

پالت رنگ RGBبه معنای استفاده از تنها سه رنگ است که هر کدام ممکن است با سطح متفاوتی از روشنایی نشان داده شوند. در کدهای CSS و Html برای هر رنگ پالت می توان یکی از ۲۵۶ درجه بندی رنگ ممکن را تعریف کرد.

بنابراین، برای طراحی یک سند، می توانید تعداد نسبتاً زیادی رنگ را اعمال کنید - 256-256-256. به عنوان مثال، برای سیاه شدن در نتیجه، هر سه رنگ RGBلازم است نشانگر روشنایی را روی صفر تنظیم کنید، و برعکس، اگر رنگ سفید مورد نیاز است، بر این اساس، برای همه رنگ ها باید حداکثر روشنایی را تنظیم کنید.

بیایید نگاهی دقیق تر به نحوه تنظیم روشنایی یک رنگ در Html بیندازیم. دو روش برای تنظیم روشنایی وجود دارد:

1. با تنظیم کد رنگ پالت برای صفحه در کد Html، با تعریف روشنایی رنگ های RGBبا استفاده از سیستم هگزادسیمال
2. با تنظیم رنگ ها در CSS در سیستم اعداد هگزادسیمال.

بیایید به نوشتن کد در سیستم هگزادسیمال و نشانه گذاری فرامتن بپردازیم. برای شروع، به یاد بیاوریم سیستم اعشاریحساب دیفرانسیل و انتگرال - به عنوان مثال، اگر به رنگ سفید نیاز داشته باشیم، کد آن به این صورت خواهد بود: 256 256 256، در مورد سیاه: 0 0 0.

بر خلاف کد اعشاری، جایی که فقط اعداد وجود دارد، پالت هگزادسیمال شامل حروف الفبای لاتین نیز می شود. یعنی در این حالت سیستم خاص خود برای نمایش اعداد جای خود را پیدا می کند. به عنوان مثال، رنگ سفید در HTML به صورت: #ffffff و سیاه به عنوان #000000 مشخص می شود. به راحتی می توان فهمید که در اینجا 00 با 0 مطابقت دارد و ff با 256 (زمانی که به اعشار تبدیل می شود) مطابقت دارد.

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

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

رنگ های Yandex - انتخاب کد رنگ Html در پالت RGB در نتایج Yandex.

در میان چیزهای دیگر، می توانید با استفاده از Yandex یک طرح رنگی برای سایت خود انتخاب کنید. برای این کار کافیست کلمه "color" یا نام رنگ مورد نیاز خود را در کادر جستجو وارد کنید. در نتیجه درخواست، پالت در خروجی نمایش داده می شود Yandex.Colors.که با آن می توانید رنگ را انتخاب کنید. در گوشه سمت راست، کد رنگ را در RGB و سیستم هگزادسیمال مشاهده می کنید که هنگام ساخت یک سند وب استفاده می شود.

این گزینه از Yandex روند کار را بسیار تسهیل می کند. همه چیز بسیار ساده است - نام رنگ را وارد کنید و کد لازم را دریافت کنید.

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

W3C 4.01 Validator (Hypertext Markup) یک پالت از 16 رنگ اصلی را ارائه می دهد که یک جدول رنگی CSS و Html ایجاد می کند تا نشان دهد کدام رنگ ها را می توان با کلمات مشخص کرد.

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

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

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

بنابراین، در زیر نمونه ای از تعیین رنگ ها در HTML آورده شده است.

صفحه وب سایت شما

نتیجه نهایی صفحه ای با فونت سرخابی در پس زمینه طلایی است.

قبلاً در CSS برای تعیین رنگ متن در یک بخش لازم بود تگ FONT (که توسط W3C توصیه نمی شود) نوشته شود و برای تنظیم رنگ، ویژگی "color" در آن گنجانده شده بود:

متن قرمز رنگ شود

برای اینکه برخی از عناصر متن را به رنگ مورد نیاز خود رنگ کنید، باید کد HTML را با استفاده از تگ "FONT" بنویسید که به شکل زیر است:

متنی که می خواهید رنگ فونت آن را جایگزین کنید

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

www.bestseoblog.ru

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

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

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

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

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

اجرای اولیه

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

طرح نور:

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

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

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

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

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

و چند نمونه کارت دیگر:

نتیجه

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

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

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

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