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-ом определять тип устройства наверное следует тогда, когда надо жестко для какого типа устройства что то отображать или скрывать, верно? -Например, если требуется для планшетов показывать баннер с ссылкой на приложение для этого типа устройств.

Нуу, чтоб не заморачиваться над тем, как отображать адаптив, но в принципе да, согласен с вами?

Подскажите, где можно скачать адаптивный макет лэндинга для тренировки ?

Вопрос в том, возможно ли как то через что то посмотреть эти иконки? которые находится в теге <symbol> Вот предположим вам надо добавить в спрайт из сотни иконок очередную иконку , а может вы ее добавляли и не помните... Вы вручную будете смотерть сотню иконок по одной? сохраняя каждую?

Вы используете svg спрайты ? Есть ли способ просматривать svg спрайт html ? чтобы можно было посмотреть наличие той или иной иконки.

Есть модальное окно. Область которого ограничена. Можно ли сделать скрол, даже тогда, когда курсор находится за пределом форму ??? у body position fixed должен стоять в моем случае. https://codepen.io/anon/pen/RxaOwe Может как то можно эмулировать, что курсор как будто бы находится в области формы ?

Все, разобрался! Спасибо большое за объяснение!

допустим. <body> <div > <div class="red"></div> </div> <div > <div class="green"></div> </div> <div> <div class="blue"></div> </div> </body> а так они изначально в одном контексте получается ? или нет? я так понимаю, изначально, если стили не применены и не смотря на то, что они вложены(div-блоки с классами цветов), у них один контекст html - корневой элемент... там наложение будет в зависимости от порядка, последующий перекроет предыдущий слой... если для родительского блока div <div > <div class="red"></div> </div> применить opacity < 1, то z-index не будет работать в контексте - в блоке div(на этом уровне блоков) это так?

Пытаюсь разобраться со слоями, но что то не выходит. Прочитал статью на хабре Зададим классу .red { z-index: 1;} - блок стал выше... Но если мы родительскому элементу блока .red задаем opacity<1, то есть например opacity: 0.99, то блок снова почему то ниже по уровню. В статья написано, что: Новый контекст может быть сформирован в следующих случаях: Если элемент – корневой элемент документа ( элемент) Если элемент позиционирован не статически и его значение z-index не равно auto Если элемент имеет прозрачность менее 1 Окей, значит я создал новый контекст opacity. Но если вместо оpacity применить position: relative например(из статьи следует что и они оба{opacity, position: relative} создают контекст), то почему красный блок все таки будет выше... Наверное разный контекст у них или что Что подразумевается под созданием нового контекста для opacity?

а это не может быть макет для ретины?) и если это так, то такие макеты верстаются со всеми размерами/2 для обычных дисплеев получается?)

Как бы вы такое реализовали. Желательно без flex На рисунке пример ниже. Там по сути, имеется два контейнера. первый должен растягиваться по высоте родтиельского. По ширине оба динамические. Во втором блоки. когда места не хватает в строке, блок должен переносится на следующую строку. но не залезая в первый столбец! По сути там похоже на таблицу из двух ячеек, где во второй ячейки блоки. 1. Вообще я изначально задавал радительскому контейнеру padding-left и текст первого столца выводил абсолютным позиционированием. Все бы ничего, но у меня в первом столбце ширина может немного меняться. 2. Вариант использовать таблицу. Но это не семантично:) там не табличные данные, где мне нужно применить. Как бы вы это реализовали ? ширина первого контейнера может меняться. Надо чтоб во втором блоке вложенные блоке перемещались только внутри. А первый столбец желательно чтобы был растянут на всю высоту родительского, при том, что высота может быть динамической. заготовочка