Skip to content

Instantly share code, notes, and snippets.

@chrisbautista

chrisbautista/index.html

Created April 19, 2022 01:54
Show Gist options
  • Save chrisbautista/f92cde0cea549fbb29b853f05e10a7f2 to your computer and use it in GitHub Desktop.
Save chrisbautista/f92cde0cea549fbb29b853f05e10a7f2 to your computer and use it in GitHub Desktop.
Download ZIP
Water droplets
Raw
index.html
<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>
Raw
style.scss
$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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment