Rounded corners

rounded_cornersЗакруглённые углы - элемент дизайна, подражения природе. В природе не существует углов - всё разрушается, выветривается, стачивается и в результате - закругляется и как правило - тоже не идеально.

Не известно какой гений додумался закруглять уголки блоков в дизайне страничек, но пальму первенства можно отдать Apple и MacOS.

Возможные решения

  • решение в-лоб - делаем картинки, выпиливаем в photoshop набор уголков и настраиваем в css свойства нашего блока (div или table), см. screencast
  • CurvyCorners решение наиболее подходящее. Всё далает javascript, достаточно указать id элемента и радиусы закругления. Можно устроить и разные настройки для разных элементов. Поддерживается прозрачность и сглаживание.
  • NiftyCorners чуть посложнее - кроме javascript функций и их инициализаций надо указывать и css стили. Поддерживает прозрачность, но настроить немного сложнее. Генерирует лишние inline-тэги b для создания углов без картинок.
  • Roundozer так же при помощи JS закругляет уголки, правда немного тормознут, зато отечественного производства!
  • ShaderBorder кроме уголков ещё предлагает делать тень
  • Планируется что в CSS3 будет поддержка закруглённых углов, а пока gecko-engine браузеры могут использовать параметр
    -moz-border-radius: 4px; /* Firefox */
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px; /* Safari, Chrome */
    border-radius:4px; /* CSS3*/
    behavior: url(border-radius.htc); /*IE*/

Читайте также:

Файлы

RSS