Если у тебя получилось обмануть человека, это не значит, что он дурак, это значит, что тебе доверяли больше, чем ты этого заслуживаешь.
28-октября-2022, 20:28 466 0
Интересная реализация капель воды для оформления сайта. Можно оформить фон, блок или иную секцию. Из особенностей стоит отменить то, что капли воды можно расставить по блоку в нужном масштабе или другой секции с абсолютным позиционированием. Капли выполнены на CSS.
HTML
<div class="droplet-wrap">
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
</div>
CSS
.droplet-wrap {
--bubble-radius: 100px;
--bubble-shadow: calc((var(--bubble-radius) / 25) * -1) calc(var(--bubble-radius) / 18) 8px 0 rgba(0,0,0,0.8);
position: relative;
height: 500px;
background-image: url(/demo/1280/fantasy-3.jpg);
background-size: cover;
background-position: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
margin: 20px 0;
border: 6px solid #BFE2FF;
}
.droplet-wrap .droplet {
content: "";
display: block;
width: var(--bubble-radius);
height: calc(var(--bubble-radius) - 0.8rem);
border-radius: 50%;
position: relative;
box-shadow: var(--bubble-shadow), inset calc((var(--bubble-radius) / 5) * -1) calc((var(--bubble-radius) / 5)) calc((var(--bubble-radius) / 4)) 0 rgba(0,0,0,0.7);
position: absolute;
background-color: rgba(255,255,255,0.22);
}
.droplet-wrap .droplet:after {
position: absolute;
content: " ";
background: #fff;
width: 15%;
height: 15%;
border-radius: 50%;
transform: skew(11deg, 2deg);
top: 20%;
left: 63%;
z-index: 10;
opacity: 0.9;
}
.droplet-wrap .droplet:before {
position: absolute;
content: " ";
background-color: #fff;
width: 9%;
height: 9%;
border-radius: 50%;
transform: skew(10deg, 0deg);
top: 40%;
left: 75%;
z-index: 20;
opacity: 0.4;
}
.droplet-wrap .droplet:nth-child(1) {
left: 50%;
top: 50%;
}
.droplet-wrap .droplet:nth-child(2) {
transform: scale(0.7);
left: 6%;
top: 10%;
}
.droplet-wrap .droplet:nth-child(3) {
transform: scale(0.5);
top: 40%;
left: 70%;
}
.droplet-wrap .droplet:nth-child(4) {
transform: scale(0.48);
top: 63%;
left: 75%;
}
.droplet-wrap .droplet:nth-child(5) {
transform: scale(0.24);
top: 20%;
left: 60%;
}
.droplet-wrap .droplet:nth-child(6) {
transform: scale(0.3);
top: 30%;
left: 10%;
}
.droplet-wrap .droplet:nth-child(7) {
transform: scale(0.4);
top: 71%;
left: 30%;
}