Добавляем фон для блока со сглаженными углами на 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>

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

* * *

Туристическая дисконтная система ТурСкидки.ru предлагает туры на отдых, организуемые ведущими туроператорами. Тут горящие путевки и спецпредложения, причем с большими скидками (от 7 до 20%). Здесь вы найдете для себя лучших отдых.

Комментарии (17)
  1. 1
    Artem Krotkov

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

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

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

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

  2. 2

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

  3. 3
    Artem Krotkov

    Пробовал.

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

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

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

  4. 4

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

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

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

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

  5. 5
    Artem Krotkov

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

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

  6. 6

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

  7. 7

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

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

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

  8. 8

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

  9. 9

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

  10. 10

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

  11. 11

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

  12. 12

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

  13. 13

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

  14. 14
    эл

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

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