voff 11 ноя 2013 в 14:36

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

52 мин

63K

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

+40

Комментарии 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 в котором можно посмотреть, что ещё надо «обнулять», чтобы получить нормальную кроссбраузерную верстку. спасибо