Картинки как фон для открытки


Всё ближе долгожданные новогодние и рождественские праздники и самое время подготовить подарки и поздравления. А как известно, самый лучший подарок — это подарок сделанный своими руками. :) Поэтому сегодня мы создадим новогоднюю анимированную открытку при помощи 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
Источник: https://habrahabr.ru/post/135142/


Закрыть ... [X]

Бесплатные поздравительные открытки и фоторамки с вашим Раскладные столы для торговли своими руками



Картинки как фон для открытки Фоны, заготовки для писем, открыток, рамок. Обсуждение на
Картинки как фон для открытки Создание и рассылка новогодних открыток с помощью MS Word
Картинки как фон для открытки Создаем новогоднюю открытку при помощи CSS3 / Хабрахабр
Картинки как фон для открытки Картинки клипарты обои фоны открытки Записи с меткой
Картинки как фон для открытки Love фото рамки: колажи, открытки, фотоэффекты фон в App
Лучшая онлайн программа для создания открыток - Canva Красивый фон для поздравления с днем рождения Открытки картинки фоны Азовское море покрылось слоем водорослей Джинсовые платья: обзор моделей и правила сочетания Как сделать репост в ВКонтакте Форум SMM Короткие фразы для татуировок, красивые, популярные для тату