Web-технологии

Кейно Павел Петрович

pavel@mati.ru

Лекция 7

Некоторые возможности CSS3

Браузерные префиксы

Браузерные (вендорные) префиксы — это приставки к названию CSS свойства, которые добавляют производители браузеров для нестандартизированных свойств.

Наиболее распространенные браузерные префиксы

Префикс Производитель Браузер Браузерный движок
-o-, -op-, -xv- Opera Software Opera Presto
-moz- проект Mozilla Firefox, SeaMonkey, Camino и др. Gecko
-ms- Microsoft Internet Explorer 8 Trident
-khtml- проект KDE Safari до версии 3, Konqueror и др. KHTML послужил основой для WebKit
-webkit- Apple, Google Safari 3+, Google Chrome и др. WebKit

Стандартное свойство должно ставиться последним!

E {
   -webkit-box-shadow:0 0 10px #000;
      -moz-box-shadow:0 0 10px #000;
      	   box-shadow:0 0 10px #000;
  }

Градиент

Градиентом называют плавный переход от одного цвета к другому, причем самих цветов и переходов между ними может быть несколько.

Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background.

Градиент

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

background: linear-gradient(tпозицияop, начальный цвет#000, конечный цвет#fff);

Нулю градусов (или 360º) соответствует горизонтальный градиент слева направо, далее отсчёт ведётся против часовой стрелки.

Некоторые градиенты

Позиция Угол Описание Вид
top 270deg Сверху вниз.
left 0deg Слева направо.
bottom 90deg Снизу вверх.
right 180deg Справа налево.
top left -45deg От левого верхнего угла к правому нижнему.
top right 225deg От правого верхнего угла к левому нижнему.
bottom left 45deg От левого нижнего угла к правому верхнему.
bottom right -225deg От правого нижнего угла к левому верхнему.

Позиционирование цветов градиента

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в желтый.

Еще один пример:

background: linear-gradient(top, #b5bdc8 0%, #828c95 36%,
#28343b 100%);

Радиальный градиент

Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки.

линейный градиент

радиальный градиент

Пример:

background: radial-gradient(top позицияright, начальный цвет#000, конечный цвет#fff);

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

Круговой и эллиптический градиент

Возможны две формы радиального градиента — круг (circle) и эллипс (ellipse), которые различаются своим видом. По умолчанию устанавливается эллиптический градиент.

background: radial-gradient(cтип градиентаircle,  начальный цвет#f9e497,   конечный цвет#ffb60f);

круговой градиент (значение circle)

эллиптический градиент (значение ellipse)

Тень

Для добавления тени для блочного элемента используется свойство box-shadow, у которого имеется шесть значений, из них только два являются обязательными.

box-shadow: inse1t 5px2 5px3 10p4x 3px5 #ccc6;

Значения box-shadow

box-shadow: inse1t 5px2 5px3 10p4x 3px5 #ccc6;
  1. ключевое слово inset устанавливает тень внутри элемента;
  2. сдвиг тени по горизонтали (5px — вправо, -5px — влево);
  3. сдвиг по вертикали (5px — вниз, -5px — вверх);
  4. радиус размытия тени (0 — резкая тень);
  5. растяжение тени (5px — растяжение, -5px — сжатие);
  6. цвет тени.

Следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию.

Значения теней

Код Результат Описание
box-shadow: 5px 5px;
Резкая тень справа и снизу.
box-shadow: -5px -5px;
Резкая тень слева и сверху.
box-shadow: 0 0 5px;
Размытая тень вокруг элемента.
box-shadow: 0 0 5px 2px;
Расширение тени на 2 пиксела.
box-shadow: 0 0 5px 2px red;
Красное свечение вокруг элемента.
box-shadow: 0.4em 0.4em 5px
rgba(122,122,122,0.5);
Полупрозрачная тень.
box-shadow: inset 0 0 6px;
Тень внутри.

Тень для текста

Синтаксис:

text-shadow: none | тень [,тень]*


где тень:

<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

none
Отменяет добавление тени.
цвет
Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр.
сдвиг по x, сдвиг по y
Смещение тени по горизонтали (по вертикали) относительно текста. Обязательные параметры.
радиус размытия
Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. По-умолчанию: 0.

Скругленные уголки (свойство border-radius)

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис:

{border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения border-radius

Число Результат
1 Радиус указывается для всех четырех уголков.
2 Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3 Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4 По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

Эллиптические уголки

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

Разница между обычным скругленным уголком и эллиптическим уголком

Другие свойства скруглённых уголков

border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius

Ссылки по теме

Разработка: Викулин Максим