Pull to refresh
  • by relevance
  • by date
  • by rating

Быстрый просмотр фона из картинки в photoshop

Design
При создании дизайна для сайтов мне частенько приходится создавать бесшовный фон. Чтобы просмотреть результат работы приходилось сохранять картинку, создавать в той же папке html файл и прописывать свойства у соответствующего элемента. Но оказывается photoshop умеет это делать автоматически.
Читать дальше →
Total votes 107: ↑79 and ↓28 +51
Views 837
Comments 59

Firefox 4 beta 5, вероятно, будет поддерживать SVG в качестве простых иллюстраций (img в HTML, image в SVG) и фонов (background-image в CSS)

Firefox
Сравнительно недавно в черновике пособия «Firefox 4 for developers» («Firefox 4 для разработчиков») явилась пометка о том, что Firefox 4 будет поддерживать SVG в HTML-элементах <img>, и в SVG-элементах <image>, и в CSS-свойствах background-image.

Вероятной первой бета-реализацией этой поддержки станет Firefox 4 beta 5, в худшем же случае — одна из последующих бета-версий четвёртого Файерфокса.
Подробности изложены в Багзилле — в багах № 272288 («Allow SVG source for <svg:image>»), № 276431 («external SVG not loaded from img tag») и № 231179 («SVG images in CSS»).
Будущее лучезарно, не правда ли?
Total votes 51: ↑38 and ↓13 +25
Views 838
Comments 36

Нечёткость значков истомляет нас

Working with icons *Typography *Vector graphics *
Translation
Tutorial
После появления сетчаточных дисплеев люди ищут такие альтернативы PNG-значкам, которые не зависят от разрешения. Кто-то влюбляется в шрифтовые значки, другие кричат «SVG». Сожалею, но если вы ищете панацею, то я боюсь, что её не существует. Давайте поближе поглядим, какие у нас есть варианты.

Шрифты со значками восхитительны, но…

они размыты. В них нет настоящей, попиксельной резкости. Да, использование @font-face для значков обрело заметную популярность. Я и сам рекомендовал и даже стал коллекционировать их. Но в таких значках есть изъян, который меня достаёт. Они всё ещё немного размываются на несетчаточных дисплеях (а таких до сих пор подавляющее большинство). Попробуйте поуправлять размером у Криса в демонстрации и вглядитесь попристальнее. Эффект по-разному проявляется у разных размеров, но все они имеют одну и ту же проблему «полупиксельной размытости». Возможно, её заметить не так просто, так что вот здесь я увеличил скриншот пятнадцатипиксельного размера (а заодно и фоновый шум убрал):



Читать дальше →
Total votes 87: ↑65 and ↓22 +43
Views 12K
Comments 187

Анализ применения SVG в качестве background-image

Vector graphics *

В последнее время все чаще появляются статьи, в которых авторы рекомендуют использовать SVG для backgroud-image. Действительно, применение SVG приносит большую пользу. Во всех прочитанных статьях очень вскользь упоминалось про производительность отрисовки SVG, что это более затратная операция, так как браузеру необходимо каждый раз заново отрисовывать растр.

И вот в один прекрасный день, открыв одно веб-приложение, я заметил, что мой браузер безумно «пожирает» память — одна вкладка «ела» около 600 МиБ. На МacBook с ретиной дела обстояли еще хуже. С этого момента началось расследование, куда же течет память. Кому интересно, добро пожаловать под кат.
Читать дальше →
Total votes 47: ↑45 and ↓2 +43
Views 45K
Comments 29

«Реактивный» интерфейс. Лекция Артёма Белова на FrontTalks 2018

Яндекс corporate blog JavaScript *Client optimization *Interfaces *ReactJS *
В браузерном JavaScript интерфейсы стали предсказуемы. «Однопоточные», с транзакционным сценарием отрисовки: пустой экран — загрузка — интерфейс. Разработчик Артём Белов из компании Cxense с упором на закон Парето рассказал, как, потратив 20% времени, отрисовать приложение на 80% быстрее за счет приемов «реактивного дизайна» — еще не сформулированных, но уже используемых в продуктах с приоритетом на UX.


Но что касается более матерых парней, которые не вылезают из Webpack и заставляют страдать Webpack, а не наоборот? Они подключают плагины. Но поскольку мы в начале развития этой техники, экосистема нам предлагает плагин, который берет ваш HTML, генерирует на его основе HTML со встроенным CSS, дает QR-код для рекламы… Серьезно? После этого ты можешь взять и через “!important” перебить стили… Пожалуй, стоит задать вопрос, почему я все еще во фронтенде.

Total votes 18: ↑18 and ↓0 +18
Views 7.5K
Comments 1

Клади плитку эффективно ( Про CSS, SVG, pattern и другое)

Website development *CSS *Client optimization *HTML *Graphic design *
Tutorial

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


Сказ о том, как вставлять фоновые повторяющиеся изображения страниц, что бы всем было хорошо.


Ну, что готовы поиграть ..? Тогда погнали


Total votes 5: ↑5 and ↓0 +5
Views 9.2K
Comments 1