Головоломка для верстальщика: CSS не видно, картинка спрятана

Хотите голову поломать? Вот вам тест на знание всякого странного, откройте следующий урл в «Опере»: http://bolknote.ru/files/opera-mystery/ (именно в «Опере») и попробуйте догадаться как это сделано.

Ответ завтра. Кажется, во всём интернете так ещё никто не делал. Загадка (25.18КиБ) Выше снимок того что вы должны увидеть на экране, я испытывал под «Оперой» последней версии (12.12) для «Мака», не факт, что под другими ОС всё так же будет.

Вот что видно в консоли, если попытаться скачать этот файл:
bolk@Bolk ~$ wget -O- --user-agent="Opera/9.80 (Macintosh; Intel Mac OS X 10.8.2) Presto/2.12.388 Version/12.12" http://bolknote.ru/files/opera-mystery/
--2013-01-22 00:24:09--  http://bolknote.ru/files/opera-mystery/
Resolving bolknote.ru... 91.230.61.15
Connecting to bolknote.ru|91.230.61.15|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 0 [text/html]
Saving to: ‘STDOUT’

    [ <=>                                                                                                                                                   ] 0           --.-K/s   in 0s      

2013-01-22 00:24:09 (0.00 B/s) - written to stdout [0/0]
Когда догадаетесь где тело страницы, переходите на уровень два — догадайтесь откуда берётся картинка.
21 января 2013 20:25

Viperet (viperet.info)
21 января 2013, 23:47

Тело страницы - в bolk.css, который подключается через заголовок Link:
Link: <bolk.css>;rel=stylesheet
А вот почему url(bolk.css#0x5F0xBF0xFF0xDC0x530xF60....) превращается в картинку - не пойму...

Александр Бабаев (bealex.moikrug.ru)
21 января 2013, 23:55

Заголовок ищется легко, а дальше я не крут а наоборот :)

Михаил Калашник (splurov.livejournal.com)
21 января 2013, 23:55

Троллишь читателей? :)
http://bolknote.ru/2010/12/15/~2848#09

Михаил Калашник (splurov.livejournal.com)
22 января 2013, 00:18

А картинка это X BitMap, судя по всему.

efendy (инкогнито)
22 января 2013, 00:20

body::after { content: 'http://bolknote.ru';
На сервере проверяешь реферер и отдаешь картинку?

PastorGL (инкогнито)
22 января 2013, 00:44

Как сказали товарищи выше, в заголовках отдаётся Link: <bolk.css>;rel=stylesheet

И в самом bolk.css
#define ,body { background: 20px 20px url(bolk.css#0x5F0xBF0xFF0xDC0x53 ням-ням-ням 000xFF) no-repeat; width: 80px; /*_width 80px*/ height: 80px; /*_height 80px*/ border: 7px dashed #259; outline: #259 dashed 6px; margin: 10px; padding: 3px; } body::after { font: 13px Arial, sans-serif; content: 'http://bolknote.ru'; display: block; position: absolute; left: 10px; top: 120px; outline: rgba(0,0,0,0) solid 1; }

Поигравшись в Dragonfly, можно вставить в DOM узел img, у которого задать src="bolk.css#0x5F0xBF0xFF0xDC0x53...", и Опера его корректно отображает. Какой-то экзотический однобитный формат картинки, который другие браузеры не поддерживают, судя по всему.

Artemy Tregubenko (arty.name)
22 января 2013, 02:03

я уже видел у кого-то пустое тело страницы и генерацию всего через css прикреплённый в заголовках

а вот картинка в виде url(bolk.css#0x…) напомнила мне mht, кажется, именно в нём я видел такую адресацию встроенных ресурсов. Кстати, размер строки ровно 800 байт = 6400 бит, а картинка размером 80х80=6400, ровно по

Artemy Tregubenko (arty.name)
22 января 2013, 02:12

если перейти на http://bolknote.ru/files/opera-mystery/1 и отредактировать исходник страницы, вставив картинку с правильным адресом, то она будет показана без рамки. Однако почему-то Опера для этой картинки не показывает контекстное меню картинок. Это подозрительно.

hshhhhh (hshhhhh.name)
22 января 2013, 02:19, ответ предназначен Artemy Tregubenko (arty.name):

Однако почему-то Опера для этой картинки не показывает контекстное меню картинок.
Потому что когда картинка бекраундом оно никогда не показывается.

hshhhhh (hshhhhh.name)
22 января 2013, 02:24

Не понял как сделана картинка, наверняка разновидность твоего любимого data-uri, а вот рамка сделана очень круто. Понравилась куда больше картинки :).

greli (greli.livejournal.com)
22 января 2013, 06:07

Картинка явно зашифрована во фрагменте
url(bolk.css#0x5F0xBF0xFF0xDC0x53 ням-ням-ням 000xFF)
Всё что после „#“ явно и есть закодированное изображение, предположительно, в формате WBMP. Не очень понятно как оно так считывается.

bolk (bolknote.ru)
22 января 2013, 06:07

Надо же, всё расколупали за ночь :)

Виталий (инкогнито)
22 января 2013, 06:47

Недавно общаясь с пепелсбеем в твиттере пришёл к тому, что использование link http header - это единственный реальный способ задания произвольного урла для фавикона на всём сайте, даже не для HTML ресурсов, жаль что только в опере работает

bolk (bolknote.ru)
22 января 2013, 10:06

В общем, сегодня напишу как сделано.

Artemy Tregubenko (arty.name)
22 января 2013, 11:16, ответ предназначен hshhhhh (hshhhhh.name):

я писал про то, что даже вставленная явно, а не через CSS, эта картинка всё равно выдаёт контекстное меню страницы, а не картинки

shaltai-boltai (инкогнито)
22 января 2013, 13:50, ответ предназначен bolk (bolknote.ru):

Надо же, всё расколупали за ночь :)
Дык драгонфлай (по крайней мере, под виндой) всё показывает.
Чего там колупать.

burn.cd (инкогнито)
29 мая 2013, 15:49

приветствую...
а как с Вами связаться можно? спасибо

Евгений Степанищев (bolknote.ru)
29 мая 2013, 17:32, ответ предназначен burn.cd

Здравствуйте!

← Вот тут слева есть меню, там есть пункт «Обо мне», на той странице вся публичная контактная информация.

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)