понедельник, 11 апреля 2011 г.

CSS3 свойства, наиболее часто используемые в Sencha Touch


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



border-radius


Тут всё просто: устанавливаем значения, подобно тому, как устанавливаем, например, padding, и у нас углы элемента закругляются. Для браузеров на базе WebKit также можно использовать свойство -webkit-border-radius.

Пример:
border-radius: 30px;
Результат:
Прочитать подробнее можно здесь.

gradient


-webkit-gradient - это не свойство, а значение, которое применяется свойству background-image для создания градиента. Для браузеров Firefox используется -moz-linear-gradient, но при создании мобильных веб-приложений нам это не важно.
В WebKit браузерах доступно два типа градиентов:
  • линейный (linear)
  • круговой (radial)
Синтаксис создания градиента:
-webkit-gradient(type, start, end, from(color), to(color))
Пример:
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bbb), to(#000));
Результат:

Кроме того, можно делать "остановки" в градиенте:
Пример:
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bbb), color-stop(50%, #000), to(#bbb));
Результат:

Подобных остановок может быть несколько.
Подробнее о градиентах можно почитать здесь.

-webkit-mask


В CSS3 стало возможным накладывать на элементы маску. Делать это можно с помощью свойства -webkit-mask.

Синтаксис:
-webkit-mask: attachment, clip, origin, image, repeat, composite, box-image;

Для примера я буду использовать следующую маску (это просто png-изображение):
Пример:
width: 122px;
height: 108px;
background-color: #bebebe;
-webkit-mask-image: url(mask.png);
Результат:

В качестве маски можно использовать не только картинку, но и CSS3-градиент или SVG-графику. Подробнее об этом можно узнать здесь.

Заключение


Я показал всего 3 свойства, появившихся в CSS3, но они являются наиболее часто используемыми мною при вёрстке интерфейсов Sencha Touch приложений. С остальными возможностями WebKit браузеров вы сможете познакомиться на сайте Apple.

Комментариев нет:

Отправить комментарий