[CSS] Закругляем края блоков без картинок

Чтобы отправить комментарий — войдите.
  • T
    11 авг 06
    супер супер супер супер супер супер супер супер супер супер супер супер супер супер супер супер супер супер
    Ответить
  • K
    28 янв 06
    Мне интересно, как с таким способом можна справится

    с горизонтальным "градиентом"???

    Лично мне больше понравился код Mail'a. Я бы так же

    выходил из ситуации.
    Ответить
    • Trinux
      Trinux АВТОР
      kutsy 28 янв 06
      =) в способе приведен пример с горизонтальными линиями. Переделай на вертикалку и делай горизонтальный градиент, какие проблемы.
      Ответить
      • K
        Trinux 29 янв 06
        :-)

        Ладно, дальше — больше:

        диагональный градиент??? :-)

        А вообще-то это всё можна сделать и рисунком, если же

        background рисунок. Конечно рисунок может долго грузится, но

        если будешь это дело обходить кодом, то не факт, что

        код будет занимать меньше...
        Ответить
        • Trinux
          Trinux АВТОР
          kutsy 29 янв 06
          Мой код занимает кограздомнешь майлового и меньше любого кода, который будет бэкграунндом залимвать 4 картинки =)
          Ответить
  • D
    27 янв 06
    Тринукс, спасибо за новость..

    Довлет, спасибо за комментарий.
    Ответить
  • B
    27 янв 06
    Афтар, молодец! пиши каждый день!!! ЗАЧОТ!!!!
    Ответить
  • L
    27 янв 06
    cssplay.co.uk

    Вот тут не только закругленные.

    И прроблемы все уже решены.

    Сам использую кое где такие
    Ответить
  • V
    27 янв 06
    тоже самой картинкой — и проще, и быстрее.

    согласен с shrax.
    Ответить
    • S
      varenik2 27 янв 06
      ну картинкой не так универсально.. а то див добавляешь — и опа есть плавные края..

      хотя разочаровывает тотальное нехотение поддержки альфа-уровней в png — иначе можно было бы делать шикарные вещи (ща к сожалению их оценить смогут только пользователи Opera/Mozilla/Netscape)
      Ответить
      • D
        shrax 27 янв 06
        тебе сюда
        Ответить
        • S
          dovlet187 29 янв 06
          товаищь, дабы было тебе известно, этот способ не прокатывает с картинками, которые лежат в бэкграунде (т.е. те, которые заданы в "background:url" — а они как раз наиболее важны) + к тому же, есть более элегантный способ добавить прозрачность для png — через htc файл с javascript.
          Ответить
    • S
      varenik2 27 янв 06
      кстати есть ещё более интересная техника — делать не только бокс с круглыми (или какими угодно) краями, но и добавить тени, украсить бордеры.. делается с помощью всего 8 дивов (можно и по-другому)
      Ответить
  • M
    27 янв 06
    а ведь красиво!
    Ответить
  • S
    27 янв 06
    типа alistapart.com уже никак почитать.. лет триста уже люди пишут, у нас только дошли..
    Ответить
    • Trinux
      Trinux АВТОР
      shrax 27 янв 06
      Дак этож албанский учить нужно.
      Ответить
  • S
    27 янв 06
    Оч. полезно.

    сохраняю в избранном.

    Трину пасиб!
    Ответить
  • V
    27 янв 06
    body{padding: 20px;background-color: #FFF;font: 100.01% Verdana,Arial,sans-serif}

    h1,h2,p{margin: 0 10px}

    h1{font-size: 250%;color: #FFF}

    h2{font-size: 200%;color: #f0f0f0}

    p{padding-bottom:1em}

    h2{padding-top: 0.3em}

    div#rnd{ margin: 0 10%;background: #9BD1FA}

    b.rtop, b.rbottom{display:block;background: #FFF}

    b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

    b.r1{margin: 0 5px}

    b.r2{margin: 0 3px}

    b.r3{margin: 0 2px}

    b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

    округляем углы div'a

    Кажется, получилось

    Даже без графики

    Да шо вы гаварите? (с) Одесса
    Ответить
full image