При создании интерфейсов своих 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.
Комментариев нет:
Отправить комментарий