Избавление нашего мира от длинных теней

    Статья описывает практический пример удаления длинных теней с иконок с помощью юзерстилей или юзерскриптов. Имеются ссылки на работающие на сайтах (habrastorage.org, toster.ru, tmtm.ru) стили и скрипты. UPD 31.05.2014: добавлены стили на habr.ru и freelansim.ru. Загружать здесь — найти среди файлов, выбрать Raw, прямая ссылка.

    Пришельцы (длинные тени) появились на окраинах нашего города. Если представить их высоту в лучах заходящего солнца, сознание отказывается строить эту картину.
    Пришельцы должны быть удалены, иначе наш мир навсегда станет другим, неестественно рельефным. («Тостер» — это уже не наша территория, поэтому сильно беспокоиться о ней не нужно. Там длинные тени, может быть, придутся к месту, как и произвольного качества вопросы и ответы.) Сейчас санации требуют 2 мутанта — логотип «Habrastorage» и рисунок облака.



    Чем опасны длинные тени?


    Глядя на неограниченно длинные тени, читатель не имеет осязаемого представления о высоте источника света над горизонтом и о высоте рисунчатых объектов. Как правило, длиннотеневые мутанты соседствуют с плоскими элементами интерфейса, что приводит к представлению о 2 родах объектов — плоских (нарисованных) и объёмных мутантов.

    (thx)

    Нет необходимости санировать дизайн плоского интерфейса, так как это образцы жизни тех страниц, на которые мы имеем честь попадать — это всё равно, что переделывать мир (или сайт). Но исправить мутацию высоких теней мы обязаны — ради 3-мерности евклидовой геометрии и сохранения несюрреалистичности мира. Если плоское в 3-мерном мире встречается, то объекты с бесконечной высотой, отбрасывающие такие длинные тени — нет.

    Есть ещё один источник внеземной атмосферы, к которому приходится прикасаться — это страница аутентификации. Там есть такие же мутированные буквы «Т» и «М» на логотипах и некоторые мутировавшие иконки там. Но поскольку домен страницы авторизации другой, подобное действие желательно выделить в отдельный юзерскрипт или расширение браузера.



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

    Как они будут работать?


    Принцип очень прост: вместо картинки с сайта подставляется картинка (в формате base64) из юзерскрипта или юзерстиля. Таких картинок несколько (сейчас — 5 шт. на 3 доменах).

    Итого, имеется 3 способа реализации, избавления мира от длинных теней. Результаты всех способов — одни и те же; на месте мутированных рисунков будут наблюдаться такие исправленные:



    Если у вас в браузере установлен Stylish для Firefox или для Chrome, используйте:

    *) ufoCorrect: юзерстиль исправления теней в странице авторизации и на Habrastorage.

    Применение только стиля обеспечивает быструю установку раскладки страницы, без рывков отображения в процессе загрузки. Кроме того, стили не создают вопросов безопасности — пользователю нет необходимости брать риск доверять содержанию скрипта, потому что скриптов нет.

    Как бонус, коррекция имеется и для QA (или как его там по-новому). Впрочем, этот ресурс может не интересовать часть пользователей.

    Если Stylish не установлен (и нет желания устанавливать), можно обойтись скриптами, используйте:

    *) ufoCorrect-скрипт (для установки выбрать из списка по названию затем «Raw»; прямая ссылка для установки): юзерскрипт, который делает единственное действие: устанавливает стили (что видно по его коду). Не требует предварительной установки Stylish. Скрипты могут быть установлены простой манипуляцией — нажатием кнопки в Firefox или затаскиванием файла в список скриптов Хрома (или новой Оперы), или через NinjaKit в Safari.

    *) составная часть скрипта HabrAjax. Не имеет доступа к домену авторизации tmtm.ru, чтобы у пользователя не было вопросов, что он там будет делать. Поэтому тени на «ТМ» на странице авторизации он не удаляет и удалять не будет. Но ничего не мешает использовать одновременно 2 скрипта или стиля — ufoCorrect и HabrAjax.

    Добавим, что HabrAjax использует доступ к домену habrastorage.org с другой важной целью — автоматизации забрасывания картинок прямо через Хабр, поэтому помощью в санации картинок его функция не ограничивается.

    UPD (2014-05-31): добавлен freelansim.ru:

    И убрана тень на новом Хабре, с совместимостью с ZenComment 4 и HabrAjax.

    При этом, скрипт теперь нужно брать на github.com/spmbt/haPages/tree/gh-pages, поскольку прежний хостинг (userscripts.org) стал недоступен на запись новых скриптов с 17 мая.

    UPD2 (2014-06-01): обновлены юзерстили ufoCorrect — расширены на те же Хабр и Фрилансим.

    Only registered users can participate in poll. Log in, please.

    Как вы относитесь к наличию НЛО длинных теней на страницах ресурса?

    Share post

    Similar posts

    Comments 22

      +31
      Наверное самый бессмысленный тренд в дизайне 2013 года.
        0
        А разве он трендом стал? По-моему, только на паре десятков сайтов появились такие иконки и всё заглохло.
          +5
          И слава богу, на дрибббле по-крайней мере что ни пост — с длинными тенями.
          0
          >> бессмысленный тренд

          Тренд в дизайне редко несет в себе смысл. «Тренд» почти всегда равно «мода».

          Например, размещение логотипа в шапке трендом никто не объявляет.
          +3
          Проблема была даунских квадратов, теперь даунских теней.
            0
            Провокационненько.
              +1
              Спасибо, поставил в старенькую оперу, рад :)
                +1
                Не вижу особых причин для отказа от длинных теней в угоду скевоморфизму. Если не всобачивать их на каждую кнопку, то это просто своебразное средство выразительности, которое, не может быть хорошим или плохим, но кому-то, без сомнения, может не нравится. Хотя в данном случае дело сугубо хозяйское, да.
                  +1
                  Ваша gif про длинные тени смешна. Во-первых, почему real сразу выпуклый? Если это цилиндр, то сверху плоскость, и градиента там не будет. А то такие градиенты только раздражают, когда их используют неумело (благо, этот тренд уже канул в века). Ну а длинная тень образуется не обязательно от высоких объектов. Простой пример из жизни — когда Солнце низко, тень от объекта многократно длиннее самого объекта. Вообще длина тени зависит от источника освещения.
                  Мое мнение таково: нормальный и пока еще достаточно свежий тренд. Парадоксальная его ненависть мне не понятна. Как говорится — все нужно использовать умело и в меру.
                  Что касается самих же теней — частой проблемой является то, что тени никак не согласованы между собой. Пусть и не осознанно, но глаз это замечает и это раздражает. Хорошо, если в пределах одной страницы все тени направлены в одну сторону, бывает и хуже. Но не только это проблема — когда все тени направлены в одну сторону, но по тому, как они расходятся, можно судить, что источник освещения достаточно близко, другие элементы никак не фиксируют этот факт. Получается, что все объекты освещены своим источником света, причем изолированно. Такого в жизни не бывает, и это подсознательно вызывает диссонанс, начинает казаться, что что-то не так, ну и в итоге в общем все понятно.
                    0
                    Простите, это не мой gif — я дал ссылку на комментатора, который привёл этот рисунок в качестве иллюстрации подобной темы. Его ценность — в том, что одна анимация объясняет всю тему и проблемы, с ней связанные — то, что я пересказал словами в 3 соседних абзацах. В остальном согласен с Вашими замечаниями. Лично мне кажется применение рисунков и кнопок с длинными тенями не очень удачным в описываемой группе проектов, поэтому собрался, наконец (месяца через 2 от их появления), и перерисовал. Всё это — конечно, личные восприятия, я не настаиваю, а тон изложения — полушуточный.
                    0
                    Я вот не понимаю, что за баттхерт про необходимость реализма в дизайне?
                    Дизайнерское решение должно выполнять конкретные задачи — какие-то элементы притягивают внимание, какие-то облегчают прочтение, какие-то видны только после прищура глаза. Если Вам нужен реализм — взгляните в окно — для глаз полезнее в 100500 раз.
                    Это мое мнение.
                      +1
                      Не натыкался на длинные тени, узнал о них из поста.
                        0
                        Новый iOs тренд
                          0
                          Простите, что? Причем тут iOS?
                            0
                            Длинные тени смотрятся куда выигрышней дизайна седьмой iOS
                          0
                          А будет апдейт в связи с редизайном?
                            0
                            Сделано. (Брать в github.com/spmbt/haPages/tree/gh-pages, старый хостинг не работает.) Учтёны Хабр и Фрилансим в скрипте ufoCorrect.
                              0
                              Что-то не сработало :( осталась длинная тень на хабре
                                0
                                Проверил, да, на Хром эта версия не устанавливается из-за кодировки ANSI. Спасибо, что подсказали, исправил, перезалил, проверил. Теперь на Хроме работает (версия 35.0.1916.114).
                                  0
                                  У меня не работало в опере, но теперь в ней же заработало :)
                                  Спасибо! Хотя… Может, стоило не Х урезать, а старую бобрую кляксу туда возвернуть?
                                    0
                                    В моих стилях клякса с самого начала была лишней (занимала 1.5 года ту же площадь и место, которое сейчас занимает лого «Н» — 20х32 пикселя). А с возвращением кляксы я видел чей-то стиль на userstyles.org после 15-го мая, так что Ваше предложение, действительно, реализовали :).
                            0
                            А по-моему красивое свежее решение. Вебдванольные градиенты и блики уже оскомину набили. Не понимаю негатива автора.

                            Only users with full accounts can post comments. Log in, please.