Оформляем часы

В продолжение предыдущей статьи, посмотрим как можно оформить часы средствами редактора PIXLI


Фиксируем часы в левом верхнем углу


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

Для фиксации блока включим расширенные настройки

Выровняем блок по левому краю

И зафиксируем

Добавим в блок код HTML

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

Стилизация часов


Начнем с размеров блока и часов. Для визуализации увеличим размер цифр и подгоним размер блока под них. Размер текста в блоке настраивается в правой панели.

А размер блока изменяется просто – перетаскивайте границу, чтобы увеличить или уменьшить.
Подберем цвета. Лучше всего пользоваться готовым сервисом. Например, ColorScheme.ru.

Очень удобно перемещать ползунок по цветовому кругу и сразу видеть, как будут сочетаться цвета. Можно выбрать пункт «Триада» и подобрать и цвет тени.

Перейдем в список цветов и скопируем значения.

Вставить их надо в цвет фона, цвет текста и цвет тени на правой панели редактора.

Часы работают.

Разместив часы в три блока, можно получить стилизацию электронных часов.

Настраиваем блоки:
  • Выравнивание по левому краю (по правому, если часы будут справа)
  • Margin-left для каждого 15px
  • Радиус закругления 15px
В код тоже придется вносить изменения. Вместо одной команды вывода часов строкой, мы будем выводить каждое значение отдельно. Для этого надо будет узнать ID каждого блока:
  • наведите на блок указатель мыши;
  • нажмите правую кнопку;
  • выберите команду «Скопировать селектор в буфер».
Добавьте после блоков HTML-код и скопируйте в него скрипт.
<script>
s=window.setInterval(function(){
data=new Date()
hours=data.getHours()
if (hours<10) hours="0"+hours
minutes=data.getMinutes()
if (minutes<10) minutes="0"+minutes
seconds=data.getSeconds()
if (seconds<10) seconds="0"+seconds
document.getElementById("id551d8845-3189-0eb7-c830-702698689f1c").innerHTML=hours
document.getElementById("id0742883b-639c-759c-b389-b24a9abb46ef").innerHTML=minutes
document.getElementById("id618060af-bd24-a0a0-58f2-6bb5989d9c33").innerHTML=seconds
},1000)
</script>
Каждое значение — часы, минуты, секунды – выводится отдельно и получается эффекти электронных часов.
Добавьте в этот же HTML-код стиль для текста часов.
<style>
  #id551d8845-3189-0eb7-c830-702698689f1c, #id0742883b-639c-759c-b389-b24a9abb46ef,#id618060af-bd24-a0a0-58f2-6bb5989d9c33 {
    text-shadow: 3px 1px 1px #00FF00;
  }
</style>
У свойства text-shadow первое значение – сдвиг по горизонтали, второе – по вертикали, третье – радиус размытия, четвертое – цвет. Настраивая эти значения, можно получить эффектный текст.
27 2017, 13:21    Ivan Web-дизайн 0    4 0

comments (0)

    ticket_comment_err_no_auth