Created
April 19, 2022 01:54
-
-
Save chrisbautista/f92cde0cea549fbb29b853f05e10a7f2 to your computer and use it in GitHub Desktop.
Revisions
-
chrisbautista created this gist
Apr 19, 2022 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,21 @@ <div class="demo"> <div class="droplet"></div> <div class="droplet dark-shadow"></div> <div class="droplet dark-shadow inside-shadow"></div> <div class="droplet dark-shadow inside-shadow reflection"> </div> <div class="droplet dark-shadow inside-shadow reflection squish"> </div> </div> <div class="card"> <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> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,260 @@ $base-color: #003d52; :root { --background-color: #{lighten($base-color, 10%)}; --secondary-color: #{darken($base-color, 90%)}; } body { background: radial-gradient( circle at center center, var(--background-color), var(--secondary-color) ); background-attachment: fixed; } .container { display: flex; justify-content: center; margin-top: 20vh; } .demo { position: absolute; top: 0; left: calc(50% - (550px / 2)); display: inline-flex; height: 100px; width: 550px; justify-content: space-between; align-items: center; .droplet { margin: 1rem 1rem; $bubble-shadow-color: adjust-color( $base-color, $blackness: 80%, $alpha: 0.7 ); $bubble-shadow-inset-color: adjust-color( $base-color, $blackness: 10%, $alpha: 0.8 ); $bubble-background-color: adjust-color( $base-color, $lightness: 10%, $alpha: 0.1 ); --bubble-radius: 4rem; --bubble-shadow: calc((var(--bubble-radius) / 16) * -1) calc(var(--bubble-radius) / 12) 0 0 #{$bubble-shadow-color}; content: " "; display: block; width: var(--bubble-radius); height: var(--bubble-radius); border-radius: 50%; position: relative; background-color: $bubble-background-color; &.dark-shadow { box-shadow: var(--bubble-shadow); } &.inside-shadow { box-shadow: var(--bubble-shadow), inset calc((var(--bubble-radius) / 5) * -1) calc((var(--bubble-radius) / 5)) calc((var(--bubble-radius) / 4)) 0 $bubble-shadow-inset-color; } &.reflection { &: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: 1; } &: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; } } &.squish { height: calc(var(--bubble-radius) - 0.3rem); } } } .card { position: absolute; top: 12vh; left: calc(50vw - 30px); display: inline-block; width: 200px; height: 350px; .droplet { $bubble-shadow-color: adjust-color( $base-color, $blackness: 80%, $alpha: 0.7 ); $bubble-shadow-inset-color: adjust-color( $base-color, $blackness: 10%, $alpha: 0.8 ); $bubble-background-color: adjust-color( $base-color, $lightness: 10%, $alpha: 0.1 ); --bubble-radius: 10.4em; --bubble-shadow: calc((var(--bubble-radius) / 16) * -1) calc(var(--bubble-radius) / 12) 0 0 #{$bubble-shadow-color}; content: " "; display: block; top: calc(50% - (var(--bubble-radius) / 2)); left: calc(50% - (var(--bubble-radius) / 2)); width: var(--bubble-radius); height: calc(var(--bubble-radius) - 0.8rem); border-radius: 50%; position: relative; background-color: $bubble-background-color; box-shadow: var(--bubble-shadow), inset calc((var(--bubble-radius) / 5) * -1) calc((var(--bubble-radius) / 5)) calc((var(--bubble-radius) / 4)) 0 $bubble-shadow-inset-color; &: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: 1; } &: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; } &:nth-child(1) { transform: scale(0.36); left: -25%; } &:nth-child(2) { transform: scale(0.3); left: 6%; top: 10%; } &:nth-child(3) { transform: scale(0.28); top: -1%; left: -23%; } &:nth-child(4) { transform: scale(0.48); top: -63%; left: -70%; } &:nth-child(5) { transform: scale(0.24); top: -120%; left: 70%; } &:nth-child(6) { transform: scale(0.24); top: -190%; left: -110%; } &:nth-child(7) { transform: scale(0.1); top: -241%; left: 30%; } &:nth-child(8) { transform: scale(0.1); top: -270%; left: 39%; } &:nth-child(9) { transform: scale(0.1); top: -348%; left: -74%; } &:nth-child(10) { transform: scale(0.1); top: -350%; left: -40%; } &:nth-child(11) { transform: scale(0.1); top: -470%; left: 31%; } &:nth-child(12) { transform: scale(0.05); top: -480%; left: 65%; } &:nth-child(13) { transform: scale(0.08); top: -549%; left: -95%; } &:nth-child(14) { transform: scale(0.05); top: -560%; left: -125%; } } } .card:nth-child(1) { font-size: 16.4px; } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,7 @@ Water droplets -------------- A [Pen](https://codepen.io/chrisbautista/pen/NWXOLvj) by [Chris Bautista](https://codepen.io/chrisbautista) on [CodePen](https://codepen.io). [License](https://codepen.io/license/pen/NWXOLvj).