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



    Всё ближе долгожданные новогодние и рождественские праздники и самое время подготовить подарки и поздравления. А как известно, самый лучший подарок — это подарок сделанный своими руками. :) Поэтому сегодня мы создадим новогоднюю анимированную открытку при помощи CSS3. Создание такой открытки займет у вас всего лишь несколько минут, так как для него мы будем использовать только несколько фоновых картинок и CSS3 анимацию.

    Итак, приступим.

    HTML-код будет предельно простой:

    <!DOCTYPE html>
    <html>
    <head>
    <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" media="screen" href="style.css">
    </head>
     
    <body>
     <div id="wrapper">
     <div id="container">
     <h2>С Рождеством и Новым Годом!</h2>
    </div>
    </div>
     
    </body>
    </html>  

    Для начала мы создадим фон для нашей открытки, для этого можно подобрать любую красивую картинку соответствующую тематике. И зададим следующие стили для body, чтобы наша картинка не размножалась на экране:
    body {
     background-image: url('christmas.jpg');
     background-repeat: no-repeat;
     background-attachment: fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     -ms-background-size: cover;
     background-size: cover;
    } 

    Здесь мы использовали background-size: cover, чтобы наш фон масштабировался с сохранением пропорций.

    Для создания эффекта падающего снега мы используем следующую идею, для этого возьмем три картинки со снежинками, разного размера и прозрачным фоном. Вы можете добавить и больше, если вам так нравится, но мы не будем устраивать здесь «метель» и ограничимся тремя. Картинки со снежинками представляют собой квадратные PNG-изображения, размером 500, 400 и 300 пикселей, и, как я уже говорил, с прозрачным фоном. Снежинки можно нарисовать в Photoshop или Gimp с помощью соответствующих кистей. Я использовал кисти для Gimp GIMP Snowflake Brushes by ~Project-GimpBC. Также снежинкам можно задать разный размер и разную степерь размытия, чтобы они выглядели более естественно.

    Теперь мы применим эти изображения для нашего блока-обертки (div#wrapper). Зададим ему высоту 100%, чтобы он занял всю площаль окна, также не забудем указать такую же высоту и для тегов html и body.

    Использование нескольких фоновых изображений, по синтаксису, не отличается от использования только одного фона, единственным отличием является то, что вы перечисляете через запятую все изображения используемые в качестве фона. В результате мы получим следующее:
    html, body {
    height: 100%
    }
    
    div#wrapper {
     background-image: url('snowflake1.png'), url('snowflake3.png'), url('snowflake2.png');
     height:100%;
    } 

    Создание анимации

    Для создания анимации мы будем использовать @keyframes. Имя для анимации зададим, например, snow. Далее мы создадим два фрейма. Первый, это то как наша страница будет выглядеть в начале анимации, второй — это то, как она будет выглядеть в конце. В начале я разместил все наши фоновые изображения в левом верхнем углу страницы, определив background-position равную «0px 0px». Затем мы перемещаем каждое изображение в разные места на странице.
    @keyframes snow {
     0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
     100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
    } 

    Обратите внимание, что для каждого браузера здесь необходимо прописать соответствующий префикс. В результате код будет выглядеть следующим образом:
    @keyframes snow {
     0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
     100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
    }
     
    @-moz-keyframes snow {
     0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
     100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
    }
     
    @-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
     100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
    }
     
    @-ms-keyframes snow {
     0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
     100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
    } 

    На следующем шаге мы зададим правила показа анимации. Сначала мы указываем имя анимации, которую мы хотим использовать, в данном случае «snow», затем длительность анимации (20 секунд), затем выбираем тип анимации (linear) и, наконец, цикл анимации — бесконечный.
    div#wrapper {
     background-image: url('snowflake.png'), url('snowflake3.png'), url('snowflake2.png');
     height:100%;
     -webkit-animation: snow 20s linear infinite;
     -moz-animation: snow 20s linear infinite;
     -ms-animation: snow 20s linear infinite;
     animation: snow 20s linear infinite;
    } 

    Для надписи можно использовать какой-нибудь красивый шрифт, в данном примере я использовал шрифт Lobster, который подключил к странице при помощи Google Web Fonts.
    
    <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>  


    И вот что у нас в результате получилось:

    Демонстрация

    Заключение

    Итак, у нас получилась симпатичная новогодняя открытка, но, к сожалению, она будет «работать» только в Firefox, Chrome и Safari. IE начинает поддерживать keyframes только с 10 версии, Opera на данный момент также не поддерживает эту анимацию. Но, я надеюсь, это не испортит впечатление от новогоднего поздравления (хотя адресата стоит предупредить в чем открывать открытку :) ).

    С наступающим! image
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 43

      +1
      О спасибо!!! Вас тоже с наступающим :)
        +9
        как не прискорбно, в итоге получилась лагающая открытка.
          0
          да, памяти она требует не мало, но на рабочем компе ни в Лисе, ни в Хроме я тормозов не наблюдаю
            +2
            Chrome 16, win7 x64, разрешение экрана 1600х900, хром развернут на весь экран, вкладки убраны, демонстрация подлагивает.
              0
              Аналогично, 1920*1080, на глаз, так, кадров 5 в секунду.
              Chromium 14, Ubuntu 11.04. Компьютер приличный.
            0
            У меня в FireFox лагает, в Chrome все плавно и красиво (правда загрузка одного из ядер 100%)

            А вот ссылка внизу не до конца стоит: ссылкой является только «Вернуться к » без слова «статье». Некрасиво.
              0
              Спасибо за замечание, поправил.
                0
                в хроме плавно, но при переходе на начальное состояние анимации наблюдается скачок. Загрузка 24%.
                +1
                Четыре ядра по 60%. Хром.

                Неэкологичненькая открытка :)
                  0
                  ужас, весь celeron-проц на моей бедной печатающей машинке занимает, видно не справляется с таким наплывом современности (у меня Chrome)
                    +1
                    ужас, в смысле у меня лаги, а идея прикольная ).
                      0
                      Ну а что вы хотели? Печатная машинка совмем для других целей нужна :)
                    0
                    В результате получилась 502 ошибка. И вам с наступающим :D
                      0
                      Упс… :) Бывает, но теперь вроде уже всё работает
                      0
                      Ну хоть бы с наступающим на картинке написали, а то до инфаркта доведете ж. ;-)
                      С Наступающим!
                        0
                        :) да я подумал «гулять, так гулять», было конечно мысль еще canvas туда впихнуть, но пожалел посетителей :)
                          0
                          И все-таки вариант с использованием canvas был бы более производительным. :)
                          • UFO just landed and posted this here
                        +3
                        Если обратиться к оригиналу (кстати, ссылку можно было и вставить), то можно исправить тормозящую анимацию в ФФ: достаточно использовать полную форму записи в @keyframes вместо сокращенной.

                        Оригинал: designshack.net/articles/css/make-it-snow-on-your-website-with-css-keyframe-animations/
                        Демо без тормозов: designshack.net/tutorialexamples/letitsnow/index.html
                          –2
                          да, я читал эту статью, но мне результат не понравился и я решил своё наваять :)
                          и у меня полная форма записи в @keyframes, возможно, тормоза из-за шрифтов
                            +1
                            Тогда, наверное, и в тексте стоит указать полную форму, а то вдруг кто-то скопирует и столкнется с проблемой.
                              0
                              спасибо за замечание, исправил
                          +4
                          Круто, конечно.

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

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

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

                          Разубедите меня в этом, пожалуйста :)
                            +1
                            Время оптимизаций 2d 3d графики еще не пришло. К 25 версии хрома — допилят, и все что можно по обработке графики повесят на GPU
                              +3
                              486 рисовал практически сразу вам на экран, используя относительно низкоуровневые вызовы.

                              Хром же рисует через кучу прослоек: ХТМЛ, ЦСС, Парсер, Интерпретатор, ГрафическийДвижокОтрисовки, API ОС, Системные вызовы. Куча слоев, куча посредников. Бюроктария и коррупция! Как следствие — тормоза и жадное поглощение ресурсов.
                              +1
                              Жаль, что не во всех браузерах работает, но выглядит просто потрясно!
                                0
                                Как минимум, нужно избавиться от элемента #wrapper в коде, заменой BODY{} на HTML{}.
                                  0
                                  Ошибки и недочеты:
                                  1) описали оперный префикс анимаций, но забыли указать запуск анимации для оперы в div#wrapper. В итоге, в ней снег не летит.
                                  2) Текст не тянется. А ведь можно было сделать свгшный и резиновый.
                                  3) Обычно говорят не «С рождеством и новым годом», а «С новым годом и рождеством», т.к. НГ наступает раньше.
                                  4) Нет реакции на наведение на ссылку.

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

                                    Спасибо, рад что понравилось.
                                      0
                                      Про оперу. Тут:
                                      @-o-keyframes snow {
                                      0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
                                      100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
                                      }
                                      


                                      Да, вы правы, в опере пока не все работает. Значит код выше лишний, можно убрать.
                                        0
                                        Ну сегодня не работает, а выйдет новая версия и заработает. Так что пусть в исходниках будет.
                                          0
                                          Рекурсия. В таком случае, вам нужно запустить инициализацию в div#wrapper. Т.к. у вас пока только описание анимации, но нет запуска с префиксом оперы.
                                            0
                                            да, верно подметили,
                                            добавлю
                                    • UFO just landed and posted this here
                                      +1
                                      Создаем новогоднюю открытку при помощи CSS3.
                                      Наряжаем новогоднюю елочку при помощи Andurino.
                                      Позовём Снегурочку при помощи Skype.
                                      Купим подарочки на EBay.
                                      Интернет-Новый Год приближается)
                                        0
                                        и позвать в гости всех френдов с любимых ресурсов!
                                        +1
                                        Да это ж параллаксы на цсс, йопта!
                                        Хорошая работа, спасибо за идею.
                                          +1
                                          Вас тоже с Наступающим!
                                          Похоже, что ваш пример положит начало обновлению моих знаний по CSS.
                                            +1
                                            Я за 6 мес ни разу не слышал, что бы мой Mac mini шумел. Думал, что у него пассивное охлаждение.

                                            Но после 1-2 минут работы этой открытки в FF он ЗАШУМЕЛ вентилятором. Был в шоке, не мог понять что шумит :)
                                              0
                                              Рассматривали открытку, что ли? :)
                                                0
                                                Ну да :)
                                              0
                                              Повесьте реферер на ссылку «Вернуться к статье», или history.back(). А то совсем не возвращает.
                                                0
                                                Надпись почему-то бьётся на 4 строчки и из-за уменьшеного line-height две буквы наезжают друг на друга (выделены жирным).
                                                С
                                                Рождеством
                                                и Новым
                                                Годом!

                                                FF8, Linux.

                                                Only users with full accounts can post comments. Log in, please.