CSS3: как построить дом?

Не так давно я наконец решил взяться на изучение еще одной интересной темы - фронт-енд разработка. Так как в целом устройство HTML документа мне было понятно, я решил заняться основами CSS. А в качестве разминки я решил “построить” маленький домик только средствами HTML и CSS3.

Начало

Начал я с того, что определил основные составляющие будущего “дома”: труба, крыша, чердак и один этаж. С трубой и этажем все просто - достаточно описать div блоки, задав размеры, цвет и позицию. С крышей немного интереснее: все-таки она находится под углом и состоит из двух половинок, каждая из которых повернута под некоторым углом к горизонтали. Чердак, ограниченый снизу этажем, а сверху крышей, представляет собой треугольный блок. Определив компоненты, HTML файл принял такой вид:

Sample code
1
2
3
4
5
6
7
<div id="house">
<div id="pipe"></div>
<div id="left-roof"></div>
<div id="right-roof"></div>
<div id="loft"></div>
<div id="floor"></div>
</div>

Некоторые улучшения

Пустые стены - это совершенно неинтересно. Потому я решил добавить маленькое окошко на чердаке:

Sample code
1
2
3
<div id="loft">
<div id="window"></div>
</div>

А на первом этаже решил сделать дверь с окошечком и ручкой:

Sample code
1
2
3
4
5
6
<div id="floor">
<div id="door">
<div id="small-window"></div>
<div id="doorknob"></div>
</div>
</div>

Стилизация

Теперь, разметив структуру “дома”, пора перейти к таблице стилей. Так, как все элементы спрятаны внутри блока house, то мы можем задавать позицию элементов, не боясь, что они могут “разъехаться” при изменении размера экрана. В целом все достаточно просто, интересным является только треугольный чердак:

Sample code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#loft
{
width: 95px;
height: 95px;
position: relative;
top: -100px;
left: -20px;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,.5)
}
#loft:after
{
content: "";
position: absolute;
width: 45px;
height: 45px;
background: #efd;
transform: rotate(45deg);
top: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0,0,0,.5)
}

По сути, основной блок поворачивается на 45 градусов и наполовину скрывается другим блоком.

Анимация

Предпоследним штрихом стала анимация. Самое простое, что пришло мне в голову - это сделать для “трубы” “дым”. Для этого я создал новый блок внутри “трубы”, который разместил слоем ниже, и к которому прикрепил простую анимацию:

Sample code
1
2
3
<div id="pipe">
<div id="smoke"></div>
</div>
Sample code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#smoke
{
width: 6px;
height: 6px;
left: 1px;
position: relative;
background: gray;
border-radius: 50%;
border: 1px solid #aaa;
box-shadow: 0 0 3px;
z-index: -1;
-webkit-animation: smoke-anim 1s linear infinite;
animation: smoke-anim 1s linear infinite
}
...
@keyframes smoke-anim {
from
{
top: 0;
opacity: 1
}
to
{
top: -25px;
opacity: 0
}
}

И напоследок раскрасил фон, выделив два блока для земли и неба. В конце я получил вот что:

Small House on CodePen

Заключение

Собственно, CSS не такая уж и сложная технология. Поигравшись с тремя различными “пэнами”, я ощутил, что создавать и верстать страницы можно вполне быстро и легко. В планах поэкспериментировать с множеством других CSS параметров, посмотреть, как ведет себя каждый из них.

Ссылки