Пятница, 11.07.2025, 10:34
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    «  Май 2009  »
    Пн Вт Ср Чт Пт Сб Вс
        123
    45678910
    11121314151617
    18192021222324
    25262728293031
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    Главная » 2009 » Май » 19 » Закругление углов на CSS
    16:33
    Закругление углов на CSS
    Закругленные углы, одна из популярнейших тенденций в современном веб-дизайне. Есть множество вариантов их реализации часто, заключающихся в размещении изображений по углам контейнера, в худших случаях используются теги img, в лучших свойство background, для некоторых браузеров есть специфические решения, например -moz-border-radius для FireFox, но их полезность сомнительна. Простой и удобный способ скругления уголков без использования изображений или малораспространенных свойств был бы очень полезен.

    У закругленных уголков выполненных с помощью изображений есть как несколько недостатков:


    • несемантические элементы при верстке,
    • дополнительная нагрузка на сервер в виде запросов множества уголков различного цвета и размера (в лучшем случае уголки группируются по 4 в одном изображении),
    • не лучший вид страницы, если у пользователя отключена загрузка изображений (особенно если используются img, а не свойство background).

    Так и преимущества:


    • можно закруглять, что угодно и как угодно.

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

    Для начала, нужно определиться с помощью какого тега будем делать скругляющие блоки. В оригинале используется устаревший тег b, вероятно выбор пал на него по причине краткости написания, имеющей для нас большое значение, так как его придется часто повторять.

    Разметка будет достаточно простой:

    Делаем b блочным элементом высотой 1px и задаем ему соответствующие поля.

    Code
    .r1, .r2, .r3 { display: block; height: 1px;}.r3 { margin: 0 3px; }.r2 { margin: 0 2px; }.r1 { margin: 0 1px; }

    Затем указываем цвет фона и отступы

    Code
    #rounded-box-3 .inner-box, #rounded-box-3 b { background-color: #CCCCCC;}.inner-box { padding:1em;}

    Для всех нормальных браузеров этого достаточно, но у IE6 есть свое мнение. Пустые блоки, для которых задана высота 1px, растягиваются до 2px, что не способствует закруглению уголков, решить проблему можно указав overflow:hidden

    Для старых версий IE, IE в quirks mode и блоков вложенных в таблицы в IE7, добавим правило font-size:1px

    Code
    .r1, .r2, .r3 { overflow: hidden; font-size:1px;}

    Браузерам отличным от IE6 это свойство ничем не мешает, поэтому нет необходимости использовать хаки или условные комментарии.

    Внимательный разбор кода примеров поможет понять особенности работы этого метода.

    Преимущества метода:


    • кроссбраузерность (тестировался в IE6, IE7, Opera 9, FireFox 2)
    • никаких дополнительных запросов
    • просто реализуется и проще поддержка, чем при работе с изображениями (например, можно поменять цвет блока, изменив только одно значение в CSS, правда это работает и с уголками в виде полупрозрачных изображений).

    Недостатки:


    • невозможность создания сложных эффектов,
    • несемантические элементы при верстке.

    Можно пойти дальше и создать на PHP (Ruby, Perl или любом другом языке, которому вы отдаете предпочтение) функцию которая будет генерировать код для уголков, на основе заданного радиуса закругления, что должно упростить шаблоны и поддержку.

    Категория: скрипты для ucoz сайта | Просмотров: 742 | Добавил: tesnikov | Рейтинг: 3.0/2
    Всего комментариев: 4
    4 safrik777  
    0
    фигня. Проще прорендить дизайн.

    3 kentovit  
    -1
    Закругленными блоками никого не удивишь, старо как мир. толку от них нет

    1 misha12  
    0
    Фууууу!Рекламишь сайт !

    2 tesnikov  
    0
    У меня посещаемость 300 хостов в сутки, и скрины с надписью абсолютно ничего для меня не изменят. Просто на компе не осталось без моих ватермарков, поэтому вставил со своего сайта

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]