Ctrl + ↑ Позднее
11 сентября 2015, 14:20

Два сайта с шаблонами писем

Просто заметка, просто на будущее.
Коллекция шаблонов электронных писем:

Краем уха слышу разговор:
— А можешь мне вот эти все кадры анимации из png сделать gif? Так меньше весить будет при верстке!
— Да конечно!

Для тех кто не знал, в gif есть два варианта, это либо пиксель цветной, либо прозрачный. Все полупрозрачные пиксели заменятся на белый с наложением этого самого полупрозрачного пикселя.

— Твои предложения?
Соберем из всех картинок анимации (т. е. кадров) спрайт, например через этот сервис. Я делаю его вертикальным и без отступов (можно и с ними, дальше в коде скажу где поправить).

— А дальше что?
Дальше надо сжать картинку, например тут. Где, разницы нет, нормальный сжиматель удалит лишнюю информацию из png и оставит только ту, что строит картинку. Качество не пострадает. Сжимать с потерей качества можно, но не стоит.

Дальше по коду:

  1. В html создаем div в нужном месте, например, с классом «film»
  2. Пишем в css следующие строки
.film {
    background: url('spritesheetmin.png');
    animation: play 2s steps(60) infinite;
    height: 100px;
    width: 100px;
    display: block;
}
@keyframes play { 
      0% { background-position:    0 0px; } 
    100% { background-position: 0 -6000px; }
}

steps — количество кадров
100% {ba... — смещение (размер в высоту * количество кадров), тут же добавляем отступ, если добавляли при создании спрайта.

На выходе получаем анимацию из png, принцип как у пленки в кино. Тут за 2 секунды, мы показываем все 60 кадров.

Еще немного интересного о png
Картинка весит меньше, если у нее по горизонтали больше одинаковых пикселей. Это потому, что png записывает для каждого пикселя отдельно цвет. Но если встречается, что подряд идут 10 одинаковых, он напишет диапазон «с 1 по 10 пиксель — черный», что значительно сокращает размер файла.

Я очень люблю использовать CMD+Tab (CTRL+Tab for Win) для переключения между окнами. Но эта сочетание не работает одинаково на разных операционных системах, в частности Windows и macOS они ведут себя по-другому.

Как есть
В macOS есть условное группировка окон одной программы, так например, открыв 2-3 окна хром, мы не сможем переключаться между ними с помощью CMD+Tab. И это бесит. Приходится идти в Mission Control, что бы найти эти другие окна хрома.

Как должно быть
Сочетание должно одинаково работать для всех окон, не важно принадлежат они к одной программе или к разным.

А знаете ли вы?
..что на macOS (не знаю как на Win), сочетание CTRL+Tab в хроме переключает между вкладками, вот только работает оно не так, как должно с окнами. Оно просто листает вкладки, а должно открыть выбранную вкладку, и после переключения снова вернуться на предыдущую. Так можно было бы легко копировать информацию с одной вкладки в другую, просто перещелкивая их CTRL+Tab

Это был утренний быстропост. Всем хорошего дня.

UPD: Андрей Пономарёв ‏(from twitter @DustyJacket) рассказал, что переключение между окнами одной программы — Cmd+`. Но работает только, если они на одном рабочем столе. Андрей считает и я с ним согласен, что это просто ещё один источник боли.

22 июля 2015, 16:49

Матрица

— Я знаю кунг фу, сказал Нео
— Я знаю замыкания, сказал Я.

За год, что я применяю на практике свой сценарий ведения проектов, он потерпел некоторые изменения. Впервые я об этом написал на Medium полгода назад.

Во-первых, я все файлы проектов теперь храню только на dropbox (самый удобный). По завершению проекта, я отсчитываю 3 месяца, и переношу папку из dropbox в архив (на другое облако), где проект и остается жить д̶о̶ ̶к̶о̶н̶ц̶а̶ ̶д̶н̶е̶й̶ ̶с̶в̶о̶и̶х̶.̶ Для всего этого есть две причины:

  • — Внешний жесткий, где я раньше хранил все файлы, умер, со всеми старыми проектами :-(
  • — Очень удобно делиться с заказчиками файлами (не дублирую как раньше) + они тоже в курсе, что эта папка будет жить 3 месяца.

Во-вторых, поменялась структура папок. Теперь в каждой папке с исходниками (PSD, AI и т. п.) есть следующие папки:

  • — OLD — старые файлы проекта
  • — Public — файлы проекта, готовые для передачи (эту папку я расшариваю)

В третьих, в каждой папке с исходниками добавил папки Step-1, Step-2... Step-n (если делим проект на итерации), таким образом всегда ясно, как выглядит последний утвержденный файл в конкретной итерации.

Так же активно использую Linked Smart Object. В связи с чем, папка PSD обзавелась папкой Linked Objects. Использую их для создания шапок, меню, подвалов и т. п. — вещей, которые остаются неизменными (а для изменений использую связку layers comps + properties, об этом пишут тут

P.S. Структура постоянно мутирует и улучшается. Через полгода, думаю, наберется еще 3-4 обновления.

Всем мир.

16 июня 2015, 18:00

Ссылки и цитаты #14

Что почитать

Сервисы и приложения

Интересные работы

5 июня 2015, 15:24

Бесит

Фотошоп в целом плохо работает со шрифтами, но три вещи меня бесят больше всего:

  • Первое, что фотошоп не распознает шрифт текста, который вставляешь из внешнего источника. Приходится набирать название шрифта, не выбирать, а набирать, потому-что...
  • Второе, когда листаешь шрифты и внезапно навел мышкой на шрифт, то он (фотошоп) его тут же начинает применять и все начинает тормозить (т. к. такое случается 2-3 раза пока листаешь весь список), поэтому набираю название шрифта с клавиатуры, но и тут...
  • Третье, когда начинаешь искать шрифт, вбиваешь первый символ, он его зачем-то выделяет, а ты в это время продолжаешь вбивать и получается «elvetica», вместо «Helvetica».

UPD
Еще есть четвертый пункт, как я мог забыть. Когда ты выбираешь начертание, фокус с поля не пропадает, ты крутишь шарик, дабы увеличить/уменьшить артборд и он .... меняет начертание. Надо обязательно не забыть нажать Enter, после того, как поменяли начертание.

Наверное многим эта информация окажется и не нужной, но вот например узнать поликлинику, которая обслуживает вас — это полезная информация.

С момента, когда я переехал в Казань, в 2010, я сменил уже 6 квартир. И каждая была в разных районах. Конечно случалось и такое, что нужно было идти в больницу и тут начинались эти бесконечные звонки и узнавания, какая именно поликлиника обслуживает ваш дом.

Все стало проще. Оказывается, в недавно появившемся сайте спутник.ру, есть раздел о домах, с этой и другой полезной информацией. Ну круто же! Хотя странно, что они это не пиарят, нашел чисто случайно.

Главная этого раздела → http://dom.sputnik.ru/

Ctrl + ↓ Ранее