<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

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

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

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

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Создание прелоадера для сайта на CSS

Создание прелоадера для сайта на CSS

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

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

Сейчас мы создадим классический вращающийся прелоадер на чистом CSS с применением свойств анимации.

Создание прелоадера для сайта на CSS.

Создадим простенький HTML-код, состоящий из одного пустого тега div с классом loader, не считая конечно тега body.

<div class="loader"></div>

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


Стили для класса loader

Сначала нарисуем квадрат серого цвета сплошной линией толщиной в 2 пикселя:

.loader {
    border: 2px solid #eae4ea;
}

с шириной и высотой по 150 пикселей:

.loader {
    width: 150px;
    height: 150px;
}
Создание прелоадера для сайта на CSS.

Всего одной строчкой кода квадрат стал кругом:

border-radius: 50%;
Создание прелоадера для сайта на CSS.

У круга создадим полупрозрачную тень:

box-shadow: 0 -2px 2px rgba(0,0,0,.2);

А нижнюю рамку покрасим в зеленый цвет:

border-bottom: 2px solid #6ddfca;

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

animation: loader 3s linear infinite;
Создание прелоадера для сайта на CSS.

Псевдоэлементы :before и :after

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

Рисуем внутренний псевдокруг before внутри реального круга, в диаметре на 20 пикселей (10px+10px) меньше

.loader:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
}

c розовой нижней рамкой и крутится он будет быстрее, чем главный круг.

.loader:before {
    border-bottom: 2px solid #d355be;
    animation: loader 2s linear infinite;
}
Создание прелоадера для сайта на CSS.

Теперь дело за after кругом, он хоть и самый маленький, но зато самый шустрый, з 1 секунду сделает полный поворот и полосочка у него красивая - фиолетовая.

.loader:after {
    border-bottom: 2px solid #8c23ec;
    animation: loader 1s linear infinite;
}

Отступы after круга от основного круга - 22 пикселя.

top: 22px;
left: 22px;
bottom: 22px;
right: 22px;
Создание прелоадера для сайта на CSS.

Анимация по кадрам @keyframes

Пришло время запускать наши круги, делает это свойство transform: rotate - что значит поворот. 0% - старт, а 100% - финиш. Каждый круг повернется на 360 градусов.

@keyframes loader
{
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(360deg);

  }
}

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


HTML/CSS код создания прелоада:

See the Pen Animation preloader css by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

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