Закругленные уголки

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

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

    qazibum

    Регистр.:
    21 окт 2009
    Сообщения:
    198
    Симпатии:
    9
    Делаю сайт и нужно сделать закругленные уголки с прозрачными углами.
    Вот так (из фотошопа)
    [​IMG]
    код вот такой
    Код:
    <div id="левый_бок">
    <div id="правый_бок">
    <div id="верх_середина">
    <div id="левый_угол">
    <div id="правый_угол">
    </div></div></div><div></div>
    ...
    
    Проблема в том, что левый и правый бок получаются под углами (снизу), но из-за прозрачности углов бока видно. Не получается закругленности.
    С верх_середина я решил - задал ширину. А с боками не получится, потому что высота будет меняться.
    Подскажите простое решение? Как такое делается?
    Нужны именно прозрачные уголки, потому что фон с узором и там сложно будет подгонять.
     
  2. Phoenix168

    Phoenix168

    Регистр.:
    15 ноя 2007
    Сообщения:
    182
    Симпатии:
    44
    Попробуй так:
    HTML:
    <div id="corners">
        <div id="tl"></div>
        <div id="tr"></div>
        <div id="br"></div>
        <div id="bl"></div>
        <div>Содержимое блока</div>
    </div>
    Код:
    div#corners {position:relative;}
    div#tl {background:transparent url(../images/corner.gif) no-repeat scroll 0 0; left:-1px; top:-1px;}
    div#tr {background:transparent url(../images/corner.gif) no-repeat scroll 100% 0; right:-1px; top:-1px;}
    div#bl {background:transparent url(../images/corner.gif) no-repeat scroll 0 100%; bottom:-1px; left:-1px;}
    div#br {background:transparent url(../images/corner.gif) no-repeat scroll 100% 100%; bottom:-1px; right:-1px;}
     
  3. vs83

    vs83 Создатель

    Регистр.:
    1 окт 2007
    Сообщения:
    29
    Симпатии:
    4
    а если сделать "левый бок" и "правый бок" высотой всего в 1 пиксел? Тогда ничего не заметно будет, во-первых, и во-вторых, даже скорее всего выпирать ничего сверху не должно, так как там всего 1 пиксел и выпирать в прзрачный угол просто нечему.
     
  4. The Finn

    The Finn Постоялец

    Регистр.:
    30 авг 2009
    Сообщения:
    80
    Симпатии:
    9
    Phoenix168, неверно.

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

    Вам нужно просто раскроить в фотошопе уголки, а потом собрать из них блок, либо расставить в нужных местах существующего.

    Вариант с прозрачным бекграундом, как написал господин Phoenix168, не прокатит.
     
  5. qazibum

    qazibum

    Регистр.:
    21 окт 2009
    Сообщения:
    198
    Симпатии:
    9
    The Finn, размеры примерно 50 на 50 px.
    Весь блок выглядит так
    Код:
    <div id="левый_бок">
    <div id="правый_бок">
    <div id="верх_середина">
    <div id="левый_угол">
    <div id="правый_угол">
    <содержимое блока>
    </div></div></div>
    <div id="низ_середина">
    <div id="левый_угол_нижний">
    <div id="правый_угол_нижний">
    </div></div></div>
    <div></div>
    css'ом выравниваются и бекграндятся.
    Я нашел решение - убрал левые бока, а верхние уголки сделал длинными. Они дотягиваются до нижних и прячутся под ними.
    Еще пришлось низ_середина убрать и сделать левый_угол_нижний широким, чтобы дотягивался до правый_угол_нижний. Он почему-то не хотел ограничиваться max-width: и маргиниться от левого края, как я сделал с верх_середина.
    Хотелось бы красивее решить задачу, но нет времени :)
    Спасибо за советы.
     
  6. trafalgar

    trafalgar Писатель

    Регистр.:
    21 фев 2010
    Сообщения:
    4
    Симпатии:
    3
    думаю, что пригодится:
    http://vremenno.net/html-css/38-articles-about-creating-rounded-corners/
     
  7. General Fizz

    General Fizz Боевой Генерал :)

    Регистр.:
    11 апр 2007
    Сообщения:
    753
    Симпатии:
    396
    UDAV нравится это.
  8. valconq

    valconq Создатель

    Регистр.:
    2 мар 2010
    Сообщения:
    10
    Симпатии:
    1
    Поддерживаю, картинки уже не модно. У меня это ассоциируется с табличной версткой.
     
  9. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    странные ассоциации ... Градиенты тоже с табличной верстой ассоцирируются? А логотипы? Счетчик посещений явный признак табличной верстки! Сейчас модно его делать на css only
     
  10. Hi-tech

    Hi-tech Создатель

    Регистр.:
    4 авг 2009
    Сообщения:
    39
    Симпатии:
    8
    The Finn нравится это.
Статус темы:
Закрыта.