Page Title

CSS Урок 2

Делаем шапку как у меня сверху
Что же нам для этого понадобится?

border-radius(отвечает за круглые углы )
box-shadow(отвечает за подсветку блока)
background-color(отвечает за цвет фона шапки)
color(отвечает за цвет текста внутри)
text-align(отвечает за рассположение текста в центре )
line-height(отвечает за рассположение текста по высоте в середине шапки)

Слово "урок2" находится ровно в центре шапки, а по высоте он рассположен ровно по середине. Из примеров ниже вы поймете как все это работает.
Давайте с вами теперь сделаем блок с разными углами, красного цвета, с синей подсветкой блока.

Вот его свойства

width: 80%;(ширина 80% от родителя, родитель в нашем случае это блок в котором он находится)
height: 50px;(высота в 50 пикселей)
margin: 10px auto 0;(такие значения выставят любой блок строго по центру. В нашем случае 10рх отвечает за верхний отступ, auto отвечает за отступы справа и слева, 0 отвечает за отсутп снизу. у вас это могут быть разные значения)
background-color: red;(сделали задний фон красным)
border-radius: 30px 0 30px 0;(задали только верхнему левому и нижнему правому окружность в 30 пикселей)
box-shadow: 0 0 15px 0 blue;(подсветка вокруг блока в 15пикселей. с этим значением можно здорово поиграть)

А теперь, давайте поиграем со свойством box-shadow. (пссс, чтобы текст не вылазил из блока, ставь ему высоту auto, по мере добавления текста, твой блок будет менять высоту)

Мы изменили значение box-shadow.
если у красного было 0 0 15рх 0;
то тут уже 5рх 5рх 5рх 0;

Теперь наш блок как будто вырван из страницы и отдает тень. Так же мы поменяли и цвет тени. Не забываем об этом. Пишем
box-shadow:5рх 5рх 5рх 0 black;

тут мы уже сделали свойство border-radius по другому. Так же сменим цвет и тень

Тут мы выставили уже другие значения для box-shadow, задали этому свойству уже другой цвет, а так же изменили border radius

урок 2