Как стать автором
Обновить

Полупрозрачный блок со скругленными углами

Время на прочтение1 мин
Количество просмотров2.7K
Хочу представить на суд общественности свой вариант реализации полупрозрачного блока со скругленными углами. Кроссбраузерно, полностью резиново. На все про все 3 div'а. Интригует?

Для нетерпеливых сразу приведу ссылку с примером.
Год назад, если бы мне предложили сверстать такой блок, я бы отказался, заявив что в Internet Explorer 6-й версии его реализовать не получилось бы ну никак. Возможно, я бы изголился и сверстал бы такой блок, но для этого мне бы понадобилось минимум 9 div'ов. Некоторое время назад, получив волшебный пендель от DelkaDelka и прочитав очень полезную статью, я нашел довольно простое кроссбраузерное решение.

Минусы, как всегда, имеются. Не получилось собрать все имеющиеся картинки уголков и рамок в один спрайт. Для IE6 нужны все 8 картинок. Для нормальных браузеров хватит 6. Для IE7 можно собрать все картинки в одну :) Громоздкие файлы стилей для IE6-7 воспринимаем как неизбежность…

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

Тестировалось в FF3, NN9, IE6-7, Opera 9.2-9.5 и Safari (все Win).
Теги:
Хабы:
+4
Комментарии48

Публикации

Изменить настройки темы

Истории

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн