Пишем разметку:
Пишем наш стиль:
Смотрим наш результат:
HTML:
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<svg class="goo-filter" viewBox="0 0 1 1">
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 -20" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</svg>
<div id="app">
<input type="checkbox" id="toggle" name="toggle" />
<div class="background">
<div class="bg-content">
<div class="drip"></div>
<div class="drip"></div>
<div class="drip"></div>
</div>
<div class="bg-description">
<div class="drip"></div>
<div class="drip"></div>
<div class="drip"></div>
</div>
</div>
<div class="content">
<div class="avatar">?</div>
<header>Un sillón</header>
<p class="pronunciation">? see-yawn</p>
<label class="button" for="toggle"></label>
</div>
<div class="description">
<header>
A chair!
</header>
<p>
We literally did an entire episode on chairs.
</p>
</div>
</div>
CSS:
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
:root {
--color-primary: #6B04FF;
--duration: .5s;
--lag-duration: calc(var(--duration) * 1.5);
--easing: cubic-bezier(.7, 0, .2, 1);
}
.goo-filter {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
transition: inherit;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-duration: var(--duration);
transition-timing-function: var(--easing);
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #ECECEC;
}
#toggle {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#app {
padding: 10vmin;
color: #FFF;
font-size: 3vmin;
display: grid;
grid-gap: 7vmin;
grid-template-rows: 2fr 1fr;
grid-template-columns: 1fr;
}
.background {
grid-column: 1;
grid-row: 1 / span 2;
display: grid;
grid-template: inherit;
z-index: -1;
-webkit-filter: url(#goo);
filter: url(#goo);
}
.bg-content,
.bg-description {
background: var(--color-primary);
border-radius: 5vmin;
}
.drip {
position: absolute;
height: 10vmin;
width: 7vmin;
background: var(--color-primary);
border-radius: 5vmin;
}
.drip:nth-child(1) {
left: 5%;
}
.drip:nth-child(2) {
left: 30%;
width: 14vmin;
}
.drip:nth-child(3) {
right: 2%;
height: 12vmin;
}
.bg-content .drip {
bottom: 0;
}
.bg-description .drip {
top: 0;
}
.bg-description .drip:nth-child(1) {
left: 7%;
}
.bg-description .drip:nth-child(2) {
left: 35%;
}
.bg-description .drip:nth-child(3) {
right: 4%;
}
.bg-content,
.content {
width: 40vmin;
height: 40vmin;
}
.content,
.description {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 1em;
}
.content header,
.description header {
font-size: 1.2em;
}
.content p,
.description p {
color: rgba(255, 255, 255, 0.8);
margin: .5em;
}
.pronunciation {
font-size: 3vmin;
line-height: 1.25;
opacity: 0.8;
}
.content {
z-index: 3;
grid-column: 1;
grid-row: 1;
}
.description {
grid-row: 2;
grid-column: 1;
width: 40vmin;
z-index: 2;
}
.avatar {
width: 15vmin;
height: 15vmin;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5vmin;
margin-bottom: 3vmin;
font-size: 7vmin;
}
.button {
cursor: pointer;
border-radius: 3vmin;
display: flex;
justify-content: center;
align-items: center;
width: 10vmin;
height: 10vmin;
position: absolute;
bottom: -5vmin;
z-index: 10;
background-color: #fff;
color: black;
box-shadow: 0 2vmin 2vmin rgba(0, 0, 0, 0.2);
transition: -webkit-transform calc(var(--duration) / 2) var(--easing);
transition: transform calc(var(--duration) / 2) var(--easing);
transition: transform calc(var(--duration) / 2) var(--easing), -webkit-transform calc(var(--duration) / 2) var(--easing);
will-change: transform;
}
.button:hover {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.button:before {
content: '';
position: absolute;
height: 2vmin;
width: 2vmin;
border: .5vmin solid transparent;
border-bottom-color: black;
border-right-color: black;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
/* ---------------------------------- */
.bg-description {
-webkit-transform: translateY(-140%);
transform: translateY(-140%);
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.description {
opacity: 0;
-webkit-transform: translateY(-80%);
transform: translateY(-80%);
transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
}
#toggle:checked ~ .description {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
#toggle:checked ~ * .button:before {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#toggle:checked ~ * .bg-description {
-webkit-transform: translateY(0);
transform: translateY(0);
}
#toggle:checked ~ * .bg-description .drip {
-webkit-animation: up-down var(--lag-duration) var(--easing) both;
animation: up-down var(--lag-duration) var(--easing) both;
}
@-webkit-keyframes up-down {
0%, 100% {
-webkit-transform: none;
transform: none;
}
20% {
-webkit-transform: scale(0.75, 1.25) translateY(-100%);
transform: scale(0.75, 1.25) translateY(-100%);
}
}
@keyframes up-down {
0%, 100% {
-webkit-transform: none;
transform: none;
}
20% {
-webkit-transform: scale(0.75, 1.25) translateY(-100%);
transform: scale(0.75, 1.25) translateY(-100%);
}
}
#toggle:checked ~ * .bg-content .drip {
-webkit-animation: down-up var(--lag-duration) var(--easing) both;
animation: down-up var(--lag-duration) var(--easing) both;
}
@-webkit-keyframes down-up {
0%, 20%, 100% {
-webkit-transform: none;
transform: none;
}
30% {
-webkit-transform: scale(0.75, 1.25) translateY(100%);
transform: scale(0.75, 1.25) translateY(100%);
}
}
@keyframes down-up {
0%, 20%, 100% {
-webkit-transform: none;
transform: none;
}
30% {
-webkit-transform: scale(0.75, 1.25) translateY(100%);
transform: scale(0.75, 1.25) translateY(100%);
}
}
#toggle:checked ~ * .drip:nth-child(2) {
-webkit-animation-duration: calc(var(--lag-duration) * 1.2);
animation-duration: calc(var(--lag-duration) * 1.2);
}