webmasters_by Dec 23 2011 at 10:45

Создаем новогоднюю открытку при помощи CSS3

4 min

13K

CSS*

+40

Comments 43

WaReZ_MEN Dec 23 2011 at 10:58

О спасибо!!! Вас тоже с наступающим :)

Fedcomp Dec 23 2011 at 11:09

как не прискорбно, в итоге получилась лагающая открытка.

webmasters_by Dec 23 2011 at 12:18

да, памяти она требует не мало, но на рабочем компе ни в Лисе, ни в Хроме я тормозов не наблюдаю

Fedcomp Dec 23 2011 at 20:52

Chrome 16, win7 x64, разрешение экрана 1600х900, хром развернут на весь экран, вкладки убраны, демонстрация подлагивает.

ShadowPrince Dec 24 2011 at 04:24

Аналогично, 1920*1080, на глаз, так, кадров 5 в секунду.
Chromium 14, Ubuntu 11.04. Компьютер приличный.

Dimoniusis Dec 23 2011 at 12:22

У меня в FireFox лагает, в Chrome все плавно и красиво (правда загрузка одного из ядер 100%)

А вот ссылка внизу не до конца стоит: ссылкой является только «Вернуться к » без слова «статье». Некрасиво.

webmasters_by Dec 23 2011 at 12:26

Спасибо за замечание, поправил.

gymlyg Dec 23 2011 at 17:12

в хроме плавно, но при переходе на начальное состояние анимации наблюдается скачок. Загрузка 24%.

80x86 Dec 23 2011 at 12:34

Четыре ядра по 60%. Хром.

Неэкологичненькая открытка :)

wartur Dec 23 2011 at 13:37

ужас, весь celeron-проц на моей бедной печатающей машинке занимает, видно не справляется с таким наплывом современности (у меня Chrome)

wartur Dec 23 2011 at 13:38

ужас, в смысле у меня лаги, а идея прикольная ).

Kane Dec 24 2011 at 01:16

Ну а что вы хотели? Печатная машинка совмем для других целей нужна :)

Isis Dec 23 2011 at 11:40

В результате получилась 502 ошибка. И вам с наступающим :D

webmasters_by Dec 23 2011 at 12:19

Упс… :) Бывает, но теперь вроде уже всё работает

stampoon Dec 23 2011 at 12:20

Ну хоть бы с наступающим на картинке написали, а то до инфаркта доведете ж. ;-)
С Наступающим!

webmasters_by Dec 23 2011 at 12:30

:) да я подумал «гулять, так гулять», было конечно мысль еще canvas туда впихнуть, но пожалел посетителей :)

fsmorygo Dec 23 2011 at 12:38

И все-таки вариант с использованием canvas был бы более производительным. :)

UFO landed and left these words here

ChemAli Dec 23 2011 at 12:42

Если обратиться к оригиналу (кстати, ссылку можно было и вставить), то можно исправить тормозящую анимацию в ФФ: достаточно использовать полную форму записи в @keyframes вместо сокращенной.

Оригинал: designshack.net/articles/css/make-it-snow-on-your-website-with-css-keyframe-animations/
Демо без тормозов: designshack.net/tutorialexamples/letitsnow/index.html

webmasters_by Dec 23 2011 at 12:45

да, я читал эту статью, но мне результат не понравился и я решил своё наваять :)
и у меня полная форма записи в @keyframes, возможно, тормоза из-за шрифтов

ChemAli Dec 23 2011 at 12:49

Тогда, наверное, и в тексте стоит указать полную форму, а то вдруг кто-то скопирует и столкнется с проблемой.

webmasters_by Dec 23 2011 at 12:53

спасибо за замечание, исправил

FreeTibet Dec 23 2011 at 12:50

Круто, конечно.

А кстати, я не до конца понимаю, почему эффект, который рисовался на каком-нибудь 486-ом вовсе не жрал 50% процессорного времени, как делает ихний хром с вашей открытой?

Пару дней назад я попробовал поработать с canvas. Ради любопытства, решил попробовать повторить эффект из одной старой 512b intro.
Каждые 40 мс буфер рассчитывается простеньким алгоритмом и отображается на экране. Так вот, нагрузка на процессор была в районе 15%.

После этой статьи и личного опыта у меня сложилось не совсем хорошое мнение о современных бразуерных технлологиях связанных с графикой.

Разубедите меня в этом, пожалуйста :)

drdim Dec 23 2011 at 15:00

Время оптимизаций 2d 3d графики еще не пришло. К 25 версии хрома — допилят, и все что можно по обработке графики повесят на GPU

ChemAli Dec 23 2011 at 15:14

486 рисовал практически сразу вам на экран, используя относительно низкоуровневые вызовы.

Хром же рисует через кучу прослоек: ХТМЛ, ЦСС, Парсер, Интерпретатор, ГрафическийДвижокОтрисовки, API ОС, Системные вызовы. Куча слоев, куча посредников. Бюроктария и коррупция! Как следствие — тормоза и жадное поглощение ресурсов.

MrMYSTIC Dec 23 2011 at 13:34

Жаль, что не во всех браузерах работает, но выглядит просто потрясно!

infinius Dec 23 2011 at 14:22

Как минимум, нужно избавиться от элемента #wrapper в коде, заменой BODY{} на HTML{}.

f0rmat1k Dec 23 2011 at 15:03

Ошибки и недочеты:
1) описали оперный префикс анимаций, но забыли указать запуск анимации для оперы в div#wrapper. В итоге, в ней снег не летит.
2) Текст не тянется. А ведь можно было сделать свгшный и резиновый.
3) Обычно говорят не «С рождеством и новым годом», а «С новым годом и рождеством», т.к. НГ наступает раньше.
4) Нет реакции на наведение на ссылку.

В целом симпатично.

webmasters_by Dec 23 2011 at 15:18

1) Где вы увидели «оперный префикс анимаций»? Там в конце написано, что в Опере анимация не работает, как и в IE ниже 10 версии.
2) можно было бы сделать
3) У католиков сначала Рождество, потом Новый Год. Да к тому же это всего лишь пример, каждый сам решит что там написать, если захочет её использовать.
4) Да ссылка там вообще лишний элемент :)

Спасибо, рад что понравилось.

f0rmat1k Dec 23 2011 at 15:54

Про оперу. Тут:

@-o-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Да, вы правы, в опере пока не все работает. Значит код выше лишний, можно убрать.

webmasters_by Dec 23 2011 at 16:02

Ну сегодня не работает, а выйдет новая версия и заработает. Так что пусть в исходниках будет.

f0rmat1k Dec 23 2011 at 16:58

Рекурсия. В таком случае, вам нужно запустить инициализацию в div#wrapper. Т.к. у вас пока только описание анимации, но нет запуска с префиксом оперы.

webmasters_by Dec 23 2011 at 17:02

да, верно подметили,
добавлю

UFO landed and left these words here

tetrapak07 Dec 23 2011 at 15:08

Создаем новогоднюю открытку при помощи CSS3.
Наряжаем новогоднюю елочку при помощи Andurino.
Позовём Снегурочку при помощи Skype.
Купим подарочки на EBay.
Интернет-Новый Год приближается)

gymlyg Dec 23 2011 at 17:16

и позвать в гости всех френдов с любимых ресурсов!

johnnythekid Dec 23 2011 at 16:41

Да это ж параллаксы на цсс, йопта!
Хорошая работа, спасибо за идею.

gymlyg Dec 23 2011 at 17:15

Вас тоже с Наступающим!
Похоже, что ваш пример положит начало обновлению моих знаний по CSS.

phanta Dec 23 2011 at 17:43

Я за 6 мес ни разу не слышал, что бы мой Mac mini шумел. Думал, что у него пассивное охлаждение.

Но после 1-2 минут работы этой открытки в FF он ЗАШУМЕЛ вентилятором. Был в шоке, не мог понять что шумит :)

infinius Dec 24 2011 at 00:36

Рассматривали открытку, что ли? :)

phanta Dec 24 2011 at 15:32

Ну да :)

Shvonder Dec 24 2011 at 05:51

Повесьте реферер на ссылку «Вернуться к статье», или history.back(). А то совсем не возвращает.

kirilloid Dec 26 2011 at 11:25

Надпись почему-то бьётся на 4 строчки и из-за уменьшеного line-height две буквы наезжают друг на друга (выделены жирным).
С
Рождеством
и Новым
Годом!

FF8, Linux.