CSS3 - это современный уровень развития стилевого оформления веб-страниц, благодаря новым свойствам создание шаблона сайта упрощается и приобретает изящные формы. Поначалу большинство стилевых новведений не поддерживалось многими браузерами, что притормаживало их развитие и широкое применение. Однако сейчас обновленные версии популярных веб-браузеров воспринимают и правильно отображают практически все новые свойства CSS3.
Некоторые свойства будут выглядеть по-другому для разных браузеров, впереди будет стоять специальный префикс:
- transiction - свойство CSS3 по-умолчанию
- -webkit-transition - для Safari и Google Chrome
- -o-transition - для Opera
- -moz-transition - для Mozilla Firefox
- -ms-transition - для Internet Explorer
border-radius - свойство, с помощью которого можно задать закругление углов блочного элемента. Закругление назначается для всех углов или для каждого по отдельности: верхний левый, верхний правый, нижний правый и нижний левый углы.
border-radius: 2px 5px 5px 2px;
box-shadow - это свойство задаёт тень для блока. Тень можно устанавливать любого цвета и размера. Принцип такой же как при добавлении тени к тексту (text-shadow).
box-shadow: 2px 2px 5px #666666;
opacity - добавление "прозрачности" любому элементу. Удобный эффект, находит массу применений - полупрозрачный фон, изменение прозрачности при наведении и т.п. Уровень изменяется от прозрачного - 0 до 1 - непрозрачного.
opacity: 0.8;
background-origin - это свойство определяет положение картинки. Есть 3 значения:
- padding-box — изображение прилегает к краям границы элемента
- border-box — картинка располагается по краям элемента, но граница может его перекрывать
- content-box — изображение позиционируется в зависимости от содержимого элемента
background-origin: border-box;
transform - специальное свойство CSS3 для трансформирования объектов. Значениями являются:
- translate (10px,5px) - в этом случае объект сдвинется на 10 пикселей и на 5 пикс. вниз, чтобы сдвинуть в противоположную сторону, надо добавить значениям знак "-" (например, -10px)
- rotate(90deg) - поворот объекта по часовой стрелке на 90 град., если поставить со знаком "-", то поворот будет против часовой
- scale(1.5) - увеличение объекта в полтора раза, соответсвенно, если поставить "-", то объект уменьшится на указанное значение
-moz-transform: rotate (60deg);
transition - универсальное свойство предназначенное для создания анимации
transition-duration - время совершения анимации в сек (transition-duration: 0.5s;)
transition-property - свойство, которое будет анимировано (transition-property:background;)
transition-timing-function - тип анимации. Есть несколько значений:
- default - по умолчанию
- ease - плавная функция соответствует cubic-bezier(0.25, 0.1, 0.25, 1.0)
- linear - линейная функция, эквивалента значеню в cubic-bezier (0.0, 0.0, 1.0, 1.0)
- ease-in - плавная функция внутрь, эквивалентно (0.42, 0, 1.0, 1.0).
- ease-out - плавная функция извне, соответствует cubic-bezier (0, 0, 0.58, 1.0).
- ease-in-out - функция эквивалентная cubic-bezier (0.42, 0, 0.58, 1.0)
- cubic-bezier (x1, y1, x2, y2) - устанавливаются в ручную
-moz-transition: background 1s linear;
Продолжение следует...
