-
-
Save veremey/388caac9cfb1ed906472f12f367576f0 to your computer and use it in GitHub Desktop.
| ### | |
Вдохновение
Анимация кнопок:
- https://tympanus.net/Development/ButtonStylesInspiration/
- https://tympanus.net/Development/CreativeButtons/
Анимация прелоадеров:
Библиотеки (скрипты и стили)
Анимация появления элементов при пролистывании страницы > http://michalsnik.github.io/aos/
Нормализация > https://necolas.github.io/normalize.css/
Слайдер > http://kenwheeler.github.io/slick/
Параллакс > https://github.com/wagerfield/parallax
Скролл с поддержкой свайп > http://darsa.in/sly/
Слайдер поддерживающий свайп > http://idangero.us/swiper/
Попап галерея с поддержкой свайпа Fancybox 3 > http://fancyapps.com/fancybox/3/
Попап галерея с поддержкой свайпа > http://photoswipe.com/
Попап галерея с поддержкой свайпа > https://sachinchoolur.github.io/lightGallery/
Определение направления прокрутки > https://dollarshaveclub.github.io/scrolldir/
Apple TV эффект:
Программа пипетка для windows:
Программа быстрого запуска:
1, http://www.getwox.com/
Если центрируем блок с текстом и текст методом:
`.parent {position: relative};
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateZ(0) scale(1.0, 1.0);
-webkit-font-smoothing: subpixel-antialiased;
}`
Не забываем ставить ребенку
-webkit-font-smoothing: subpixel-antialiased; -webkit-transform: translateZ(0) scale(1.0, 1.0);
Photoshop
https://habrahabr.ru/post/67831/ - настройки цвета
Настройка единиц измерения:
для Windows выбрать
Edit > Preferences > Units & Rulers выставить для Rulers и Type > Pixels
для Mac OS выбрать
Photoshop > Preferences > Units & Rulers выставить для Rulers и Type > Pixels
Шрифты
Конвертация шрифтов
Конвертировать шрифты необходимо на сайте
http://www.fontsquirrel.com/tools/webfont-generator,
на странице необходимо переключится в режим «EXPERT», в настройках:
в блоке
Rendering, галочкой должен быть отмечен параметр Fix Vertical Metrics(необходим для того, чтобы в разных операционных системах у шрифта корректно работало
выравнивание по-вертикали относительно других объектов).
в блоке
Subsetting:необходимо выбрать No Subsetting(необходимо для того чтобы в шрифте сохранились все кириллические символы.)
Custom Subsetting– НЕ использовать, при данной настройке удаляются кириллические символы,такие как знак номера № и т.п.)
в блоке
CSSотметить Base64 EncodeКонвертация шрифтов также возможна через программа TransType
http://www.fontlab.com/font-converter/transtype/
В правиле @font-face подключать шрифт только в форматах:
Символы
Символы которые нужно указывать кодом:
Копирайт: © – ©
Градусы: ° – °
Неразрывный пробел:
Проблемы
При CSS-анимации с помощью animation и transform в Chrome блоки содержащие текст в конце анимации может некорректно отображаться
жирность текста, для исправления бага необходимо в @Keyframes для начальной точки указать -webkit-font-smoothing: antialiased;
Оптимизация изображений
После того, как изображения были сохранены, необходимо их оптимизировать с помощью:
(перетянуть файлы в окно программы, в верхнем меню перейти в пункт Optimize > Optimize All Files или
открыть контекстное меню и выбрать Optimize All Files)
Адаптив
Ключевые точки для которых можно (но необязательно) прописывать стили: 360 - 480 - 720 - 840 - 960 - 1024 - 1280
Вёрстка шаблона для рассылок
Не использовать в стилях margin.
Теги не должны быть пустыми, как минимум содержать неразрывный пробел
Чтобы изображения в письме всегда отображались, если даже в почтовом сервисе они отключены,
их необходимо подключать через атрибут (не стиль) background="/”, пример: <table background="/”>
Карты
Нужно использовать Google Карты, так как они корректно работают на моб. устройствах, не мешают пролистывать страницу,
при прикосновении одним пальцем они блокируются.
Карты Яндекс нужно использовать при расхождении с Google картой, когда достоверно известно,
что Яндекс актуальнее (для России такое встречается);
На карте всегда должны быть кнопки для приближения/отдаления карты;
Чтобы кастомный маркер (значок отметки местоположения) не склеивался с картой и на нём в Safari при приближении не появлялись
белые линии разреза кусков карты необходимо прописать для маркера optimized: false: Пример кода:
var marker = new google.maps.Marker({ position: location, map: map, icon: markerImage1, optimized: false // <-- this fixes the artifacts });
(Ссылка на материал с решением проблемы > http://stackoverflow.com/questions/34031678/google-maps-strange-vertical-and-horizontal-lines-at-certain-zoom-levels-in-sa)
Полезные инструменты для вёрстки