NetLabCS
04 мая, 19:42
1132
0

Почему вам следует обновить браузер во имя искусства

История одной CSS-картины.

Картина «Франсин» в Google Chrome

Элемент картины «Франсин» Дианы Смит

Диана Смит (Diana Smith) создаёт эффектные картины с помощью кода: все элементы её «полотен» написаны в виде CSS, а не нарисованы.

Картины Смит — это даже не файлы, нельзя щёлкнуть правой кнопкой мыши и сохранить изображение на рабочем столе. Каждая картина создаётся вручную с помощью инструментов разработчика в браузере Chrome. Каждый её элемент — фрагмент кода.

«Франсин» в своём лучшем виде

«Франсин» в своём лучшем виде

Изнанка CSS-картины

Изнанка CSS-картины

В зависимости от платформы и браузера одна и та же картина будет выглядеть по-разному. Работы Дианы Смит лучше всего смотрятся в последних версиях Chrome, а в других браузерах порой принимают курьёзные формы.

Так, журналист Vox Дэвид Чжоу (David Zhou) попытался воссоздать «Франсин» в старой версии Opera. Вот что получилось:

Твит Дэвида Чжоу вдохновил на эксперименты других пользователей.

Так выглядит картина в Internet Explorer 7 под управлением Windows 98

Так выглядит картина в Internet Explorer 7 под управлением Windows 98

В более старых версиях IE искажение ещё сильнее

В более ранних версиях IE искажение ещё сильнее

«Франсин» в версиях IE от 6.0 до 11.0 под управлением Windows 7

«Франсин» в версиях IE от 6.0 до 11.0 под управлением Windows 7

А так картина выглядит в Chrome 9

А так картина выглядит в Chrome 9

Сама художница заметила, что другие браузеры выдают ещё более интересные результаты, чем те, которых пыталась достичь она.

Исходный код «Франсин» опубликован на GitHub — приобщиться к браузерному искусству может каждый.

Хотите подсказать новость или поделиться экспертным мнением? Пишите: news@cossa.ru

cossa-icons-6.png

Весь интернет-маркетинг за 19 недель!

Cossa рекомендует: онлайн-курс по интернет-маркетингу от Ingate — digital-агентства с 17-летним опытом.

  • 17 учебных блоков по ключевым вопросам интернет-маркетинга
  • Поддержка менторов
  • Диплом
  • Cтажировка в топовых агентствах России
  • Помощь в трудоустройстве
Узнать больше >>

Реклама

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

Ответить?

Чем живёт digital.
Главное — в рассылке:




Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Twitter Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Twitter, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой