Последние записи

Материальный дизайн

Перевод официальной спецификации Google для Material Design: http://www.google.com/design/spec/material-design/

Уже переведено 11 разделов:

Задача плотной упаковки блоков

Плотная упаковка блоков не очень частая задача в вебе, но если она встречается в наших проектах, то мы непременно сталкиваемся с определёнными трудностями в её реализации. Дело в том, что все существующие на сегодняшний день CSS-механизмы не позволяют, без неприятных ограничений, решить эту головоломку, поэтому нам приходится прибегать к иным внешним силам и использовать JavaScript.

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

(далее…)

Эффекты с несколькими слоями при помощи контуров обрезки, фильтров и режимов наложения в CSS

Перевод статьи MultiLayer Effects With CSS Clip Paths, Filters, and Blend Modes с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Режимы наложения, контуры обрезки и фильтры в CSS делают ряд эффектов, которые раньше были доступны только в PhotoShop, возможными в вебе

Одна из возможностей, которая объединяет эти CSS-свойства — наложение изображений, для сравнений «до — после», или чтобы реализовать другие визуальные эффекты. Примером может быть наложение лица Хью Джекмана поверх фото Клинта Иствуда в том же возрасте; что особенно эффектно, поскольку они обладают похожими формой черепа и чертами лица.

(далее…)

То, что никто не рассказывает вам про «will-change»

Перевод статьи What nobody tells you about «will-change» с сайта cssmojo.com, автор — Тьерри Коблинз.

Краткая выжимка: не используйте will-change до тех пор, пока все современные браузеры не будут его поддерживать (если только вы не знаете, что делаете).

Что такое will-change?

[will-change] позволяет разработчику заранее сообщить браузеру (Пользовательскому агенту) что за изменения он намерен применить к элементу. Это позволяет браузеру заранее оптимизировать обработку элемента, выполняя подготовку потенциально затратной работы для анимации, прежде чем она фактически начнётся. http://dev.w3.org/csswg/css-will-change/

(далее…)

Пособие для начинающих по позиционированию фона в CSS

Перевод статьи A Primer To Background Positioning In CSS с сайта blogs.adobe.com, автор — Сара Суэйдан.

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

У элемента может быть более одного фонового изображения. Если вы хотите применить более одного фонового изображения, то можете представить их в виде разделённого запятыми списка значений для свойства background-image. Свойство background-position используется для указания позиции фонового изображения, и это свойство стоит рассмотреть поглубже, т.к. его различные возможные значения приводят к разным результатам, некоторые из которых могут оказаться для вас в новинку, если вы не очень хорошо разбираетесь в CSS.

(далее…)

Маленькая неочевидность в SVG-паттернах: по следам трансформации-невидимки

Взрыв популярности SVG-графики приносит не только новые дизайнерские удачи, но и неожиданные «открытия» неочевидных тонкостей, малоизвестных особенностей и «белых пятен», разбросанных по обширной SVG-спецификации. Даже признанные гуру фронтенда не застрахованы от таких сюрпризов. Вот и наше расследование началось с недоуменного твита Аны Тудор, знаменитой множеством потрясающих демо-примеров (в т.ч. с SVG):

«Дурацкий» вопрос по #svg: почему первое работает, а второе нет? Единственное различие — width=150 против width=100

Речь шла о следующем примере:

(далее…)

Разбираемся с border-image из CSS3

Перевод статьи CSS3 Border-Image Explained с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Одно из самых мощных новых свойств CSS, border-image, которое к тому же ещё и имеет шикарную поддержку, за исключением (а теперь все вместе!) IE10 и более ранних версий. Но, к сожалению, также является одним из самых непонятных и сложных для понимания свойств.

283x340xborder-image-slices.png.pagespeed.ic.t1Izk-Rh7r

(далее…)

Стратегии, чтобы быть чемпионами в веб-производительности

Перевод статьи Strategies for Staying on Top of Web Performance с сайта css-tricks.com, c разрешения автора — Криса Койера.

Шаг первый – забота о производительности вашего сайта. Шаг второй – делать всё, чтобы сделать её лучше. Шаг третий – оставаться чемпионами по производительности надолго.

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

(далее…)

Часы (на CSS-анимации и JavaScript)

Перевод статьи Clocks с сайта cssanimation.rocks.

Время пришло. В этой статье мы попробуем решить задачу по созданию и анимированию настенных часов, используя простые CSS-анимации и JavaScript для их запуска.

Перед вами часы, которые мы создадим с помощью HTML, CSS, SVG-фона и небольшого количества JavaScript. Мы будем использовать CSS-анимации или переходы для любых типов движений, а с помощью JavaScript мы будем задавать исходное время и добавим базовые CSS-трансформации.

(далее…)

Использование селектора CSS :target для создания UI-эффектов без применения JavaScript

Перевод статьи Using The CSS :target Selector To Create JavaScript-less UI Effects с сайта blogs.adobe.com, автор — Сара Суэйдан.

Вместо организации связи с новыми страницами, ссылки (элементы <a>) иногда указывают на разделы, фрагменты или другие элементы на той же странице. Ссылки такого рода преобладают при навигации по одностраничным сайтам.

Селектор псевдокласса CSS :target используется для выбора и оформления целевого объекта внутренней ссылки в документе, фрагмента страницы, указанного в атрибуте href ссылки.

(далее…)

Лучшая практика для создания пользовательских элементов

Перевод статьи Best Practice for Creating Custom Elements с сайта www.broken-links.com, c разрешения автора — Питера Гастона.

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

Однако, поскольку они ещё не так активно используются в разработке, я считаю, что есть хорошая возможность определить лучшие практики в том, как мы их используем. В этой статье я хочу предложить оптимальный метод для написания пользовательских элементов: я сделаю это путём сравнения двух методов для создания пользовательских элементов, наряду с преимуществами и недостатками каждого из них.

(далее…)

Псевдоэлементы, просмотр промисов, «сырые» заголовки и многое другое – Firefox 36. Версия для разработчиков

Перевод статьи Pseudo elements, promise inspection, raw headers, and much more – Firefox Developer Edition 36 с сайта hacks.mozilla.org, автор — Брайан Гринстед.

На канале Версии для разработчиков только что появился Firefox 36, поэтому давайте взглянем на самые важные изменения в Инструментах разработчика, включенные в этот релиз. Мы также рассмотрим некоторые отличия от Firefox 35, поскольку он был издан незадолго до первого анонса Версии для разработчиков. Тут есть о чем поговорить, поэтому давайте начнем.

(далее…)

Расставание с Sass: дело не в тебе, дело во мне

Перевод статьи Breaking up with Sass: it’s not you, it’s me с сайта benfrain.com, автор — Бен Фрейн.

В данный момент мой процесс работы с CSS налажен практически идеально. Я пишу на Sass, компилирую код с помощью Libsass и добавляю браузерные префиксы с помощью PostCSS/Autoprefixer через Gulp/Grunt. Так зачем же мне рушить всё это?

Меньше года назад мой интерес привлек пост Николаса Галлахера. В нем Николас описывал, как он/они (команда Twitter) использовали JS-инструмент для постобработки CSS.

(далее…)

Использование AngularJS для визуализации данных

Перевод статьи Using AngularJS for Data Visualisations с сайта css-tricks.com, автор — Ник Мортон.

Перед вами гостевой пост от Ника Мортона. Должен сказать, что я весьма заинтригован этой идеей. Знаю, что я люблю работать с HTML, SVG и CSS, поэтому, когда Ник поделился со мной мыслью, что мы можем использовать это для создания структуры, и использовать данные непосредственно для стилизации графиков, я заинтересовался. Кроме того, понимание, что благодаря использованию Angular график может автоматически изменяться при изменении данных… это чертовски круто.

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

В этом уроке я расскажу о создании трех различных видов графиков с помощью встроенных CSS и SVG.

(далее…)

Ещё четыре способа скрыть и показать элементы при помощи HTML и CSS

Перевод статьи Four More Ways To Hide & Show Elements with HTML and CSS с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Приквел к этой статье – «Четыре способа заставить элементы исчезнуть (и появиться) при помощи CSS» – был сосредоточен на классических техниках для скрытия элементов на странице; на этот раз используются методы, которые работают в современных браузерах, с некоторыми ограничениями для IE. Используется разметка, которая похожа на разметку из предыдущего примера:

(далее…)