Задачка про вёрстку

28 апреля 2012
Задачка про вёрстку
Итак. Кто из моих дорогих читателей любит сложные задачи? В награду, обещаю вам большую статью с моими скучными рассуждениями о семантике html5-элементов в начале недели. =)

Задание простое, но интересное. Художница нарисовала рамку диалога, для новой онлайн игры. (ссылка http://usabili.ru/news_imgs/151/border7.png ). Требуется сверстать её на прозрачном фоне, примерно вот так:

Blablabla blablabla blablabla balballa bla abl abl

Какой-то текст диалога тут
1. Рамка должна растягиваться по высоте и ширине. Либо в зависимости от контента, либо при заданной ширине и высоте контейнера.
2. Не обязательна поддержка IE. (т.е. вы можете использовать любые современные CSS технологии: мультибекграунды, border-image и т.п)
3. Чем меньше html-тегов тем лучше (Надеюсь у вас получиться сделать что-то элегантнее чем таблица на 9 ячеек =)).
4. Чем меньше отдельных файлов графики — тем лучше. (ну, про "css спрайты" вы в курсе).
5. Без яваскриптов
6. Сам контейнер будет всегда с position:absolute (это может упростить вам задачу)
Через неделю подведём итоги.

P.S. Кстати я снова открыла комментирование статей без регистрации.

Прокоментируй статью, хотя бы пару слов!

#1
dersmoll@ (Alexander Smolyaninov)

28.04.2012 23:22:19

dl.dropbox.com/u/933073/task/index.html
как-то так, по-олдскульному :)
dl.dropbox.com/u/933073/task/test.zip архивчик
#2
Елена Лунная

29.04.2012 05:26:45

Хорошее решение Александр. Спасибо за участие =)
Все решения, чтоб не потерялись, буду сразу закачивать к себе:
http://usabili.ru/labs/modal/dersmoll.html
правда в ваш вариант я внесла небольшие изменения: добавила внутренний блок .holder для .tmid (чтобы можно назначать overflow), пcевдоэлемент .ttop:after переименовала в блок .ttop_after (чтобы можно было навесить на него onclick событие), и убрала z-index для .tmid сделав отдельные индексы для .tmid:before, .tmid:after и .holder (.holder должен быть выше чем .ttop, для этого у самого .tmid не должен стоять z-index).
Чтобы решений было больше, я также выложу как вариант свою вёрстку этой картинки таблицей (что конечно не так клёво как дивами):
http://usabili.ru/labs/modal/moony.html
Интересно пришлёт ли кто-нибудь ещё варианты =)
#3
dersmoll@ (Alexander Smolyaninov)

30.04.2012 00:44:26

Может кто-то и пришлет, надо бы попиарить это дело, задача довольно интересной оказалось, несмотря на кажущуюся простоту.
Кривые z-индексы остались после попыток починить верстку для ие8, но потом бросил эту затею :)
#4
Михаил

30.04.2012 01:14:43

Мое решение немного топорное - у него есть ограничения по ширине и высоте, но тоже имеет право на существование. Делал на скорую руку, поэтому не судите строго :)
Архив на Яндекс.Диске
#5
SelenIT

30.04.2012 16:59:06

Если можно border-image и совсем не нужен IE, то как-то совсем просто... ЧЯДНТ?
#6
dersmoll@ (Alexander Smolyaninov)

30.04.2012 17:25:01

Тоже вариант, но по-идее надо внутри див какой-нибудь вставить с з-индексом, потому что если сейчас залить фон родителя, то и сам блок заливается.
Но вообще, реализация на чистом border-image мне кажется так себе вариантом - никакой заказчик не согласится на отказ от ИЕ, разве что на мобильном проекте под мобильные браузеры.
#7
SelenIT

30.04.2012 17:50:56

Вот еще вариант с меньшим кол-вом боксов и с возможностью заливки фона body.
Условия, согласен, выглядят утопичными, но ведь так в ТЗ. В новый вариант добавил деградацию :)
#8
greli

30.04.2012 21:21:08

Да это делается одним элементом через :before/:after: jsfiddle.net/GreLI/Gnuyb/1/. Размеры ограничены лишь предварительно заготовленными картинками.
Добавил внутренний элемент, просто чтобы был синий фон, если картинки не загрузились.
#9
greli

30.04.2012 21:22:18

Забыл добавить, что поддержка IE8+.
#10
Елена Лунная

01.05.2012 03:28:38

Очень рада что решений оказалось так много =). Сейчас отвечу каждому в отдельном комменте:
Михаил:
http://usabili.ru/labs/modal/mihail/
Да, конечно имеет право на существование.
Небольшие правки:
.root элемент не нужен =), позиционируем сам .block
.block_content {
padding: 40px;
/*Чтобы контент не перекрывался служебными div'ами*/
position:relative;z-index:30;
/*Чтобы показать как блок будет вести себя с большим количеством контента*/
overflow-y:auto;max-height:300px;
/*Чтобы немного спозиционировать скролл, если он появиться =) */
top:10px;padding-top:20px;margin-bottom:5px;
}
Ограничение по размеру - 600px, что в общем-то не проблема.
#11
Елена Лунная

01.05.2012 04:01:14

greli:
http://usabili.ru/labs/modal/greli/
Для поддержки IE8 добавила .border7-inner {position:relative;}.
А так, всё очень клёво. Я совершенно не знала о том что можно писать
"content:url(data:image/png;" в псевдоэлементах. Использование clip тоже интересно.
Пожалуй надо почаще такие задачки выкладывать, решения очень познавательны.
#12
Елена Лунная

01.05.2012 06:26:18

И наконец SelenIT, твой вариант я изучала дольше всего, так как с border-image я не работала.
http://usabili.ru/labs/modal/selenit/ и простой вариант
Никаких замечаний нет. Ну разве-что добавила внутренний .holder, т.к. overflow-y для основного блока убивает рамку. Ещё данная вёрстка почему-то не работает в nightly firefox, непонятно почему.
Теперь, об утопичности ТЗ:
Да, свойство border-image не поддерживается IE вплоть до версии 9. Но на самом деле наплевать на IE - это не утопия.
Например, мы делаем игру. Решение сделать её принималось ещё полтора года назад. И уже тогда, никому не хотелось поддерживать старые браузеры для которых всё равно не получиться добиться нормальной скорости работы яваскриптов. За эти полтора года, по статистике LiveInternet, доля ie6-8 упала с 30 до 9% и продолжает падать, мы каждую неделю любуемся ей. Решение о поддержке IE9 пока не принято. Поддержка планшетных устройств и мобильных браузеров гораздо интереснее =). Зато утвердили довольно маленький бюджет и можем позволить себе поддерживать только то что хотим. =)
#13
SelenIT

02.05.2012 11:50:39

Елена, я прошу прощения за дубль коммента (#5 и #6), отправил было, забыв зарегистрироваться, #5 можно удалить. Почему не работает в FF nightly — не знаю, синтаксис вроде особо не менялся... Если честно, код border-image я внаглую списал у Криса Койера, подогнав числа "на глазок" :)
А в content псевдоэлементов :before/:after можно много чего интересного писать, это :). Я как-то исключительно смеха ради пробовал сделать подобие рамки из смайликов для IE8+ (вдохновившись информацией о возможности делать от 5 "фоновых" картинок для одного элемента в рамках CSS 2.1).
#14
Елена Лунная

03.05.2012 17:01:22

Обещанная статья выйдет завтра с утра. (её ещё пару раз вычитать надо перед публикацией). Следите за RSS. Спасибо всем кто откликнулся на задачку, я узнала много нового.
P.S. И cookies в блоге теперь будут ставиться на год! А то блин слетали постоянно...

Чтобы оставить комментарий нужно войти или зарегистрироваться (Регистрируйтесь за 5 секунд, без подтверждения email и т.п.).
Либо волшебно используйте ваш логин в Google, Яндекс, рамблер или ЖЖ чтобы войти через Open_ID

Большой вопрос о больших разрешениях

Давайте поговорим о семантике

Задачка про вёрстку

Комментарии:

15 самых популярных статей:

Логин/E-mail:	Пароль:
или зарегистрируйтесь