Главная » Web и Технологии » Капли воды на CSS для оформления сайта

Капли воды на CSS для оформления сайта

Если у тебя получилось обмануть человека, это не значит, что он дурак, это значит, что тебе доверяли больше, чем ты этого заслуживаешь.

155 0

28-октября-2022, 20:28   Web и Технологии

Капли воды  на CSS для оформления сайта

Интересная реализация капель воды для оформления сайта. Можно оформить фон, блок или иную секцию. Из особенностей стоит отменить то, что капли воды можно расставить по блоку в нужном масштабе или другой секции с абсолютным позиционированием. Капли выполнены на 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%;
}

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
2+2*2= ?