SnowSilver

January 17, 2019

20 минут назад, spdif сказал:

Возможно так:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta charset="UTF-8">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>sf</title>
<!--[if (mso 16)]><style type="text/css">a {text-decoration: none;}</style><![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
</head><body><div>
<!--[if gte mso 9]><v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"><v:fill type="tile" color="#f6f6f6"></v:fill></v:background><![endif]-->
<table cellpadding="0" cellspacing="0" width="100%" style="background-position: left top;">
<tbody><tr><td align="center" style="background-position: left top; background-color: rgb(239, 239, 239);" bgcolor="#efefef">
<img src="https://htmlforum.io/uploads/monthly_2019_01/1870525596_NewProject.png.72193b376f0c3485efd47fed3d45cbb8.png" alt="SF" style="display: block;" width="80">
</td></tr></tbody>
</table>
</div></body></html>

...

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

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

January 16, 2019

Как можно встроить изображение в письмо ? Без абсолютной ссылки. Письмо отправляется программно.

Пробовал 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 отображается, но в мобильном приложении нет...

Как встраивать изображение в письмо, чтобы она отображалась на большинстве почтовых клиентах ?

June 11, 2018

Почему 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.

June 11, 2018

Если размер шрифта установлен в 16px, буквы же не могут быть по высоте меньше 16px ?

В фотошопе у текста с размером 16px высота букв 10px, все остальное межстрочный интвервал - 6px , по 3px сверху и ниже строки ?

Мне понимается, что font-size задает высоту букв, а высота строки будет равна = высота букв + межстрочный интервал...

June 4, 2018

Есть ли сейчас кроссбраузерный способ реализации градиента текста средствами CSS ?

Нашел такой вариант, но он не кроссбраузерный... Не работает в IE и Opera mini... Используете данный способ или вставляете картинкой подобный текст?

linear-gradient(to right, #00e0d0, #4aa3cc), linear-gradient(#ffffff, #ffffff)
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;

June 4, 2018

37 минут назад, Alexej сказал:

Наверное это нужно если семейство шрифта есть у пользователя но нет той что нужно начертании....

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

А вот второй будет local('Roboto-Black')

June 4, 2018

22 минуты назад, Switch74 сказал:

Мне кажется такое проще нарисовать с нуля

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

June 4, 2018

5 часов назад, Alexej сказал:

Ну я делаю local без начертания и с начертанием. А как писать с пробелом или с _ или же - я не знаю.... В локал обычно пишу так как шрифт называется в google fonts или захожу в папку с шрифтами винде и смотрю в столбец "семья" как там написано так и подключаю.

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

Но что есть такое "PostScript Name"...? что то затрудняюсь найти информацию на сей счет

June 3, 2018

1 час назад, Alexej сказал:

https://fontstorage.com/blog/about-font-face-part-two/
https://fontstorage.com/blog/about-font-face-part-one/

С первым пунктом понятно, спасибо!

А вот по поводу local()

В статье:

Цитата
Кроме этого, у font-face есть еще одно правило, которое позволяет оптимизировать загрузку вашей страницы — это local. C помощью него мы можем проверить наличие шрифта на компьютере пользователя, и если таковой отсутствует, инициировать его загрузку. В local указывается полное наименование шрифта и его PostScript Name.

Вот такая запись font-face проверит наличие шрифта на компьютере:
@font-face {
    font-family: 'PT Sans';
    src: url('ptsans.eot');
    src: local('PT Sans'), local('PTSans-Regular'), 
         url('ptsans.eot?#iefix') format('embedded-opentype'),
         url('ptsans.woff') format('woff');
}

То есть в первом 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"...

June 3, 2018

Подскажите, как можно преобразовать растровое изображение в векторное, без потери качества?

Изображение вроде не сложное, без высокой детализации... я пробовал использовать трассировку в Adobe Illustrator, но там изображение деформируется, меняется, линии не ровные получаются...

Как это можно сделать?

Исходное изображение в png и пример в simple.svg - то что получил трассировкой в Illustrator

Simple.svg

June 3, 2018

Подскажите, как можно преобразовать растровое изображение в векторное, без потери качества?

Изображение вроде не сложное, без высокой детализации... я пробовал использовать трассировку в Adobe Illustrator, но там изображение деформируется, меняется, линии не ровные получаются...

Как это можно сделать?

Исходное изображение в png и пример в simple.svg - то что получил трассировкой в Illustrator

Simple.svg

June 3, 2018

20 часов назад, Vlad_P сказал:

http://www.sandalprestige.ru/services/dvernye-bloki-i-portaly/1375/

На айфонах 6,7 Дверь уходит вправо. Не могу понять в чем дело. Интересно, что если повернуть айфон горизонтально и вернуть вертикальное положение - все становится на место. Думаю, дело не в модели айфона, а в его разрешении, в общем подскажите, кто может

P.S. Не комментируйте верстку, Сам не видел ничего более странного. Как в верстке, так и в натяжке. Однако надо исправить

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

June 3, 2018

20 часов назад, vendetta_loss сказал:

Всё работало, но после изменений (признаюсь честно, не помню каких) перестали ссылки быть ссылками. Может дело в том, что я прибил футер wrapper:after-ом? у меня как бы блок, который стоит after wrapper в консоли перекрывает футер. так и должно быть? помогите

footer внутри wrapper ? да, скорей всего

добавь футеру position: relative и z-index 1, как вариант, если так

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

June 3, 2018

Всем привет! Подскажите с подключением сторонних шрифтов...

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;
}

May 30, 2018

Вопрос касательно реализации адаптивности. В каких случаях вы прибегаете к JS для определения типа устройства и установки соответсвующего класса например на тег body (table, mobile)?

Наверное стандарт медиа запросов: по ширине > 1024px - это Экраны, Планшеты <1024px и >768px, мобильные телефоны <768px.

Просто границы разрешений экранов, особенно между Экранами и Планшетами размыты...

Или главное чтоб все было красиво, удобно, хорошо видно? не ужималось и прочее..., пускай стили для экранов и применились для Планшета, например Ipad PRO(Разрешение: 2224x1668 Пикс) ?

JS-ом определять тип устройства наверное следует тогда, когда надо жестко для какого типа устройства что то отображать или скрывать, верно? -Например, если требуется для планшетов показывать баннер с ссылкой на приложение для этого типа устройств.

May 30, 2018

18 часов назад, AlexZaw сказал:

Что мешает взять любой макет и адаптировать его по своему усмотрению?

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

May 29, 2018

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

May 17, 2018

1 час назад, vladmih сказал:

Свг, спрайт собой подразумевает, один свг файл в котором, куча иконок с определенном айдишником. В верстке ты ее подкидыаешь по айдишнику. В итоге чтоб посмотреть наличие какой либо иконки нужно посмотреть svg файл.
свг спрайт это не такая штука как спрайт из картинок, где открываешь изображение и там сетка из изображений.

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

Вот предположим вам надо добавить в спрайт из сотни иконок очередную иконку , а может вы ее добавляли и не помните...

Вы вручную будете смотерть сотню иконок по одной? сохраняя каждую?

May 16, 2018

Вы используете svg спрайты ?

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

January 15, 2018

Есть модальное окно. Область которого ограничена. Можно ли сделать скрол, даже тогда, когда курсор находится за пределом форму ???

у body position fixed должен стоять в моем случае.

https://codepen.io/anon/pen/RxaOwe

Может как то можно эмулировать, что курсор как будто бы находится в области формы ?

December 20, 2017

21 минуту назад, Switch74 сказал:

если вы примените opacity < 1 к <div >, то <div class="red"></div> будет находиться в контексте <div >, а не корневого элемента
z-index всегда работает относительно контекста,
т.е. есть у вас например два div с span
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
устанавливая z-index для span они все будут в папке корневого элемента (обзавем его как в linux '/') элементы естесно как массив
/span[0]
/span[1]
/span[2]
/span[3]
все span будут выравниваться по z-index относительно друг друга
теперь вы для первого div указали opacity или например как-нибудь по другому включили контекст, тогда у нас получится
/div[0] /span[0]
/div[0] /span[1]
/span[2]
/span[3]
тут получается что span[0] и span[1] даже не знают о существовании других span и естесно выравниваться будут только относительно друг друга с нулевым отсчетом относительно родительского div

еще это можно объяснить на примере комнаты:
смотрите вы сверху на свою комнату есть у вас пол, стул, стол с z-index 1,2,3 соответственно
на полу у вас лежат листки, на стуле и на столе
листки на столе лежат стопкой и естесно верхние перекрывают нижние, то же самое на стуле и полу, но
листки на столе логично что выше листков на стуле или полу, но они их не перекрывают, их перекрывает стол
т.е. листки на полу с z-index равным 1000 не будут перекрывать листки на столе с z-index равному 10, потому что они даже не сравниваются, т.к. уже находятся на разных уровнях/плоскостях (в разных контекстах)

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

December 20, 2017

1 час назад, Switch74 сказал:

opacity:0.99; создает новый контекст на который не влияет z-index:1; и он как бы остается z-index:auto;
если вы добавляете position: relative; то z-index:1; начинает работать

допустим.

	<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(на этом уровне блоков)

это так?

December 20, 2017

Пытаюсь разобраться со слоями, но что то не выходит.

Прочитал статью на хабре

Зададим классу .red { z-index: 1;} - блок стал выше...
Но если мы родительскому элементу блока .red задаем opacity<1, то есть например opacity: 0.99, то блок снова почему то ниже по уровню.

В статья написано, что:

Новый контекст может быть сформирован в следующих случаях:

Если элемент – корневой элемент документа ( элемент)
Если элемент позиционирован не статически и его значение z-index не равно auto
Если элемент имеет прозрачность менее 1

Окей, значит я создал новый контекст opacity. Но если вместо оpacity применить position: relative например(из статьи следует что и они оба{opacity, position: relative} создают контекст), то почему красный блок все таки будет выше... Наверное разный контекст у них или что

Что подразумевается под созданием нового контекста для opacity?

December 10, 2017

В 10/30/2017 в 21:41, AlexZaw сказал:

я щас смотрю в макете, там для дестопа, ширина между крайними линиями 2750px - это не много ?

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

November 22, 2017

Как бы вы такое реализовали. Желательно без flex

На рисунке пример ниже. Там по сути, имеется два контейнера. первый должен растягиваться по высоте родтиельского. По ширине оба динамические.

Во втором блоки. когда места не хватает в строке, блок должен переносится на следующую строку. но не залезая в первый столбец!

По сути там похоже на таблицу из двух ячеек, где во второй ячейки блоки.

1. Вообще я изначально задавал радительскому контейнеру padding-left и текст первого столца выводил абсолютным позиционированием. Все бы ничего, но у меня в первом столбце ширина может немного меняться.

2. Вариант использовать таблицу. Но это не семантично:) там не табличные данные, где мне нужно применить.

Как бы вы это реализовали ? ширина первого контейнера может меняться. Надо чтоб во втором блоке вложенные блоке перемещались только внутри. А первый столбец желательно чтобы был растянут на всю высоту родительского, при том, что высота может быть динамической.

заготовочка

Sign In

SnowSilver

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by SnowSilver

Верстка писем. Встраивание изображения

Верстка писем. Встраивание изображения

line-height в inline и inline-block

Шрифты. Высота строки.

Градиент текста CSS

Правильное подключение сторонних шрифтов

Растровое изображение в векторное

Правильное подключение сторонних шрифтов

Правильное подключение сторонних шрифтов

Растровое изображение в векторное

Растровое изображение в векторное

Неверное отображение на айфон 6-7

Не нажимаются ссылки в футере

Правильное подключение сторонних шрифтов

Адаптивность. Медиа запросы vs JS

Где взять адаптивный макет Landing Page ?

Где взять адаптивный макет Landing Page ?

svg спрайт. Просмотр.

svg спрайт. Просмотр.

Модальное окно. скрол вне области - jQuery

z-index и контекст наложения

z-index и контекст наложения

z-index и контекст наложения

Верстка адаптивного дизацна. Сетка

Как растянуть блоки по высоте строки

Forums

Important Information