Изображение Евы из ВАЛЛ-И с использованием только CSS

2 августа 2016 | Опубликовано в css | 2 Комментариев »

Вдохновившись произведениями искусства, созданными с помощью CSS, мы решили создать что-то подобное сами: изображение Евы, героини анимационного фильма ВАЛЛ-И студии Pixar. Разметка здесь довольно простая: используется один блок с относительным позиционированием, в котором находятся несколько блоков с абсолютным позиционированием, которые создают изображение Евы и которые согласно свойству отображения CSS, располагаются относительно содержащего их родительского блока. Каждый блок с абсолютным позиционированием, кроме одного, — элемент тела Евы. Элементы расположены так, что перемещение элемента тела Евы также передвигает ее руки, а изменение положения головы сдвинет ее лицевую панель вместе с глазами.

<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>

Голова Евы размещена под ее телом в разметке просто потому, что браузер будет визуально располагать элементы в порядке их появления в коде, отображая голову Евы так, как будто она висит над телом. Если бы была нужна более семантическая разметка, можно было бы разместить элементы в более привычном порядке «голова-шея-тело» и изменить их расположение с помощью свойства z-index.

Единственный элемент, находящийся в блоке Евы и не являющийся ее реальной частью, — это тень Евы. Когда мы приступим к коду CSS, Вы увидите, что мы фактически не видим блока тени Евы, но видим его тень, созданную с помощью свойства тени блока. Это сделано по простой причине: у градиента, использованного для оттенения шеи Евы, еще нет размытия по Гауссу, которое необходимо для создания реалистичной тени. А у тени блока эта возможность есть.

Для краткости здесь и в демонстрации используется стандартный код 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 140px;
	transform: rotate(-10deg);
}
div#eve-shadow {
	width: 180px;
	height: 60px;
	top: 300px;
	border-radius: 50%;
	box-shadow: 0px 100px 30px rgba(0, 0, 0, 0.3);
}

Создание Евы с использованием только CSS возможно благодаря недооцененному факту, что у радиуса рамки может быть два значения: одно для вертикального размера дуги, а другое — для горизонтального. Для симметричной полукруглой дуги нужно всего одно значение свойства радиуса рамки.

И, наконец, рукам и глазам Евы придан небольшой наклон по оси с помощью трансформаций вращения CSS.

Цель этого урока не в создании изображения Евы, независящего от разрешения, что является одной из возможностей CSS, попробуйте уменьшать и увеличивать масштаб браузера для того, чтобы проверить ее. Вероятно, для создания изображения Евы удобней было бы использовать SVG. Но мы использовали только CSS, просто чтобы показать, что можно создать с его помощью.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

Опубликовано в css, августа 2, 2016
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Изображение Евы из ВАЛЛ-И с использованием только CSS

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые