Лекция 7 Некоторые возможности CSS3

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

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

Стандартное свойство должно ставиться последним! E { -webkit-box-shadow:0 0 10px #000; -moz-box-shadow:0 0 10px #000; box-shadow:0 0 10px #000; }

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

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

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

Позиционирование цветов градиента Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Ещё один пример: background: linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);

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

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

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

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

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

Скруглённые уголки (свойство border-radius) Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном. Синтаксис: border-radius: {1,4} [ / {1,4}]

Значения border-radius

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

Другие свойства скруглённых уголков border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius

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