Я сама блоггер: Подбираем цвета для блога

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

Основные настройки цветов будем делать вот в этих фрагментах кода:

.paginaposts { /* каждого прямоугольника */
border: 1px solid #FF00CC;
float: left;
height: 50px;
margin: 1px;
padding: 5px;
width: 230px;
background: #faebee;
}
.paginaposts:hover { /* эффект при наведении мышки */
background-image: -moz-linear-gradient(100% 100% 90deg, #fbcbf0, #fbcbf0);
background-image: -webkit-gradient(linear, left bottom, left top, from(#fbcbf0), to(#fbcbf0));
filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#fbcbf0', EndColorStr='#fbcbf0');
border: 1px solid #CC00CC;
}

Для своего блога я выбрала цвета:

border #FF00CC (ярко-розовый) - Это цвет рамки прямоугольника:

и background: #faebee (розовато-лавандовый) - фон прямоугольника:

2. Во втором блоке кода настроим цвета для эффекта при наведении мышкой.

Здесь фон прямоугольника, изменяющийся при наведении курсора прописан в строках:

background-image: -moz-linear-gradient(100% 100% 90deg, #fbcbf0, #fbcbf0);
background-image: -webkit-gradient(linear, left bottom, left top, from(#fbcbf0), to(#fbcbf0));
filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#fbcbf0', EndColorStr='#fbcbf0');

Для блога "Я сама блоггер" взяла цвет #fbcbf0 (чертополоховый, по определению Яндекса):

Повторяется код цвета 6 раз.

А для рамки в строке border: 1px solid #CC00CC; цвет ярко-фиолетовый:

Цвета я подбирала в Яндексе. В статье Таблица кодов цвета я приводила таблицу с кодами разных цветов. Но на разных мониторах цвета выглядят по-разному и не всегда соответствуют картинке. Поэтому лучше использовать самые распространенные и проверенные веб-цвета.

Увы, сервис от Яндекса сейчас не работает.

Наберите в поисковой строке Яндекса "цвета" и сразу под ней увидите цветовую палитру в виде круга. Здесь можно передвигать маленький кружочек курсором или просто кликнуть по изображению цвета, а потом скопировать код:

И вставлять его уже в нужное место. Только нужно быть аккуратными, чтобы не стереть в коде кавычки, пробелы, запятые и пр. Так как код работать не будет. Лучше все изменения делать в "Блокноте", а потом пробовать в действии.

Еще можно воспользоваться онлайн-генераторами цветов (источник).

Таким:

Или таким:

ИЛИ:

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

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