Пример:
Выбрать другой фон для примера:
HTML:
|
1 2 3 4 5 6 7 8 9 |
<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:
|
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 |
.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%; } |
За основу взято решение, найденное на codepen.io у пользователя Jomohop
Ну такое. Могли бы немного трасформаций добавить и слегка рандомизировать капли.