Ищу лучшую технику полукруглых углов на CSS

Тема в разделе "Веб-дизайн", создана пользователем toxass, 10 фев 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. toxass

    toxass Постоялец

    Регистр.:
    24 июл 2007
    Сообщения:
    114
    Симпатии:
    15
    Сабж. Достали уже они :)

    Просмотрел очень много техник, однако почти в каждой есть такие проблемы:

    1. Необоснованное количество кода css (проще уже table делать)
    2. Ничтожная кроссбраузерность.
    3. Нету растяжки блока, только под фиксированную ширину. В данном случае я имею ввиду фиксированную ширину нарезанных картинок.

    Конкретно мне нужна растяжка блока независимо от нарезанных картинок и минимальное количество кода на выходе (ну и конечно стабильная работа в IE,ФФ, Опера). Пример блока ниже (png с альфа каналом).

    PS: по бокам блока тоже тень (не бордер)...
     

    Вложения:

    • corner-1.png
      corner-1.png
      Размер файла:
      6 КБ
      Просмотров:
      81
  2. aproxis

    aproxis Создатель

    Регистр.:
    22 мар 2007
    Сообщения:
    40
    Симпатии:
    6
    1. в проектах, с доплатой за поддержку ие6, я использую что-то вроде jquery.corner
    2. в небольших, где это не важно - делаю на css3 c border-radius. 2010 год, можно к этому переходить :)
     
  3. maJic

    maJic Создатель

    Регистр.:
    8 сен 2008
    Сообщения:
    24
    Симпатии:
    9
    Так border-radius кто поддерживает? Только браузеры на вебките, FF да хром, это меньше 1/3 пользователей, рано в такой случае ещё на border-radius переходить. Как ещё выше сказали, один из лучших вариантов jquery.corner или же вот: http://www.html.it/articoli/niftycube/index.html
     
  4. BAPEHbEnew

    BAPEHbEnew Прохожие

    все же самая традиционная и правильная техника для этого, по моему, это использования див-ов для каждой части бэкраунда (для левого угла один блок + для пр. угла еще один ... + для левой повторяющейся бэкграунда еще один.. = выходят 8 блоков)..
    пример:
    <div class"top"><div class"bottom"><div class"left"><div class"right"><div class"lt"><div class"rt"><div class"lb"><div class"rb">
    здесь контент этого блока
    </div></div></div></div></div></div></div></div>

    в таком случае динамическая ширина и высота не страшна, и даже в ИЕ6 все будет ОК! ;)
     
  5. Zak

    Zak Постоялец

    Регистр.:
    13 апр 2006
    Сообщения:
    94
    Симпатии:
    6
    Предпочитаю не дивы, а Definition list
    HTML:
    <DL>
       <DT></DT>
       <DD></DD>
    </DL>
    так хоть более вменяемо, и тэги короче
     
  6. toxass

    toxass Постоялец

    Регистр.:
    24 июл 2007
    Сообщения:
    114
    Симпатии:
    15
    А можно более четкий пример верстки на Definition list ? Даже на моем примере...думаю всем будет интересно.
     
  7. cepera_007

    cepera_007 Постоялец

    Регистр.:
    28 янв 2007
    Сообщения:
    97
    Симпатии:
    31
    А я использую такой способ (подходит для не замудренных случаев и пока не подводил)
    roundwhite.gif
    roundwhite.png

    CSS:
    HTML:
    
    .rct, .rct2, 
    .rcb, .rcb2 {
       width: 100%;
       height: 9px;
       font-size: 1px;
       background:no-repeat url(/images/roundwhite.png);
    }
    * html .rct, * html .rct2 ,
    * html .rcb, * html .rcb2  {
       background-image:url(/images/roundwhite.gif);
    }
    .rct {
       background-position: -9px 0px;
    }
    .rct2 {
       background-position: 0px 0px;
    }
    .rcb {
       background-position: -9px -9px;
    }
    .rcb2 {
       background-position: 0px -9px;
    }
    .rct2, .rcb2  {
       width: 9px;
       float: right;
    }
    .rndc { margin: 0 9px;}
    
    HTML:
    HTML:
    
    <div class="rct"><div class="rct2"></div></div><div class="rndc">
       Ваш любой текст
    </div><div class="rcb"><div class="rcb2"></div></div>
    
     
  8. Zak

    Zak Постоялец

    Регистр.:
    13 апр 2006
    Сообщения:
    94
    Симпатии:
    6
  9. hipachka

    hipachka

    Регистр.:
    16 мар 2009
    Сообщения:
    391
    Симпатии:
    77
  10. serjinio

    serjinio

    Регистр.:
    10 май 2007
    Сообщения:
    439
    Симпатии:
    49
    Это блок с закруглёнными углами
    Валидный

    HTML:
    <style type="text/css">
    <!--
    .b1,.b2,.b3,.b4,.b5,.b6,.hh,.hf{ display: block; overflow: hidden; }
    .b2,.b3,.b4,.b5{border-style: solid;border-color:#DDD;background: #FFF;}
    .b1,.b2,.b3{height: 1px;}
    .b3,.b4,.b5{border-width: 0pt 1px;}
    .b1{margin: 0pt 5px; background: #DDD;}
    .b2{border-width: 0pt 2px; margin: 0pt 3px;}
    .b3{margin: 0pt 2px;}
    .b4{margin: 0pt 1px;height: 2px;}
    .b6{font-size: 1px;}
    .hh{height: 7px;}
    .hf{height: 4px;}
    -->
    </style>
    <div style="margin: 11px; width: 400px">
    <b class="b6">
    <b class="b1">&nbsp;</b>
    <b class="b2">&nbsp;</b>
    <b class="b3">&nbsp;</b>
    <b class="b4">&nbsp;</b></b>
    <div class="b5">
        <b class="hh">&nbsp;</b>
        Это блок с закруглёнными углами <br/>
        Валидный
    <b class="hf">&nbsp;</b></div>
    <b class="b6">
    <b class="b4">&nbsp;</b>
    <b class="b3">&nbsp;</b>
    <b class="b2">&nbsp;</b>
    <b class="b1">&nbsp;</b></b>
    </div>
    
     
Статус темы:
Закрыта.