Ёлочная игрушка CSS
В предыдущей статье я предлагала вашему вниманию живую картинку спящего Санта Клауса. Но его можно было установить только в сообщении или на страницах блога. Сегодняшняя новогодняя ёлочная игрушка более мобильна. Она хорошо встаёт в боковую панель или в любом другом месте, например, в подвале сайта, как гаджет и так же её можно установить в статье или на страницах Блоггера.
Выглядит игрушка так:
<div style="text-align: center;"><span style="font-size: x-large;"><span style="color: #2b00fe;"><b><i>С Новым годом и Рождеством!</i></b></span></span>
<div aria-label="Ornament" class="ornament">
<div class="ornament__hoop"></div>
<div class="ornament__cap">
<div class="ornament__cap-petal"></div>
<div class="ornament__cap-petal"></div>
<div class="ornament__cap-petal"></div>
<div class="ornament__cap-petal"></div>
<div class="ornament__cap-petal"></div>
<div class="ornament__cap-petal"></div>
<div class="ornament__cap-petal"></div>
<div class="ornament__cap-petal"></div>
<div class="ornament__cap-petal-shadow"></div>
<div class="ornament__cap-petal-shadow"></div>
<div class="ornament__cap-petal-shadow"></div>
<div class="ornament__cap-petal-shadow"></div>
<div class="ornament__cap-petal-shadow"></div>
<div class="ornament__cap-petal-shadow"></div>
<div class="ornament__cap-petal-shadow"></div>
<div class="ornament__cap-petal-shadow"></div>
</div>
<div class="ornament__mouth"></div>
<div class="ornament__bulb"></div>
<style>
.ornament
{
margin-left: auto;
margin-right: auto;
width: 6em
}
:root {
--bg: #c30031;
--fg: #002b66;
--animDur: 4s;
font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
}
.ornament, .ornament__bulb {
width: 6.75em;
}
.ornament {
position: relative;
height: 8.5em;
}
.ornament, .ornament div {
transform-style: preserve-3d;
}
.ornament div {
position: absolute;
}
.ornament__hoop, .ornament__bulb {
border-radius: 50%;
}
.ornament__hoop {
animation: hoopRotate var(--animDur) linear infinite;
box-shadow:
0 0 0.05em 0.05em #fffa inset,
0 0 0 0.1em #848484 inset;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1em;
height: 1em;
}
.ornament__cap, .ornament__cap-petal, .ornament__cap-petal-shadow {
height: 0.9em;
}
.ornament__cap, .ornament__mouth {
top: 0.8em;
left: 2.5em;
width: 1.75em;
}
.ornament__cap {
animation: petalsRotate var(--animDur) linear infinite;
}
.ornament__cap-petal, .ornament__cap-petal-shadow {
--clipPath: polygon(0 0,100% 0,100% 75%,50% 100%,0 75%);
clip-path: var(--clipPath);
-webkit-clip-path: var(--clipPath);
left: 50%;
width: 0.7em;
transform-origin: 50% 0;
}
.ornament__cap-petal {
animation: petalGlare var(--animDur) linear infinite;
background-color: #ae8a71;
background-image:
linear-gradient(30deg,#d3c0b2 24%,#d3c0b200 25%),
linear-gradient(-30deg,#d3c0b2 24%,#d3c0b200 25%),
radial-gradient(0.1em 0.1em at 0.2em 0.2em,#d3c0b2 49%,#d3c0b200 50%),
radial-gradient(0.1em 0.1em at 0.5em 0.2em,#d3c0b2 49%,#d3c0b200 50%),
radial-gradient(0.1em 0.1em at 0.2em 0.4em,#d3c0b2 49%,#d3c0b200 50%),
radial-gradient(0.1em 0.1em at 0.5em 0.4em,#d3c0b2 49%,#d3c0b200 50%),
radial-gradient(0.1em 0.1em at 0.2em 0.6em,#d3c0b2 49%,#d3c0b200 50%),
radial-gradient(0.1em 0.1em at 0.5em 0.6em,#d3c0b2 49%,#d3c0b200 50%),
radial-gradient(0.1em 0.1em at 0.2em 0.25em,#0003 49%,#0000 50%),
radial-gradient(0.1em 0.1em at 0.5em 0.25em,#0003 49%,#0000 50%),
radial-gradient(0.1em 0.1em at 0.2em 0.45em,#0003 49%,#0000 50%),
radial-gradient(0.1em 0.1em at 0.5em 0.45em,#0003 49%,#0000 50%),
radial-gradient(0.1em 0.1em at 0.2em 0.65em,#0003 49%,#0000 50%),
radial-gradient(0.1em 0.1em at 0.5em 0.65em,#0003 49%,#0000 50%);
box-shadow:
0.1em 0 0 #d3c0b2 inset,
-0.1em 0 0 #d3c0b2 inset;
transform: translateX(-50%) rotateY(0deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(even) {
animation-delay: calc(var(--animDur) / -8);
background-color: #d3c0b2;
}
.ornament__cap-petal:nth-child(2) {
transform: translateX(-50%) rotateY(45deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(3) {
transform: translateX(-50%) rotateY(90deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(4) {
transform: translateX(-50%) rotateY(135deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(5) {
transform: translateX(-50%) rotateY(180deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(6) {
transform: translateX(-50%) rotateY(225deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(7) {
transform: translateX(-50%) rotateY(270deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal:nth-child(8) {
transform: translateX(-50%) rotateY(315deg) translateZ(0.875em) rotateX(8deg);
}
.ornament__cap-petal-shadow {
background-color: #0007;
transform: translateX(-50%) rotateY(0deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(10) {
transform: translateX(-50%) rotateY(45deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(11) {
transform: translateX(-50%) rotateY(90deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(12) {
transform: translateX(-50%) rotateY(135deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(13) {
transform: translateX(-50%) rotateY(180deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(14) {
transform: translateX(-50%) rotateY(225deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:nth-child(15) {
transform: translateX(-50%) rotateY(270deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__cap-petal-shadow:last-child {
transform: translateX(-50%) rotateY(315deg) translateZ(0.875em) translateY(0.05em);
}
.ornament__mouth, .ornament__bulb {
background-color: var(--fg);
}
.ornament__mouth {
box-shadow:
0 0.2em 0 #d3c0b2 inset,
0.2em 0 0.2em #000a inset,
-0.4em 0 0.2em #000a inset,
0 -0.1em 0.1em var(--fg) inset,
-0.9em 0 0.2em #000a inset,
0 0.1em 0.1em #0007;
height: 1.1em;
will-change: transform;
}
.ornament__bulb {
background-image:
radial-gradient(100% 100% at 30% 30%,#fff7,#fff0 50%),
radial-gradient(25% 60% at 95% 40%,#fff3 5%,#fff0 50%),
radial-gradient(100% 100% at 90% 90%,#0004,#0000 50%),
linear-gradient(90deg,#0000,#0005);
box-shadow:
0.4em 0.4em 0.5em #0007 inset,
0 0 0.5em #0007 inset;
top: 1.75em;
left: 0;
height: 6.75em;
transform: translateZ(-1px);
}
{
:root {
--bg: #002b66;
--fg: #c30031;
}
}
/* Animations */
@keyframes hoopRotate {
from, 50%, to {
box-shadow:
0 0 0.05em 0.05em #fffa inset,
0 0 0 0.1em #848484 inset;
width: 1em;
}
25%, 75% {
box-shadow:
0 0 0.05em 0.05em #fffa inset,
0 0 0 0.1em #fffa inset;
width: 0.1em;
}
}
@keyframes petalGlare {
from, 25%, 50%, 75%, to {
background-color: #ae8a71;
}
12.5%, 37.5%, 62.5%, 87.5% {
background-color: #d3c0b2;
}
}
@keyframes petalsRotate {
from {
transform: rotateY(0);
}
to {
transform: rotateY(1turn);
}
}</style>
</div></div>
Изменить в коде можно текст и его цвет, а так же цвета игрушки. Текст — выделила красным
Цвет текста — выделила в коде зелёным
Так как цвет игрушки градиентный, то и менять желательно на подобный. В любом генераторе градиента (например: https://cssgradient.io/) создайте нужные оттенки и замените. Выделила в коде участок синим цветом.
Тень игрушки в коде отметила оранжевым, менять можно на шестизначные коды, вот такого вида: #0000FF;
Верхний столбик у игрушки в коде выделила фиолетовым. Менять нужно 2 цвета.
Поменяв цвета, можно сделать более яркие игрушки. У меня получились такие:
Комментарии со спамом удаляются.