<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру

PHP и MySQL с Нуля до Гуру

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

Также почти к каждому уроку идут упражнения для закрепления материала.

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

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

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

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

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

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

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

Индикатор прогресса чтения. Разметка

Индикатор прогресса чтения. Разметка

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

Для начала взглянем на разметку:

  <progress value="0"></progress>

Крайне важно, явным образом определить атрибут value. В противном случае, индикатор прогресса будет в неопределенном состоянии, для которого нам будет необходимо определить CSS стили, а мы этого не хотим. Пользователь начинает чтение контента сверху, начальное значение, установленное в разметке для атрибута value, является нулем. Значением по умолчанию для атрибута max является 1.

Для определения правильного значения для атрибута max, нам необходимо вычесть высоту окна из высоты документа. Сделать это можно только через JavaScript, но об этом чуть позже.

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

 <body>
    <progress value="0"></progress>

    <!--------------------------------
    Весь остальной код страницы
    --------------------------------->
 </body>

Стилизация индикатора

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

  progress {

    /* Позиционирование */

    position: fixed;
    left: 0;
    top: 0;

    /* Размеры */
    width: 100%;
    height: 5px;

    /* скрываем индикатор */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* избавляемся от границ */
    border: none;

    /* прозрачный фон */
    background-color: transparent;

    /* цвет индикатора */
    color: red;

  }

Для Blink/Webkit/Firefox нам необходимо использовать вендорские псевдо элементы для стилизации значения внутри индикатора. Следующий код будет использоваться для добавления цвета.

  progress::-webkit-progress-bar {
    background-color: transparent;
  }

  progress::-webkit-progress-value {
    background-color: red;
  }

  progress::-moz-progress-bar {
    background-color: red;
  }

Итак, в этой небольшой статье о индикаторе прогресса чтения мы рассмотрели базовую разметку, а в следующей статье мы разберем как утроен JavaScript код данного индикатора.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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