Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание новогодней открытки с использованием CSS3

10 декабря 2015 | Опубликовано в css | Нет комментариев »

Приближается Новый Год, и мы хотим пожелать всем читателям счастливых праздников. Поэтому мы решили показать, как создать новогоднюю открытку на чистом CSS3, без использования изображений. Надеемся, Вам понравится этот урок.

 

 

Ниже находится ссылка на открытку, посмотрите на нее и начнем создавать ее шаг за шагом:

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

Код HTML 

Код HTML небольшой, все элементы находятся в контейнере.

Позже будет понятно, что в этом примере также используются псевдоэлементы. Благодаря этому можно обойтись меньшим количеством кода HTML для веб-сайта или веб-приложения.

<div id="wrapper">
    <div id="snow"></div>
    <div id="tree"></div>
    <h1>Happy Holidays</h1>
</div> 

Фон 

Как Вы могли заметить, если посмотрели на готовую открытку, ее фон -  это узор, созданный с помощью градиентов. Для их создания используется свойство размера фона с приставками производителей разных браузеров.

В нашем примере свойство размера фона задает размер полос.

Этот фон в примере создан без использования изображений:

html
{
    height: 100%;
    background-color: #869EA3;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                        transparent 75%, transparent);
    background-size: 400px 400px;
}

Контейнер 

Дальше нужно создать контейнер, в котором будут нарисованы все остальные элементы:

#wrapper {
    position: absolute;
    height: 500px;
    width: 800px;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -400px;
    overflow: hidden;
    background: #0093d8;
    background: linear-gradient(top, #0093d8, #fff);
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}
#wrapper:before {
    content: '*';
    font: bold 1000px arial;
    color: #fff;
    color: rgba(255,255,255,0.1);
    position: absolute;
    top: -200px;
    left: -100px
}

Последнее правило добавляет снежинку без дополнительной разметки HTML.

Добавим снег

Ниже показано, как создан этот эффект: пересечением трех огромных кругов, размером 2000px на 2000px. Если удалить свойство overflow: hidden (скрывать переполнение) у блока с идентификатором #wrapper, станет виден полный размер кругов.

#snow {
    position: absolute;
    z-index: 5;
    top: 400px;
    left: 50%;
    margin-left: -1000px;
    width: 2000px;
    height: 2000px;
    background: #fff;
    border-radius: 2000px;
}

#snow:before {
    content: '';
    position: absolute;
    left: 400px;
    height: 2000px;
    width: 2000px;
    background: #f2f2f2;
    border-radius: 2000px;
}
#snow:after {
    content: '';
    position: absolute;
    right: 400px;
    height: 2000px;
    width: 2000px;
    background: #eaeaea;
    border-radius: 2000px;
} 

Использование особого шрифта 

Есть много вариантов установки особого шрифта на сайт. Для этого урока выбран шрифт Sniglet из библиотеки Google Font API, но, конечно, можно использовать и любой другой шрифт.

 

h1 {
    font: bold 120px/95px 'Sniglet', Arial;
    color: #fafafa;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,0.15),
                 0 10px 0 #cfeaed, -5px -5px 10px #4ea5b1;
    position: absolute;
    bottom: 80px;
    left: 20px;
} 

Создаем ель с помощью треугольников CSS 

Последнее, что нужно добавить в нашу открытку, — это ель. Давайте создадим ее с помощью  треугольников на CSS, это очень интересный способ:

#tree {
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 60px solid green;
    height: 0;
    width: 0;
    position: absolute;
    right: 50px;
    top: 240px;
}

#tree:before {
    content:'';
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 90px solid green;
    height: 0;
    width: 0;
    position: absolute;
    left: -90px;
    top: 30px;
}
#tree:after {
    content:'';
    border-left: 120px solid transparent;
    border-right: 120px solid transparent;
    border-bottom: 120px solid green;
    height: 0;
    width: 0;
    position: absolute;
    left: -120px;
    top: 60px;
} 

Конечный результат 

Наша открытка выглядит, как задумано, во всех современных версиях браузеров, в старых версиях браузеров, таких как Internet Explorer 9, она будет выглядеть хорошо, но не будет градиентов на фоне.

С наступающим Новым Годом и Рождеством! 

Счастливых праздников, и пусть Новый Год для каждого из нас будет еще лучше, чем уходящий!

Автор урока Catalin Rosu

Перевод — Дежурка

Смотрите также:


�


Коментарии запрещены.

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые