Hobo
Последнее обновлене - 15 января 2023 в 14:50
Хотя праздники уже и отшумели, добавлю в коллекцию ещё и такие новогодние украшения для сайта: новогодняя шапочка Санты и Дед Мороз. В первом случае будет использоваться изображение в PNG и CSS, а во втором — только CSS.
Если считаете, что новогодняя мигающая гирлянда для сайта — это слишком, то лаконичная шапка Деда Мороза, думаю, будет в самый раз. Выглядит она, действительно, неплохо. Много места не занимает и не перекрывает контент.
Анимированный Дед Мороз тоже будет как нельзя кстати. Чтобы он станцевал, не нужны даже картинки, достаточно внести дополнения в стилевой файл сайта.
Новогодняя шапка Санты (Деда Мороза)
Итак, чтобы посетители сайта смогли увидеть шапочку, её изображение необходимо разместить в папке img и правильно указать путь до неё. Кроме этого, при помощи CSS надо скорректировать её размер и расположение на веб-страницах.
Для начала, заберём архив с изображением на свой компьютер. Весит он немного, всего 54,5 КБ.
Теперь определимся с контейнером, внутри которого будет располагаться шапочка. Например, это выглядит так.
|
1 2 3 4 5 |
<div class="container"> some kind of content </div> |
Затем, нужно применить к этому блоку относительное позиционирование и вставить внутрь него div нашей шапочки. Выглядеть это будет так.
|
1 2 3 4 5 6 7 |
<div class="text" style="position: relative"> <div class="santas-hat"></div> some kind of content </div> |
Теперь, в основной файл стилей вставим код. Он совсем небольшой.
|
1 2 3 4 5 6 7 8 9 |
.santas-hat { background: url("../img/santashat.png") no-repeat center center; width: 64px; height: 64px; position: absolute; margin-left: -27px; margin-top: -10px; z-index: 9999; } |
Дело сделано! Теперь осталось лишь подкорректировать расположение картинки, чтобы выглядело всё органично.
Анимированный Дед Мороз
Теперь посмотрим на Деда. Сейчас он станцует шафл.
При помощи дивов задаём элементы фигурки. Голова, ручки, ножки и так далее.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="container"> <div class="ded"> <div class="ded_body"></div> <div class="ded_hand_right"></div> <div class="ded_hand_left"></div> <div class="ded_head"> <div class="ded_beard"></div> <div class="ded_eyes"></div> <div class="ded_nose"></div> </div> <div class="ded_leg_right"></div> <div class="ded_leg_left"></div> </div> </div> |
Теперь описание и анимация Деда Мороза. В стилевой файл вставить следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 |
* { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 100vh; height: 105vh; background-color: #f2f3f4; } .ded { margin-top: -5vh; position: relative; } .ded_body { width: 20vh; height: 40vh; position: absolute; top: 30vh; left: 40vh; background-color: #c11; } .ded_head { width: 30vh; height: 30vh; position: absolute; top: 20vh; left: 35vh; border-radius: 100%; background-color: #ebba9a; } .ded_head:before { content: ""; display: block; width: 12vh; height: 12vh; position: absolute; top: -12vh; left: 9vh; border-radius: 100%; background-color: #fff; } .ded_head:after { content: ""; display: block; width: 30vh; height: 15vh; position: absolute; top: -5vh; left: 0vh; background-color: #c11; -webkit-clip-path: polygon(50% 0%, 75% 25%, 100% 90%, 100% 100%, 75% 90%, 25% 90%, 0% 100%, 0% 90%, 25% 25%); clip-path: polygon(50% 0%, 75% 25%, 100% 90%, 100% 100%, 75% 90%, 25% 90%, 0% 100%, 0% 90%, 25% 25%); } .ded_beard { width: 30vh; height: 30vh; position: absolute; top: 10vh; left: 0vh; background-color: #fff; -webkit-clip-path: polygon(0% 0%, 12% 15%, 50% 40%, 88% 15%, 100% 0%, 100% 30%, 90% 70%, 50% 100%, 10% 70%, 0% 30%); clip-path: polygon(0% 0%, 12% 15%, 50% 40%, 88% 15%, 100% 0%, 100% 30%, 90% 70%, 50% 100%, 10% 70%, 0% 30%); } .ded_eyes { width: 8vh; height: 11vh; position: absolute; top: 9vh; left: 7vh; border-radius: 100%; background-color: #123; } .ded_eyes:before { content: ""; display: block; width: 8vh; height: 11vh; position: absolute; top: 0vh; left: 8.5vh; border-radius: 100%; background-color: #123; } .ded_nose { width: 12vh; height: 8vh; position: absolute; top: 17vh; left: 9.5vh; border-radius: 100%; background-color: #a00; } .ded_hand_right { width: 14vh; height: 32vh; position: absolute; top: 38vh; left: 26vh; background-color: #c11; -webkit-clip-path: polygon(100% 0%, 100% 40%, 60% 55%, 100% 80%, 75% 100%, 0% 50%); clip-path: polygon(100% 0%, 100% 40%, 60% 55%, 100% 80%, 75% 100%, 0% 50%); } .ded_hand_left { width: 14vh; height: 32vh; position: absolute; top: 38vh; left: 60vh; background-color: #c11; -webkit-clip-path: polygon(0% 0%, 100% 50%, 25% 100%, 0% 80%, 40% 55%, 0% 40%); clip-path: polygon(0% 0%, 100% 50%, 25% 100%, 0% 80%, 40% 55%, 0% 40%); } .ded_leg_right { width: 14vh; height: 30vh; position: absolute; top: 70vh; left: 36vh; background-color: #c11; animation: 0.5s infinite linear ded_leg_right; } .ded_leg_left { width: 14vh; height: 30vh; position: absolute; top: 70vh; left: 50vh; background-color: #c11; animation: 0.5s infinite linear ded_leg_left; } @keyframes ded_leg_right { 0% { -webkit-clip-path: polygon(4vh 0%, 85% 0%, 50% 50%, 100% 100%, 0% 100%, 0% 50%); clip-path: polygon(4vh 0%, 85% 0%, 50% 50%, 100% 100%, 0% 100%, 0% 50%); } 40% { -webkit-clip-path: polygon(4vh 0%, 85% 0%, 100% 50%, 100% 100%, 0% 100%, 50% 50%); clip-path: polygon(4vh 0%, 85% 0%, 100% 50%, 100% 100%, 0% 100%, 50% 50%); } 100% { -webkit-clip-path: polygon(4vh 0%, 85% 0%, 50% 50%, 100% 100%, 0% 100%, 0% 50%); clip-path: polygon(4vh 0%, 85% 0%, 50% 50%, 100% 100%, 0% 100%, 0% 50%); } } @keyframes ded_leg_left { 0% { -webkit-clip-path: polygon(15% 0, calc(100% - 4vh) 0%, 100% 50%, 100% 100%, 0% 100%, 50% 50%); clip-path: polygon(15% 0, calc(100% - 4vh) 0%, 100% 50%, 100% 100%, 0% 100%, 50% 50%); } 40% { -webkit-clip-path: polygon(15% 0, calc(100% - 4vh) 0%, 50% 50%, 100% 100%, 0% 100%, 0% 50%); clip-path: polygon(15% 0, calc(100% - 4vh) 0%, 50% 50%, 100% 100%, 0% 100%, 0% 50%); } 100% { -webkit-clip-path: polygon(15% 0, calc(100% - 4vh) 0%, 100% 50%, 100% 100%, 0% 100%, 50% 50%); clip-path: polygon(15% 0, calc(100% - 4vh) 0%, 100% 50%, 100% 100%, 0% 100%, 50% 50%); } } |
It’s done! Посмотреть ДЕМО анимации.
Всем WEB! Всем мира!
Украшения для сайта простые, но интересные, спасибо!
Рад, что эти украшения для сайта вам понравились.