Automatyczna definicja kolorów - doświadczenie zespołu Yandex. Jak zmienić kolor przeglądarki Yandex, możliwe jest zainstalowanie czegoś "twojego"

W tej chwili, aby uzyskać prawidłowy układ witryny, zalecam używanie CSS podczas określania kodu koloru. Dzięki i duże zasady wprowadzania kody kolorów. CSS nie różni się od omówionych powyżej.

www.bestseoblog.ru.

Witaj, drogi witryna czytników blogów. Nadal publikuję artykuły pod nagłówkiem "". Dziś chcę porozmawiać o kolorach w kodzie HTML i CSS, wyjaśniają dla tych, którzy nie wiedzą, w jaki sposób można zapytać, jak się powstały, jak wyszukiwać lub przechwycić żądane użycie kolorów specjalnie przeznaczonych do tego programu i wiele więcej.

Pytanie o zadanie pożądanego cienia może być szczególnie istotne dla początkujących webmasterów, gdy ich kody (na przykład # F3AF6C) odnoszą się do dokumentu internetowego, nie są całkowicie zrozumiały i nie jest jasne, jak i gdzie można to zrobić informacje (gdzie znaleźć stoły HTML i Kwiaty CSS.) i jak korzystać z nich do zaprojektowania tekstu lub innego bloku dokumentu internetowego.

Pozwól mi przypomnieć, że udało nam się zapoznać się z zasadowymi zasadami stosowanymi. Weryfikowaliśmy również znaczniki i dowiedziałem się, dużo się nauczyliśmy i jak.

Kody i podstawowe kolory RGB

Jest to dość logiczne, że w języku znakowania hipertekstu i tabel stylów kaskadowych istnieje możliwość kolorowej dokumentacji, bo w przeciwnym razie witryny byłyby bardzo nudne i ten sam typ. W tym celu stosuje się model o nazwie RGB (skrót utworzony z trzech angielskich słów oznaczających czerwony, zielony i niebieski).

W modelu RGB Wykorzystywane są tylko trzy kolory (jasne jest, że jest czerwony, zielony i niebieski), z których każdy może być reprezentowany z innym poziomem jasności blasku. Dla każdego kanałów (czerwony, zielony i niebieski) zostanie wybrana jedna z 256 możliwych gradacji jasności. Liczba 256 jest przyjmowana z powodu, że tak wiele wartości odcieni można zakodować w jednym paszku.

W związku z tym dla Twojego dokumentu internetowego możemy wybrać dowolną cień z ogromnej ilości możliwych (256 * 256 * 256). Na przykład, aby uzyskać czarny kolor, konieczne jest, aby wszystkie trzy kanały schematu kolorów mają zerową wartość jasności i uzyskać białe - czerwone, zielone i niebieskie kolory powinny mieć maksymalną jasność.

Spróbujmy teraz dowiedzieć się, jak ustawić jasność w każdym kanale i ile mamy dla tej okazji?

W rzeczywistości jest dwa podstawowe sposoby:

1. zadanie przy użyciu nagrywania jasności dla każdego z kanałów (czerwony, zielony i niebieski) w systemie numeru szesnastkowego
2. zadanie przy użyciu wejścia nazwy koloru w kodzie dokumentu internetowego

Zacznijmy od trudnego i starajmy się radzić sobie z nagrywaniem kolorów w kodeksie szesnastkowym. Jeśli chcieliśmy, na przykład, napisz biały kod w systemie dziesiętnym, otrzymasz kod 256 256 256, a dla czerni - 0 0 0. Tutaj prawdopodobnie wszystko jest jasne.

Ale w systemie numeru szesnastkowego, oprócz liczb arabskich, stosuje się również pierwsze sześć liter alfabetu łacińskiego i istnieje jego własna specyfika tworzenia liczb. Myślę, że nie jest tego warta, ale na przykład powiem, że biały dla HTML można ustawić: #fffff i czarny, więc: # 000000. Te. 00 odpowiada 0 w systemie liczb dziesiętnych, a FF odpowiada 256.

Te. Na każdym kolorze kanału RGB w kodzie CSS podano dwie liczby szesnastkowe, dlatego rekordy wartości kolorów składają się z sześciu cyfr (lub liter, które są równe liczbom w systemie szesnastkowym), który jest ustawiony na kratkę "#" znak. Wszystko jest dość proste.

Na przykład, w tabeli najprostszych odcieni, ich rejestry szesnastkowe będą wyglądać tak:

Oczywiście nie jesteś zobowiązany do wymyślania i porównania kodów cieczy szesnastkowych z tymi, którzy chcesz zobaczyć w swoim projekcie internetowym. Możesz wybrać kolor dla witryny w dowolnym edytorze graficznym (nawet w), w którym na pewno pokazasz ten cień w formacie RGB lub znajdź tabelę kolorów HTML i skopiuj kod, którego potrzebujesz.

Yandex Colors - Wybór palety RGB Odcienie w wydaniu Yandex

Nie chcesz używać edytora graficznego w tym celu lub poszukać tabeli z kodami? Bez problemów. Przewiń nieco w dół tej strony, a znajdziesz wiele konkretnych i zaostrzonych do pracy z kolorem w kodzie programu HTML lub CSS.

Jeśli go nie pasuje, otwórz go po prostu i wprowadź w ciągu wyszukiwania. wniosek o nazwę tego cieniaKtóry jesteś zainteresowany (choć możliwe jest wejście prosto: seroburomalina).

W rezultacie, na samym szczycie wyników wyszukiwania, zobaczysz bardzo wygodny stół stołowy Yandex.The Ojtutor, aby wybrać kolor na witrynę. W prawym dolnym rogu tej palety można skopiować kodeks szesnastkowy, którego potrzebujesz (istnieje siatka przed nim), co pozostanie tylko wstawienie tylko w wybranym miejscu dokumentu internetowego.

Wszystko to jest wdrażane dzięki tzw, które ma na celu pomóc Cameramenowi i projektantom.

Możesz ustaw kolor w pasku wyszukiwania YandexPodobnie jak w formie nazwy i w formie kodu, w rezultacie zobaczysz, jak będzie wyglądać na ekranie, a jeśli to konieczne, możesz go zdobyć szesnastkowe.

Właściwie to narzędzie może być przydatnymi i zwykłymi użytkownikami Internetu, na przykład, aby zrozumieć, jak wciąż wyglądać jak odcień mebli Ser-Bur-Malin-B-Krapinka. Możesz zobaczyć ten sam film o wykorzystaniu tego Yandex Sorcerer:

Niektóre kolory w języku znakowania hipertekstowego można ustawić za pomocą słówNa przykład "czarny" oznacza czarny, "biały" - biały itp. Ale jest jeden niuans. Zadaniem Colorki jest zatem tylko dla ograniczonej liczby.

Cóż, najpierw, prawdopodobnie wyraźnie, jasne jest, że wszystkie 16 milionów możliwych odcieni w RGB nie będą mogli wyobrazić sobie w żadnej tabeli (zauważysz go do przewinięcia).

Po drugie, w walidatorze W3C dla specyfikacji języka znakowania hipertekstu 4.01 (w pełni obsługuje wszystkie możliwe przeglądarki w bieżącym czasie) tylko 16 kolorów są zdefiniowane, które w kodzie HTML lub CSS można określić według słów:

Możesz spełnić i znacznie bardziej szczegółowe tabele odcieni, które można ustawić w kodzie ze słowami, ale istnieje możliwość, że w niektórych przeglądarce ten kolor nie będzie wyświetlany poprawnie.

Dlatego też, oprócz odcieni podstawowych, wszystkie inne kolory są podane, wszystkie inne kolory powinny być określone w kodzie kodu internetowego tylko z nagraniem szesnastkowym, aby uniknąć każdego, kto nie potrzebuje niezbędnych ekscesów.

Użyj nazw kodu i kolorów w webmastering

W tej chwili, wszystkie zewnętrzne konstrukcja stron internetowych jest przekazywana do Depozyt CSS (style kaskadowe) oraz instrukcje kodu kolorowego bezpośrednio w HTML spełnia bardzo rzadko, ale nadal spotykają się. Ponadto istnieją sytuacje, w których niemożliwe jest użycie zewnętrznych stylów CSS (na przykład w przypadku wydania) z jednego lub innego powodu.

Dlatego nadal podam przykład zadania kolorów w HTML, chociaż będzie już używany nie zalecany tagami Walidator W3C. Na przykład przed tłem, kolor tła został ustawiony w tagu "Body" przez atrybut "BgColor", a tekst został namalowany natychmiast na całym subsyticie internetowym za pomocą atrybutu "Tekst".

Zadanie niezbędnych odcieni w tym przypadku może wyglądać na przykład, więc:

Dokument treści

W rezultacie otrzymasz krótkie w sieci z beżowym tłem i ciemnoniebieską czcionką. Przed wprowadzeniem CSS do źródła, aby zmienić kolor czcionki oddzielnego tekstu tekstu, "czcionka" nie jest zalecana przez walidatora W3C jest używany wszędzie, w którym uwzględniono atrybut kolorystyczny dla Colorka zadanie:

tekst tekstu, którego potrzebujesz do malowania w kolorze niebieskim

Aby zobaczyć wynik pisemnego kodu na ekranie, musisz zapisać ten plik za pomocą rozszerzenia HTML, a następnie otworzyć go w dowolnej przeglądarce dla Ciebie.

Teraz, aby układ Twojej witryny był ważny, zalecany ustaw kolory elementów w tabeli stylów kaskadowych Poprzez odpowiednie zasady i właściwości. Zasady takiej wkładki w CSS nie różni się od opisanych powyżej.

Jak widać, czasami nie ma sześciu znaków, aby zmniejszyć nagrywanie cienia, ale tylko trzy, jeśli pasują do każdego kanału - "# 6C0" zamiast "# 66SS00".

Wybierz kolor ze specjalnej palety programowej lub uchwyć go z ekranu

Jak już napisałem trochę wyższy, RGB (czerwony, zielony, niebieski) kolorowy schemat jest używany wszędzie. Dla każdego z trzech głównych kolorów zapewniono 256 gradacji - od 0 do 255 (jeśli tłumaczysz te wartości w systemie numerów szesnastkowych, a następnie zdobądź - od 00 do FF).

Dlatego Mamy trzy główne kolory, z kombinacji, do których powstają wszystkie inne odcienie, wtedy rekord szesnastkowy będzie miał coś takiego: 99ff66 (cienia zieleni). Dodając kod # 99ff66 przed nim, który może być używany zarówno w plikach HTML, jak i w stylu. Idzie, że nie mówisz, że sam nie powinien obliczyć i pamiętać o tym wszystkim Abrukandabra.

Aby to zrobić, możesz użyć program specjalny.pozwalając na wybranie żądanego cienia na palecie (lub uchwyć go z ekranu Rodzaj narzędzia pipety) i natychmiast otrzymaj swój kod. Nie możesz mieć programów, ale przejść do Yandex i wybierz nazwę dowolnego koloru w linii zapytania (napisałem trochę więcej o tym).

Oto lista programów, które umożliwiają to w pełni wdrożenie:

Powodzenia! Do niejednoznacznych spotkań na stronie internetowej na blogu

Możesz być zainteresowany

Listy w kodzie HTML - UL, OL, Li i DL Tagi
Jak wstawić link HTML i zdjęcie (zdjęcie) - img i tagi
Jak utworzyć hiperłącze (A, HREF, Cel Puste), jak otworzyć go w nowym oknie na stronie, a także wykonaj link do zdjęć w kodzie HTML
Tagi czcionek (twarz, rozmiar i kolor), blokowanie i przedostawane formatowanie tekstu w czystym HTML (bez za pomocą CSS.)
Tabele w HTML - Tagi Tabela, TD i TD, a także Colspan, CellPadding, CellSpacing i RowsPan, aby je utworzyć
Forma HTML. Dla witryny - tagi Form., Wejście i wybierz opcję, Textarea, Etykieta i inne do tworzenia elementów WebForm Wybierz, opcję, Textarea, Etykieta, Feedet, Legend - Tagi HTML Formy list rozwijanych i pole tekstowe
Img - Tag HTML. Aby wstawić zdjęcia (SRC), wyrównanie i usprawnienie go z tekstem (wyrównać), a także zadania tła (tło)
Komentarze i dyrektywy DocType w Kode HTML, a także koncepcja elementów bloków i małych liter (Tagi)
Jaki jest hipertekst języka markup HTML. I jak zobaczyć listę wszystkich tagów w walidatorze W3C
Niewidome symbole i kod formatowania w HTML, a także specjalne pomieszczenia i inne mnemoniki

Tworząc Yandex, deweloperzy opiekowali się, aby były łatwe i zrozumiałe w użyciu.

W ustawieniach projektu i czcionki nie ma nic zbędnego, więc użytkownicy szybko zrozumieją co.

Każda wersja przeglądarki Yandex jest pięknie sporządzona, najlepsi specjaliści zajmują się projektowaniem. Ale są takimi użytkownikami, którzy nie lubią monotonii. Nawet bardzo piękny widok Będą szybko przejmować się, chcą "zmienić sytuację", "Oddychaj życie" do pracy z przeglądarką internetową.

Nie ma nic złego w tym, w przeciwnym razie deweloperzy dokonali funkcji zmiany interfejsu? Dla każdego, kto nie lubi tła ustawionego przez standardową lub znudzoną monotonans, może zmienić wygląd jego aplikacji.

Zmienić wygląd Twoja przeglądarka Yandex, będziesz musiał być rozproszony przez kilka minut:

• Włącz przeglądarkę internetową.
• otwarty nowa karta (Możesz to zrobić w ustawieniach obok panelu zakładek).
• Panel Express pojawi się przed tobą. Musisz spaść na dół ekranu i kliknij ikonę "Zmień tło".
• Następnie lista z najbardziej różnymi typami projektu przeglądarki otworzy się, wśród których musisz wybrać najbardziej lubisz. Wybierając odpowiedni rysunek, kliknij przycisk "Zakończ".

Nie możesz się martwić o to, co musisz zmienić tło za każdym razem - nie jest to wymagane. Teraz za każdym razem, gdy dostaniesz się do "Express Panel" (nawet jeśli zostanie zamknięty i otworzyłeś Yandex), będziesz cieszyć się przyjemnym zdjęciem. A praca z podniesionym nastrojem jest znacznie bardziej interesująca i łatwiejsza!

Czy można zainstalować coś "twojego"?

Dla każdego użytkownika oferowanego na zmianę obrazów tła deweloperów Yandex nie może. Po przejrzeniu pełnej listy dostępnych rysunków i nie znalezienia niczego odpowiedniego, nie rozpaczaj.

Takie przypadki są dostarczane przez twórców przeglądarki Yandex: Możesz pobrać osobiste zdjęcia dostępne na komputerze. Daje pełną wolę fantazji. Co, na przykład, będzie miły, jeśli za każdym razem, wejście w "Express Panel", zobaczysz jasny fragment swojego życia lub zdjęcie małego dziecka?

Aby ustawić zdjęcie w tle z urządzenia, musisz:

• włącz Yandex;
• otwórz nową ziemię;
• znajdź funkcję "Zmień tło" i kliknij go;
• za ostatnim obrazem jest ikona "+", musisz go nacisnąć;
• wybierz zdjęcie, które chcesz zobaczyć w przeglądarce i naciśnij Enter (Enter).

Teraz możesz ustawić absolutnie dowolny obraz zapisany do następnej zmiany.

Nowy algorytm wyboru kolorów do aplikacji promocyjnych aplikacji Yandex.

Różne usługi Yandex współpracują z kolorem do rozwiązania zadań interfejsu: alokacja bloków informacyjnych i odpowiedzi obiektowych, zarządzania uwagą i tworzenie hierarchii wizualnej.

Przykłady stosowania algorytmów wyboru kolorów w wyszukiwaniu i w Yandex.Music

W zależności od zadań wybór kolorów może wymagać złożonego komputera. Ale zdarza się, że uzyskanie koniecznego wyniku jest znacznie łatwiejsze.

W naszym wyrzutni Yandex znajdują się aplikacje reklamowe: ocena, opis i przycisk "Install". Są to zalecenia kontekstowe - otwierają się na liście aplikacji lub w folderze na pulpicie.

Wstępna realizacja

Kolor tła tła wybrano automatycznie na podstawie ikony, przycisku był półprzezroczysty biały. Algorytm próbował określić podstawowy kolor ikon, zdemontowane piksele w kolorowym tonie. Takie podejście nie zawsze dawało piękny wynik, miał wady:

• niewłaściwa definicja koloru;
• "Brudne" kolory z powodu uśredniania;
• nudne przyciski, nudne karty.

Przykłady kart problemowych

Co naprawdę pożądane

Karta miała stać się obecną kontynuacją ikony, a kolory są soczyste i jasne. Chciałem stworzyć uczucie, że karta została starannie wykonana ręcznie i nie poślizgnęła czegoś niezbędnego wygenerowanego automatycznie.

Zawsze chcę to zrobić wszystko, ale zasoby nie są nieograniczone. Przydziela zespół do napisania bibliotek cudów z definicji kolorów nie był planowany. Dlatego zadanie jest siły minimalne, aby poprawić algorytm definicji kolorów, wymyślić, jak malować kartę jest piękna, nie wynalazku statku kosmicznego.

W sobotę, płukam kurz z edytora kodu, odkryto HTML5 i płótno i zaczęły się wymyślać. W poniedziałek przybył do zespołu z propozycją.

Nowy algorytm definicji kwiatu

Krok 1. Bierzemy ikonę. Rzuć białe, czarne i przezroczyste piksele.

Ikona źródła → kwadrat z filtrowanych pikseli

Krok 2. Zmniejszamy wynikowy obraz do 2 × 2 pikseli (z niepełnosprawnym środkiem antysystemowym). W rezultacie otrzymujemy cztery ikony kolorów. Jeśli oryginalny obraz jest jednorodny, mogą się powtórzyć - nic strasznego.

Wynik po drugim etapie. Ikona źródła → Kolory

Jest wyłączony przez antyaliasing, aby kolory nie były mieszane, nie stały się brudne.

W rzeczywistości okazuje się tak: plac jest podzielony na cztery części, bierzemy środkowy piksel z górnego rzędu każdego kwartału. W implementacjach wszystko jest proste: nie potrzebujemy nawet prawdziwych obrazów w dół i ogólnie pracy z grafiką. Piksele z żądaną pozycją zajmują z tablicy jednowymiarowej, która odebrana po pierwszym kroku.

Krok 3. Prawie wszystko jest gotowe. Pozostaje bardzo nieznacznie: otrzymujemy powstałe kolory, przekładamy się na HSL, sortujmy wzdłuż światła (L). Karta słów kluczowych.

Schemat światła:

• tło - najjaśniejszy kolor;
• przycisk - najbliższy światła;
• tekst jest ciemniejszy.

Ciemny schemat (jeśli dwa i więcej ciemnych kolorów):

• tło jest najciemniejszym kolorem;
• przycisk jest najbliżej ciemności;
• tekst jest najjaśniejszy.

Stosowanie kolorów, sprawdź kontrast: różnicę lekkości między tłem a przyciskiem ≥ 20; Między tłem a tekstem ≥ 60. Jeśli nie pasuje, dostosuj.

Odebrane karty. Ikona źródła → Kolory → Karta

I na przykład kilka kart:

Wynik

Mieliśmy kolorowe karty, z ikon prawdziwych kolorów, bez "brudnych" zanieczyszczeń. Korzystając z wielu kolorów, karta wygląda znacznie bardziej prawdopodobne. Jest to szczególnie przyjemne, że z jednorodnym tłem ikony, karta staje się jej bezpośrednim kontynuacją: granica między nimi wcale nie jest zauważalna.

A co najważniejsze: dwa dni po ofercie nowego algorytmu, pierwsza implementacja była już dostępna w montażu Dev. Testowane wewnątrz polecenia skonfigurowano progi filtra w pierwszym kroku, pod warunkiem, że specjalne przypadki:

• ikona z jednego koloru - sprawiamy, że tło jest tylko ciemniejsze, aby nie scalić;
• ikona z tłem - patrzymy na piksele na krawędziach; Jeśli to samo, umieściliśmy te same tło karty.

Zmodyfikowany algorytm wprowadził najbliższy wydanie. Specjalne dzięki głowicy Grupy Rozwoju Jandexa Dime Ovcharov - na zainteresowanie, pragnienie i cierpliwość. Wreszcie, więcej przykładów.