Посты с тэгом «скругленный блок»

  • Домашка №2: тень

    Веб-технологи всего мира ненавидят дизайнеров, которые рисуют вот такие блоки:

    screenshot

    С одной стороны — выглядит красиво и привлекательно, а с другой стороны кроссбраузерная верстка блока со скругленными уголками, да еще и с полупрозрачной тенью — далеко не тривиальная задача. Каждый технолог решает такие задачи по-своему, причем зачастую реализация напрямую зависит от внешнего вида декораций: для легкой и небольшой тени — один код, для массивной — другой, для скругленных уголков — третий и так далее.

    Предлагаю читателям придумать универсальный способ верстки таких блоков, на который можно будет спокойно ссылаться и дизайнерам, и технологам (и который попадет во все учебники по HTML/CSS :) ). В Техногрете уже есть что-то подобное, но лично меня этот способ не устраивает по многим параметрам: это и большое количество декоративных HTML-элементов (9 штук), и запредельное количество хаков для IE, и неспособность работать в IE с включенным доктайпом. Однако оттуда можно почерпнуть некоторые интересные мысли.

    Итак, хороший способ должен:

    • работать во всех современных браузерах, включая IE6;
    • не использовать JavaScript, только HTML и CSS;
    • одинаково хорошо работать как для блоков с заданной шириной (пиксели, проценты, em’ы), так и с шириной auto;
    • содержать как можно меньше декоративных HTML-элементов (количество элементов в дереве напрямую влияет на производительность сайта);
    • использовать как можно меньше отдельных изображений (в идеале должен получиться один спрайт).

    А настоящие джедаи должны выполнить следующие условия:

    • Способ должен одинаково хорошо работать как для блочных элементов, так и для инлайновых: структура HTML остается одинаковой, правки вносим только в CSS.
    • Не использовать expressions в IE. В крайнем случае — одноразовый expression.
    • Использовать как можно меньше хаков.

    Вот вам заготовки:

    decor1decor2

    На основе этих заготовок нужно сделать решение, выложить его куда-нибудь к себе на хостинг и оставить ссылку в комментариях. Если некуда выложить — присылайте архив мне по почте. Обсуждение результатов будет примерно через неделю.