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

В продолжение предыдущей статьи, посмотрим как можно оформить часы средствами редактора 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 первое значение – сдвиг по горизонтали, второе – по вертикали, третье – радиус размытия, четвертое – цвет. Настраивая эти значения, можно получить эффектный текст.