WinNavigator

Frigate

Norton Commander

WinNC

Dos Navigator

Servant Salamander

Turbo Browser

Winamp, Skins, Plugins

Необходимые Утилиты

Текстовые редакторы

Юмор

File managers and best utilites

Безопасные Веб-цвета. Браузер цветной

Icons & Browser Colors | Web Fundamentals | Google Developers

Open Web Developer Advocate at Google • Tools, Performance, Animation, UX

Modern browsers make it easy to customize certain components, like icons, the address bar color, and even add things like custom tiles. These simple tweaks can increase engagement and bring users back to your site.

Provide great icons & tiles

When a user visits your webpage, the browser tries to fetch an icon from the HTML. The icon may show up in many places, including the browser tab, recent app switch, the new (or recently visited) tab page, and more.

Providing a high quality image will make your site more recognizable, making it easier for users to find your site.

To fully support all browsers, you'll need to add a few tags to the <head> element of each page.

<link rel="icon" href="icon.png">  <link rel="apple-touch-icon" href="ios-icon.png">  <meta name="msapplication-square310x310logo" content="icon_largetile.png">

Chrome & Opera

Chrome and Opera uses icon.png, which is scaled to the necessary size by the device. To prevent automatic scaling, you can also provide additional sizes by specifying the sizes attribute.

Note: Icons sizes should be based on 48px, for example 48px, 96px, 144px and 192px

Safari

Safari also uses the <link> tag with the rel attribute: apple-touch-icon.

You can specify explicit sizes by providing a separate link tag for each icon, preventing the OS from having to resize the icon:

Internet Explorer & Windows Phone

Windows 8's new home screen experience supports four different layouts for pinned sites, and requires four icons. You can leave out the relevant meta tags if you don't want to support a specific size.

Tiles in Internet Explorer

Microsoft’s "Pinned Sites" and rotating "Live Tiles" go far beyond other implementations and is beyond the scope of this guide. You can learn more at MSDN's how to create live tiles.

Color browser elements

Using different meta elements, you can customize the browser and even elements of the platform. Keep in mind that some may only work on certain platforms or browsers, but they can greatly enhance the experience.

Chrome, Firefox OS, Safari, Internet Explorer and Opera Coast allow you to define colors for elements of the browser, and even the platform using meta tags.

Meta Theme Color for Chrome and Opera

To specify the theme color for Chrome on Android, use the meta theme color.

<meta name="theme-color" content="#4285f4">

Theme colors styling the address bar in Chrome

Safari specific styling

Safari allows you to style the status bar and specify a startup image.

Specify a startup image

By default, Safari shows a blank screen during load time and after multiple loads a screenshot of the previous state of the app. You can prevent this by telling Safari to show an explicit startup image, by adding a link tag, with rel=apple-touch-startup-image. For example:

The image has to be in the specific size of the target device's screen or it won't be used. Refer to Safari Web Content Guidelines for further details.

While Apple's documentation is sparse on this topic, the developer community has figured out a way to target all devices by using advanced media queries to select the appropriate device and then specify the correct image. Here's a working solution, courtesy of tfausak's gist

Change the status bar appearance

You can change the appearance of the default status bar to either black or black-translucent. With black-translucent, the status bar floats on top of the full screen content, rather than pushing it down. This gives the layout more height, but obstructs the top. Here’s the code required:

Screenshot using black-translucent black-black

Screenshot using black

developers.google.com

Безопасные цвета для Веб. Таблица из 216 цветов, рекомендуемых для экранного дизайна — ColorScheme.Ru

· Инструмент для подбора цветов и генерации цветовых схем ·

Вашему вниманию предлагается палитра цветов, рекомендуемых для экранного дизайна. Безопасные цвета всегда неизменны при переходе от одного браузера к другому, от одного монитора к другому, или от одной платформы к другой, с их различными разрешениями и возможностями цветопередачи.

Если веб-браузер не в состоянии правильно отобразить тот или иной цвет, то он пытается подобрать похожий или смешивает несколько соседних цветов. Может так случиться, что исходный цвет будет замещён чем-то совершенно неподходящим.

Сегодня уже весьма спорна целесообразность использования безопасной палитры, однако используя её, вы будете уверены, что цвета будут выглядеть неизменно хорошо и без искажений даже на очень старых компьютерах, вплоть до 8-битного режима отображения с поддержкой всего 256 цветов.

Безопасные цвета были выведены математически, а не потому, что они кому-то больше пришлись по душе. Для получения безопасного цвета из Красного, Зелёного и Синего, нужно использовать только данные десятичные значения: 0, 51, 102, 153, 204, 255 — и никакие другие. Каждое из трёх шестнадцатеричных значений не должно отличаться от 00, 33, 66, 99, CC, FF.

Таблица Безопасных Веб-цветов

Палитра состоит из 216 безопасных веб-цветов. Под каждым цветом указаны два значения — RGB, для создания цвета в графическом редакторе, и его шестнадцатеричных HEX-код, для обозначения цвета в HTML.

255 255 204#FFFFCC
255 255 153#FFFF99
255 255 102#FFFF66
255 255 51#FFFF33
255 255 0#FFFF00
204 204 0#CCCC00
255 204 102#FFCC66
255 204 0#FFCC00
255 204 51#FFCC33
204 153 0#CC9900
204 153 51#CC9933
153 102 0#996600
255 153 0#FF9900
255 153 51#FF9933
204 153 102#CC9966
204 102 0#CC6600
153 102 51#996633
102 51 0#663300
255 204 153#FFCC99
255 153 102#FF9966
255 102 0#FF6600
204 102 51#CC6633

153 51 0#993300
102 0 0#660000
255 102 51#FF6633
204 51 0#CC3300
255 51 0#FF3300
255 0 0#FF0000
204 0 0#CC0000
153 0 0#990000
255 204 204#FFCCCC
255 153 153#FF9999
255 102 102#FF6666
255 51 51#FF3333
255 0 51#FF0033
204 0 51#CC0033
204 153 153#CC9999
204 102 102#CC6666
204 51 51#CC3333
153 51 51#993333
153 0 51#990033
51 0 0#330000
255 102 153#FF6699
255 51 102#FF3366
255 0 102#FF0066
204 51 102#CC3366
153 102 102#996666
102 51 51#663333
255 153 204#FF99CC
255 51 153#FF3399
255 0 153#FF0099
204 0 102#CC0066
153 51 102#993366
102 0 51#660033
255 102 204#FF66CC
255 0 204#FF00CC
255 51 204#FF33CC
204 102 153#CC6699
204 0 153#CC0099
153 0 102#990066
255 204 255#FFCCFF
255 153 255#FF99FF
255 102 255#FF66FF
255 51 255#FF33FF
255 0 255#FF00FF
204 51 153#CC3399
204 153 204#CC99CC
204 102 204#CC66CC
204 0 204#CC00CC

204 51 204#CC33CC
153 0 153#990099
153 51 153#993399
204 102 255#CC66FF
204 51 255#CC33FF
204 0 255#CC00FF
153 0 204#9900CC
153 102 153#996699
102 0 102#660066
204 153 255#CC99FF
153 51 204#9933CC
153 51 255#9933FF
153 0 255#9900FF
102 0 153#660099
102 51 102#663366
153 102 204#9966CC
153 102 255#9966FF
102 0 204#6600CC
102 51 204#6633CC
102 51 153#663399
51 0 51#330033
204 204 255#CCCCFF
153 153 255#9999FF
102 51 255#6633FF
102 0 255#6600FF
51 0 153#330099
51 0 102#330066
153 153 204#9999CC
102 102 255#6666FF
102 102 204#6666CC
102 102 153#666699
51 51 153#333399
51 51 102#333366
51 51 255#3333FF
51 0 255#3300FF
51 0 204#3300CC
51 51 204#3333CC
0 0 153#000099
0 0 102#000066
102 153 255#6699FF
51 102 255#3366FF
0 0 255#0000FF
0 0 204#0000CC
0 51 204#0033CC
0 0 51#000033
0 102 255#0066FF
0 102 204#0066CC
51 102 204#3366CC

0 51 255#0033FF
0 51 153#003399
0 51 102#003366
153 204 255#99CCFF
51 153 255#3399FF
0 153 255#0099FF
102 153 204#6699CC
51 102 153#336699
0 102 153#006699
102 204 255#66CCFF
51 204 255#33CCFF
0 204 255#00CCFF
51 153 204#3399CC
0 153 204#0099CC
0 51 51#003333
153 204 204#99CCCC
102 204 204#66CCCC
51 153 153#339999
102 153 153#669999
0 102 102#006666
51 102 102#336666
204 255 255#CCFFFF
153 255 255#99FFFF
102 255 255#66FFFF
51 255 255#33FFFF
0 255 255#00FFFF
0 204 204#00CCCC
153 255 204#99FFCC
102 255 204#66FFCC
51 255 204#33FFCC
0 255 204#00FFCC
51 204 204#33CCCC
0 153 153#009999
102 204 153#66CC99
51 204 153#33CC99
0 204 153#00CC99
51 153 102#339966
0 153 102#009966
0 102 51#006633
102 255 153#66FF99
51 255 153#33FF99
0 255 153#00FF99
51 204 102#33CC66
0 204 102#00CC66
0 153 51#009933
153 255 153#99FF99

102 255 102#66FF66
51 255 102#33FF66
0 255 102#00FF66
51 153 51#339933
0 102 0#006600
204 255 204#CCFFCC
153 204 153#99CC99
102 204 102#66CC66
102 153 102#669966
51 102 51#336633
0 51 0#003300
51 255 51#33FF33
0 255 51#00FF33
0 255 0#00FF00
0 204 0#00CC00
51 204 51#33CC33
0 204 51#00CC33
102 255 0#66FF00
102 255 51#66FF33
51 255 0#33FF00
51 204 0#33CC00
51 153 0#339900
0 153 0#009900
204 255 153#CCFF99
153 255 102#99FF66
102 204 0#66CC00
102 204 51#66CC33
102 153 51#669933
51 102 0#336600
153 255 0#99FF00
153 255 51#99FF33
153 204 102#99CC66
153 204 0#99CC00
153 204 51#99CC33
102 153 0#669900
204 255 102#CCFF66
204 255 0#CCFF00
204 255 51#CCFF33
204 204 153#CCCC99
102 102 51#666633
51 51 0#333300
204 204 102#CCCC66
204 204 51#CCCC33
153 153 102#999966
153 153 51#999933
153 153 0#999900
102 102 0#666600
255 255 255#FFFFFF

204 204 204#CCCCCC
153 153 153#999999
102 102 102#666666
51 51 51#333333
0 0 0#000000

colorscheme.ru

Ночной режим в браузере - как переключить любой сайт в тёмную версию дизайна

Всем доброго времени суток, дорогие друзья, знакомые, читатели и прочие личности.

Мы уже говорили с Вами о таких замечательных вещах, как автоматическое изменение яркости монитора с помощью F.lux для компьютера или с помощью nigth mode + night owl для, скажем, android. Но многие "ночные жители", вроде автора, всё равно не любят яркое свечение экрана, которым, к слову, порой не хочется будить близких.

color

Самой проблемной частью в этом плане является, конечно же, браузер, а точнее говоря сайты в нём. Как ни крути, но большинство из них выполнено в светлых тонах и не предусматривают переключения стиля в ночной режим, в результате чего экран светится белым пятном на всю комнату.

Сегодня мы хотели бы рассказать Вам о том, как переключить любой сайт в тёмную (контрастную) его версию, причем без участия владельца сайта, да еще и с выбором темы. А, и довеском, расскажем как наложить цветовой фильтр нужного нам вида.

Давайте приступим.

Хотите знать, уметь, больше и сами?

Мы предлаем Вам бесплатные две книги от автора. Администрирование, сервера, сети, компьютеры и другое. Не является рекламой. Предложение от sonikelf.ru

Получить сейчас

Переключение контраста сайтов в ночной режим — плагин для браузера

Речь пойдет про простенькое расширение, которое с удобством и комфортом встаёт на браузер, который написан на движке Chromium, т.е для Google Chrome, Opera (старшие версии), Vivaldi, Яндекс.Браузер и прочие прочие.

Плагин, собственно, так и называется "Резкий контраст" и живет по этой вот ссылке. Сделан, что чудесно, самим гуглом, а так же предельно прост в управлении и обращении.

ночное расширение для браузера - тёмные тона и контраст на сайтах - скриншот 1

После установки у Вас появится иконка (если не появилась, то нажмите на три точки и перетащите иконку мышкой в удобное для Вас место) в виде кружочка контраста (почти инь-янь, но не совсем :) ), тыркнув на который Вы сможете его включить:

ночное расширение для браузера - тёмные тона и контраст на сайтах - скриншот 2

Что, как Вы видите, так же можно сделать и сочетанием клавиш "Shift+F11" или же он уже будет включен, но стоять в положении "Обычный" (т.е, в общем-то, тоже отключен, но частично).

ночное расширение для браузера - тёмные тона и контраст на сайтах - скриншот 3

Теперь, тыркнув в кружочек Вы можете выбрать одну из предложенных цветовых схем, начиная от резкого контраста и заканчивая цветовой стилистикой "желтый на черном". Что из этого получится? А получится вполне себе такой ночной режим браузера (скриншоты кликабельны):

ночное расширение для браузера - тёмные тона и контраст на сайтах - скриншот 4

ночное расширение для браузера - тёмные тона и контраст на сайтах - скриншот 5

ночное расширение для браузера - тёмные тона и контраст на сайтах - скриншот 6

Вполне себе тёмненько и даже местами симпатично. Каждый, так сказать, сможет найти себе что-то на свой вкус и просматривать сайты в ночном (тёмном) режиме (или переключаться с них парой кликов мышки или кнопок).

Как наложить цветовой фильтр на сайт и изменить его цветовую гамму

Аналогичный, по смыслу, плагин (расширение точнее), есть по такой вот ссылке. Тоже сделан Гуглом, тоже отлично подходит для большинства браузеров на этом движке. Устанавливается и используется так же просто и похоже:

ночное расширение для браузера - тёмные тона и контраст на сайтах - скриншот 7

Выбираем тип фильтра, перемещаем ползунок, глядя на то как меняется контраст звёзд в разных цветовых спектрах, а потом жмём в ОК, чтобы применить.

Стоит понимать, что если на сайте не используется какой-то цвет, то и фильтроваться он не будет, соответственно, на sonikelf.ru, где в основном синий, подобный фильтр почти не будет играть никакой роли (разве что Вы хотите сделать нас фиолетовым цветом).

В общем, с этим расширением придется немного поиграть для понимания того, как оно работает на самом деле.

Желаете стать опытным пользователем или профессионалом?

Мы предлаем курсы обучения от автора. Сертификация и трудоустройство по результатам. Администрирование, сайтостроение, сервера, сети, компьютеры и другое. Не является рекламой. Предложение от sonikelf.ru

Записаться сейчас

Послесловие

Такие вот пироги. Надеюсь, что кому-то это реально пригодится и понравится, ибо автору, как человеку, который бывает работает круглыми сутками (или исключительно ночами), эти плагины браузера (как и F.lux в своё время) сэкономили нещадное количество глаз нервов и здоровья.

Как и всегда, если какие-то вопросы, мысли, дополнения и всё такое прочее-разное, то добро пожаловать в комментарии к этой статье.

Оставайтесь с нами ;)

sonikelf.ru

Смотрите также

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..