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

12.01.2013

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

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

  1. .paginaposts { /* каждого прямоугольника */
        border: 1px solid #FF00CC;
        float: left;
        height: 50px;
        margin: 1px;
        padding: 5px;
        width: 230px;
        background: #faebee;
      }
  2. .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;
      }
Для своего блога я выбрала цвета:

  1. 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; цвет ярко-фиолетовый:
Цвета я подбирала в Яндексе. В статье Таблица кодов цвета я приводила таблицу с кодами разных цветов. Но на разных мониторах цвета выглядят по-разному и не всегда соответствуют картинке. Поэтому лучше использовать самые распространенные и проверенные веб-цвета.

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

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

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

    3 комментария:

    1. ВАУ! Спасибо огромнющее!

      ОтветитьУдалить
    2. как сделать чтобы верхние вкладки меняли цвет при наведении курсора?

      ОтветитьУдалить

    Kwork.ru - услуги фрилансеров от 500 руб.

    Загляните и на другие страницы ^