Webmaster

Закругленные углы CSS

Закругленные краяРешил я в очередной раз изобрести велосипед, и предложить свое решение знаменитой вебмастерской проблемы закругленных краев. Существующие варианты, либо содержат очень много строчек CSS, либо имееют всякие ограничения - например на цвет.

Мой вариант использует прозрачный PNG (или Gif для IE6). Благодаря этому, можно скруглять что угодно - блоки разных цветов, картинки, бекграунды. Требуется только один PNG, для всех четырех углов и блоков разного цвета, что ускоряет время загрузки. Вообщем смотрите пример.

Постовой:
Пеар акция "Алло, мы ищем таланты!" от блога Магия Чисел. Получите свой краткий обзор и ссылку :)

Скачать и установить Установка:

  1. Прицепите как-нибудь к нужной странице  round.css .
  2. Пропишите в round.css пути к картинкам: roundwhite.gif и roundwhite.gif .
  3. Перекрасьте их в фоновый цвет вашей страницы, если он не белый.
  4. Чтобы скруглить любой DIV пропишите в его начале:
  5. И в конце DIV'а:
  • Если возникнут вопросы, смотрите scource примера.
  • Еще пример:
    </p>
    
    <p>...</p>
    
    <p><div style="background: #ccc; width: 250px;">
    //Div с любыми параметрами - цвет, размер...</p>
    
    <p><div class="rct"><div class="rct2"></div></div><div class="rndc"> //Скруглялка 1</p>
    
    <p>Содержание</p>
    
    <p></div><div class="rcb"><div class="rcb2"></div></div> //Скруглялка 2</p>
    
    <p></div>
    
    Скачать Round Corners

    Оцените статью
    • GROM

      Спасибо за Ваш труд!!

    • Zheny

      С кодировкой рамс, сафари как koi8 по дефолту определяет, вы что-то делали с сайтом? раньше всё норм было

    • Graf

      Это у вашего Safari какие-то проблемы.
      Пруфинки под Mac и Windows - все норм.
      А вообще то я оформление сменил. :)

    • mat

      тоже раньше так делал. потом решил что это слишком геморойно, и проще определять жесткие размеры блока и ставить в фон картинку с закругленными углами. ну или в крайнем случае по одному блоку в верх и вниз, с картинками круглых углов, шириной, равной ширине блока с контентом (но ширина блоков в таком случае так же должна быть жесткой). получается почти тоже, что в статье, но верстать проще.

    • копирайтер

      Интересно реализованно, сам попробывал, вроде нормально. Труд стоящий, реалзиванно скругление углов как должно быть на самом деле.

    • gps

      Спасибо большое давно искл что бы было просто и красиво...

    • видеть.Ьге"ТЕ

      Большое спасибо!
      Это решение самое лучшее, которое мне доводилось видеть.

    • Lost Sense

      Как я понял, это решение только для блоков с заранее неопределенной высотой?
      Если для блока задать высоту, скажем, 500px, а контента будет на 300 - нижние уголки будут на высоте 300px :(
      Можно это как-нить обойти?

    • Lost Sense

      нашел решение сам :) нужно прописать высоту для div.rndc

    • Mk

      Спасибо, реально отлично сделано!!!

    • DiN

      Решение подходит только для однородного фона увы :(
      Градиентный уже не покатит.

    • Cuspid

      Респект за изобретение велосипеда =)
      Решение гениальное!!!

    • Дима

      Поддерживают не все браузеры, очевидно же. Когда css3 будет +/- одинаково отображаться во всех браузерах, вот тогда можно будет не усложнять.

    • Anonymous

      Lost Sense
      нашел решение сам :) нужно прописать высоту для div.rndc.

      а прописать тут енто можно? ато вот пробую сама но неполучается - PLIZZZ ...

    • Anonymous

      А АВТОРУ спасиббочки пребольшое !!!

    • fr33z3

      У меня вообще картинок не надо прицепил и поехал:
      http://coder-blog.ru/?p=590

    • Scarj

      НА каких браузерах тестилось?