Итак. Кто из моих дорогих читателей любит сложные задачи? В награду, обещаю вам большую статью с моими скучными рассуждениями о семантике html5-элементов в начале недели. =)
Задание простое, но интересное. Художница нарисовала рамку диалога, для новой онлайн игры. (ссылка http://usabili.ru/news_imgs/151/border7.png ). Требуется сверстать её на прозрачном фоне, примерно вот так:
Blablabla blablabla blablabla balballa bla abl abl
Какой-то текст диалога тут
Какой-то текст диалога тут
- Рамка должна растягиваться по высоте и ширине. Либо в зависимости от контента, либо при заданной ширине и высоте контейнера.
- Не обязательна поддержка IE. (т.е. вы можете использовать любые современные CSS технологии: мультибекграунды, border-image и т.п)
- Чем меньше html-тегов тем лучше (Надеюсь у вас получиться сделать что-то элегантнее чем таблица на 9 ячеек =)).
- Чем меньше отдельных файлов графики — тем лучше. (ну, про "css спрайты" вы в курсе).
- Без яваскриптов
- Сам контейнер будет всегда с position:absolute (это может упростить вам задачу)
Через неделю подведём итоги.
P.S. Кстати я снова открыла комментирование статей без регистрации.
Комментарии:
dersmoll@ (Alexander Smolyaninov)
28.04.2012 23:22:19
Елена Лунная
29.04.2012 05:26:45
dersmoll@ (Alexander Smolyaninov)
30.04.2012 00:44:26
Михаил
30.04.2012 01:14:43
SelenIT
30.04.2012 16:59:06
dersmoll@ (Alexander Smolyaninov)
30.04.2012 17:25:01
SelenIT
30.04.2012 17:50:56
greli
30.04.2012 21:21:08
greli
30.04.2012 21:22:18
Елена Лунная
01.05.2012 03:28:38
Елена Лунная
01.05.2012 04:01:14
Елена Лунная
01.05.2012 06:26:18
SelenIT
02.05.2012 11:50:39
Елена Лунная
03.05.2012 17:01:22