SnowSilver

Вы использовали абсолютную ссылку. Мне этот вариант не подходит. Знаю что так будет работать... Но хотелось бы узнать как именно встраивать изображение в письмо правильно. То есть как прикрепить изображение таким образом, чтобы изображение было в теле письма и отображалось

Как можно встроить изображение в письмо ? Без абсолютной ссылки. Письмо отправляется программно. Пробовал base64 вставить в img, не отображается... <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAICAgICAQICAgIDAgIDAwYEAwMDAwcFBQQGCAcJCAgHCAgJCg0LCQoMCggICw8LDA0ODg8OCQsQERAOEQ0ODg7/2wBDAQIDAwMDAwcEBAcOCQgJDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7/wAARCAAPABwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5GsfhF4dtPCN7fXvgQ26MkQW5e7tx5eWXkZmGQep3dOvABp974b+Et22q/YPDtzq0ZuoYmm0RotTFu5jZgM28z5GB3yMgAc8HyXxd8Xr3xZoGlwWmpJpTQSFrz7RBJJFPhcKGVeCBhuCD97t1rf0f45eNl8JXWnap4x0ibQm0W8t7Kxg8NmJLeeS3MYkxD5X77O0rMxcqwQnIXaPzTL+G8dVpe1x2Jmpa+7CTS6W1bfbsfpGP4kwcKqpYLDQ5dPelFX89El+Z3kPhH4UXS6faWehxx3d6z/Z7eVRDdzmNQ7p5MkgckBgSVXpjB7HT8Q/s+W8GvBYvAV1bRmIFRHPbOGGTzkyn6de1fGz6tap8Q9R8T3V1dNqN1czXCz3VybqUM7HOWmjkYnBxvLM/O7JYV7hqP7TOqX1+JGW5k2JsVjqNzkgE9fm9/avHzLIs9o14vLa8pRad+ecm1tbZq/3HpYLPsqmpxx1GCatZxglfu7O9vvP/2Q==" alt="Machina" width="300" height="200"> Пробовал просто вот так: <img src="./picture.jpg" alt="Machina" width="300" height="200"> В MS Outlook отображается, но в мобильном приложении нет... Как встраивать изображение в письмо, чтобы она отображалась на большинстве почтовых клиентах ?

Почему line-height на высоту inline элемента не влияет, а на inline-block влияет ? Например изначально, при дефолтном размере шрифта в 16px, высота строки в хроме показывает 18.18px. И если применим line-height: 1; - то высота не изменится. А если мы превратим строчный элемент в inline-block, тогда высота уменьшается до 15.45px - и тогда высота строки равняется почти размеру шрифта. Хотя line-height: 1 это множитель шрифта, по идеи в моем понимание высота должна равняться 16px, а не 15.45. Эти значения получены у не стандартного шрифта... Но это сути не меняет. Небольшая заготовка - https://codepen.io/anon/pen/Qxpgoe. Правда там у строчного элемента изначально 17px , а у инлайн блока после установки line-height:1 - 16px.

Если размер шрифта установлен в 16px, буквы же не могут быть по высоте меньше 16px ? В фотошопе у текста с размером 16px высота букв 10px, все остальное межстрочный интвервал - 6px , по 3px сверху и ниже строки ? Мне понимается, что font-size задает высоту букв, а высота строки будет равна = высота букв + межстрочный интервал...

Есть ли сейчас кроссбраузерный способ реализации градиента текста средствами CSS ? Нашел такой вариант, но он не кроссбраузерный... Не работает в IE и Opera mini... Используете данный способ или вставляете картинкой подобный текст? linear-gradient(to right, #00e0d0, #4aa3cc), linear-gradient(#ffffff, #ffffff) -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Только вот в первом local как раз таки указывают полное наименование шрифта, например local('Roboto Black') - в том числе начертание... А вот второй будет local('Roboto-Black')

Может быть и проще, но я не умею рисовать:) Просто я думал, что можно хотя бы какие то простые подобные изображения - линии как то легко переобразовать в вектор...

Первый local это полное наименование шрифта, а второй local это похоже его PostScript Name. Вроде для шрифтов он гуглится без проблем... Но что есть такое "PostScript Name"...? что то затрудняюсь найти информацию на сей счет

С первым пунктом понятно, спасибо! А вот по поводу local() В статье: То есть в первом local указываем просто наименование шрифта для любого начертания, например для Roboto это и будет local('Roboto'), а под PostScript Name - подразумевается имя шрифта + его начертание через тире, например для Roboto жирного начертания будет local('Roboto-Black') - верно? Можно встретить разные варианты, где то можно увидеть такой вариант: @font-face { font-family: Journal; src: local(JournalRegular), local("Journal Regular"), url(journal-webfont-regular.woff); font-style: normal; font-weight: normal; } то есть в local пишется не просто именование шрифта, а сразу начертание "JournalRegular"...

Подскажите, как можно преобразовать растровое изображение в векторное, без потери качества? Изображение вроде не сложное, без высокой детализации... я пробовал использовать трассировку в Adobe Illustrator, но там изображение деформируется, меняется, линии не ровные получаются... Как это можно сделать? Исходное изображение в png и пример в simple.svg - то что получил трассировкой в Illustrator Simple.svg

Подскажите, как можно преобразовать растровое изображение в векторное, без потери качества? Изображение вроде не сложное, без высокой детализации... я пробовал использовать трассировку в Adobe Illustrator, но там изображение деформируется, меняется, линии не ровные получаются... Как это можно сделать? Исходное изображение в png и пример в simple.svg - то что получил трассировкой в Illustrator Simple.svg

Эм, вроде дверь в право не уходит, там таблица выходит за область страницы... дверь всегда слева, на Iphone Se в том числе

footer внутри wrapper ? да, скорей всего добавь футеру position: relative и z-index 1, как вариант, если так или если внутри footer добален wrapper:after, и ссылки внутри wrapper, тогда ссылки обернуть в div и ему добавить position relative и z-index 1

Всем привет! Подскажите с подключением сторонних шрифтов... 1. Предположим мне надо подключит какой то шрифт с разными начертаниями, могу ли я использовать одно имя шрифта в font-family, будет ли в таком случае использоваться правильное - подключенное начертание в зависимости от font-weight ? 2. Проверить, есть ли шрифт в системе(чтоб его не грузить лишний раз), можно с помощью local, такого перечисления думаю достаточно, чтоб наверника проверить: local('Roboto Thin'), local('RobotoThin'), local('Roboto-Thin') ? Я подключаю так(для каждого начертания через тире указано начертание): @font-face { font-family: "Roboto-Thin"; src: local('Roboto Thin'), local('RobotoThin'), local('Roboto-Thin'), '/fonts/Roboto-Thin.woff2' format('woff2'), '/fonts/Roboto-Thin.woff' format('woff'); font-weight: 100; font-style: normal; } @font-face { font-family: "Roboto-Light"; src: local('RobotoLight'), local('Roboto Light'), local('Roboto-Light'), '/fonts/Roboto-Light.woff2' format('woff2'), '/fonts/Roboto-Light.woff' format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: "Roboto-Regular"; src: local('RobotoRegular'), local('Roboto Regular'), local('Roboto-Regular'), '/fonts/Roboto-Regular.woff2' format('woff2'), '/fonts/Roboto-Regular.woff' format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: "Roboto-Black"; src: local('RobotoBlack'), local('Roboto Black'), local('Roboto-Black'), '/fonts/Roboto-Black.woff2' format('woff2'), '/fonts/Roboto-Black.woff' format('woff'); font-weight: 900; font-style: normal; }

Вопрос касательно реализации адаптивности. В каких случаях вы прибегаете к JS для определения типа устройства и установки соответсвующего класса например на тег body (table, mobile)? Наверное стандарт медиа запросов: по ширине > 1024px - это Экраны, Планшеты <1024px и >768px, мобильные телефоны <768px. Просто границы разрешений экранов, особенно между Экранами и Планшетами размыты... Или главное чтоб все было красиво, удобно, хорошо видно? не ужималось и прочее..., пускай стили для экранов и применились для Планшета, например Ipad PRO(Разрешение: 2224x1668 Пикс) ? JS-ом определять тип устройства наверное следует тогда, когда надо жестко для какого типа устройства что то отображать или скрывать, верно? -Например, если требуется для планшетов показывать баннер с ссылкой на приложение для этого типа устройств.