Создание изображения Евы, героини анимационного фильма ВАЛЛ-И, с использованием только CSS
Демонстрация результата создания изображения Евы, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru
HTML
<div id="eve-container">
<div id="eve-body">
<div id="eve-neck"></div>
<div id="eve-leftarm" class="arm"></div>
<div id="eve-rightarm" class="arm"></div>
</div>
<div id="eve-head">
<div id="eve-faceplate">
<div class="eye" id="eve-lefteye"></div>
<div class="eye" id="eve-righteye"></div>
</div>
</div>
<div id="eve-shadow"></div>
</div>
CSS
div#eve-container {
position: relative;
width: 200px;
height: 600px;
margin: 0 auto;
}
div#eve-container div {
position: absolute;
}
div#eve-head {
height: 145px;
width: 180px;
border-top-left-radius: 90px 85px;
border-top-right-radius: 90px 85px;
border-bottom-left-radius: 90px 60px;
border-bottom-right-radius: 90px 60px;
background-color: #fff;
border: 1px solid #999;
}
div#eve-faceplate {
background-color: #000;
width: 150px;
height: 95px;
bottom: 8px;
margin: 0 15px;
border-top-left-radius: 75px 60px;
border-top-right-radius: 75px 60px;
border-bottom-left-radius: 75px 35px;
border-bottom-right-radius: 75px 35px;
}
div.eye {
width: 45px;
height: 25px;
background-color: #00a;
bottom: 25px;
border-top-left-radius: 22px 12px;
border-top-right-radius: 22px 12px;
border-bottom-left-radius: 22px 13px;
border-bottom-right-radius: 22px 13px;
background: radial-gradient(
#5798ce 0%,
#000 100%
);
}
div#eve-lefteye {
margin-left: 15px;
transform: rotate(10deg);
}
div#eve-righteye {
margin-left: 85px;
transform: rotate(-10deg);
}
div#eve-body {
width: 180px;
height: 220px;
top: 152px;
border-bottom-left-radius: 90px 220px;
border-bottom-right-radius: 90px 220px;
border: 1px solid #999; border-top: none;
background-color: #fff;
);
}
div#eve-neck {
width: 180px;
height: 60px;
background-color: #fff;
top: -30px;
border-radius: 50%;
border: 1px solid #999;
background: radial-gradient(
90px 65px,
#fff, #fff 55%,
#888
);
}
div.arm {
width: 40px;
height: 180px;
background: #fff;
border: 1px solid #999;
}
div#eve-leftarm {
left: -45px;
border-top-left-radius: 30px 50px;
border-top-right-radius: 10px 40px;
border-bottom-left-radius: 30px 130px;
border-bottom-right-radius: 10px 140px;
transform: rotate(10deg);
}
div#eve-rightarm {
left: 180px;
border-top-right-radius: 30px 50px;
border-top-left-radius: 10px 40px;
border-bottom-right-radius: 30px 130px;
border-bottom-left-radius: 10px...