Создаем новогоднюю ёлку-таймер при помощи CSS3

[@IkaR49]

Интересно, но меня немного смутило моргающее двоеточие. Цвет становится таким же, как и фон, но тень от элемента всё равно остаётся, так что двоеточие видно. Думаю, было бы симпатичнее тень от элемента тоже скрывать.

[@hwsun]

Исправил.

[@krovatti]

У меня до сих пор мигает.

[@hwsun]

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

[@fluke]

Двоеточие моргает не синхронно с ходом секунд…
FF 8.0 & Chromium 16.0.912.63 at Gentoo x86_64

[@Fedcomp]

заходя в топик, рассчитывал увидеть таймер на чистом CSS3, но расставил все по своим местам.

[@IkaR49]

можно попробовать через -moz-calc(), хотя я лично плохо представляю, как это можно сделать…

P.S. Статья про -moz-calc() здесь: habrahabr.ru/blogs/css/131507/

[@IkaR49]

Но и действительная практическая ценность у свойства не настолько явная, чтобы использовать его повсеместно и выводить из черновиков. Хотя я бы ему применение нашёл :)
Будем ждать, что поделать.

[@Fedcomp]

script съелся парсером

[@krovatti]

На чистом CSS3 таймер, увы, сделать не получится.

[@Nico_izo]

На чистом CSS можно сделать часы таймер, но вот время будет идти от момента загрузки страницы. Тем, кто желает узреть это безумие на анимациях CSS сюда.
А всё было бы на много проще, если бы в анимациях у псевдоэлементов можно было поменять content :(

[@Nico_izo]

Стимул один — без JavaScript :)

[@krovatti]

Видимо мы друг друга не поняли. Я имел ввиду, что на одном лишь CSS без JS таймер не сделаешь.

[@divbyzero]

CSS3 — Analogue Clock

[@hwsun]

Аналоговые часы назад, это как то жутко.

[@krovatti]

Или на грязном. :)

[@kafeman]

Между прочим, так даже более естественно получилось.

Ubuntu 11.10, Firefox 8 — всё нормально

[@hwsun]

Ринулся проверять на своей Ubuntu 10.04, Chromium 15.0.874.106 — всё нормально.

[@EuroElessar]

Дык логично, если в винде версия у хрома 16, а в убунту 14, то возможно что-то не будет работать :)

[@krovatti]

Кэп! :)

[@loshvitalik]

У меня так же, хотя да, у меня Chrome 11, Win XP…

[@Fedcomp]

это не баг, это фича!

[@nagato]

jQuery? Для одного лишь таймера?

[@SovGVD]

jQuery уже давно пихают везде где только можно, мне иногда кажется что его даже и не используют при этом

[@Fedcomp]

с cdn не страшно

[@art_tk]

Серо. Скучно. Повторяющийся код. Треугольники бордюрами — css3? Подставку скруглили, да тень у текста. Даже шариков нет.
Не будет тут праздника.

[@hwsun]

Это классика. Шарики, зачем? Они там ну очень не хорошо выглядели.

[@webmasters_by]

Действительно, а чего такой мрачный демо-пример?
Серый фон, черная ёлка.
Не хватает только надписи: До Конца Света осталось: 6 Днів 11 Годин 29 Хвилин 2 Секунд
И череп с костями внизу :)

[@Demphest]

Что-то не рационально вы стили по моему используете, в классах .pidstavka .%буква% везде дублируется position, width, height. И на каждый border прописывать «solid transparent» тоже расточительно.
Лучше добавить еще один класс на слои однобуквенные, в которые все общие атрибуты вынести.

[@hwsun]

Спасибо, в будущем учту. Все делалось ради удовольствия и практики.

[@Softlink]

Берем треугольники отсюда, перемешиваем со скриптом отсчета отсюда, добавляем цвета по вкусу и получается новогодняя йолка!

[@crea7or]

А я с мелким сделал настоящую, хардварную:

[@xHR]

Не забудьте написать об этом в DIY =)

[@crea7or]

Это недостойно поста. Иди сюда, покупай набор и готово.

[@k12th]

austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 1);
1 - 1
??

[@hwsun]

austDay = new Date(austDay.getFullYear() + 1, 12 — 1, 32);

[@k12th]

А-а:) Снабдили бы комментом это место, а то смотрится как ошибка рефакторинга:)

[@hwsun]

austDay = new Date(austDay.getFullYear() + 1, 12 — 1, 32);

[@ZagOleg]

по ссылке

ЧЯДНТ?

[@ZagOleg]

Пофиксили

[@hwsun]

Вы счастливчик.

[@Andriyan]

Ещё бы существительные согласовывались бы с числительными…

[@hwsun]

Исправил.

[@Andriyan]

Ага, уже приятнее.
Только, наверное, нужно ещё писать:
3 секунди
4 секунди
22 секунди
23 секунди
24 секунди
и так далее.
Но
12 секунд
13 секунд
14 секунд.

[@gymlyg]

снежинки добавить?

[@ZagOleg]

Если черные, то не стОит )

[@xrays72]

Немного разукрасил елочку и оптимизировал стили, ссылка на скриншот:
habrastorage.org/storage2/aae/c61/4f3/aaec614f36ac8d6356eb28dd8103bcde.png

Ссылка на исходники:
narod.yandex.ru/disk/35469769001/newyear.zip

P.S. Теги видимо из-за кармы не доступны.

[@hwsun]

Елку как будто рисовал ребёнок.

[@xrays72]

Ну уж извиняйте, художник из меня не вышел.

[@webmasters_by]

А черная елка — это «по-взрослому»? :)

[@Softlink]

Лучше бы на fiddle закинули, может кто-нибудь еще приделал бы что-то.

[@xrays72]

Сделано, ссылка здесь.

[@webmasters_by]

Вот мой вариант, так как то она больше на новогоднюю похожа :)

[@webmasters_by]

Добавил немного анимации. Лучше всего смотреть в Хроме
Что скажите?

[@webmasters_by]

добавил для шариков радиальный градиент, так лучше?

[@webmasters_by]

добавил звезду, но что то она мне не нравится, использовал с этого примера

может кто то предложит другой вариант? на CSS3 разумеется.

[@Softlink]

Со звездой другое дело, тень только убрать и пусть будет себе.

[@tibalt]

за локализацию +1

[@xrays72]

Другая локализация доступна на сайте автора плагина jquery.countdown.

[@Softlink]

Ну звезду-то кто-нибудь прилепит наверх или нет?

[@KOLANICH]

Я бы для этих целей заюзал inline svg либо канвас.
Так что, наверное, этот пост нужно в «ненормальное программирование».

[@Finom]

Для одного лишь таймера грузить jQuery и какой-то плагин — это очень странно.

[@xHR]

Ожидал что при наступлении НГ будет какой-нибудь хинт, фейерверк, итп — ан нет, немного разочаровался.
Кстати, почему бы вам не сделать отчет до следующего года, раз страничка все еще доступна.