Misunderstanding
Записи по теме «Дизайн»
IcoMoon
Думается мне, самый (один из, все же) удобный сервис для создания иконочных шрифтов — это IcoMoon. В бесплатном режиме можно выбрать нужные значки и с легкостью встроить их в страницы сайта. Сервис предлагает несколько коллекций разнообразных значков-иконок, за деньги можно и того больше. Но что самое интересное, помимо готовых коллекций, можно загрузить и свои личные иконки, создав шрифт и при желании дополнительные графические файлы (предполагается, что svg у вас уже имеется, как исходник) — png, svg и pdf впридачу…
Ассортимент значков очень широкий на компьютерно-информационную тематику с уклоном в онлайн-сервисы. То что современный доктор прописал для 95% веб-десигнеров. Остальные 5 могут, как я уже отметил, присовокупить свои личные творения.
Подключается полученный шрифт (4 шрифта разного формата) довольно просто: в директорию, где лежит сайт или шкура блога, копируется папочка со шрифтами, а в файл со стилями переносится содержимое style.css (как вариант, можно этот файл подключить отдельно ссылкой в <head>, особенно, если код большой т.е. коллекция иконок насчитывает от десятков до сотен штук, и чтобы не забивать имеющийся стилевой файл…). Проверяем соблюдены ли пути ко всем полученным шрифтам/папкам и пользуемся.
Каждый значок называется особым образом, а в стилях прописан для него класс со свойствами. И нам остается вызвать его на свою страницу вот таким незамысловатым кодом:
<span class="icon-pencil2"></span> — что даст такой результат на выходе:
Для чего использовать, например, для украшения внешних ссылок.
Для плюшек-менюшек , для замены слов картинкой . Применений множество.
Однако эти значки не всегда и не везде выглядят красиво, особенно в мелком размере. И часто плохой рендеринг браузерами таких веб-шрифтов заставляет использовать иные решения, напрямую работать с svg. Хотя с отображением его сопряжено немало трудностей, и не всегда можно этот формат встроить так, чтобы иметь возможность влиять на него css-стилями. А шрифт, полученный из icomoon, как видим, наследует стили той строки или параграфа, где он вставлен. Однако, заметно, что, «по умолчанию», значки немного выбиваются из приятной глазу линии текста, поэтому для «рабочего» применения нужно обязательно играться со стилями, к примеру, задать выравнивание по vertical-align:text-bottom; — .
Я-то искал для блога подходящие стрелочки для скроллинга «вверх-вниз», в итоге все равно пришлось использовать svg. Но пара шевронов в навигации в режиме одиночной заметки, прижились я думаю. Более изящное решение, чем предыдущее. Подумал было заменить в нижней плашке поста название «Рубрика» и «теги» на значки. Но они так отвратно выглядели, что я вообще убрал все. И ничего. Где рубрика, где тег — понятно и так. Да и не принципиально.
CSS: transition & browsers
Неожиданно пэрэчэпыуся я за странное отмораживание браузеров на движке Gecko (Seamonkey 2.38, Firefox ESR38, Firefox 41, Firefox 45.0a1 (Nightly)).
В CSS есть такое замечательное свойство transition которое позволяет делать эффект перехода между двумя состояниями элемента. Чаще всего посредством наведения мыши, т. е. благодаря псевдоклассу :hover который задается в свойствах таблицы стилей.
Проще говоря, это рюшко-сопелка, которая сглаживает, точнее, анимирует, например, изменение цвета(поведения) гиперссылок при наведении курсора (transition и неtransition) без применения javascript и его многочисленных библиотек.
Да, если подумать, скрипач она не нужна. Но народу нравится.
Обычно я смотрел (отлаживал) все свои изделия в двух браузерах: на движках Gecko (Firefox и Ко) и Webkit (Chrome и Ко). Но, как правило, в последние годы они ничем не отличаются в отображении веб-страниц. Поэтому у меня есть незахламленный чистый Хром, в котором я и.. того-этого. Он быстрее работает, чем Файрфокс, и постепенно вытесняет его. И поделом, кстати.
Обычно я хожу в обход всяких эффектов, но тут захотелось трошки повеселиться.
На нынешнем временном простом зимнем блоге внизу есть область, попав мышью в которую, можно увидеть ряд снежинок (мега, да?). Чтобы картинку резко не выбивало, я добавил секундный «переход» между темной и синей.
Полез я нонче проверить, как там поживает бложек, с обычного своего повседневного Seamonkey. И не обнаружил никакой мягкости и плавности. Поначалу я подумал, что Симанки как продукт архаичный (хоть и основанный на современном движке, том же самом, что и передовой Файрфокс), просто не поддерживает это свойство. Но оказалось, что даже свежайшая сегодняшняя файрфоксовая альфа страдает тем же непониманием высокого искусства.
Главное, с текстовыми ссылками все работает отлично, можете убедиться, открыв верхнее меню, нажав красную хреновину вверху экрана. Плавные уходы и приходы. Картинки — фиг. Хром — все на ура.
Я подумал, что мешает какой-то код на странице, хотя опять же, хрому это не помеха. И переместил только этот снежиночный элемент в известный сервис для тестирования кода jsfiddle. Та же картина. Хром отлично, Фоксы — неуд.
Джаваскрипта никакого нет, остальное можете видеть. Result — это резулт. Ткните и проверьте.
Вроде ерунда, а зацепило. Половина интернета рюшку не приметит! Ужас! Ааааа!
Ну да, можно подключить jQuery, тем более что эта штука уже работает на странице, выдвигая «меню» и инициируя кнопку перемещения вверх. Но тут не в этом дело. Всегда нужно искать простой путь. Для меня эффекты, если они необходимы, прежде всего это стандарты CSS, а уж потом все остальное. Джава-скрипт многими людьми отключается во избежание. В том числе я лично знаю парочку параноидальных админов, которые своих подопечных в интернет гоняют чуть ли не через TOR с полным выпиливанием малейших пылинок на челе безопасности… Никакие модные параллаксы в их браузерах работать не будут. А CSS будет, потому что это просто безобидное оформление, помогающее (или мешающее) восприятию html-разметки веб-страницы.
Не знаю, что с этим делать. Попала песчинка в ботинок. Ненавижу такие ситуации, когда какая-то ерунда портит пёрфект всего остального. Гм, я на выяснения, эксперименты и этот отклик потратил кучу времени.
Ну ладно. Пойду сделаю тыквенную кашу с рисом и изюмом. Happy Halloween!
P.S.
Если две картинки заменить спрайтом (то есть склеить их вместе, что практикуется для более быстрой подгрузки, но требует более сложного и точного позиционирования, особенно когда картинок в одном спрайте много и они разного размера), такая фиговина работает в Файрфоксе, но эффект получается совсем иным:
Картинка едет вверх, поскольку вторая ее часть лежит на 27 пикселей «ниже». Тогда как две картинки по отдельности дают эффект «проявки» или «подсветки»… Идиотия какая-то.
CSS — инструмент очень сильный. Сделать с его помощью можно многое. Но это такой замысловато скрученный клубок разноцветных нитей, что порой…
Короче.
31.10.2015, 13:00 |
Дизайн, Интернет | chrome, css, gecko, mozilla, transition, webkit, браузер, сайтострой |
|
Плагин для техобслуживания и редизайн
Крреатифф прэ и прэ.
С оказией неопределенного выбора хостинга для двух моих главных по активности блогов (этого и лыжного), я углядел возможность сделать кое-какой ремонт имеющихся шкурок. Это не кардинальная переделка, а подновление фасада, замена ржавых труб и устранение ненужной проводки. Вот такая образность.
Обе блоговые шкуры были основаны на древней теме =Librio= — которая долгое время, более трех лет с момента основания, стояла на моем блоге без изменений. Она одновременно и нравилась, и мозолила эстетические рецепторы. В 12 году я измельчил в кулаке свою лень и переделал ее. Точнее подверг, как я уже когда-то говорил, шлифовке мелкой наждачкой, сформированной из этой самой мелкодисперсизированной лени. Посему — множество хвостов осталось. Да и время идет, кое-что необходимо модернизировать. А кроме того, сделать вариант «дизайна» для мобильных устройств. Ибо я сам в более чем 50% случаев хожу в инет с телефона.
Но я сейчас не об этом. В связи с этими поползновениями, да и, э-мюэ, вообшче, возникла необходимость в приличной заглушке, на время административно-технических дел. Перенос, тестирование, обновление, всю эту кухню выставлять на показ нехаляльно.
Для WordPress существует масса (кстати, многие не знают, что масса — это мера в стары годы, когда системы СИ и в помине не было: дюжина в кубе — 12х12х12 т.е. 1728. Немалое число.) плагинов для технического обслуживания. А я по чьей-то рекомендации, уже и не помню, поставил в 2009 году один из таковых с незамысловатым названием «Maintenance Mode». К моему удивлению, на официальном сайте WP ни плагина, ни его автора не наблюдается (как, впрочем, и темы «Либрио»). А сам плагин со странички автора не скачивается (ибо ссылка ведет на тот же WP.org). Т.е. плагин, как это часто бывает с некоммерческим продуктом, заброшен. А вордпрессовцы, похоже, избавились от балласта, что тоже верно. Старье может наделать делов, если его вовремя не подмазать.
[Зайчик-репарайчик, сумо-сьурри и… На этой почве что-то геральдическое выползло из-под…]
Что делают такие плагины: без танцев с кодом или подменой файлов не пускают никого ни на одну страницу блога, кроме администратора. Остальным выдавая некую страницу с информацией. Произвольное уведомление о технических работах. Цивильная такая штукенция.
Полез я смотреть альтернативные плагины и понял, что ни один мне не подходит, есть группа слишком навороченных, содержащих очень яркие рельефные шерстистые шевелящиеся заглушки, идущие в разрез с концепциями моего характера. Буф, завернул. Другие пропагандируют давний стиль «простота хуже воровства», позволяя изменять, допустим, цвет текста, но не цвет фона. Некоторые просто «демо» версии «про» версий, последние стоят денег за полный функционал. Я ничего по настоящему стоящего не нашел, только умаялся с этими поделиями.
Не бойтесь, я ничего сам не стал писать. Я подумал над тем, что мне нужно, и вернулся на привычный исследованный =Maintenance Mode= v.5.4 от 2010 года. А почему? Оный позволяет ненавязчиво создавать свою заглушку. Произвольный код страницы вставляется в дефолтный пхп-файл. И все. Никаких лишних па.
Я так и делал раньше, у меня, кстати, не осталось «оригинала» этого плагина… потому что я много в нем копался, посчитав, что, гм, чуть что скачаю заново-выново-поново… Ага, сейчас. А архивы, которые распаковал, имею нехорошую привычку удалять, еще с тех времен, когда винчестер моего персонального компьютера обладал аж 1200 Мб пространства… [как дофигища много помещалось тогда на одну дискету… дЪдушка вспоминает молодость…].
Итак, благодаря CSS3 реализован двойной фон, с винтажным обоем и приятным шумом. И логотип персональный. Ссылка на контакты поставлена на весь бэкграунд, за исключением небольшой области вверху, чтобы не мешать.. рекламе бесплатного этого самого хостинга. А еще счетчик обратного отсчета на js — именно такой, как я хочу, а не автор плагина или левый дядя вася… Я не мешаю плагину работать с движком, он не мешает мне выдавать на гора то, что я желаю. Идеальный симбиоз.
Счетчик показывает обратный отсчет от собственноручно заданной даты. По достижении выдается сообщение, сорри счетчик исчерпался, верьте, блог заработает. А если посетитель пришел уже к просроченной дате, то сообщение его подбодрит к ожиданию. Автоматически открывать блог по истечении последней секунды отведенного времени на техработы считаю нецелесообразным, да и плагин такого бесстыдства не предусматривает. Вдруг там голые.. стены.
Это — рюшки и перделки, но почему-то они вызывают приятное чувство. Для этого все и делается. Джаст фор фан.
О текстурах (бэкграундах) поговорим в другой раз, тем более, что — при реновации темы — фончик захотелось освежить, и встал мучительнейший выбор между дюжиной очень классных вариантов.
28.10.2015, 14:02 |
WordPress, Дизайн | background, maintenance mode, графика, заглушка, логотип, плагины, счетчик, техобслуживание, шкурка блога |
|
Skisport
Зимний блог, для которого (для движка которого) я еще не подобрал хостинг, существует и даже процветает в бездвижковой инкарнации. Как встарь.
Прирастая заметками, как ни в чем не бывало. Приблизительно к середине-концу ноября, когда лыжный сезон войдет в ритм, я верну это все на wordpress итд итп… Хотя, мне нравится держать все под непосредственным контролем. Ну ладно, время покажет.