hwsun Dec 25 2011 at 06:44

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

6 min

9.6K

CSS*

From sandbox

+36

Comments 74

IkaR49 Dec 25 2011 at 06:58

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

hwsun Dec 25 2011 at 08:05

Исправил.

krovatti Dec 25 2011 at 08:38

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

hwsun Dec 25 2011 at 10:33

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

fluke Dec 25 2011 at 11:59

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

Fedcomp Dec 25 2011 at 07:02

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

UFO landed and left these words here

IkaR49 Dec 25 2011 at 07:42

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

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

UFO landed and left these words here

IkaR49 Dec 25 2011 at 08:01

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

Fedcomp Dec 25 2011 at 08:03

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

krovatti Dec 25 2011 at 08:37

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

Nico_izo Dec 25 2011 at 11:42

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

UFO landed and left these words here

Nico_izo Dec 25 2011 at 11:49

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

krovatti Dec 25 2011 at 15:46

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

divbyzero Dec 25 2011 at 14:31

CSS3 — Analogue Clock

UFO landed and left these words here

hwsun Dec 25 2011 at 14:53

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

krovatti Dec 25 2011 at 15:47

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

UFO landed and left these words here

kafeman Dec 25 2011 at 07:32

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

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

hwsun Dec 25 2011 at 07:37

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

UFO landed and left these words here

EuroElessar Dec 25 2011 at 07:56

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

krovatti Dec 25 2011 at 08:03

Кэп! :)

loshvitalik Dec 25 2011 at 09:27

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

Fedcomp Dec 25 2011 at 09:30

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

nagato Dec 25 2011 at 08:54

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

SovGVD Dec 25 2011 at 09:31

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

Fedcomp Dec 25 2011 at 11:03

с cdn не страшно

art_tk Dec 25 2011 at 09:24

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

hwsun Dec 25 2011 at 09:52

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

webmasters_by Dec 25 2011 at 09:33

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

Demphest Dec 25 2011 at 09:39

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

hwsun Dec 25 2011 at 10:00

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

Softlink Dec 25 2011 at 09:48

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

crea7or Dec 25 2011 at 09:59

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

xHR Jan 4 2012 at 17:52

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

crea7or Jan 4 2012 at 18:09

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

k12th Dec 25 2011 at 10:05

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

hwsun Dec 25 2011 at 11:04

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

k12th Dec 25 2011 at 15:03

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

hwsun Dec 25 2011 at 10:57

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

ZagOleg Dec 25 2011 at 11:06

по ссылке

ЧЯДНТ?

ZagOleg Dec 25 2011 at 11:10

Пофиксили

hwsun Dec 25 2011 at 11:27

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

Andriyan Dec 25 2011 at 11:27

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

hwsun Dec 25 2011 at 12:30

Исправил.

Andriyan Dec 25 2011 at 12:56

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

gymlyg Dec 25 2011 at 11:31

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

ZagOleg Dec 25 2011 at 11:33

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

xrays72 Dec 25 2011 at 12:08

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

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

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

hwsun Dec 25 2011 at 12:17

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

xrays72 Dec 25 2011 at 12:23

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

webmasters_by Dec 25 2011 at 12:46

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

Softlink Dec 25 2011 at 12:36

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

xrays72 Dec 25 2011 at 12:54

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

webmasters_by Dec 25 2011 at 12:42

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

webmasters_by Dec 25 2011 at 15:18

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

UFO landed and left these words here

webmasters_by Dec 25 2011 at 15:58

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

UFO landed and left these words here

webmasters_by Dec 25 2011 at 16:58

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

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

Softlink Dec 26 2011 at 02:59

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

tibalt Dec 26 2011 at 08:08

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

xrays72 Dec 26 2011 at 09:29

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

Softlink Dec 25 2011 at 16:07

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

UFO landed and left these words here

KOLANICH Dec 25 2011 at 18:36

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

Finom Dec 26 2011 at 00:37

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

UFO landed and left these words here

xHR Jan 4 2012 at 17:50

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

UFO landed and left these words here