Создаем новогоднюю ёлку-таймер при помощи 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]

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