|
|
|||||||||||||||||||||||||||||
|
Уголок CSS: о закругленных углах CSSИсточник: thevista
Когда мы впервые употребили словосочетание "Уголок CSS" в названии статьи в нашем блоге, Крис Уилсон написал нам, что многие читатели могут неправильно понять, что в данном сообщении речь пойдет о радиусе скругления углов. И, по правде сказать, самый первый комментарий к статье доказал его правоту. И сегодняшняя статья из рубрики "Уголок CSS" целиком и полностью будет посвящена свойству border-radius, которое является наиболее часто запрашиваемой функцией в модуле CSS3 Backgrounds & Borders. Причиной такой популярности является его особая роль в стилизации веб-приложений. Создание современных, визуально привлекательных вкладок, диалогов, кнопок навигации и супер-привлекательных кнопок серьезно усложняется при использовании квадратных фигур. Скругление краев кнопок в интерфейсе веб-приложения делает его более изысканным в визуальном плане, что является достаточно важным для авторов при использовании таблиц, макетов и изображений для достижения желаемого эффекта во всех браузерах. Масса индивидуальных требований и экспериментов стали причиной появления бесчисленных статей в блогах, специальных библиотек Javascript и нескольких Jquery-дополнений. Долгожданная функция Грамотная реализация Рассмотрим точечные границы различной ширины с закругленными углами. Какие, на ваш взгляд, из следующих иллюстраций отражают ожидаемый результат большинства веб-дизайнеров?
Каждая синяя рамка на представленном выше скриншоте является примером визуализации одного тестового случая в разных браузерах. Результат IE9 располагается в правом нижнем углу, а изображение является ссылкой на тестовый случай. Для границ переменной ширины с тем же радиусом угла результат IE9 указан справа:
Однако, кросс-браузерное соглашение о визуализации более сложных геометрических границ еще предстоит реализовать:
Наиболее близким к текущей реализации в IE9 является самый правый вариант. Будущие задачи включают обеспечение интероперабельных угловых градиентов. Когда углы соединяют границы рамок различных цветов, современные браузеры обычно отображают нечто вроде:
Хотя спецификация определяет точное положение линии перехода между разными цветовыми областями, интероперабельное и восприимчивое к тестов определение для цветового градиента еще предстоит определить. Если вы являетесь веб-дизайнером и у вас есть мысли на этот счет, направляйте свои отзывы на адрес рабочей группы CSS - www-style@w3.org. Свойство border-radius в предварительной версии IE9 Так как модуль CSS3 Backgrounds & Borders достиг стадии рекомендуемого кандидата на релиз, в имени свойства префикс -ms уже не отображается. Руководство к действию Ссылки по теме
|
|