mega.genn.org

Долго сказка сказывается, да быстро дело делается. Во всяком случае у нас с Юрой такое происходит регулярно. То читалку за 33 часа сделаем, то в конкурсе каком-нибудь поучаствуем. Так было и в этот раз. Около 10 утра вчерашнего дня, Юра сбросил мне ссылку на CSS1K — конкурс для маньяков, которым предлагается оформить страничку только средствами CSS, да еще и так, чтобы само описание стилей занимало меньше килобайта. Вдвоем мы взялись за дело. Я, рисуя в прямом эфире в Скайпе, где мы общались, предложил концепцию дизайна, которая, по-моему, должна была влезть в 1024 байта, а Юра взялся за реализацию. Перед чтением рассказа о создании килобайтной красоты можно взять и полюбоваться, что же получилось в результате: Bbubles. Для того, чтобы оценить изящество такого решения, можно сравнить размер файла картинки с этим дизайном, который будет минимум в 20 раз больше, и это безо всяких анимаций и ссылок.

«Информация должна быть невидима и появляться лишь при наведении мышки. Шарики должны расти, чтобы вместить весь текст. Хорошо бы на фоне была отдельная масса, которая как бы обводит все три круга, но так, наверное, не получится из-за ограничений в размере кода. Пиу-пиу-пиу!», — примерно так я описывал изображение на экране

После всяких обсуждений типа «логотип можно сделать из любого шрифта без засечек, только дай ему контур потолще, ведь в вашем этом сиэсэс можно такое сделать вебкитом всяким?», Юра взялся за первичную реализацию, а я за раскрашивание в нормальные цвета. В целях оптимизации, я подбирал такие цвета, которые можно записать тремя символами. Например, если цвет белый, то CSS позволяет записывать его не как #ffffff, а как #fff. Немного поэксперементировав, я отправил в верстку такие коды:

#ccdd22 → #cd2 (зеленый)
#eeeedd → #eed (фон)
#ddddcc → #ddc (темные круги)
#444444 → #444 (текст)
#ffffff → #fff (фон под ссылками)

В итоге получилась вот такая красивая цветовая схема:

В ходе реализации оказалось, что круги так красиво разместить не получится, так что Юра расположил их треугольником, а я подправил оформление.

Но в результате получилось немного иначе. Когда все было готово, я тоже немного покопался в CSS и дополнительно сэкономил больше десятка байтов. Например, заменив стандартное sans-serif на Arial в описании шрифта. Это не совсем красиво с точки зрения CSS, зато работает везде и экономит байты. Или, например, предложил заменить там же 1.3em на 18px, сэкономив таким образом еще один байт, а в итоге значение вообще превратилось в 130% ;) Какие-то секреты верстки, наверное, раскрывает в своем посте Юра. В общем, повеселились от души и получили хороший результат: Bbubles.