br 8eb34


search

Новые свойства CSS3

CSS3CSS3 - это современный уровень развития стилевого оформления веб-страниц, благодаря новым свойствам создание шаблона сайта упрощается и приобретает изящные формы. Поначалу большинство стилевых новведений не поддерживалось многими браузерами, что притормаживало их развитие и широкое применение. Однако сейчас обновленные версии популярных веб-браузеров воспринимают и правильно отображают практически все новые свойства 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;

Продолжение следует...

http://gradients.glrzad.com/

Добавить комментарий

Защитный код
Обновить

Комментарии