Свойства CSS3

В CSS3 появились новые свойства, позволяющие создавать визуальные и динамические эффекты, которые сегодня считаются неотъемлемой частью Сети:

— border-radius. Создает скругленные углы для блочных элементов. Принимает два параметра, определяющих форму каждого угла поля. Первый параметр задает горизонтальную кривую, второй — вертикальную кривую, благодаря чему появляется возможность создавать даже углы эллиптической формы. Если указать только одно значение (например, border-radius: 20px), то все углы будут скругляться одинаково. Можно также объявить собственное значение для каждого угла, перечислив их по часовой стрелке от верхнего левого к нижнему левому. Если задаются оба параметра настройки кривой, то эти значения должны быть разделены косой чертой (например, border-radius: 15px / 20px);

— box — shadow. Создает тени для блочных элементов. Принимает до пяти параметров: цвет, сдвиг по горизонтали, сдвиг по вертикали, радиус размытия и ключевое слово inset, если тень должна находиться внутри, а не снаружи элемента. Значение сдвига может быть отрицательным, а радиус размытия и ключевое слово inset указывать необязательно (например, box-shadow: #000000 5px 5px 10px inset);

— text-shadow. Аналогично box-shadow, однако предназначено специально для текста. Принимает четыре параметра: цвет, сдвиг по горизонтали, сдвиг по вертикали и радиус размытия (например, text-shadow: #000000 5px 5px 10px);

— @font-face. Позволяет загрузить и использовать любой желаемый шрифт. В первую очередь необходимо создать шрифт, указав его название в свойстве font-family и путь к файлу в свойстве src (например,

@font-face{ font-family: Myfont; src: url(‘fontfile. ttf’) }).

После этого вы сможете связать данный шрифт (в нашем примере — Myfont) с любым элементом в документе; о linear-gradient(начальная_позиция, начальный_цвет, конечный_ цвет). Эту функцию можно применять к свойству background или background-image для создания линейного градиента. Ее атрибуты указывают начальную точку градиента и участвующие цвета. Первое значение может быть в пикселах, процентах или представлять собой одно из ключевых слов: top, bottom, left или right. Начальную позицию можно заменить углом, для того чтобы указать точное направление распространения градиента (например, linear-gradient(top, #FFFFFF 50%, #006699 90%);); о radial-gradient(начальная_позиция, форма, начальный_цвет, ко-нечный_цвет). Эту функцию можно применять к свойству background или background-image для создания радиального градиента. Начальная позиция — это точка отсчета, указанная как значение в пикселах, процентах или комбинация ключевых слов center, top, bottom, left и right. Форма определяется одним из двух допустимых значений: circle для круга и ellipse для эллипса, — а цветовые точки включают в себя значение цвета и позицию начала перехода (например, radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);); о rgba(). Усовершенствованная версия старой функции rgb(). Принимает четыре значения: уровень красного цвета (0-255), уровень зеленого цвета (0-255), уровень синего цвета (0-255) и уровень непрозрачности (значение от 0 до 1); о hsla(). Усовершенствованная версия старой функции hsl(). Она принимает четыре значения: тон (значение от 0 до 360), насыщение (значение в процентах), яркость (значение в процентах) и уровень непрозрачности (значение от 0 до 1); о outline. Было улучшено путем добавления еще одного свойства под названием outline-offset. В сочетании два свойства создают вторую рамку на расстоянии от первой (например, outline: 1px solid #000000; outline-offset: 10px;); о border-image. Создает рамку с определенным изображением. Для этого необходимо сначала создать саму рамку с помощью свойства border или border-with. Свойство border-image принимает минимум три параметра: URL-адрес изображения, размер фрагментов, которые будут вырезаны из изображения для построения рамки, а также ключевое слово, описывающее способ размещения фрагментов (например, border-image: url("file. png") 15 stretch;);

— transform. Меняет форму элемента. Работает с четырьмя базовыми функциями: scale, rotate, skew и translate. Функция scale принимает только одно значение. Отрицательное значение инвертирует элемент, значение от 0 до 1 уменьшает его, а значение больше 1 — увеличивает (например, transform: scale(1.5);). Функция rotate поворачивает элемент и принимает только одно значение, выраженное в градусах (например, transform: rotate(20deg);). Функция skew принимает два значения, также выраженные в градусах, которые определяют степень трансформации по горизонтали и по вертикали (например, transform: skew(20deg, 20deg);). Функция translate перемещает объект на количество пикселов, переданное с помощью двух ее параметров (например, transform: translate(20px););

— transition. Может применяться к другим свойствам для создания перехода между двумя состояниями элемента. Принимает до четырех параметров: задействованное свойство, длительность перехода, ключевое слово, определяющее тип перехода (ease, linear, ease-in, ease-out, ease-in-out), и значение задержки, то есть величину паузы, предшествующей переходу (например, transition: color 2s linear 1s;).