Двадцать четвертый урок. Декоративное оформление

C помощью CSS можно выполнить следующие декоративные оформления:

Для создания скруглённых углов используется свойство border-radius, в котором указывается радиус скругления.

<div class="w300px h100px b-center bg-green" style="border-radius: 10px;"></div>

Радиус скругления можно задавать в процентах. Данный приём часто используется для создания окружности. В этом случае нужно задать квадрат (ширина равна высоте). Если же это не квадрат, то браузер отрисует элипс.

<div class="w100px h100px b-center bg-green" style="border-radius: 50%;"></div>
<div class="w200px h100px b-center bg-green" style="border-radius: 50%;"></div>

Часто встречается задача скруглить не все углы, а только некоторые. В этом случае радиусы указываются через пробел в последовательности «верх-лево верх-право низ-право низ-лево»:

<div class="w300px h100px b-center bg-green" style="border-radius: 30px 5px 30px 5px;"></div>

То есть здесь действует тоже самое правило, что и для отступов (margin/padding): с верхнего левого угла по часовой стрелке.

Различные комбинации позволяют рисовать необычные формы.

<div class="w300px h100px b-center bg-green" style="border-radius: 50% 50% 15px 15px;"></div>

В UniCSS для скругления используются классы rounded. Класс .rounded — это класс прототипирования со скруглением 10px. По умолчанию доступны .rounded0, .rounded5 и .rounded10. Класс .b-circle задаёт для блока скругление 50%.

<a class="bg-green rounded5 pad10 t-white hover-t-green200 hover-bg-green700 hover-no-underline" href="#">Ссылка</a>
Ссылка

Тень блока задается через свойство box-shadow. В UniCSS используется единственный класс .shadow для прототипирования:

.shadow {
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}

Тень задаётся в формате

inset сдвиг-по-x сдвиг-по-y размытие растяжение цвет

Необязательно ключевое слово inset выводит тень внутри элемента. Если размытие и растяжение не указаны, то они принимаются за 0. Также для смещений можно указывать отрицательные значения — это смещает тень в обратном направлении.

<div class="w300px h100px b-center bg-blue100" style="box-shadow: 5px 5px 3px 2px #404080;"></div>

Аналогично, но указан inset:

<div class="w300px h100px b-center bg-blue100" style="box-shadow: inset 5px 5px 3px 2px #404080;"></div>

Можно указать несколько теней через запятую. С практической точки зрения, вручную подбирать тень довольно сложно, поэтому проще воспользоваться онлайн css-генератором, например css3generator.com (Box Shadow) и получить готовый css-код.

Часто тень задают полупрозрачную — это особенно актуально, когда нижний фон под тенью имеет какой-то цвет. Полупрозрачность позволяет сгладить переход цветов. Для полупрозрачности используют функции rgba() или hsla().


Тень текста задается через свойство text-shadow в формате:

сдвиг-по-x сдвиг-по-y размытие цвет
<div style="text-shadow: 2px 2px 2px #06081C;">Cras pellentesque erat eu urna. Aenean quam mauris, vehicula non, suscipit at, venenatis sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In vulputate. Suspendisse eu tortor. Nam ut sapien quis arcu ullamcorper cursus. Ut magna. Nulla nunc ipsum, sodales vitae, hendrerit non.</div>
Nunc eu ipsum tincidunt risus pellentesque fringilla. Morbi eu justo sed tortor euismod porttitor. Aenean quam mauris, vehicula non, suscipit at, venenatis sed arcu. Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac ante. Cras malesuada. Nullam a nisl. Morbi blandit mollis.

Если размытие не указано, то оно принимается за 0. Подход здесь аналогичен тени блока. Можно указать несколько теней через запятую.

Тень очень сильно влияет на читабельность текста. С мелким текстом (как в этом примере) тень значительно усложнила чтение, поэтому тень для текста применят только там, где это действительно необходимо, например крупные тексты в шапке.

<div class="t300 t-blue600 t-center" style="text-shadow: 0 4px 12px #000066;">My Super Site</div>
My Super Site

Все тени создают повышенную нагрузку на компьтер посетителя, поэтому старайтесь использовать их по минимуму.


Градации фона задаются через свойство background-image с использованием функций linear-gradient() или radial-gradient(). Функции имеют много параметров, поэтому для их изучения воспользуйтесь справочником CSS. Для построения градации удобней, опять же воспользоваться css-генератором Ultimate CSS Gradient Generator. Обратите внимание, что этот генератор выдает код совместимый со старыми версиями браузеров в виде префиксов -moz-, -webkit-, а для IE вообще filter. В этом коде нужна только строчка с linear-gradient, остальные нужно просто удалить. Проверить поддержку css-свойств браузерами вы можете на сайте caniuse.com.

<div class="w300px h100px b-center" style="background: linear-gradient(to bottom, rgba(184,225,252,1) 0%,rgba(169,210,243,1) 10%,rgba(144,186,228,1) 25%,rgba(144,188,234,1) 37%,rgba(144,191,240,1) 50%,rgba(107,168,229,1) 51%,rgba(162,218,245,1) 83%,rgba(189,243,253,1) 100%);"></div>

Для задания границ/бордюров используется свойство border. Это универсальное свойство, которое позволяет одновременно установить цвет, толщину и тип бордюра. Поскольку у него достаточно много значений, то я опять адресую для изучения к справочнику CSS.

<div class="w300px h100px b-center" style="border: 2px red dotted"></div>

Бордюры очень часто используются при верстке, поэтому изучите их основные свойства. В UniCSS для задания бордюров используется классы с префиксом bor. Из-за того, что значений много, задавать бордюр следует сразу тремя классами:

<div class="w300px h100px b-center bor2 bor-dotted bor-red"></div>

Если бордюр нужно указать с какой-то одной стороны, то она указывается в классе «bor-ТИП»

<div class="w300px h100px b-center bor2 bor-dashed-t bor-red bg-yellow"></div>

Можно скрыть бордюр с помощью классов: .bor-none, .bor-none-t, .bor-none-r, .bor-none-b, .bor-none-l.

<div class="w300px h100px b-center bor3 bor-double bor-none-b bor-red"></div>

Все эти возможности позволяют перенести оформление блоков на уровень CSS. Раньше, когда браузеры не обладали такими возможностями, приходилось использовать сложные комбинации из фоновых картинок. В своей практике вы можете столкнуться с ситуацией, когда заказчик предоставит графический макет сделаный в фотошопе. Градации, скругления, тени создаваемые браузером, скорее всего будут отличаться от нарисованных. В таких случаях приоритет следует всегда отдавать браузеру и не пытаться добиваться 100% совпадения с фотошопом.

Задание

Задания доступны только после авторизации.