RSS

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

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

  • #1avatar

    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 архивчик

  • #2avatar

    Елена Лунная

    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
    Интересно пришлёт ли кто-нибудь ещё варианты =)

  • #3avatar

    dersmoll@ (Alexander Smolyaninov)

    30.04.2012 00:44:26

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

  • #4

    Михаил

    30.04.2012 01:14:43

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

    Архив на Яндекс.Диске

  • #5avatar

    SelenIT

    30.04.2012 16:59:06

    Если можно border-image и совсем не нужен IE, то как-то совсем просто... ЧЯДНТ?

  • #6avatar

    dersmoll@ (Alexander Smolyaninov)

    30.04.2012 17:25:01

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

  • #7avatar

    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+.

  • #10avatar

    Елена Лунная

    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, что в общем-то не проблема.

  • #11avatar

    Елена Лунная

    01.05.2012 04:01:14

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

    Пожалуй надо почаще такие задачки выкладывать, решения очень познавательны.

  • #12avatar

    Елена Лунная

    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 пока не принято. Поддержка планшетных устройств и мобильных браузеров гораздо интереснее =). Зато утвердили довольно маленький бюджет и можем позволить себе поддерживать только то что хотим. =)

  • #13avatar

    SelenIT

    02.05.2012 11:50:39

    Елена, я прошу прощения за дубль коммента (#5 и #6), отправил было, забыв зарегистрироваться, #5 можно удалить. Почему не работает в FF nightly — не знаю, синтаксис вроде особо не менялся... Если честно, код border-image я внаглую списал у Криса Койера, подогнав числа "на глазок" :)

    А в content псевдоэлементов :before/:after можно много чего интересного писать, это :). Я как-то исключительно смеха ради пробовал сделать подобие рамки из смайликов для IE8+ (вдохновившись информацией о возможности делать от 5 "фоновых" картинок для одного элемента в рамках CSS 2.1).

  • #14avatar

    Елена Лунная

    03.05.2012 17:01:22

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


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

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