Винни Пух на 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;
}
}
