1. Vovk

    17.01.2009

    0 ↑
    0 ↓
    обнаружил интересный способ рисования круглых углов.
    (много их много..)

    посмотреть можно тут:
    http://blog.hedgerwow.com/2007/03/09/using-single-image-to-be-the-background-for-your-html-module/

    Очень приятный метод, простой, однако у него аллергия на Opera.

    А заключается она в следующем:
    Для закругления используется только одна фоновая картинка. которая позиционируеется
    соответсвующим образом.

    В этом методе бэкграунд блока и закругление задается вот такой конструкцией:

    <div class="bgnd">
    <!--up —><u class="w"></u><u class="e"></u>
    <!--in-between —><i class="w"></i><i class="e"></i>
    <!--bottom —><b class="w"></b><b class="e"></b>
    </div>

    тот код что помечен <!--in-between —> задающий центральную часть блока с правой и левой границей в Opera не растягивается по вертикали между <!--up —> и <!--bottom —> . в остальных браузерах все прекрасно. Хотел было подлечить но что-то у меня не вышло :)
    причем у автора этот косяк в опера на его сайте тоже видно, однако написано что О 9.5 поддерживается :)

    может кто догадается в чем тут цена вопроса?

  2. Vovk

    17.01.2009

    0 ↑
    0 ↓
    Просто меня этот вопрос замучал.
    Ах да css
    .v-chrome .bgnd{
      
      position:absolute;
      z-index:-1;
      top:0;
      left:0;
      right:0;
      bottom:0;
      zoom:1;
     
    }


    .v-chrome .bgnd *{
      position:absolute;
      overflow:hidden;
      background-repeat:no-repeat;
      zoom:1;
    }


    .v-chrome .bgnd u.w{
      left:0;
      top:0;
      right:40px;
      height:60px;
      
    }

    .v-chrome .bgnd u.e{
      top:0;
      right:0;
      height:60px;
      width:40px;
      background-position:-960px 0;
    }

    .v-chrome .bgnd i.w{

      position:absolute;
      left:0;
      top:60px;
      right:40px;
      bottom:40px;
      border: 1px solid black;
      background-repeat:repeat-y;
      background-position:-1000px 0;
    }

    .v-chrome .bgnd i.e{
      
      top:60px;
      right:0px;
      width:40px;
      bottom:40px;
      background-repeat:repeat-y;
      background-position:100% 0;
    }



    .v-chrome .bgnd b.w{
      left:0;
      bottom:0;
      right:40px;
      height:40px;
      background-position:0 100%;
    }

    .v-chrome .bgnd b.e{
      height:40px;
      bottom:0;
      right:0;
      width:40px;
      background-position:-960px 100%;
    }

  3. Vovk

    17.01.2009

    0 ↑
    0 ↓
    В общем до css решения я не додумался.
    в итоге просто заиспользовал яваскрипт для выставления высоты растяжки по вертикали на лету.

Внимание! Это довольно старый топик, посты в него не попадут в новые, и их никто не увидит. Пишите пост, если хотите просто дополнить топик, а чтобы задать новый вопрос — начните новый.