Advice Dog средствами CSS редактировать

Плюсуй, захабряй! После публикации bur про верстку острых углов , я загорелся желанием опробовать этот способ в действии. Реальной задачи не было, примитивные треугольнички-ромбики надоели быстро, хотелось чего-то масштабного.

Мысль подкинул rossomachin своим комментом «Плюсуй! Убивай!». Конечно! Advice Dog с его позитивным полигональным фоном идеально подойдет для моих экспериментов!

Красивая разноцветная подложка и высокоинтеллектуальные надписи сверстались быстро. Но как быть с кавайным песиком, — думал я — неужели придется вставлять его картинкой? Размышления и поиски привели меня сначала к Гомеру Симпсону, в исполнении Романа Кортеса , а затем, к его приложению jpeg2css , позволяющему преобразовывать монохромное изображение в html. И все встало на свои места.

Пять минут в фотошопе на перевод собачки в монохромный режим, затем перевод картинки в html-css, немного оптимизаций, и, — voilà — Advice Dog снова учит нас жить с экрана монитора!

Отображается адекватно в Firefox 2/3, Opera 9x, Safari 3 или IE 6/7 при наличии шрифта Verdana. Попутно выяснилось, что только Firefox 3 сглаживает границу между бордерами. Остальные браузеры, как в старые добрые времена, радуют взгляд характерными «зубчиками».
blog comments powered by Disqus

комментарии с хабра ( 38 )

  • Хорошая мысля приходит опосля :(
    Пока писал топик, придумал как сэкономить три дива в подложке.

    ответить

  • Пример от создателя jpeg2css:

    ответить

  • „… Пять минут в фотошопе на перевод собачки в монохромный режим...“ — ИМХО долговато очень!

    ответить

    • Ну я ж не мастер фотошопа. Вполне возможно, что это можно сделать быстрее, но я не знаю как.

      ответить

  • О нет, форсед мем на Хабре! :)) Вы молодец, эдвайс дог на главной порадовал :)

    ответить

  • интересно, но не масштабируется, почему-то

    ответить



  • Опера. Решил сделать «ctrl + A» ^_^

    ответить

  • В хроме края сглаженнные.

    ответить

    • Это значит, что когда google перенесет свои наработки обратно в webkit, у сафари тоже появится сглаживание :)

      ответить

  • Отличный пост, здорово поднял настроение.

    ответить

  • Супер, вы даже предлагавшиеся оптимизации для собачки сделали :)

    А чего паддинги на составные не поменяли — по ссылке товарищ GMM даже конвертер готовый предложил.

    ответить

  • Я в восторге! :)

    ответить

  • У сотрудника при просмотре данной страници синий экран смерти выскакивает :DDD
    автору респектище ;)

    ответить

    • У сотрудника при просмотре данной страници синий экран смерти выскакивает :DDD

      это не я :((

      ответить

      • та всё ок, это же «воруй убивай» — адвайсДог ;))))

        ответить

  • Карту города (яндекс например) в дивах было бы круто сделать.

    ответить

  • НЛО прилетело и опубликовало эту надпись здесь.
  • Даешь сайты без единой картинки!

    ответить

  • правильно, Чегевара и Ленин уже приелись )

    ответить

  • А насколько проблема сделать его цветным? Вроде же нет проблем.

    ответить

    • Я вижу два способа сделать его цветным:
      1. Преобразовать песика в несколько монохромных слоев (каждый в своем цвете), перегнать их в html и наложить друг на друга.
      2. Написать свой конвертор.

      Все это, конечно, можно сделать, но я уже в пижаме :)

      ответить

  • Улыбаюсь во всю харю.
    Спасибо. Порадовали.

    ответить

  • в 10 опере отображается ужасно :))

    ответить

  • Free Image Hosting at www.ImageShack.us
    Так и надо? Браузер — свободная сборка firefox 3.0.4. Симпсона показывает нормально.

    ответить

    • нет, так не надо. в чем тут дело сказать не могу: у самого firefox 3.0.4, ничего подобного не наблюдаю.

      а что за свободная сборка? iceweasel?

      ответить

      • Gran Paradiso из ArchLinux'а. Подозреваю что-то не так со шрифтами. В Opera и Midori все штатно.

        ответить

  • o shi~, двач пробрался на хабр… нет пути!

    ответить

  • а скоро уже пойдем до уровня когда не надо будет использовать графики и можно будет сделать макет с рисунками «css only»…

    ответить

  • Теоретически — мега прикольно.

    Практически — думаю, в гифе аналогичная картинка весила бы меньше 35кб :)

    Так что, для гиков!

    ответить