Техноблог, заметки с тегом: фишки

Псевдопротокол tel:

Mon, 29 Dec 2014 21:14:02 +0400

Мобильные браузеры определяют телефон по тапу на нём и предлагают совершить звонок — это удобно. Но это работает, только если в вёрстке телефон сделан единым текстом. Однако часто дизайнеры оформляют телефон так:

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

На помощь приходит псевдопротокол tel. Оборачиваем телефон в ссылку с этим протоколом:

<a href="tel:+7 (123) 456-78-90">
	<span class="code">+7 123</span>
	<span class="number">456-78-90</span>
</a>

Теперь по тапу на ссылку браузер определит телефон.

Быстрый способ получить svg из векторного слоя в фотошопе

Tue, 04 Nov 2014 02:23:17 +0400

Данный способ работает только в Photoshop CC.

Первым делом создаём в домашней папке пользователя файл generator.json, со следующим содержимым:

{
  "generator-assets":  { 
    "svg-enabled": true
  }
}

Файл можно скачать (generator.json), для ускорения процесса.

Ставим галку в меню File → Generate → Image Assets.

Затем переименовываем нужный слой, даём ему любое имя, заканчивающиеся на .svg (например pic.svg).

И вуаля. Рядом с psd файлом получаем папку, в которой будет лежать готовый svg.

Можно переименовывать даже группу слоёв.

Фотошоп довольно умно сгенерирует единый svg файл, учитывая все эффекты слоёв.

Фишка инпута для файлов, о которой не все знают

Sun, 12 Oct 2014 06:11:55 +0400

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

Достаточно всего лишь перетащить нужный файл прямо на инпут.

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