Pull to refresh

Занимательная верстка

Reading time1 min
Views1.9K
Недавно коллега из соседнего отдела попросил меня помочь ему с версткой одного блока. Он хотел разобраться с основами семантической верстки и сверстать этот блок аккуратно и красиво. Однако блок оказался совсем не прост для верстки — в нем сочетались скругленные уголки и градиентные бордеры. Я отправил коллегу верстать таблицами, а сам предлагаю устроить мастер-классы, кто сможет предложить наиболее оптимальное решение данной задачи.
Под катом скриншот задачи и ссылки на .psd и мой вариант решения
Скриншот задачи
Мой вариант решения содержит 10 контейнеров и 6 правил-исключений для IE 6 (не очень оптимально имхо)
UPD: Описываю ТЗ:
  • Блок расширяемый как по ширине, так и по высоте (в зависимости от текста)
  • Уголки и бордюры вставляются картинками
  • В содержании блока заголовок и текст

Итоги


Итак, кажется идеи иссякли, и можно теперь объявить результаты.
Как я и говорил, мой вариант оказался нисколько не оптимальным, более того, требует дописания expression для IE 6.
Порадовало же то, что все-таки были представлены достойные варианты решения:

Спасибо вам за мастер-классы, постараюсь добавить вам кармы, если моих остатков хватит для этого=)
Tags:
Hubs:
Total votes 33: ↑25 and ↓8+17
Comments108

Articles