ФорумРазработкаКлиентская сторонаВерстка и оформление → Сделать блок с закругленными углами? [кроссбраузерно, без js]

Сделать блок с закругленными углами? [кроссбраузерно, без js]

  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 апреля 2009 г. 21:41

    Доброго времени суток ув.форумчане!
    Собственно сабж?
    Мой вариант
    css:

    .corners { position: relative; overflow: hidden; }
    .corners em.tl, .corners em.tr, .corners em.bl, .corners em.br
    {
    position: absolute;
    font-size: 1px;
    }

    .corners-2 em.tl, .corners-2 em.tr, .corners-2 em.bl, .corners-2 em.br
    {
    width: 4px;
    height: 4px;
    background-image: url(../i/corners/corners-2.png);
    }
    .corners-2 em.tl
    {
    left: -2px;
    top: -2px;
    }
    .corners-2 em.tr
    {
    right: -2px;
    top: -2px;
    }
    .corners-2 em.bl
    {
    left: -2px;
    bottom: -2px;
    }
    .corners-2 em.br
    {
    right: -2px;
    bottom: -2px;
    }

    html:

    <div class="corners corners-10">
      <div class="box">
         Тут у нас текст, или еще что ;)
      </div>
    </div>

    [+]Читаемый код(быстрое назначение, нет лишних тэгов)
    [+]Кроссбраузерность, при включение iepngfix.
    [+]Нет эффекта, когда углы появляются поочередно.

    [-]Не делается закругленный бокс в закругленном боксе.
    [-]Для каждого радиуса рисуем новую пнгшку.
  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо

    Spritz 4 апреля 2009 г. 22:04, спустя 22 минуты 45 секунд

  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 апреля 2009 г. 22:58, спустя 54 минуты 9 секунд

    хмм, очень интересно :)
    http://www.vertexwerks.com/tests/sidebox/ - вот понравилось, код читаем, и так красивооо :)
  • ubica

    Сообщения: 530 Репутация: N Группа: Кто попало

    Spritz 4 апреля 2009 г. 23:05, спустя 7 минут 6 секунд

    oO
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 4 апреля 2009 г. 23:08, спустя 2 минуты 32 секунды

    oO x 10
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 апреля 2009 г. 23:11, спустя 2 минуты 45 секунд

    O!o ,what is it?!?
  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 4 апреля 2009 г. 23:13, спустя 2 минуты 1 секунду

    вы про чо?
    Сапожник без сапог
  • ubica

    Сообщения: 530 Репутация: N Группа: Кто попало
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 апреля 2009 г. 23:16, спустя 2 минуты 20 секунд

    :)
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 4 апреля 2009 г. 23:22, спустя 5 минут 46 секунд


    фсех флудеров в банн!!!

  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 5 апреля 2009 г. 9:13, спустя 9 часов 51 минуту

    перенести в F.A.Q. или в Готовые решения?
  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо

    Spritz 5 апреля 2009 г. 13:11, спустя 3 часа 58 минут 9 секунд

    в /dev/null перенеси
  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 5 апреля 2009 г. 13:15, спустя 3 минуты 45 секунд

    CTAPbIu_MABP, поддерживаю
    Сапожник без сапог
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 5 апреля 2009 г. 22:42, спустя 9 часов 27 минут 35 секунд


    перенести в F.A.Q. или в Готовые решения?

    думаю не стоит, я тему создал для того что бы посмотреть как кто делает, ибо способов большучая куча, а каждый польуется по своим религиям… :) вот и хотел посмотреть, может по новому бы сделал бы :)

Пожалуйста, авторизуйтесь, чтобы написать комментарий!