Главная CSS-верстка

Добавляем фон для блока со сглаженными углами на CSS

Продолжая тему сглаженных закругленных углов без использования графики, рассмотрим случай, когда к блоку, использующему данный эффект, необходимо добавить фон: либо просто цветовой, либо в виде изображения.

Раз уж хотя бы одного человека затруднил сей момент, то стоит об этом сказать отдельно. А затруднило то, что при добавлении к блоку со сглаженными углами бэкграунда, углы с внутренней стороны оставляют светлые ненужные пиксели, которые мы использовали для сглаживания.

Решение же очевидно — достаточно удалить из кода элементы, создающие эти самые пиксели. Т. е. из предыдущего примера необходимо убрать несколько контейнеров <i></i> и <q></q>.

Чтобы еще несколько уменьшить HTML-код, можно заменить теги <div> на <b>, и, соответственно, вложенный <b> на <i> или другой однобуквенный.

В результате разметка получается очень близкой к исходному несглаженному варианту:

<b class="b1"><i></i></b>
<b class="b2"><i></i></b>
<b class="b3"><i></i></b>
<b class="b4"></b>
<b class="b5"></b>
  <div class="text">

  </div>
<b class="b5"></b>
<b class="b4"></b>
<b class="b3"><i></i></b>
<b class="b2"><i></i></b>
<b class="b1"><i></i></b>

Для сравнения смотрим оба примера с бэкграундом.

Комментарии (17)

  1. У меня нубовский вопрос…

    А как сделать так, чтобы весь данный прямоугольник был ссылкой?

    видел вашу статью про реализацию кнопки через CSS — но там опять же скругление идет за счет графики…

    А вот как сделать, чтобы мы получили прямоугольную рамку, залитую бэкграундом, да еще и в ввиде ссылки?

  2. Просто «окунаем» весь этот блок в тег <a>. Только нужно учитывать, что код будет не валидным и семантически не верным. По-другому, вроде бы, никак.

  3. Пробовал.

    Не то. При «окунании» получаем весь текст который у нас в блоке ссылкой. да и то местами непонятной… При этом остальная область прямоугольника никаким образом ссылкой не являеться…

    Можно в принципе попробовать создать за счет отступов вокруг текста область ссылки… этого еще не пробовал руки не дошли…

    И еще вопросик в нагрузку… а как сделать, читобы бэкграунд ролловился?

  4. Не то. При «окунании» получаем весь текст который у нас в блоке ссылкой. да и то местами непонятной… При этом остальная область прямоугольника никаким образом ссылкой не являеться…

    Тогда я не понимаю, что вы хотите сделать. Я запихнул весь блок в контейнер ссылки — он весь и стал ссылкой, только в ИЕ не меняется курсор на «руку», но ссылкой становится именно вся прямоугольная область.

    а как сделать, читобы бэкграунд ролловился?

    Не понял, что это такое.

  5. 1. Точно. был не прав… ИЕ ввел в заблуждение…

    2. Имелось в виду, чтобы блок с закругленными углами менял свой цвет…

  6. 2. Вот с этим уже сложнее. Если для Оперы и FF все работает, используя обычный способ, то в IE не хочет. Здесь нужно экспериментировать и колдовать именно над ИЕ.

  7. В общем все чудно, одно НО. открыл у себя в ФФ и ужаснулся… что-то совсем не все так красиво как в ИЕ и в Опере.

    Что собственно. Пишу, дабы узнать, что это что-то с моим ФФ (использую только для теста, не использую постоянно, поэтому не настроен, все по дефолту)… потому как такое ощущение, что он стили вообще загрузил как-то ненормально…

    Народ, у вас этот прием в ФФ работает?

  8. Artem Krotkov, у меня все путем, в том числе и в ФФ. Я когда выкладываю какой-то пример, то всегда тестирую в 3-х браузерах: ИЕ, Опера, ФФ. Поэтому, наверное, ваш ФФ халтурит :).

  9. [quote post="74"]У меня нубовский вопрос…
    А как сделать так, чтобы весь данный прямоугольник был ссылкой?
    видел вашу статью про реализацию кнопки через CSS — но там опять же скругление идет за счет графики…
    А вот как сделать, чтобы мы получили прямоугольную рамку, залитую бэкграундом, да еще и в ввиде ссылки?[/quote]
    Artem Krotkov, посмотри у меня на сайте справа в колонке «Рекомендую ознакомиться», если так, то дам вводную

  10. 1. Во-первых, хочу поблагодарить за данный сайт. Если бы я нашел его раньше, то давно верстал бы Div’ами.
    2. Создал блок со сглаженными углами и фоном. Круто! А вот что бы на одной странице сделать такие блоки с разным цветом заливки, не получается. Это возможно при данном коде?

  11. ЮВ, красивого способа, чтобы сделать это, скорее всего нет, придется дублировать стили для каждого блока.

  12. Извиняюсь, нашел ;-)
    Все равно, хотелось бы табличку типа «Ваш комментарий добавлен» :-)
    (да простят меня все за мою привередливость).

  13. Пардон, ни туда написАл :-)

  14. здравствуйте. а не подскажете, можно ли фоном блока сделать изображение (картинку)? и чтобы текст располагался поверх всего этого?

Ваш комментарий