Сегодня давайте уже разберемся с азами блочной верстки окончательно. Надеюсь, Вы читали, что такое блочные элементы. В данной статье Вы узнаете, что такое встроенные элементы и встроенный блок. Конечно, вы могли слышать и другие названия: инлайновые, линейные и т.д. В английском варианте это  inline  и  inline-block  соответственно.

Порой у вас бывало такое, что меняешь стили, меняешь, а ничего не происходит с элементом. Выстраиваются друг за другом в линию, на отступы не откликается и в таком веселом духе. Знакомо? Отлично, давайте разбираться.

            «Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К встроенным элементам относятся теги <span>, <a>, <q>, <code> и др. В основном они используются для изменения вида текста или его логического выделения» htmlbook.ru

Давайте рассмотрим основные свойства встроенных элементов.

1. Встроенные элементы это все те элементы, которые не относятся к блочным, т.е это a, br, img, em, small, span, strong и т. д.
2. Встроенные элементы могут содержать:
   1. Только другие встроенные элементы (!) Нельзя вложить во встроенный элемент блочный (!)
   2. Разные данные (текст)
   3. Быть пустыми
3. Встроенные элементы выстраиваются друг за другом в одну линию (т.е. не переносятся на новую строку)
4. Можно использовать вертикальное выравнивание элементов (vertical-align)
5. Занимают ширину по их содержанию. (как узнать ширину блока мы говорили в уроке 2.1)

По умолчанию встроенные элементы имеют свойство display:inline; (его не нужно писАть в css), но ведь вам никто не запрещает сделать следующее:

span {display:block;}

Встроенный элемент после таких манипуляций будет вести себя как блочный и примет все новые свойства. (при этом старые уже не действуют)

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

Встроенный блок.

Сразу же рассмотрим его свойства.

1. В чистом виде не встречается, поэтому задается через стили свойством display:inline-block; (ie7 и ниже работает для встроенных элементов)
2. Внутрь встроенного блока можно помещать данные (например, текст), строчные и блочные элементы. (советую следовать логике использования вложений)
3. Можно выравнивать элементы по вертикали (vertical-align)
4. Имеют ширину по содержимому + границы и отступы. (как у блочных), высота рассчитывается исходя из содержимого.
5. Выстраиваются друг за другом в одну линию.
6. Можно задать ширину и высоту.

Что дают нам данные свойства? Во-первых, они фактически универсальны, во-вторых, нет необходимости использовать обтекание (float).

Рассмотрим пример, Интернет-магазин. Вывод товаров друг за дружкой блоками в один ряд. Если каждый товар с описанием выводить как блок (списком), то они не будут стоять в ряд. Посмотрим:

</pre>
<ul>
	<li><img src="images/1.jpg" alt="" /><a href="#">Товар</a></li>
	<li><img src="images/2.jpg" alt="" /><a href="#">Товар</a></li>
	<li><img src="images/3.jpg" alt="" /><a href="#">Товар</a></li>
</ul>
<pre>

Теперь добавим стиль display:inline-block; для ul li – для выравнивания списка. Посмотрите, что получилось. Вуаля, немного волшебства с css и товары будут выглядеть отлично.

В internet explorer 7 и ниже для блочных элементов display:inline-block; отображается не корректно. Поэтому добавим zoom:1; и выставим display:inline; для данных браузеров через условные комментарии:

<!--[if lte IE 7]>
<style type="text/css">
ul li {
display: inline;
zoom: 1;
}
</style>
<![endif]-->

Надеюсь, теперь вы понимаете разницу между основными блоками. Теперь вы знаете, как себя они будут вести, и как заставить их вести себя.

с/у УтБ

***

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

***

Не знаю как вам, но такие флешмобы очень даже интересно смотреть

Инфографика – это визуальное представление информации. Сегодня инфографика довольно популярный метод представления информации, но сделать ее не так просто, хотя результат весьма интересен.

Инфографику можно найти везде: журналах, брошюрах, других печатных изданиях и теперь это часть интернета. Редко что-то интересное обходит интернет. Наглядная полезная информация только увеличит количество посетителей к вам на сайт.

Хотя представить полезную информацию в красивой обертке весьма сложная и кропотливая работа, но если вы умеете обращаться с фотошопом, и хотите создавать нечто подобное, но что делать у вас нету вдохновения?!

А для этого представляем вам 20 источников вдохновения.

Спонсор статьи: Интернет-магазин, где можно купить недорогие электронные трансформаторы.

pointlesscorp.com/

ipolecat.com/

golivebutton.com/

skillsfactory.in/

head2heart.us/

prowebdesign.ro/

ericbarse.com/

chappybarry.com/

amazeelabs.com/en

launchfactory.org/

scandalousdirt.com/

clayant.co.za/

bikingboss.com/

urbaneo.fr/

charlieprod.com/

lugin.pl/strona/

sleekdesignstudio.com/

jorgerigabert.com/

mintdigital.com/

melonfree.com/

источник

Надеюсь статья была интересной и полезной. Не забываем подписываться на мои новые статьи и рассказать друзьям

с/у УтБ

На десерт сегодня мощный байк из фильма “Трон”, как вам?

Блочная верстка – сегодня однозначно популярней табличной, о чем мы уже с Вами говорили в Уроке 2 Блочная верстка. Но как обычно есть всегда свои спецификации, которые должен знать и учитывать каждый начинающий html верстальщик в своем нелегком деле.

Давайте сегодня поговорим об особенностях блочных элементов.

Для начала выделим для себя три большие группы блоков (не учитывая блочную таблицу и ее производные):

• Блочные элементы (block)
• Строчные (встроенные) элементы (inline)
• Строчный (встроенный) блок (inline-block)

Думаю, Вы уже встречали такие значения в сss под свойством display. Вот сегодня поговорим об одно из них.

Блочные элементы – block.

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

Важно запомнить основные свойства для блочных элементов:

• Блочные элементы – это div, h1 – h6, p, blockquote, hr, pre, address, fieldset, <orm,  ol, table, ul (еще несколько не используемых/устаревших) + все те элементы которые имеет в свойствах display:block|list-item|table|run-in(не всегда);
• В блочные элементы можно вложить как блочные, так и строчные элементы;
• Блочные элементы занимают все доступное пространство;
• Высота рассчитывается исходя из содержимого блока;
• Ширина для блочных элементов есть: width + margin + padding + border (аналогично с высотой);
• Блочные элементы начинаются с новой строки;

В принципе, это основные свойства данных элементов, которые необходимо запомнить. Рассмотрим подробнее.

Вложенность

В блочные элементы можно вложить как блочные, так и строчные элементы:

Пример:

</pre>
<div>
<h1><a href="”#”"><span>Ссылка</span></a></h1>
</div>
<pre>

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

Нарушение вложенности типа <a href=”http://site.kz”><h2>ссылка</h2></a> приводит к невалидному коду и ошибке типа:

Пространство блочных элементов

Что значит все доступное пространство? Давайте рассмотрим пример:

</pre>
<div>
Текст</div>
<pre>

Если не задавать параметры для блоков, то они занимают всю ширину в браузере, и Вы не увидели зеленый фон у элемента div. Почему? Вспомните, что мы говорили о ширине блочных элементов:

«Ширина блочного элемента есть все доступное пространство»

Объясняю: элемент абзаца (р) занял все пространство элемента div. Отсюда мы и не видим зеленый фон. По мере добавления текста блоки будут увеличиваться, а это есть одно из свойств элементов – высота рассчитывается исходя из содержимого блока.

Вот еще один пример для разбора:

</pre>
<div>
<h1>Текст</h1>
</div>
<pre>

Отступы у элемента абзаца (p) добавляются по умолчанию в браузере, для их удаления используйте сброс стилей css.

Ширина для блочных элементов

Как говорилось выше, ширина для блоков есть width + margin + padding + border;

На картинке все показано, что есть что.

Давайте посмотрим на исходный код примера:

</pre>
<div>
<div>Отступы у элемента абзаца (p) добавляются по умолчанию в браузере, для их удаления используйте сброс стилей css.</div>
</div>
<pre>

Давайте посчитаем ширину блока div. qwe:

width: 300px + border:5px; (граница проходит слева и справа! = 10px) + margin:10px 50px 10px 50px; (для ширины необходимы отступ слева и справа) + padding:5px 5px 5px 5px; = 420px;

Получается фактическая ширина блока div.qwe равна 420 px, что необходимо учитывать. Особенно когда делаете макет сайта.

C новой строки.

Каждый блочный элемент по умолчанию начинается с новой строки. Все просто, смотрим пример:

</pre>
<div>текст</div>
<h1>Текст</h1>
<pre>
текст

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

---

Теперь Вам необходимо сесть и разобраться еще раз во всем, написать похожие примеры, используя firebug посмотреть исходный код.

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

Если Вы ждете новых статей по верстке, то советую подписаться на обновления блога

На десерт сегодня матч 2010 года 11 человек против 200(!), в такой команде опасно забивать гол

Друзья, посетители и случайный человек на блоге. Сегодня праздник у блога верстальщика УтБ из Казахстана. Честно, точную дату не помню, поэтому праздновать будем по первой статье (дата публикации), которая была опубликована 6 апреля 2011 года.

Год пролетел незаметно. В марте прошлого года (2011) было смутное время. Одно только: я окончательно решил, что хочу завести блог, где могу оставлять записки по интересным для меня темам. В принципе, Вы можете все это прочитать. :neutral:

В начале своего пути я как и многие практически ничего не знал. Начинал я свой путь с изучения Joomla CMS, и сейчас активно поддерживаю казахстанский форум пользователей Joomla, где мы переводим компоненты, модули и плагины на родной язык. Забегу вперед и скажу, что скоро будет отдельные статьи посвященные именно joomla.

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

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

Пару слов о будущем блога

Теперь немного о нововведениях и планах на будущее:

• - сейчас обговаривается новый дизайн, учитывая, мягко говоря, не удачную попытку смены шаблона на блоге;
• - новый «облик» принесет изменения в структуру и ликвидацию Dofollow, т.е. скоро gtalk.kz перестанет быть dofollow, как печально бы это не звучало.
• - будут продолжения уроков по верстке. Это однозначно. Сделаем разные шаблоны html и для CMS и многое другое. Будет и html5.
• - теперь будут статьи не только о wordpress, но и joomla. Сейчас мы продумываем структуру и как сделать это получше.
• - ну, и конечно, интересные статьи и полезная информация для Вас

Надеюсь, Вам понравился мой блог и статьи. 1 год это мало, но я полон решимости, идти дальше. Я всегда открыт для сотрудничества, мои контакты здесь. В комментариях можете оставить свои пожелания, возможно Вас что-то интересует чем я могу поделиться и рассказать.

В общем все! Теперь можете меня поздравлять.

с/у УтБ

На десерт по поводу праздника веселое видео для настроения

Приветствую вас на своем блоге. Сегодня подготовлена невероятно полезная статья из множества фрагментов CSS кода. Точнее из 20 полезных css вкусностей.

Данные решения, я надеюсь, сведут к минимуму головные боли и разочарования, а также сэкономит ваше время при написании CSS. Добавляйте статью в закладки и подписывайтесь на вкусные обновления блога. :neutral:

Теперь я собираю css сниппеты в 1 месте

Давайте начнем.

Сброс стилей от html5doctor.com специально для на html5.

Подробнее о файле сброса стиле можно почитать в статье Урок 5.1 Сброс стилей: reset.css

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {

margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section
{
 display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */

ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */

mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

Clear хак – удаление обтекания блоков

/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
} 

Согласованный и предсказуемый размер шрифта в Rem (единица размера шрифта в css3)

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Полный стиль для @face-font

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf')  format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

Хак для IE6-8

Хаки для каждого браузера Ie с 6 версии до 8 :).

body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

Кроссбраузерная прозрачность

selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5;      /* khtml, old safari */
-moz-opacity: 0.5;       /* mozilla, netscape */
opacity: 0.5;           /* fx, safari, opera */
}

Удаление контура вокруг ссылок для webkit браузеров

input[type="text"]:focus {
outline: none;
}

Кроссбраузерная минимальная высота (min-height)

Аналогично можно поступить с шириной

#div {
min-height: 500px;
height:auto !important;
height: 500px;
}

Краткий стиль селекта font

/*font: font-style font-variant font-weight font-size/line-height font-family;*/

font: italic small-caps bold 15px/30px Helvetica, sans-serif;
 

Заглавная буква

Помните эту первую красивую букву в сказках? Так вот как это можно сделать:

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

Вертикальное выравнивание по центру

.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

Кроссбраузерный text-shadow (включая IE)

Делайте тень у текста для всех браузеров.

p {
text-shadow: #000000 0 0 1px;
zoom:1;
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
}

Кроссбраузерный box-shadow (включая IE)

.shadow {
-moz-box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
box-shadow: 0 0 4px #000;
}

Скрыть текст над картинкой с помощью text-indent

h1 {
background: url(img/image.jpg) no-repeat;
height: 100px;
width: 500px;
display: block;
text-indent: -9999px;
}

Исправляем баг в IE6-7: двойной отступ

ul li {
float: left;
margin-left: 5px;
*display: inline; /*IE7 and below*/
_display: inline; /*IE6 and below*/
}

Удалить полосы прокрутки textarea в IE

textarea {
overflow:auto;
}

Изменения стиля выделенному тесту

::selection {
color: white;
background-color: red;
}

::-moz-selection {
color: white;
background-color: red;
}

Стиль для ссылок: внещних, mail и pdf-файлов

/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

Стили для разных девайсов (по ширине экрана)

Как сделать мобильный вариант сайта? Да, просто подмените css файл для каждого устройства.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Пк и ноутбуков ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Больших экранов ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Можно прописать разные стили в отдельные файлы для каждого девайса, например:

<head>
<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

</head>

Шрифты с помощью Google Font API

Вставьте код между тегами <head></head>

/* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> */
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
 

Используйте стиль шрифта в css

/*CSS selector {
font-family: 'Font Name', serif;
}*/

font-family: 'Tangerine', serif;

по мотивам

Надеюсь данная статья помогла Вам в освоении и улучшении своих навыков верстки сайта.

Не забудьте поделиться с друзьями ;).

с/у УтБ

Спонсор статьи:  Продвижение и раскрутка сайтов от веб-студии Z-studio.
На десерт сегодня Guitar Hero в парламенте Великобритании :mrgreen:

Приветствую вас, пользователь. Сегодня я хотел бы начать эстафету на тему «Как я верстаю сайты» или просто «как я верстаю». Любой желающий может принять участие. В конце статьи я составлю список всех тех, кто принял участие, т.е. от меня для Вас совершенно бесплатная ссылка. Кстати, не забудьте напомнить в своей статье зачинщика. :???:

Навигация.

1. Таблица html кодов цветов, буквенное написание и коды цветов в RGB
2. Таблица «безопасных» цветов (студия А. Лебедева)
3. Программы для работы с цветом

Таблица html кодов цветов, буквенное написание и коды цветов в RGB

Написание	Цвет	R G B	Код цвета для HTML
Snow	Snow	255 250 250	#FFFAFA
GhostWhite	GhostWhite	248 248 255	#F8F8FF
WhiteSmoke	WhiteSmoke	245 245 245	#F5F5F5
Gainsboro	Gainsboro	220 220 220	#DCDCDC
FloralWhite	FloralWhite	255 250 240	#FFFAF0
OldLace	OldLace	253 245 230	#FDF5E6
Linen	Linen	250 240 230	#FAF0E6
AntiqueWhite	AntiqueWhite	250 235 215	#FAEBD7
PapayaWhip	PapayaWhip	255 239 213	#FFEFD5
BlanchedAlmond	BlanchedAlmond	255 235 205	#FFEBCD
Bisque	Bisque	255 228 196	#FFE4C4
PeachPuff	PeachPuff	255 218 185	#FFDAB9
NavajoWhite	NavajoWhite	255 222 173	#FFDEAD
Moccasin	Moccasin	255 228 181	#FFE4B5
Cornsilk	Cornsilk	255 248 220	#FFF8DC
Ivory	Ivory	255 255 240	#FFFFF0
LemonChiffon	LemonChiffon	255 250 205	#FFFACD
Seashell	Seashell	255 245 238	#FFF5EE
Honeydew	Honeydew	240 255 240	#F0FFF0
MintCream	MintCream	245 255 250	#F5FFFA
Azure	Azure	240 255 255	#F0FFFF
AliceBlue	AliceBlue	240 248 255	#F0F8FF
lavender	lavender	230 230 250	#E6E6FA
LavenderBlush	LavenderBlush	255 240 245	#FFF0F5
MistyRose	MistyRose	255 228 225	#FFE4E1
White	White	255 255 255	#FFFFFF
Black	Black	0 0 0	#000000
DarkSlateGray	DarkSlateGray	47 79 79	#2F4F4F
DimGrey	DimGrey	105 105 105	#696969
SlateGrey	SlateGrey	112 128 144	#708090
LightSlateGray	LightSlateGray	119 136 153	#778899
Grey	Grey	190 190 190	#BEBEBE
LightGray	LightGray	211 211 211	#D3D3D3
MidnightBlue	MidnightBlue	25 25 112	#191970
NavyBlue	NavyBlue	0 0 128	#000080
CornflowerBlue	CornflowerBlue	100 149 237	#6495ED
DarkSlateBlue	DarkSlateBlue	72 61 139	#483D8B
SlateBlue	SlateBlue	106 90 205	#6A5ACD
MediumSlateBlue	MediumSlateBlue	123 104 238	#7B68EE
LightSlateBlue	LightSlateBlue	132 112 255	#8470FF
MediumBlue	MediumBlue	0 0 205	#0000CD
RoyalBlue	RoyalBlue	65 105 225	#4169E1
Blue	Blue	0 0 255	#0000FF
DodgerBlue	DodgerBlue	30 144 255	#1E90FF
DeepSkyBlue	DeepSkyBlue	0 191 255	#00BFFF
SkyBlue	SkyBlue	135 206 235	#87CEEB
LightSkyBlue	LightSkyBlue	135 206 250	#87CEFA
SteelBlue	SteelBlue	70 130 180	#4682B4
LightSteelBlue	LightSteelBlue	176 196 222	#B0C4DE
LightBlue	LightBlue	173 216 230	#ADD8E6
PowderBlue	PowderBlue	176 224 230	#B0E0E6
PaleTurquoise	PaleTurquoise	175 238 238	#AFEEEE
DarkTurquoise	DarkTurquoise	0 206 209	#00CED1
MediumTurquoise	MediumTurquoise	72 209 204	#48D1CC
Turquoise	Turquoise	64 224 208	#40E0D0
Cyan	Cyan	0 255 255	#00FFFF
LightCyan	LightCyan	224 255 255	#E0FFFF
CadetBlue	CadetBlue	95 158 160	#5F9EA0
MediumAquamarine	MediumAquamarine	102 205 170	#66CDAA
Aquamarine	Aquamarine	127 255 212	#7FFFD4
DarkGreen	DarkGreen	0 100 0	#006400
DarkOliveGreen	DarkOliveGreen	85 107 47	#556B2F
DarkSeaGreen	DarkSeaGreen	143 188 143	#8FBC8F
SeaGreen	SeaGreen	46 139 87	#2E8B57
MediumSeaGreen	MediumSeaGreen	60 179 113	#3CB371
LightSeaGreen	LightSeaGreen	32 178 170	#20B2AA
PaleGreen	PaleGreen	152 251 152	#98FB98
SpringGreen	SpringGreen	0 255 127	#00FF7F
LawnGreen	LawnGreen	124 252 0	#7CFC00
Green	Green	0 255 0	#00FF00
Chartreuse	Chartreuse	127 255 0	#7FFF00
MedSpringGreen	MedSpringGreen	0 250 154	#00FA9A
GreenYellow	GreenYellow	173 255 47	#ADFF2F
LimeGreen	LimeGreen	50 205 50	#32CD32
YellowGreen	YellowGreen	154 205 50	#9ACD32
ForestGreen	ForestGreen	34 139 34	#228B22
OliveDrab	OliveDrab	107 142 35	#6B8E23
DarkKhaki	DarkKhaki	189 183 107	#BDB76B
PaleGoldenrod	PaleGoldenrod	238 232 170	#EEE8AA
LtGoldenrodYello	LtGoldenrodYello	250 250 210	#FAFAD2
LightYellow	LightYellow	255 255 224	#FFFFE0
Yellow	Yellow	255 255 0	#FFFF00
Gold	Gold	255 215 0	#FFD700
LightGoldenrod	LightGoldenrod	238 221 130	#EEDD82
goldenrod	goldenrod	218 165 32	#DAA520
DarkGoldenrod	DarkGoldenrod	184 134 11	#B8860B
RosyBrown	RosyBrown	188 143 143	#BC8F8F
IndianRed	IndianRed	205 92 92	#CD5C5C
SaddleBrown	SaddleBrown	139 69 19	#8B4513
Sienna	Sienna	160 82 45	#A0522D
Peru	Peru	205 133 63	#CD853F
Burlywood	Burlywood	222 184 135	#DEB887
Beige	Beige	245 245 220	#F5F5DC
Wheat	Wheat	245 222 179	#F5DEB3
SandyBrown	SandyBrown	244 164 96	#F4A460
Tan	Tan	210 180 140	#D2B48C
Chocolate	Chocolate	210 105 30	#D2691E
Firebrick	Firebrick	178 34 34	#B22222
Brown	Brown	165 42 42	#A52A2A
DarkSalmon	DarkSalmon	233 150 122	#E9967A
Salmon	Salmon	250 128 114	#FA8072
LightSalmon	LightSalmon	255 160 122	#FFA07A
Orange	Orange	255 165 0	#FFA500
DarkOrange	DarkOrange	255 140 0	#FF8C00
Coral	Coral	255 127 80	#FF7F50
LightCoral	LightCoral	240 128 128	#F08080
Tomato	Tomato	255 99 71	#FF6347
OrangeRed	OrangeRed	255 69 0	#FF4500
Red	Red	255 0 0	#FF0000
HotPink	HotPink	255 105 180	#FF69B4
DeepPink	DeepPink	255 20 147	#FF1493
Pink	Pink	255 192 203	#FFC0CB
LightPink	LightPink	255 182 193	#FFB6C1
PaleVioletRed	PaleVioletRed	219 112 147	#DB7093
Maroon	Maroon	176 48 96	#B03060
MediumVioletRed	MediumVioletRed	199 21 133	#C71585
VioletRed	VioletRed	208 32 144	#D02090
Magenta	Magenta	255 0 255	#FF00FF
Violet	Violet	238 130 238	#EE82EE
Plum	Plum	221 160 221	#DDA0DD
Orchid	Orchid	218 112 214	#DA70D6
MediumOrchid	MediumOrchid	186 85 211	#BA55D3
DarkOrchid	DarkOrchid	153 50 204	#9932CC
DarkViolet	DarkViolet	148 0 211	#9400D3
BlueViolet	BlueViolet	138 43 226	#8A2BE2
Purple	Purple	160 32 240	#A020F0
MediumPurple	MediumPurple	147 112 219	#9370DB
Thistle	Thistle	216 191 216	#D8BFD8
Snow1	Snow1	255 250 250	#FFFAFA
Snow2	Snow2	238 233 233	#EEE9E9
Snow3	Snow3	205 201 201	#CDC9C9
Snow4	Snow4	139 137 137	#8B8989
Seashell1	Seashell1	255 245 238	#FFF5EE
Seashell2	Seashell2	238 229 222	#EEE5DE
Seashell3	Seashell3	205 197 191	#CDC5BF
Seashell4	Seashell4	139 134 130	#8B8682
AntiqueWhite1	AntiqueWhite1	255 239 219	#FFEFDB
AntiqueWhite2	AntiqueWhite2	238 223 204	#EEDFCC
AntiqueWhite3	AntiqueWhite3	205 192 176	#CDC0B0
AntiqueWhite4	AntiqueWhite4	139 131 120	#8B8378
Bisque1	Bisque1	255 228 196	#FFE4C4
Bisque2	Bisque2	238 213 183	#EED5B7
Bisque3	Bisque3	205 183 158	#CDB79E
Bisque4	Bisque4	139 125 107	#8B7D6B
PeachPuff1	PeachPuff1	255 218 185	#FFDAB9
PeachPuff2	PeachPuff2	238 203 173	#EECBAD
PeachPuff3	PeachPuff3	205 175 149	#CDAF95
PeachPuff4	PeachPuff4	139 119 101	#8B7765
NavajoWhite1	NavajoWhite1	255 222 173	#FFDEAD
NavajoWhite2	NavajoWhite2	238 207 161	#EECFA1
NavajoWhite3	NavajoWhite3	205 179 139	#CDB38B
NavajoWhite4	NavajoWhite4	139 121 94	#8B795E
LemonChiffon1	LemonChiffon1	255 250 205	#FFFACD
LemonChiffon2	LemonChiffon2	238 233 191	#EEE9BF
LemonChiffon3	LemonChiffon3	205 201 165	#CDC9A5
LemonChiffon4	LemonChiffon4	139 137 112	#8B8970
Cornsilk1	Cornsilk1	255 248 220	#FFF8DC
Cornsilk2	Cornsilk2	238 232 205	#EEE8CD
Cornsilk3	Cornsilk3	205 200 177	#CDC8B1
Cornsilk4	Cornsilk4	139 136 120	#8B8878
Ivory1	Ivory1	255 255 240	#FFFFF0
Ivory2	Ivory2	238 238 224	#EEEEE0
Ivory3	Ivory3	205 205 193	#CDCDC1
Ivory4	Ivory4	139 139 131	#8B8B83
Honeydew1	Honeydew1	240 255 240	#F0FFF0
Honeydew2	Honeydew2	224 238 224	#E0EEE0
Honeydew3	Honeydew3	193 205 193	#C1CDC1
Honeydew4	Honeydew4	131 139 131	#838B83
LavenderBlush1	LavenderBlush1	255 240 245	#FFF0F5
LavenderBlush2	LavenderBlush2	238 224 229	#EEE0E5
LavenderBlush3	LavenderBlush3	205 193 197	#CDC1C5
LavenderBlush4	LavenderBlush4	139 131 134	#8B8386
MistyRose1	MistyRose1	255 228 225	#FFE4E1
MistyRose2	MistyRose2	238 213 210	#EED5D2
MistyRose3	MistyRose3	205 183 181	#CDB7B5
MistyRose4	MistyRose4	139 125 123	#8B7D7B
Azure1	Azure1	240 255 255	#F0FFFF
Azure2	Azure2	224 238 238	#E0EEEE
Azure3	Azure3	193 205 205	#C1CDCD
Azure4	Azure4	131 139 139	#838B8B
SlateBlue1	SlateBlue1	131 111 255	#836FFF
SlateBlue2	SlateBlue2	122 103 238	#7A67EE
SlateBlue3	SlateBlue3	105 89 205	#6959CD
SlateBlue4	SlateBlue4	71 60 139	#473C8B
RoyalBlue1	RoyalBlue1	72 118 255	#4876FF
RoyalBlue2	RoyalBlue2	67 110 238	#436EEE
RoyalBlue3	RoyalBlue3	58 95 205	#3A5FCD
RoyalBlue4	RoyalBlue4	39 64 139	#27408B
Blue1	Blue1	0 0 255	#0000FF
Blue2	Blue2	0 0 238	#0000EE
Blue3	Blue3	0 0 205	#0000CD
Blue4	Blue4	0 0 139	#00008B
DodgerBlue1	DodgerBlue1	30 144 255	#1E90FF
DodgerBlue2	DodgerBlue2	28 134 238	#1C86EE
DodgerBlue3	DodgerBlue3	24 116 205	#1874CD
DodgerBlue4	DodgerBlue4	16 78 139	#104E8B
SteelBlue1	SteelBlue1	99 184 255	#63B8FF
SteelBlue2	SteelBlue2	92 172 238	#5CACEE
SteelBlue3	SteelBlue3	79 148 205	#4F94CD
SteelBlue4	SteelBlue4	54 100 139	#36648B
DeepSkyBlue1	DeepSkyBlue1	0 191 255	#00BFFF
DeepSkyBlue2	DeepSkyBlue2	0 178 238	#00B2EE
DeepSkyBlue3	DeepSkyBlue3	0 154 205	#009ACD
DeepSkyBlue4	DeepSkyBlue4	0 104 139	#00688B
SkyBlue1	SkyBlue1	135 206 255	#87CEFF
SkyBlue2	SkyBlue2	126 192 238	#7EC0EE
SkyBlue3	SkyBlue3	108 166 205	#6CA6CD
SkyBlue4	SkyBlue4	74 112 139	#4A708B
LightSkyBlue1	LightSkyBlue1	176 226 255	#B0E2FF
LightSkyBlue2	LightSkyBlue2	164 211 238	#A4D3EE
LightSkyBlue3	LightSkyBlue3	141 182 205	#8DB6CD
LightSkyBlue4	LightSkyBlue4	96 123 139	#607B8B
SlateGray1	SlateGray1	198 226 255	#C6E2FF
SlateGray2	SlateGray2	185 211 238	#B9D3EE
SlateGray3	SlateGray3	159 182 205	#9FB6CD
SlateGray4	SlateGray4	108 123 139	#6C7B8B
LightSteelBlue1	LightSteelBlue1	202 225 255	#CAE1FF
LightSteelBlue2	LightSteelBlue2	188 210 238	#BCD2EE
LightSteelBlue3	LightSteelBlue3	162 181 205	#A2B5CD
LightSteelBlue4	LightSteelBlue4	110 123 139	#6E7B8B
LightBlue1	LightBlue1	191 239 255	#BFEFFF
LightBlue2	LightBlue2	178 223 238	#B2DFEE
LightBlue3	LightBlue3	154 192 205	#9AC0CD
LightBlue4	LightBlue4	104 131 139	#68838B
LightCyan1	LightCyan1	224 255 255	#E0FFFF
LightCyan2	LightCyan2	209 238 238	#D1EEEE
LightCyan3	LightCyan3	180 205 205	#B4CDCD
LightCyan4	LightCyan4	122 139 139	#7A8B8B
PaleTurquoise1	PaleTurquoise1	187 255 255	#BBFFFF
PaleTurquoise2	PaleTurquoise2	174 238 238	#AEEEEE
PaleTurquoise3	PaleTurquoise3	150 205 205	#96CDCD
PaleTurquoise4	PaleTurquoise4	102 139 139	#668B8B
CadetBlue1	CadetBlue1	152 245 255	#98F5FF
CadetBlue2	CadetBlue2	142 229 238	#8EE5EE
CadetBlue3	CadetBlue3	122 197 205	#7AC5CD
CadetBlue4	CadetBlue4	83 134 139	#53868B
Turquoise1	Turquoise1	0 245 255	#00F5FF
Turquoise2	Turquoise2	0 229 238	#00E5EE
Turquoise3	Turquoise3	0 197 205	#00C5CD
Turquoise4	Turquoise4	0 134 139	#00868B
Cyan1	Cyan1	0 255 255	#00FFFF
Cyan2	Cyan2	0 238 238	#00EEEE
Cyan3	Cyan3	0 205 205	#00CDCD
Cyan4	Cyan4	0 139 139	#008B8B
DarkSlateGray1	DarkSlateGray1	151 255 255	#97FFFF
DarkSlateGray2	DarkSlateGray2	141 238 238	#8DEEEE
DarkSlateGray3	DarkSlateGray3	121 205 205	#79CDCD
DarkSlateGray4	DarkSlateGray4	82 139 139	#528B8B
Aquamarine1	Aquamarine1	127 255 212	#7FFFD4
Aquamarine2	Aquamarine2	118 238 198	#76EEC6
Aquamarine3	Aquamarine3	102 205 170	#66CDAA
Aquamarine4	Aquamarine4	69 139 116	#458B74
DarkSeaGreen1	DarkSeaGreen1	193 255 193	#C1FFC1
DarkSeaGreen2	DarkSeaGreen2	180 238 180	#B4EEB4
DarkSeaGreen3	DarkSeaGreen3	155 205 155	#9BCD9B
DarkSeaGreen4	DarkSeaGreen4	105 139 105	#698B69
SeaGreen1	SeaGreen1	84 255 159	#54FF9F
SeaGreen2	SeaGreen2	78 238 148	#4EEE94
SeaGreen3	SeaGreen3	67 205 128	#43CD80
SeaGreen4	SeaGreen4	46 139 87	#2E8B57
PaleGreen1	PaleGreen1	154 255 154	#9AFF9A
PaleGreen2	PaleGreen2	144 238 144	#90EE90
PaleGreen3	PaleGreen3	124 205 124	#7CCD7C
PaleGreen4	PaleGreen4	84 139 84	#548B54
SpringGreen1	SpringGreen1	0 255 127	#00FF7F
SpringGreen2	SpringGreen2	0 238 118	#00EE76
SpringGreen3	SpringGreen3	0 205 102	#00CD66
SpringGreen4	SpringGreen4	0 139 69	#008B45
Green1	Green1	0 255 0	#00FF00
Green2	Green2	0 238 0	#00EE00
Green3	Green3	0 205 0	#00CD00
Green4	Green4	0 139 0	#008B00
Chartreuse1	Chartreuse1	127 255 0	#7FFF00
Chartreuse2	Chartreuse2	118 238 0	#76EE00
Chartreuse3	Chartreuse3	102 205 0	#66CD00
Chartreuse4	Chartreuse4	69 139 0	#458B00
OliveDrab1	OliveDrab1	192 255 62	#C0FF3E
OliveDrab2	OliveDrab2	179 238 58	#B3EE3A
OliveDrab3	OliveDrab3	154 205 50	#9ACD32
OliveDrab4	OliveDrab4	105 139 34	#698B22
DarkOliveGreen1	DarkOliveGreen1	202 255 112	#CAFF70
DarkOliveGreen2	DarkOliveGreen2	188 238 104	#BCEE68
DarkOliveGreen3	DarkOliveGreen3	162 205 90	#A2CD5A
DarkOliveGreen4	DarkOliveGreen4	110 139 61	#6E8B3D
Khaki1	Khaki1	255 246 143	#FFF68F
Khaki2	Khaki2	238 230 133	#EEE685
Khaki3	Khaki3	205 198 115	#CDC673
Khaki4	Khaki4	139 134 78	#8B864E
LightGoldenrod1	LightGoldenrod1	255 236 139	#FFEC8B
LightGoldenrod2	LightGoldenrod2	238 220 130	#EEDC82
LightGoldenrod3	LightGoldenrod3	205 190 112	#CDBE70
LightGoldenrod4	LightGoldenrod4	139 129 76	#8B814C
LightYellow1	LightYellow1	255 255 224	#FFFFE0
LightYellow2	LightYellow2	238 238 209	#EEEED1
LightYellow3	LightYellow3	205 205 180	#CDCDB4
LightYellow4	LightYellow4	139 139 122	#8B8B7A
Yellow1	Yellow1	255 255 0	#FFFF00
Yellow2	Yellow2	238 238 0	#EEEE00
Yellow3	Yellow3	205 205 0	#CDCD00
Yellow4	Yellow4	139 139 0	#8B8B00
Gold1	Gold1	255 215 0	#FFD700
Gold2	Gold2	238 201 0	#EEC900
Gold3	Gold3	205 173 0	#CDAD00
Gold4	Gold4	139 117 0	#8B7500
Goldenrod1	Goldenrod1	255 193 37	#FFC125
Goldenrod2	Goldenrod2	238 180 34	#EEB422
Goldenrod3	Goldenrod3	205 155 29	#CD9B1D
Goldenrod4	Goldenrod4	139 105 20	#8B6914
DarkGoldenrod1	DarkGoldenrod1	255 185 15	#FFB90F
DarkGoldenrod2	DarkGoldenrod2	238 173 14	#EEAD0E
DarkGoldenrod3	DarkGoldenrod3	205 149 12	#CD950C
DarkGoldenrod4	DarkGoldenrod4	139 101 8	#8B658B
RosyBrown1	RosyBrown1	255 193 193	#FFC1C1
RosyBrown2	RosyBrown2	238 180 180	#EEB4B4
RosyBrown3	RosyBrown3	205 155 155	#CD9B9B
RosyBrown4	RosyBrown4	139 105 105	#8B6969
IndianRed1	IndianRed1	255 106 106	#FF6A6A
IndianRed2	IndianRed2	238 99 99	#EE6363
IndianRed3	IndianRed3	205 85 85	#CD5555
IndianRed4	IndianRed4	139 58 58	#8B3A3A
Sienna1	Sienna1	255 130 71	#FF8247
Sienna2	Sienna2	238 121 66	#EE7942
Sienna3	Sienna3	205 104 57	#CD6839
Sienna4	Sienna4	139 71 38	#8B4726
Burlywood1	Burlywood1	255 211 155	#FFD39B
Burlywood2	Burlywood2	238 197 145	#EEC591
Burlywood3	Burlywood3	205 170 125	#CDAA7D
Burlywood4	Burlywood4	139 115 85	#8B7355
Wheat1	Wheat1	255 231 186	#FFE7BA
Wheat2	Wheat2	238 216 174	#EED8AE
Wheat3	Wheat3	205 186 150	#CDBA96
Wheat4	Wheat4	139 126 102	#8B7E66
Tan1	Tan1	255 165 79	#FFA54F
Tan2	Tan2	238 154 73	#EE9A49
Tan3	Tan3	205 133 63	#CD853F
Tan4	Tan4	139 90 43	#8B5A2B
Chocolate1	Chocolate1	255 127 36	#FF7F24
Chocolate2	Chocolate2	238 118 33	#EE7621
Chocolate3	Chocolate3	205 102 29	#CD661D
Chocolate4	Chocolate4	139 69 19	#8B4513
Firebrick1	Firebrick1	255 48 48	#FF3030
Firebrick2	Firebrick2	238 44 44	#EE2C2C
Firebrick3	Firebrick3	205 38 38	#CD2626
Firebrick4	Firebrick4	139 26 26	#8B1A1A
Brown1	Brown1	255 64 64	#FF4040
Brown2	Brown2	238 59 59	#EE3B3B
Brown3	Brown3	205 51 51	#CD3333
Brown4	Brown4	139 35 35	#8B2323
Salmon1	Salmon1	255 140 105	#FF8C69
Salmon2	Salmon2	238 130 98	#EE8262
Salmon3	Salmon3	205 112 84	#CD7054
Salmon4	Salmon4	139 76 57	#8B4C39
LightSalmon1	LightSalmon1	255 160 122	#FFA07A
LightSalmon2	LightSalmon2	238 149 114	#EE9572
LightSalmon3	LightSalmon3	205 129 98	#CD8162
LightSalmon4	LightSalmon4	139 87 66	#8B5742
Orange1	Orange1	255 165 0	#FFA500
Orange2	Orange2	238 154 0	#EE9A00
Orange3	Orange3	205 133 0	#CD8500
Orange4	Orange4	139 90 0	#8B5A00
DarkOrange1	DarkOrange1	255 127 0	#FF7F00
DarkOrange2	DarkOrange2	238 118 0	#EE7600
DarkOrange3	DarkOrange3	205 102 0	#CD6600
DarkOrange4	DarkOrange4	139 69 0	#8B4500
Coral1	Coral1	255 114 86	#FF7256
Coral2	Coral2	238 106 80	#EE6A50
Coral3	Coral3	205 91 69	#CD5B45
Coral4	Coral4	139 62 47	#8B3E2F
Tomato1	Tomato1	255 99 71	#FF6347
Tomato2	Tomato2	238 92 66	#EE5C42
Tomato3	Tomato3	205 79 57	#CD4F39
Tomato4	Tomato4	139 54 38	#8B3626
OrangeRed1	OrangeRed1	255 69 0	#FF4500
OrangeRed2	OrangeRed2	238 64 0	#EE4000
OrangeRed3	OrangeRed3	205 55 0	#CD3700
OrangeRed4	OrangeRed4	139 37 0	#8B2500
Red1	Red1	255 0 0	#FF0000
Red2	Red2	238 0 0	#EE0000
Red3	Red3	205 0 0	#CD0000
Red4	Red4	139 0 0	#8B0000
DeepPink1	DeepPink1	255 20 147	#FF1493
DeepPink2	DeepPink2	238 18 137	#EE1289
DeepPink3	DeepPink3	205 16 118	#CD1076
DeepPink4	DeepPink4	139 10 80	#8B0A50
HotPink1	HotPink1	255 110 180	#FF6EB4
HotPink2	HotPink2	238 106 167	#EE6AA7
HotPink3	HotPink3	205 96 144	#CD6090
HotPink4	HotPink4	139 58 98	#8B3A62
Pink1	Pink1	255 181 197	#FFB5C5
Pink2	Pink2	238 169 184	#EEA9B8
Pink3	Pink3	205 145 158	#CD919E
Pink4	Pink4	139 99 108	#8B636C
LightPink1	LightPink1	255 174 185	#FFAEB9
LightPink2	LightPink2	238 162 173	#EEA2AD
LightPink3	LightPink3	205 140 149	#CD8C95
LightPink4	LightPink4	139 95 101	#8B5F65
PaleVioletRed1	PaleVioletRed1	255 130 171	#FF82AB
PaleVioletRed2	PaleVioletRed2	238 121 159	#EE799F
PaleVioletRed3	PaleVioletRed3	205 104 137	#CD6889
PaleVioletRed4	PaleVioletRed4	139 71 93	#8B475D
Maroon1	Maroon1	255 52 179	#FF34B3
Maroon2	Maroon2	238 48 167	#EE30A7
Maroon3	Maroon3	205 41 144	#CD2990
Maroon4	Maroon4	139 28 98	#8B1C62
VioletRed1	VioletRed1	255 62 150	#FF3E96
VioletRed2	VioletRed2	238 58 140	#EE3A8C
VioletRed3	VioletRed3	205 50 120	#CD3278
VioletRed4	VioletRed4	139 34 82	#8B2252
Magenta1	Magenta1	255 0 255	#FF00FF
Magenta2	Magenta2	238 0 238	#EE00EE
Magenta3	Magenta3	205 0 205	#CD00CD
Magenta4	Magenta4	139 0 139	#8B008B
Orchid1	Orchid1	255 131 250	#FF83FA
Orchid2	Orchid2	238 122 233	#EE7AE9
Orchid3	Orchid3	205 105 201	#CD69C9
Orchid4	Orchid4	139 71 137	#8B4789
Plum1	Plum1	255 187 255	#FFBBFF
Plum2	Plum2	238 174 238	#EEAEEE
Plum3	Plum3	205 150 205	#CD96CD
Plum4	Plum4	139 102 139	#8B668B
MediumOrchid1	MediumOrchid1	224 102 255	#E066FF
MediumOrchid2	MediumOrchid2	209 95 238	#D15FEE
MediumOrchid3	MediumOrchid3	180 82 205	#B452CD
MediumOrchid4	MediumOrchid4	122 55 139	#7A378B
DarkOrchid1	DarkOrchid1	191 62 255	#BF3EFF
DarkOrchid2	DarkOrchid2	178 58 238	#B23AEE
DarkOrchid3	DarkOrchid3	154 50 205	#9A32CD
DarkOrchid4	DarkOrchid4	104 34 139	#68228B
Purple1	Purple1	155 48 255	#9B30FF
Purple2	Purple2	145 44 238	#912CEE
Purple3	Purple3	125 38 205	#7D26CD
Purple4	Purple4	85 26 139	#551A8B
MediumPurple1	MediumPurple1	171 130 255	#AB82FF
MediumPurple2	MediumPurple2	159 121 238	#9F79EE
MediumPurple3	MediumPurple3	137 104 205	#8968CD
MediumPurple4	MediumPurple4	93 71 139	#5D478B
Thistle1	Thistle1	255 225 255	#FFE1FF
Thistle2	Thistle2	238 210 238	#EED2EE
Thistle3	Thistle3	205 181 205	#CDB5CD
Thistle4	Thistle4	139 123 139	#8B7B8B
grey11	grey11	28 28 28	#1C1C1C
grey21	grey21	54 54 54	#363636
grey31	grey31	79 79 79	#4F4F4F
grey41	grey41	105 105 105	#696969
grey51	grey51	130 130 130	#828282
grey61	grey61	156 156 156	#9C9C9C
grey71	grey71	181 181 181	#B5B5B5
gray81	gray81	207 207 207	#CFCFCF
gray91	gray91	232 232 232	#E8E8E8
DarkGrey	DarkGrey	169 169 169	#A9A9A9
DarkBlue	DarkBlue	0 0 139	#00008B
DarkCyan	DarkCyan	0 139 139	#008B8B
DarkMagenta	DarkMagenta	139 0 139	#8B008B
DarkRed	DarkRed	139 0 0	#8B0000
LightGreen	LightGreen	144 238 144	#90EE90

http://35rus.ru/htmlcolor.php

Таблица «безопасных» цветов (студия А. Лебедева)

255.255.204	255.255.153	255.255.102	255.255.51	255.255.0	204.204.0
FFFFCC	FFFF99	FFFF66	FFFF33	FFFF00	CCCC00

255.204.102	255.204.0	255.204.51	204.153.0	204.153.51	153.102.0
FFCC66	FFCC00	FFCC33	CC9900	CC9933	996600

255.153.0	255.153.51	204.153.102	204.102.0	153.102.51	102.51.0
FF9900	FF9933	CC9966	CC6600	996633	663300

255.204.153	255.153.102	255.102.0	204.102.51	153.51.0	102.0.0
FFCC99	FF9966	FF6600	CC6633	993300	660000

255.102.51	204.51.0	255.51.0	255.0.0	204.0.0	153.0.0
FF6633	CC3300	FF3300	FF0000	CC0000	990000

255.204.204	255.153.153	255.102.102	255.51.51	255.0.51	204.0.51
FFCCCC	FF9999	FF6666	FF3333	FF0033	CC0033

204.153.153	204.102.102	204.51.51	153.51.51	153.0.51	51.0.0
CC9999	CC6666	CC3333	993333	990033	330000

255.102.153	255.51.102	255.0.102	204.51.102	153.102.102	102.51.51
FF6699	FF3366	FF0066	CC3366	996666	663333

255.153.204	255.51.153	255.0.153	204.0.102	153.51.102	102.0.51
FF99CC	FF3399	FF0099	CC0066	993366	660033

255.102.204	255.0.204	255.51.204	204.102.153	204.0.153	153.0.102
FF66CC	FF00CC	FF33CC	CC6699	CC0099	990066

255.204.255	255.153.255	255.102.255	255.51.255	255.0.255	204.51.153
FFCCFF	FF99FF	FF66FF	FF33FF	FF00FF	CC3399

204.153.204	204.102.204	204.0.204	204.51.204	153.0.153	153.51.153
CC99CC	CC66CC	CC00CC	CC33CC	990099	993399

204.102.255	204.51.255	204.0.255	153.0.204	153.102.153	102.0.102
CC66FF	CC33FF	CC00FF	9900CC	996699	660066

204.153.255	153.51.204	153.51.255	153.0.255	102.0.153	102.51.102
CC99FF	9933CC	9933FF	9900FF	660099	663366

153.102.204	153.102.255	102.0.204	102.51.204	102.51.153	51.0.51
9966CC	9966FF	6600CC	6633CC	663399	330033

204.204.255	153.153.255	102.51.255	102.0.255	51.0.153	51.0.102
CCCCFF	9999FF	6633FF	6600FF	330099	330066

153.153.204	102.102.255	102.102.204	102.102.153	51.51.153	51.51.102
9999CC	6666FF	6666CC	666699	333399	333366

51.51.255	51.0.255	51.0.204	51.51.204	0.0.153	0.0.102
3333FF	3300FF	3300CC	3333CC	000099	000066

102.153.255	51.102.255	0.0.255	0.0.204	0.51.204	0.0.51
6699FF	3366FF	0000FF	0000CC	0033CC	000033

0.102.255	0.102.204	51.102.204	0.51.255	0.51.153	0.51.102
0066FF	0066CC	3366CC	0033FF	003399	003366

153.204.255	51.153.255	0.153.255	102.153.204	51.102.153	0.102.153
99CCFF	3399FF	0099FF	6699CC	336699	006699

102.204.255	51.204.255	0.204.255	51.153.204	0.153.204	0.51.51
66CCFF	33CCFF	00CCFF	3399CC	0099CC	003333

153.204.204	102.204.204	51.153.153	102.153.153	0.102.102	51.102.102
99CCCC	66CCCC	339999	669999	006666	336666

204.255.255	153.255.255	102.255.255	51.255.255	0.255.255	0.204.204
CCFFFF	99FFFF	66FFFF	33FFFF	00FFFF	00CCCC

153.255.204	102.255.204	51.255.204	0.255.204	51.204.204	0.153.153
99FFCC	66FFCC	33FFCC	00FFCC	33CCCC	009999

102.204.153	51.204.153	0.204.153	51.153.102	0.153.102	0.102.51
66CC99	33CC99	00CC99	339966	009966	006633

102.255.153	51.255.153	0.255.153	51.204.102	0.204.102	0.153.51
66FF99	33FF99	00FF99	33CC66	00CC66	009933

153.255.153	102.255.102	51.255.102	0.255.102	51.153.51	0.102.0
99FF99	66FF66	33FF66	00FF66	339933	006600

204.255.204	153.204.153	102.204.102	102.153.102	51.102.51	0.51.0
CCFFCC	99CC99	66CC66	669966	336633	003300

51.255.51	0.255.51	0.255.0	0.204.0	51.204.51	0.204.51
33FF33	00FF33	00FF00	00CC00	33CC33	00CC33

102.255.0	102.255.51	51.255.0	51.204.0	51.153.0	0.153.0
66FF00	66FF33	33FF00	33CC00	339900	009900

204.255.153	153.255.102	102.204.0	102.204.51	102.153.51	51.102.0
CCFF99	99FF66	66CC00	66CC33	669933	336600

153.255.0	153.255.51	153.204.102	153.204.0	153.204.51	102.153.0
99FF00	99FF33	99CC66	99CC00	99CC33	669900

204.255.102	204.255.0	204.255.51	204.204.153	102.102.51	51.51.0
CCFF66	CCFF00	CCFF33	CCCC99	666633	333300

204.204.102	204.204.51	153.153.51	153.153.102	153.153.0	102.102.0
CCCC66	CCCC33	999966	999933	999900	666600

255.255.255	204.204.204	153.153.153	102.102.102	51.51.51	0.0.0
FFFFFF	CCCCCC	999999	666666	333333	000000

Программы для работы с цветом

Run Pixie – программа для анализа цвета. Просто наведите на необходимый объект и узнайте какого он цвета.

Внимание! Статья будет постоянно обновляться, поэтому подписывайтесь на обновления!

с/у УтБ

Приветствую вас. Хочу представить Вашему вниманию cms для сайта спортивных клубов, написанной на cakePHP.

Меня радует, что с каждым днем все больше сайтов использует Html5. C html5 приходят новые возможности, доступные для веб-разработчика, позволяет использовать более чистую и мощную размет, которая по сути благо для пользователей. Хоть html5 еще на стадии развития и мы на пороге очень интересных введений, но уже сегодня Вы можете оценить 27 отличных сайтов на html5.

Иногда прочитав интересный материал, Вы с удовольствием хотите поделиться с друзьями прочитанным, так? И когда на сайте отсутствуют социальные кнопки для комфортной отправки ценной информации – это плохо. Ко всему сказанному, надо добавить, что социальные сети очень неплохой источник трафика, если подходить с умом

Ранее я уже рассказывал, как добавить социальные кнопки часть 1 и часть 2, в который мы использовали css спрайты. Сегодня же поговорим о сервисах и плагинах, облегчающие нам жизнь.

Пожалуй, начнем.

Social Media Widget

Social Media Widget – плагин wordpress имеющий 3 варианта размеров иконок  (16, 32, 64) социальных сетей, 4 анимации и 4 разных стиля.

Плагин поддерживает следующие соцсети:

• Facebook
• Google+
• Twitter
• MySpace
• FriendFeed
• Orkut
• Hyves
• LinkedIn
• aSmallWorld
• Flickr
• Picasa Web Albums
• YouTube
• Skype
• Digg
• Reddit
• Delicious
• StumbleUpon
• Tumblr
• Buzz
• Google Talk
• Vimeo
• Blogger
• WordPress
• Yelp
• Last.fm
• Pandora
• UStream
• IMDb
• Hulu
• Flixter
• FourSquare
• Meetup
• Tungle.me
• PlanCast
• SlideShare
• DeviantArt
• iTunes Ping
• Live365
• Digital Tunes
• Soundcloud
• BandCamp
• Etsy
• Better Business Bureau
• Merchant Circle
• Ebay
• Steam
• RSS
• E-mail

Думаю, заметен ориентир на западные сайты.

Easy buttons

Easy buttons – еще один плагин социальных сетей для wordpress. Особенности:

• 3 стиля кнопок
• Выбор позиции Сверху (top) или снизу (bottom)
• Социальные кнопки на выбор (некоторые можно скрыть)
• Горизонтальная или вертикальная позиция
• Атрибут Rel=«nofollow» в ссылках

Пример можно посмотреть на странице автора справа вверху плавающая панелька.

Share this

Share this – сервис публикации ваших статей. Имеется плагин для wordpress, joomla, друпал.

Addthis

Addthis -  сервис социальных кнопок для wordpress, joomla и других платформ. Чем то похоже с share this.

Social Share Buttons for WordPress

Social Share Buttons for WordPress – плагин социальные кнопки для wordpress имеет простые настройки, 9 соцсетей, 2 языка (русский и английский)

Поделиться от Яндекс

Поделиться от Яндекс – кнопка поделиться с друзьями от Яндекс, включает в себя следующие социальные сети:

• Я.ру
• Вконтакте
• Facebook
• Twitter
• Одноклассники
• МойМир
• Livejournal
• Friendfeed
• Мой круг

Share42.com

Share42.com – бесплатные сервис, который генерирует скрипт с выбранными Вами иконками социальных сетей и размерами. Очень

удобный и простой сервис в использовании: просто кликайте на необходимые иконки и размер. Инструкция по установке имеется на сайте. Советую если Вы хотите простой и удобный скрипт публикации ваших статей в социальных сетях.

Надеюсь, данные сервисы были Вам полезны. Используйте их с умом, обязательно добавляйте социальные кнопки.

Всех девушек с наступающим 8 марта! Будьте также прекрасны как и весна!

Постовой:Любите игры онлайн? Попробуйте casino онлайн.

На десерт сегодня презентация страны, в которой я живу