Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css3 » Obzor-novyx-svojstv-css3

Обзор новых свойств CSS3

Радиусы уголков и простые тени в CSS3 может сделать любой новичок, но это лишь вершина айсберга. Данный урок посвящен подробному разбору кроссбраузерности градиентов с множеством цветов, возможностей применения более одной тени, особенностей применения префиксов свойств для различных браузеров.

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

CSS3 дает возможность создавать различные виды градиентов. Самым элементарным из них является линейный градиент (Linear-gradient).

.property1{
  background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #E3D6D9), 
  color-stop(1, #0C574D)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */
background-image: -o-linear-gradient(bottom, #E3D6D9 0%, #0C574D 100%);
/* Opera 11.10+ */
background-image: -moz-linear-gradient(bottom, #E3D6D9 0%, #0C574D 100%);
/* Firefox 3.6+ */
background-image: -webkit-linear-gradient(bottom, #E3D6D9 0%, #0C574D 100%);
/* Chrome 10+,Safari 5.1+, iOS 5+, Android 4+ */
background-image: -ms-linear-gradient(bottom, #E3D6D9 0%, #0C574D 100%);
/* IE 10+ */
background-image: linear-gradient(to bottom, #E3D6D9 0%, #0C574D 100%);
}

Смотри пример ниже:

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

Примечание: Более ранние версии Safari и Chrome до 10 версии имели свой синтаксис. Internet Explorer и Opera также существенно удлиняют код, добавляя свои префиксы.

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

Повторяющийся градиент

Repeating-linear-gradient – это метод CSS3, который повторяет линейный градиент. К примеру, с его помощью можно делать фоны с повторяющимся рисунком.

.property2{
 background-image: -o-repeating-linear-gradient(bottom, #E3D6D9 20%, #FF0000 30%);
/* Opera 11.10+ */
background-image: -moz-repeating-linear-gradient(bottom, #E3D6D9 20%, #FF0000 30%);
/* Firefox 3.6+ */
background-image: -webkit-repeating-linear-gradient(bottom, #E3D6D9 20%, #FF0000 30%);
/* Chrome 10+,Safari 5.1+, iOS 5+, Android 4+ */
background-image: -ms-repeating-linear-gradient(bottom, #E3D6D9 20%, #FF0000 30%);
/* IE 10+ */
background-image: repeating-linear-gradient(to bottom, #E3D6D9 20%, #FF0000 30%);
}

Можно увидеть следующий результат:

Радиальный градиент (Radial-gradient)

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

.property3{
  background: #253056;
  background: -webkit-gradient(radial, center center, 0px, center center, 100%,
   color-stop(30%,#253056), color-stop(100%,#C3C3C3)); /*  Chrome 1-10, Safari 4+, 
   iOS3.2-4.3, Android 2.1-3.0 */
  background: -webkit-radial-gradient(center, ellipse cover, #253056 30%,#C3C3C3 100%); 
  /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
  background: -moz-radial-gradient(center, ellipse cover, #253056 30%, #C3C3C3 100%);
   /* Firefox 3.6+ */
  background: -o-radial-gradient(center, ellipse cover, #253056 30%,#C3C3C3 100%);
   /* Opera 11.6+ */
  background: -ms-radial-gradient(center, ellipse cover, #253056 30%,#C3C3C3 100%); 
  /* IE 10+ */
  background: radial-gradient(center, ellipse cover, #253056 30%,#C3C3C3 100%);
}

Должна возникнуть следующая картина:

Примечание: в версиях Opera младше 11.6 радиальный градиент не поддерживался.

Множественные фоны

CSS3 позволяет задать к одному элементу одновременно несколько фоновых изображений. Некоторые браузеры множественные фоны не поддерживают.

.property4{
 background: url(fon1.png) no-repeat 0 0;
  background: url(fon1.png) no-repeat 0 0, url(fon2.png) no-repeat 0 0, 
  url(fon3.png) no-repeat 0 0;
 /* Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Androd 2.1+ */
}

Для создании множественных фонов необходимо прописывать их в последовательности от переднего (верхнего) к заднему. Таком образом, фон, располагающийся в самом низу будет прописан последним. Для множественных фонов можно использовать CSS3 градиенты вместо фоновых изображений.

Скругленные углы (Border-radius)

Если все углы блока имеют равный радиус, то код будет иметь следующий вид:

.property5{
  -webkit-border-radius: 15px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
  -moz-border-radius: 15px; /* Firefox 1-3.6 */
  border-radius: 15px; /* Opera 10.5+, IE 9+, Safari 5, Chrome, Firefox 4+,
  iOS 4+,Android 2.1+ */
}

А вот и результат:

Если у блока углы не равны, то необходимо задать радиус для каждого из них.
Примечание: Новые версии браузеров уже не используют вендорные префиксы. Firefox для перечисления углов использует свой синтаксис, но здесь можно использовать сокращенную версию синтаксиса, которая подходит для всех браузеров.

.property6{
  -moz-border-radius: 10px 20px 30px 40px;
  -webkit-border-radius: 10px 20px 30px 40px;
  border-radius: 10px 20px 30px 40px;
}

В результате получится следующее:

Довольно интересная особенность: если прописывать радиусы для каждого угла попарно, то можно получить блоки необычных форм:

.property7{
  border-top-left-radius: 25px 100px;
  border-top-right-radius: 30px 80px;
  border-bottom-left-radius: 80px 60px;
  border-bottom-right-radius: 70px 20px;
}

Вот, что мы получим в результате:

Если задать одинаковые пары радиусов для всех углов, то получим следующее:

.property8{
  border-radius: 18px / 37px;
}

И рисунок:

Тени

Box-shadow – это тени для блоков. Простой вариант тени от блока имеет вид:

.property9{
  webkit-box-shadow: 0px 0px 5px #60C; /* Safari 3-4, iOS 4.0.2-4.2, Android2.3+ */
  -moz-box-shadow: 0px 0px 5px #60C; /* Firefox 3.5-3.6 */
  box-shadow: 0px 0px 5px #60C; /* Opera 10.5+, IE 9+, Firefox 4+, Chrome 6+,iOS 5+ */
}

Мы получим следующий результат:

CSS3 дает возможность задать тени внутри блока:

.property10{
  webkit-box-shadow:inset -3px -3px 5px #60C; /* Safari 3-4, iOS 4.0.2-4.2, Android2.3+ */
  -moz-box-shadow:inset -3px -3px 5px #60C; /* Firefox 3.5-3.6 */
  box-shadow:inset -3px -3px 5px #60C; /* Opera 10.5+, IE 9+, Firefox 4+, Chrome 6+,
  iOS 5+ */
}

Мы получим следующий результат:

Если необходимо задать несколько теней для одного и того же блока, то используется следующий код:

.property11{
  webkit-box-shadow:inset -3px -3px 5px #60C, 5px 6px 4px #666;
   /* Safari 3-4, iOS 4.0.2-4.2, Android2.3+ */
  -moz-box-shadow:inset -3px -3px 5px #60C, 5px 6px 4px #666;
   /* Firefox 3.5-3.6 */
  box-shadow:inset -3px -3px 5px #60C, 5px 6px 4px #666; 
  /* Opera 10.5+, IE 9+, Firefox 4+, Chrome 6+,iOS 5+ */
}

Результат:

Для изменения размера тени существует spread-radius – его используют нечасто. Чтобы увеличить тень spread-radius прописывают положительным числом после значения размытия тени. Для уменьшения тени spread-radius прописывается аналогично, только используется отрицательное число.

.property12{
  webkit-box-shadow:  -18px 0px 10px -10px #666; 
   /* Safari 3-4, iOS 4.0.2-4.2, Android2.3+ */
  -moz-box-shadow: -18px 0px 10px -10px #666; 
   /* Firefox 3.5-3.6 */
  box-shadow: -18px 0px 10px -10px #666; 
  /* Opera 10.5+, IE 9+, Firefox 4+, Chrome 6+,iOS 5+ */
}

В результате мы увидим следующее:

Примечание: все перечисленные виды теней отображаются во всех браузерах, поддерживающих CSS3 тени.

RGBA

Позволяет применять для цветов альфа-прозрачность. При этом RGBA принципиально отличается от opacity – он, не меняя прозрачности содержимого внутри блока, может использоваться для фона, шрифтов и бордеров.

.property13{
  background: rgba(20, 58, 74, 0.5); /* Firefox 3+, Chrome, 
  Safari 3+, Opera 10.10+, IE 9+, iOS 3.2+, Android2.1+ */
}

Результат:

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

Автор: Александр Побединский


наверх