Добавляем фон для блока со сглаженными углами на 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>
Для сравнения смотрим оба примера с бэкграундом.
Смотрите также
Сглаженные закругленные углы без использования изображений
Различные фишки и приемы с использованием CSS всегда привлекали и привлекают мое внимание. В их числе находится и способ закругления углов блока без использования какой-либо графики. Вот несколько статей, описывающих ...
Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем ...
Верстка красивых тегов для сайта + бонус
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Комментарии (17)
У меня нубовский вопрос…
А как сделать так, чтобы весь данный прямоугольник был ссылкой?
видел вашу статью про реализацию кнопки через CSS – но там опять же скругление идет за счет графики…
А вот как сделать, чтобы мы получили прямоугольную рамку, залитую бэкграундом, да еще и в ввиде ссылки?
Просто “окунаем” весь этот блок в тег
<a>. Только нужно учитывать, что код будет не валидным и семантически не верным. По-другому, вроде бы, никак.Пробовал.
Не то. При “окунании” получаем весь текст который у нас в блоке ссылкой. да и то местами непонятной… При этом остальная область прямоугольника никаким образом ссылкой не являеться…
Можно в принципе попробовать создать за счет отступов вокруг текста область ссылки… этого еще не пробовал руки не дошли…
И еще вопросик в нагрузку… а как сделать, читобы бэкграунд ролловился?
Тогда я не понимаю, что вы хотите сделать. Я запихнул весь блок в контейнер ссылки – он весь и стал ссылкой, только в ИЕ не меняется курсор на “руку”, но ссылкой становится именно вся прямоугольная область.
Не понял, что это такое.
1. Точно. был не прав… ИЕ ввел в заблуждение…
2. Имелось в виду, чтобы блок с закругленными углами менял свой цвет…
2. Вот с этим уже сложнее. Если для Оперы и FF все работает, используя обычный способ, то в IE не хочет. Здесь нужно экспериментировать и колдовать именно над ИЕ.
В общем все чудно, одно НО. открыл у себя в ФФ и ужаснулся… что то совсем не все так красиво как в ИЕ и в Опере.
Что собственно. Пишу, дабы узнать, что это что-то с моим ФФ(использую только для теста, не использую постоянно, поэтому не настроен, все по дефолту)… потому как такое ощущение, что он стили вообще загрузил как-то ненормально…
Народ, у вас этот прием в ФФ работает?
Artem Krotkov, у меня все путем, в том числе и в ФФ. Я когда выкладываю какой-то пример, то всегда тестирую в 3-х браузерах: ИЕ, Опера, ФФ. Поэтому, наверное, ваш ФФ халтурит :).
[quote post=”74″]У меня нубовский вопрос…
А как сделать так, чтобы весь данный прямоугольник был ссылкой?
видел вашу статью про реализацию кнопки через CSS – но там опять же скругление идет за счет графики…
А вот как сделать, чтобы мы получили прямоугольную рамку, залитую бэкграундом, да еще и в ввиде ссылки?[/quote]
Artem Krotkov, посмотри у меня на сайте справа в колонке “Рекомендую ознакомиться”, если так, то дам вводную
1. Во-первых, хочу поблагодарить за данный сайт. Если бы я нашел его раньше, то давно верстал бы Div’ами.
2. Создал блок со сглаженными углами и фоном. Круто! А вот что бы на одной странице сделать такие блоки с разным цветом заливки, не получается. Это возможно при данном коде?
ЮВ, красивого способа, чтобы сделать это, скорее всего нет, придется дублировать стили для каждого блока.
Извиняюсь, нашел ;-)
Все равно, хотелось бы табличку типа “Ваш комментарий добавлен” :-)
(да простят меня все за мою привередливость).
Пардон, ни туда написАл :-)
здравствуйте. а не подскажете, можно ли фоном блока сделать изображение (картинку)? и чтобы текст располагался поверх всего этого?
Конечно можно.
а для этого подходит изображение, загруженное на посторонний хостинг? ибо у меня упорно не срабатывает background-image и я подозреваю, проблема как раз в этом
Не важно, где находится изображение, главное, чтобы была правильно указана ссылка на него.