olivia's smile face

dabblet.css

/**
 * olivia's smile face
 */

.face {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  border: 2px solid;
  position: relative;
  margin: 30px auto;
}

.eye {
  width: 50px;
  height: 90px;
  border-radius: 45px / 25px;
  border: none;
  border-top: 2px solid #000;
  position: absolute;
  top: 90px;
}

.eye-left {
  left: 50px;
}

.eye-right {
  right: 50px;
}

.cheek {
  position: absolute;
  top: 125px;
  width: 300px;
  height: 50px;
}

.cheek-left {
  width: 60px;
  height: 30px;
  border-radius: 60px / 30px;
  background: #ffdab9;
  position: absolute;
  left: 22px;
  bottom: 0;
}

.cheek-right {
  width: 60px;
  height: 30px;
  border-radius: 60px / 30px;
  background: #ffdab9;
  position: absolute;
  right: 22px;
  bottom: 0;
}

.mouse {
  width: 150px;
  height: 75px;
  border-radius: 75px / 45px;
  border: none;
  border-bottom: 3px solid #000;
  position: absolute;
  left: 75px;
  bottom: 50px;
}
.mouse:hover {
  border: none;
  border-top: 3px solid;
  bottom: 6px;
}
.cheek:hover {
  -webkit-filter:blur(5px);
  -webkit-filter:drop-shadow(5px 5px 5px #ccc);
  transform: scale(1.2);
 
}

dabblet.html

<div class="face">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
    <div class="cheek">
        <div class="cheek-left"></div>
        <div class="cheek-right"></div>
    </div>
    <div class="mouse"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}