Винни Пух на CSS

Диснеевский Винни Пух на чистом CSS

HTML

<div class="box">
    <div class="head-shade"></div>
    <div class="left-e-shade"></div>
    <div class="right-e-shade"></div>
    <div class="head">
        <div class="head-copy"></div>
        <div class="left-cheek"></div>
        <div class="right-cheek"></div>
        <!-- ears -->
        <div class="left-ear"></div>
        <div class="right-ear"></div>
        <!-- eyes -->
        <div class="left-eyebrow"></div>
        <div class="right-eyebrow"></div>
        <div class="eye-container">
            <div class="left-eye">
                <div class="pupil"></div>
            </div>
            <div class="right-eye">
                <div class="pupil"></div>
            </div>
        </div>
        <!-- nose/mouth -->
        <div class="left-c-line"></div>
        <div class="snout-line"></div>
        <div class="right-c-line"></div>
        <div class="nose">
            <div class="nose-shine"> </div>
        </div>
        <div class="left-lip"></div>
        <div class="left-smile-line"></div>
        <div class="right-lip"></div>
        <div class="right-smile-line"></div>
        <div class="chin-line"></div>
    </div><!-- head -->
</div><!-- box -->

CSS

body {
  background-color: #c9635f;
}

.title {
  text-align: center;
  font-family: "Open Sans Condensed", sans-serif;
  color: #ffbe67;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.box {
  position: relative;
  margin: auto;
  display: block;
  width: 400px;
  height: 400px;
  margin-top: 100px;
}
.box .head {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  margin-top: 10%;
  border-radius: 40%;
  background-color: #ffbe67;
  position: absolute;
  border-bottom: 6px solid #78532d;
}
.box .head .head-copy {
  width: 100%;
  height: 100%;
  border-radius: 40%;
  background-color: #ffbe67;
  position: absolute;
  z-index: 2;
}
.box .head .left-cheek {
  width: 77%;
  height: 75%;
  margin-left: -7.5%;
  margin-top: 20%;
  background-color: #ffbe67;
  border-left: 6px solid #78532d;
  border-radius: 50%;
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}
.box .head .right-cheek {
  width: 75%;
  height: 75%;
  margin-left: 30.5%;
  margin-top: -75%;
  background-color: #ffbe67;
  border-right: 6px solid #78532d;
  border-radius: 50%;
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}
.box .head .left-ear {
  margin-left: 2%;
  margin-top: -109%;
  width: 25%;
  height: 30%;
  position: absolute;
  border-top-left-radius: 40%;
  border-top-right-radius: 40%;
  border-bottom-left-radius: 90%;
  background-color: #ffbe67;
  z-index: 1;
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.box .head .right-ear {
  margin-left: 72%;
  margin-top: -109%;
  width: 25%;
  height: 30%;
  position: absolute;
  border-top-left-radius: 40%;
  border-top-right-radius: 40%;
  border-bottom-right-radius: 90%;
  background-color: #ffbe67;
  z-index: 1;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.box .head .left-eyebrow {
  position: absolute;
  z-index: 3;
  margin-left: 18%;
  margin-top: -77%;
  width: 12%;
  height: 10px;
  border-top: 5px solid #78532d;
  border-top-left-radius: 90%;
  border-top-right-radius: 90%;
  -ms-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}
.box .head .right-eyebrow {
  position: absolute;
  z-index: 3;
  margin-left: 70%;
  margin-top: -77%;
  width: 12%;
  height: 10px;
  border-top: 5px solid #78532d;
  border-top-left-radius: 90%;
  border-top-right-radius: 90%;
  -ms-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(23deg);
}
.box .head .eye-container {
  position: absolute;
  width: 75%;
  height: 30%;
  margin-left: 13%;
  margin-top: -80%;
  z-index: 2;
  border-top-left-radius: 90%;
  border-top-right-radius: 90%;
}
.box .head .eye-container .left-eye {
  position: absolute;
  margin-left: 15%;
  margin-top: 26%;
  width: 8%;
  height: 34%;
  background-color: #78532d;
  border-radius: 50%;
  z-index: 3;
}
.box .head .eye-container .right-eye {
  position: absolute;
  margin-left: 78%;
  margin-top: 26%;
  width: 8%;
  height: 34%;
  background-color: #78532d;
  border-radius: 50%;
  z-index: 3;
}
.box .head .eye-container .pupil {
  position: absolute;
  margin-left: 25%;
  margin-top: 25%;
  width: 10%;
  height: 10%;
  background-color: #fff;
  border-radius: 50%;
  z-index: 4;
}
.box .head .left-c-line {
  position: absolute;
  z-index: 5;
  margin-left: 20%;
  margin-top: -52%;
  width: 9%;
  height: 10px;
  border-top: 5px solid #b47d44;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}
.box .head .snout-line {
  position: absolute;
  z-index: 5;
  margin-left: 36%;
  margin-top: -52%;
  width: 30%;
  height: 15%;
  border-top: 5px solid #b47d44;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.box .head .right-c-line {
  position: absolute;
  z-index: 5;
  margin-left: 73%;
  margin-top: -52%;
  width: 9%;
  height: 10px;
  border-top: 5px solid #b47d44;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}
.box .head .nose {
  position: absolute;
  background-color: #78532d;
  margin-left: 42%;
  margin-top: -45%;
  width: 18%;
  height: 10%;
  border-radius: 50%;
  z-index: 3;
}
.box .head .nose .nose-shine {
  position: absolute;
  background-color: #fff;
  margin-left: 30%;
  margin-top: 15%;
  width: 40%;
  height: 10%;
  border-radius: 50%;
  z-index: 3;
}
.box .head .left-lip {
  position: absolute;
  width: 35%;
  height: 25%;
  margin-left: 16%;
  margin-top: -35%;
  border-bottom: 5px solid #78532d;
  border-bottom-left-radius: 100%;
  z-index: 4;
}
.box .head .left-smile-line {
  position: absolute;
  z-index: 5;
  margin-left: 12%;
  margin-top: -33%;
  width: 12%;
  height: 30px;
  border-top: 5px solid #78532d;
  border-top-left-radius: 90%;
  border-top-right-radius: 90%;
  -ms-transform: rotate(-23deg);
  -webkit-transform: rotate(-23deg);
  transform: rotate(-23deg);
}
.box .head .right-lip {
  position: absolute;
  width: 35%;
  height: 25%;
  margin-left: 51%;
  margin-top: -35%;
  border-bottom: 5px solid #78532d;
  border-bottom-right-radius: 100%;
  z-index: 4;
}
.box .head .right-smile-line {
  position: absolute;
  z-index: 5;
  margin-left: 78%;
  margin-top: -33%;
  width: 12%;
  height: 30px;
  border-top: 5px solid #78532d;
  border-top-left-radius: 90%;
  border-top-right-radius: 90%;
  -ms-transform: rotate(23deg);
  -webkit-transform: rotate(23deg);
  transform: rotate(23deg);
}
.box .head .chin-line {
  position: absolute;
  z-index: 5;
  margin-left: 45%;
  margin-top: -8%;
  width: 12%;
  height: 20px;
  border-top: 5px solid #78532d;
  border-top-left-radius: 90%;
  border-top-right-radius: 90%;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.head-shade {
  width: 79%;
  height: 79%;
  margin-left: 9%;
  margin-top: 8.8%;
  border-radius: 40%;
  border: 6px solid #78532d;
  position: absolute;
  background-color: #78532d;
}

.left-e-shade {
  margin-left: 10.8%;
  margin-top: -2.4%;
  width: 19.5%;
  height: 25%;
  position: absolute;
  border-top-left-radius: 40%;
  border-top-right-radius: 40%;
  border-bottom-left-radius: 90%;
  border: 6px solid #78532d;
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  background-color: #78532d;
}

.right-e-shade {
  margin-left: 66%;
  margin-top: -2.4%;
  width: 19.5%;
  height: 25%;
  position: absolute;
  border-top-left-radius: 40%;
  border-top-right-radius: 40%;
  border-bottom-right-radius: 90%;
  border: 6px solid #78532d;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  background-color: #78532d;
}

@media all and (max-width: 600px) {
  .box {
    position: relative;
    margin: auto;
    display: block;
    margin-top: 2%;
    width: 300px;
    height: 300px;
    background: none;
  }
}