Создание тени у элемента

Свойство box-shadow позволяет создать у элемента тень. Свойство может принимать сразу несколько значений:

hoffset – горизонтальное смещение тени относительно элемента. При положительном значении тень смещается вправо, при отрицательном – влево;

voffset - вертикальное смещение тени относительно элемента. При положительном значении тень смещается вниз, при отрицательном – вверх;

blur – необязательное значение, определяет радиус размытия. Чем выше значение, тем больше размыты края тени;

spread – необязательное значение, определяет направление тени. Положительное значение – тень направляется от элемента, отрицательное – внутрь элемента;

color – необязательное значение, устанавливает цвет тени.

Значения свойства перечисляются через пробел.

Обтекание элементов

Как правило, все блоки и элементы в браузере отображаются в том порядке, в каком они определены в коде html. В CSS имеется специальное свойство float, которое позволяет установить обтекание элементов. Свойство принимает следующие значения:

left – элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента;

right – элемент перемещается вправо;

none – обтекание отсутствует.

При применении свойства float для стилизуемых элементов, кроме img, рекомендуется установить свойство width.

Иногда возникает необходимость запретить обтекание. Такая задача может быть актуальна, если какой-то блок должен переносится вниз на новую строку, а не обтекать плавающий элемент. Например, футер, как правило должен находиться внизу и растягиваться по всей ширине страницы.

Для запрета обтекания элементов применяется свойство clear, которое указывает браузеру, что к стилизуемому элементу не должно применяться обтекание. Свойство принимает следующие значения:

left – стилизуемый элемент может обтекать плавающий элемент справа;

right - стилизуемый элемент может обтекать плавающий элемент слева;

both – стилизуемый элемент смещается вниз относительно плавающих элементов;

none – стилизуемый элемент ведет себя стандартным образом.

Градиент

Градиент – это плавный переход от одного цвета к другому. В CSS3 имеется ряд градиентов, которые можно использовать для создания фона элемента.

Градиент не представляют какого-то специального свойства, они лишь создают значение, которое присваивается свойству background-image. Для создания градиента нужно указать его начало и несколько цветов:

background-image: linear-gradient(left, black, white);

Для установки начала градиента можно использовать следующие значения: left (слева-направо), right (справа-налево), top (сверху-вниз), bottom (снизу-вверх).

Количество цветов может быть более двух.

Для установки радиального градиента, когда распределение цветов происходит от центра наружу по круговой схеме, используется функция radial-gradient(). В скобках указываются цвета, начиная с середины.

Центр радиального градиента можно сместить, указав его позицию:

background-image: radial-gradient(25% 30%, circle, white, black);

Тема 2.4 Создание макета страницы и верстка

Блочная верстка

Веб – страница состоит из множества различных элементов, которые могут иметь сложную структуру. Поэтому при создании веб страницы возникает необходимость нужным образом позиционировать эти элементы, стилизовать их так, чтобы они располагались на страницы нужным образом. Возникает вопрос создания макета страницы, ее верстки.

При блочной верстке для разметки страницы используется css – float, а основными элементами являются элементы div.

Свойство display

Свойство display позволяет управлять блоком элемента, а также влиять на его позиционирование относительно соседних элементов. Свойство может принимать следующие значения:

- inline – элемент становится строчным, подобно словам в строке текста;

- block – элемент становится блочным, как параграф;

- inline-block – элемент располагается как строка текста;

- list-item – элемент позиционируется как элемент списка;

- run-in – тип блока зависит от окружающих элементов;

- flex – позволяет осуществлять гибкое позиционирование элементов;

- table, inline-table – позволяет расположить элементы в виде таблицы;

- none – элемент не виде и удален из разметки html.

Значение block позволяет определить блочный элемент. Визуально такой элемент отделяется от соседних переносом строки. К таким элементам относятся параграфы – p, элементы div.

Строчные элементы встраиваются в строку, а не переносятся на следующую (занимают столько места, сколько реально необходимо). Для таких элементов свойство display имеет значение inline. Примером строчного элемента служит тег span. Для таких элементов игнорируются некоторые свойства, например - width, height. margin.

Элемент, который обладает смесью признаков блочного и строчного элементов имеет значение свойства inline-block. По отношению к соседним элементам такой элемент расценивается как строчный (не отделяется переводом строки), но по отношению к вложенным элементам рассматривается как блочный. К такому элементу применяется свойства width, height. margin.

Значение run-in определяет элемент, который зависит от соседних элементов. Возможно три варианта поведения:

- Элемент окружен блочными элементами, тогда он становится блочным;

- Элемент окружен строчными элементами, и он становится строчным;

- Во всех остальных случаях он считается блочным.

Значение table превращает элемент в таблицу.

Панель навигации

Панель навигации обеспечивает переходы между страницами сайта или на внешние ресурсы. Фактически – это набор ссылок в виде маркированного списка. Бывают различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае включают элемент <a>. Элемент <a> является строчным, а это значит, что мы не можем указать для него ширину, высоту и отступы. По ширине ссылка занимает то место, которое ей реально необходима.

Решением данной проблемы является – сделать ссылку блочным элементом - 

ul.nav a{display:block;} и далее определить у блока ссылки ширину, высоту и отступы.

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга слева. Второй – создание строки ссылок с помощью установки свойства display:inline-block;