@voff11 ноя 2013 в 14:36

Симпсоны на чистом CSS

52 мин

63K

Веб-разработка * CSS *

+39

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

@misha91 11 ноя 2013 в 14:49

Исскуство в чистом виде :)

@Vend3tta 11 ноя 2013 в 15:50

Вот не пойму я, где здесь искусство. Это же обычный хардкод, вроде приснопамятного айфона на CSS. Гомера рисовали на CSS еще 5 лет назад, когда браузеры только начинали внедрять поддержку css3-свойств, и тогда это вызывало восхищение. Сейчас же…

@NLab 11 ноя 2013 в 15:58

Соглашусь. Понимаю, если б он нарисовал на css что-то такого плана:
www.foger.net/wp-content/uploads/2010/10/Simpsons_cast.jpg

Либо совсем хардкор: justforthefunzies.com/wp-content/uploads/2013/08/simpsons.jpg

@NLab 11 ноя 2013 в 16:29

[sad-offtopic]
Плюс в комментарий, минус в карму. Лучше бы наоборот.
[/sad-offtopic]

@NLab 11 ноя 2013 в 14:49

Представляю какие появятся вскоре вакансии:
Мультипликатор, аниматор
Знание HTML 5, CSS 3

@Nikiti4 11 ноя 2013 в 15:06

Если вскоре это будет норма, то будет что-то типа:
Аниматор. Опыт работы с HTML 7, CSS 4. Обязательное требование: поддержка IE6

@efremovaleksey 11 ноя 2013 в 15:22

Думаю, что появится специализированный софт в таком случае. Сейчас же нет вакансий типа «Редактор видео-контента, знание устройства форматов h264, etc...»

@vittore 11 ноя 2013 в 16:17

Так а софт уже есть, вот например www.sencha.com/products/animator/

НЛО прилетело и опубликовало эту надпись здесь

@BaNru 11 ноя 2013 в 18:42

www.xanthir.com/b4Ko0

Last updated: Tuesday, February 19 2013

www.w3.org/TR/selectors4/

W3C Working Draft 2 May 2013

@Vend3tta 11 ноя 2013 в 18:45

CSS в дальнейшем будет представлять (уже представляет) из себя набор независимых модулей: работа над новой версией модуля начинается сразу же после принятия версией предыдущей статуса рекомендованного. Это самое с модулем Selectors вы и наблюдаете.

НЛО прилетело и опубликовало эту надпись здесь

@Suvitruf 11 ноя 2013 в 14:52

Красота (:

@Talyutin 11 ноя 2013 в 14:56

Подобные вещи мне напоминают школу и BASIC.

10 LINE (0,100)-(100,100)
20 CIR (0, 50, 50)
...

Через несколько часов и 800 строк нажимаешь заветную кнопку К5 и… на экране появляется домик.

@ST-bobr 11 ноя 2013 в 15:07

Да, я обычно с такими рисунками упирался в потолок максимального количества команд и недоумевал, как с таким ограничением умудряются писать игрушки, где помимо рисунков все еще прыгает бегает и стреляет

@Vest 11 ноя 2013 в 16:27

Ха-ха, вы мне напомнили своим комментарием мою школьную молодость, когда я рисовал в «гиви-басике» ракету с нечто похожим на строительные леса на миллиметровке, а потом переводил во всякие PSET'ы и DRAW'ы.

НЛО прилетело и опубликовало эту надпись здесь

@alexeygrigorev 11 ноя 2013 в 15:46

А тут можно посмотреть

Кстати им в файрфоксе немного плохо

@voff 11 ноя 2013 в 15:52

Firefox 23.0 — все норм

@ZimM 11 ноя 2013 в 15:56

Firefox 25 — всё хорошо.

@KawaiDesu 11 ноя 2013 в 15:58

FF 24 — всё ок. Чуток только пробелы на коже Бёрнса, а так ок. Обновитесь и/или отключите мешающие аддоны.

НЛО прилетело и опубликовало эту надпись здесь

@The_Modifier 11 ноя 2013 в 15:55

Открыл в своём любимом браузере. А в этом что-то есть, кроме шуток.

@ImKremen 11 ноя 2013 в 15:57

Барт и Фландерс неплохо деградируют)

@Vend3tta 11 ноя 2013 в 15:57

Напомнило:

@ZweiAndersdenkenden 11 ноя 2013 в 23:35

D'oh!
Вот это их расколбасило…

@Winchester 12 ноя 2013 в 05:46

Или так:

@Azya 12 ноя 2013 в 05:47

IE творчески переосмыслил персонажей, прям Пикассо!)

@Halt 12 ноя 2013 в 11:02

Кубизм, однако. Вы просто ничего не понимаете в его творческой натуре

@ImKremen 11 ноя 2013 в 15:56

<зануда>Вот только зачем? Для нормального отображения нужен ie9+, а значит вместо подобного шаманства можно использовать SVG.</зануда>

@Psychosynthesis 12 ноя 2013 в 00:32

Да сразу бы про JPG писали, чего уж тут.

@pashkoff 11 ноя 2013 в 16:29

Круто конечно. С SVG же ведь всякий нарисовать сможет.
Есть что-то в стремлении людей использовать инструменты не по назначению.

@impwx 11 ноя 2013 в 16:29

Я, кажется, пропустил какую-то важную строчку в топике.

Ну захардкодил чувак кучу значений, написал несколько километровых css-файлов. И что? Я бы понял смысл появления статьи по этому поводу, если бы:

в ней бы предлагался нетривиальный и удобный способ перевода любой картинки в CSS-вид
автор справился с какими-нибудь эпическими багами в браузерной совместимости
это было бы ручное произведение искусства, нетривиально использующее возможности CSS
это было бы абсолютно надежное кроссбраузерное решение

Ничего из вышеперечисленного мне не попалось. Выбор крайне трудоемкого и нетривиального способа решения задачи хотелось бы как-то объяснить, кроме того что «css3 сейчас в тренде».

НЛО прилетело и опубликовало эту надпись здесь

@impwx 11 ноя 2013 в 16:54

Ну если так думать, то картинку можно отобразить вообще без CSS — средствами HTML4, которые поддерживает даже IE3, с помощью построчной развертки в таблицу:

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td bgcolor="#000000" width="1" height="1"></td>
        <td bgcolor="#FFFFFF" width="1" height="1"></td>
        ...
    </tr>
    ...
</table>

Только вот отключение картинок не просто так придумали, особенно в мобильных устройствах. А мегабайты HTML или CSS-кода скорость загрузки страницы явно не улучшат.

НЛО прилетело и опубликовало эту надпись здесь

@standy 12 ноя 2013 в 15:30

Это уже было ~~в симпсонах~~ на хабре
habrahabr.ru/post/136395/

@CyberAP 11 ноя 2013 в 19:38

Как раз-таки нет. Самый нетривиальный это background-image и множество однопиксельных linear-gradient();. И по логике даже подходит, и не нужен однопиксельный элемент.

@Psychosynthesis 12 ноя 2013 в 00:38

Хм, отличная идея… А учитывая, что linear-gradient ещё и несколько цветов может иметь, вообще супер! Можно так ведь по строкам сделать, это проще даже будет. Только там, кажется, было ограничение на число цветов и не каждый браузер сработает корректно.

@CyberAP 12 ноя 2013 в 19:49

Как вариант детектить размер изображения и выбирать один из трёх способов: горизонтальные градиенты, вертикальные, либо точечные. Правда про ограничение по количеству стопов я не слышал ещё. Уже давно в мозгу витает идея написать такой конвертер на js, не хватает знаний для реализации.

@Abcd_Efgh 11 ноя 2013 в 17:24

Может про Бэтмэна и Бэндэра тоже написать, как автор статьи. С минимумом текста, с цитированием всего кода, с картинками…

НЛО прилетело и опубликовало эту надпись здесь

@voff 11 ноя 2013 в 18:28

Напишите, автор статьи не против

@withkittens 12 ноя 2013 в 14:54

Напишите: видите, топик в плюсе, людям такое нравится. Не прогадаете ;)

@Ogi 11 ноя 2013 в 17:11

Ждём новостей вида «австрийский художник создаёт удивительные картины на чистом CSS3».

@Antti 11 ноя 2013 в 17:14

@masterclass 11 ноя 2013 в 18:03

Напомнило про японца, который картины в Excel рисовал.

@Offenso 11 ноя 2013 в 18:31

Но это же не чистый css. Здесь еще html.

Скрытый текст

@ghosthope 11 ноя 2013 в 18:53

В IE11 у Mr Burns нос слегка разбежался. Но в целом я рад что все остальные в IE11 выглядят прекрасно.

@gkir 12 ноя 2013 в 08:39

всегда любил такие разработки за файл normalize.css в котором можно посмотреть, что ещё надо «обнулять», чтобы получить нормальную кроссбраузерную верстку. спасибо