Снеговик для сайта на Новый год и Рождество
Умей ценить того кто без тебя не может, и не гонись за тем, кто счастлив без тебя!
25-августа-2024, 14:07 6 0
Предлагаю пример Снеговика который был нарисован с помощью CSS, без использования jаvascript или HTML.
Но если подробнее разбираться, то здесь есть подвох.
Давайте сначала приведу код а затем уже подробнее будет описано.
CSS
@keyframes snowfall {
0% { background-position: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%; }
100% { background-position: 0% 0%,0% 223vh,0% 205vh,0% 210vh,0% 201vh; }
}
html {
animation: snowfall 40s infinite linear;
margin: 0;
width: 100vw;
height: 100vh;
background: #abc;
background-image:
radial-gradient(circle at 50% 300%, #eee 70%, transparent 70.1%),
radial-gradient(circle, #eee 3%, transparent 3.1%),
radial-gradient(circle at 80% 10%, #eee 0.8%, transparent 0.9%),
radial-gradient(circle, #eee 2.8%, transparent 2.9%),
radial-gradient(circle at 20% 40%, #eee 2.2%, transparent 2.3%)
;
background-repeat:
no-repeat,
repeat,
repeat,
repeat,
repeat
;
background-size:
100% 100%,
60% 80%,
70% 70%,
30% 35%,
45% 55%
;
background-position:
0% 0%,
0% 0%,
0% 0%,
0% 0%,
0% 0%
;
}
html::before {
content: "";
display: block;
position: absolute;
width: 37vmin;
height: 37vmin;
background: #0000;
border-radius: 50%;
bottom: -37vmin;
left: 50%;
transform: translate(calc(-50% - 4.5vmin), 0);
box-shadow:
0 -85vmin 0 -17vmin #222,
8vmin -85vmin 0 -17vmin #222,
3.75vmin -80.95vmin 0 -16.65vmin orange,
4vmin -68vmin 0 -17vmin #233,
4.5vmin -67.875vmin 0 -16.75vmin #233,
4vmin -61vmin 0 -17vmin #111,
4.25vmin -54vmin 0 -16.75vmin #222,
4vmin -85vmin 0 -7vmin #fff,
4vmin -82vmin 1vmin -10vmin #aaa,
4vmin -63vmin 0 -4vmin #fff,
4vmin -60vmin 2vmin -7vmin #aaa,
4vmin -40vmin 0 0 #fff
;
}
html::after {
content:"";
display: block;
position: absolute;
width: 60vmin;
height: 72vmin;
bottom: 3vmin;
left: 50%;
box-shadow:
0 -19vmin 0 -18vmin,
0 -26vmin 0 -22vmin #837,
0 -40vmin 0 -22vmin;
border-radius: 18.5vmin 18.5vmin 0 0;
transform-origin: top center;
transform: translate(-50%, 0) rotate(3deg);
background-image:
linear-gradient(60deg, transparent 45%, brown 0 50%, transparent 0),
linear-gradient(-64deg, transparent 45%, brown 0 50%, transparent 0),
linear-gradient(-60deg, transparent 45%, brown 0 50%, transparent 0),
linear-gradient(-50deg, transparent 45%, brown 0 54%, transparent 0),
linear-gradient(70deg, transparent 45%, brown 0 53%, transparent 0),
linear-gradient(23deg, orange 20%, transparent 0),
linear-gradient(-88deg, transparent 42%, maroon 0 50%, transparent 0),
linear-gradient(75deg, transparent 45%, maroon 0 50%, transparent 0),
linear-gradient(85deg, transparent 45%, maroon 0 50%, transparent 0),
linear-gradient(95deg, transparent 45%, maroon 0 50%, transparent 0),
linear-gradient(110deg, transparent 45%, maroon 0 48%, transparent 0),
linear-gradient(80deg, transparent 45%, maroon 0 48%, transparent 0),
linear-gradient(102deg, transparent 45%, maroon 0 51%, transparent 0)
;
background-size:
20% 50%,
18% 45%,
9% 11%,
9% 11%,
9% 11%,
16% 20%,
22% 65%,
20% 20%,
20% 25%,
25% 20%,
18% 20%,
22% 22%,
18% 21%
;
background-position:
90% 50%,
14% 55%,
6% 75%,
5% 73%,
13% 75%,
60% 0%,
102% 92%,
100% 20%,
103% 15%,
109% 19%,
109% 17%,
102.5% 15%,
106% 16%
;
background-repeat: no-repeat;
}Очевидно, здесь есть подвох. Codepen и другие онлайн-редакторы не показывают базовую структуру документа, который редактирует пользователь. Написанный HTML-код затем оборачивается примерно так:
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="link.to.css.code.from.editor" />
<script src="link.to.js.code.from.editor"></script>
</head>
<body>
<!-- Here goes the HTML from the editor -->
</body>
</html>
В самом фрагменте нет ничего в полях HTML или jаvascript, поэтому создается впечатление, что нет другого кода, кроме CSS, но приведенный выше код (или что-то подобное) автоматически генерируется для запуска.
Поскольку HTML выглядит так, как будто здесь нет HTML, некоторые люди называют этот тип CSS-рисунков «рисунком с нулевым элементом» или «без деления»… но на самом деле элемент есть: это - ( <body>или <html> в случае со снеговиком).
Как это было сделано
Как видно выше , для этого рисунка мы использовали 3 элемента: <html>тег, его ::before и ::after псевдоэлементы.
Тег htm lиспользовался для создания снежного фона (мы даже добавили небольшую анимацию). Все это представляет собой набор кругов разного размера, созданных с помощью radial-gradient и расположенных повсюду с использованием разнообразных свойств background.
Для тела снеговика мы использовали body::before. Мы превратили его в круг, используя border-radius: 50% это будет левый глаз. Затем использовалось box-shadow для создания большего количества кругов разных размеров:
- другой глаз,
- нос,
- голова,
- кнопки в средней части,
- средняя часть,
- нижняя часть,
- некоторые тени между разными частями.
Для одной из кнопок мы использовали два круга, чтобы она не выглядела точно как круг. Это было сделано специально, чтобы немного нарушить симметрию мультфильма.
Для теней между различными частями нашего снеговика мы добавили box-shadows небольшое размытие.
Наконец, с помощью body::after мы создали прозрачный прямоугольник, закрывающий весь снеговик. И слегка наклоните его (опять же, чтобы нарушить симметрию).
С помощью трёх box-shadows мы создали шляпу. А затем использовал несколько штук linear-gradient, чтобы создать руки, кисти и метлу.
И вуаля ! Наш снеговик готов!
Статья была найдена как всегда на просторах буржунета ссылку отставлю ниже. Ну а снеговик зачётный, обязательно украсьте им сайт к Новому году.
