Анимированный цветовой фон для страниц блога Blogspot



Анимированный фон для страниц, заголовка, футера и боковых панелей


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

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

Идем в админ панель, нажимаем шаблон-делаем резервную копию шаблона-изменить шаблон. Нажимаем на самую первую стрелку, и в самом начале ищем строку

/* Content
----------------------------------------------- */
body {
СЮДА ВСТАВЛЯЕМ КОД
 font: $(body.font);
  color: $(body.text.color);
                  background: $(body.background);      УДАЛИТЬ

Скопируйте код ниже

width:100%;
animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
     -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
      -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
        -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
}

@keyframes colorBackground {
      0% { background-color: #f8f8ff; color: #f8f8ff; }
     20% { background-color: #96e8a4; color: #96e8a4; }
     40% { background-color: #ffd700; color: #ffd700; }
     60% { background-color: #ffefdb; color: #ffefdb; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #f8f8ff; color: #f8f8ff; }
}
@-webkit-keyframes colorBackground {
      0% { background-color: #f8f8ff; color: #f8f8ff; }
     20% { background-color: #96e8a4; color: #96e8a4; }
     40% { background-color: #ffd700; color: #ffd700; }
     60% { background-color: #ffefdb; color: #ffefdb; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #f8f8ff; color: #f8f8ff; }
}
@-moz-keyframes colorBackground {
      0% { background-color: #f8f8ff; color: #f8f8ff; }
     20% { background-color: #96e8a4; color: #96e8a4; }
     40% { background-color: #ffd700; color: #ffd700; }
     60% { background-color: #ffefdb; color: #ffefdb; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #f8f8ff; color: #f8f8ff; }
}
@-o-keyframes colorBackground {
      0% { background-color: #f8f8ff; color: #f8f8ff; }
     20% { background-color: #96e8a4; color: #96e8a4; }
     40% { background-color: #ffd700; color: #ffd700; }
     60% { background-color: #ffefdb; color: #ffefdb; }
     80% { background-color: #0ed4c8; color: #0ed4c8; }
    100% { background-color: #f8f8ff; color: #f8f8ff; }
}



Цветовые коды измените на свои, обратите внимание, что цвета 0% и 100% должны быть одинаковы для плавного перехода, иначе будет скачок.

Таким образом можно оформить заголовок блога. В шаблоне находим строку

/* Header
----------------------------------------------- */
.header-outer {
СЮДА ВСТАВИТЬ КОД
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
  _background-image: none;   УДАЛИТЬ

Для оформления заголовка в начало кода можно добавить width:60%; (уменьшить ширину); border:2px dotted #029d74; (размер, форму и цвет границ рамки); border-radius:45px; (радиус закругления углов).


Для боковой панели ищем в шаблоне такую строку

.sidebar .widget {
СЮДА ВСТАВЛЯЕМ КОД
  font: $(widget.font);
  color: $(widget.text.color);
}

Пример оформления заголовка и боковой панели можно посмотреть в тестовом блоге.


Для сообщений так же можно оформить таким фоном. Хотя это и лишнее, но я напишу куда вставлять код. Ищем в шаблоне

/* Posts
----------------------------------------------- */
ДАЛЬШЕ МОЖЕТ БЫТЬ ЕЩЕ КОД
.post-outer {
СЮДА ВСТАВИТЬ КОД
  padding: 0;
  margin-bottom: 1em;
  background-color: transparent;
                                          border: none;                        УДАЛИТЬ


В каждом шаблоне код прописан по разному. Если найти будет тяжело, выше строки ]]></b:skin> вставьте .post-outer { дальше код.

И остался у нас нижний колонтитул блога. Его я для примера оформила анимацией изображений. Слетайте в демо блог, посмотрите что получилось. В шаблоне ищем 


/* Footer
----------------------------------------------- */
.footer-outer {
СЮДА ВСТАВИТЬ КОД
  color:$(footer.text.color);
                 background: $(footer.background); УДАЛИТЬ

У Вас может быть немного другой код, но главное найти .footer-outer { и ниже вставить скопированнй код

border:2px dotted #029d74;
border-radius:15px;
width:100%;
animation: imageBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
     -webkit-animation: imageBackground 20s infinite; /* Chrome, Safari 5+ */
      -moz-animation: imageBackground 20s infinite; /* Firefox 5-15 */
        -o-animation: imageBackground 20s infinite; /* Opera 12.00 */
}
@keyframes imageBackground {
     0% { background-image: url( адрес 1); image: url(адрес 1); }
     20% { background-image: url(адрес 2); image: url(адрес 2); }
     40% { background-image: url(адрес 3); image: url(адрес 3); }
     60% { background-image: url(адрес 4); image: url(адрес 4); }
     80% { background-image: url(адрес 5); image: url(адрес 5); }
    100% { background-image:url(адрес 1); image: url(адрес 1);}
}
@-webkit-keyframes imageBackground {
     0% { background-image: url( адрес 1); image: url(адрес 1); }
     20% { background-image: url(адрес 2); image: url(адрес 2); }
     40% { background-image: url(адрес 3); image: url(адрес 3); }
     60% { background-image: url(адрес 4); image: url(адрес 4); }
     80% { background-image: url(адрес 5); image: url(адрес 5); }
    100% { background-image:url(адрес 1); image: url(адрес 1);}
}
@-moz-keyframes imageBackground {
      0% { background-image: url( адрес 1); image: url(адрес 1);}
     20% { background-image: url(адрес 2); image: url(адрес 2); }
     40% { background-image: url(адрес 3); image: url(адрес 3); }
     60% { background-image: url(адрес 4); image: url(адрес 4); }
     80% { background-image: url(адрес 5); image: url(адрес 5); }
    100%{ background-image:url(адрес 1); image: url(адрес 1); }
}   
@-o-keyframes imageBackground {
      0%{ background-image: url( адрес 1); image: url(адрес 1); }
     20% { background-image: url(адрес 2); image: url(адрес 2); }
     40% { background-image: url(адрес 3); image: url(адрес 3); }
     60% { background-image: url(адрес 4); image: url(адрес 4); }
     80% { background-image: url(адрес 5); image: url(адрес 5); }
    100%{ background-image:url(адрес 1); image: url(адрес 1); }
}     


В этом коде так же обратите внимание, адреса 0% и 100% должны быть одинаковы. Будьте внимательны, в каждой позиции keyframes; -webkit-keyframes ; -moz-keyframes; -o-keyframes url адреса изображений должны совпадать.

Анимацией изображений можно оформить заголовок, сделать такое себе слайд-шоу, но только чтобы не сильно резало глаза при открытии блога. Я надеюсь, что Вы найдете применение информации в этом сообщении.

Код в шаблоне можно вставить  в разделе CSS выше строки ]]></b:skin>:

body { дальше код для фона блога
.header-outer { код для заголовка
.sidebar .widget {код для боковой панели
.post-outer {код для постов
.footer-outer {код для нижнего колонтитула блога

Но то, что у меня выделено, надо удалить, чтобы не было наложения цвета фона.

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

Можно почитать анимированные красивые заголовки сообщений; как изменить внешний фон блога своим изображением; как выровнять текст и изменить форму заголовка в блогах Blogspot;



Автор статьи ✎ Olga Protasova Выпуск ✹ 8/12/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *