CSS-live.ru

stasgavrylov: статьи и переводы

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

3

Перевод раздела Introduction официальной документации Google: http://www.google.com/design/spec/material-design/.

Введение

materialdesign_introduction

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

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

10

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

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

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

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

0

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

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

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

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

0

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

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

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

0

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

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

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

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

2

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

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

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

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

Обеспечение лучшей резервной поддержки SVG и управление оформлением с помощью элемента <picture>

3

Перевод статьи Better SVG Fallback and Art Direction With The <picture> Element с сайта http://sarasoueidan.com/, автор — Сара Суэйдан.

Помимо использования SVG в CSS в качестве фонового изображения, вы можете использовать SVG и для изображений в контенте HTML с помощью одной из нескольких техник для их встраивания. Каждая из них имеет свои преимущества и сценарии использования.  Если вам не нужна интерактивность или возможность подключения внешних стилей, стандартным способом загрузки SVG-изображения будет тег <img>, но у него есть один недостаток: на сегодняшний день для создания запасных вариантов изображений и/или для управления оформлением страницы необходимо использовать JavaScript. В этой статье мы поговорим о лучшем методе для достижения этой цели: с помощью элемента <picture>.

Перед вами не учебник по использованию <picture>. На просторах интернета существует множество ресурсов со всей информацией, которую нужно знать об этом элементе. Поэтому если вы с ним не знакомы, обратитесь к последнему разделу этой статьи – там вы найдете список ресурсов, чтобы узнать всё, что необходимо. С другой стороны, эта статья не требует от вас особых навыков работы с <picture>. Как вы сами сможете убедиться, все примеры в ней в большинстве своём понятны без разъяснений.

Знакомство с object-fit

3

Перевод статьи Exploring object-fit с сайта hacks.mozilla.org (лицензия СС3.0), автор — Крис Миллс.

При работе с веб-документами мы довольно часто сталкиваемся с задачей отображения изображений (или видео) разного размера в одном и том же месте. Предположим, что вы пишете приложение с динамической галереей, которая позволяет пользователю загружать свои файлы. Вы не можете гарантировать, что все будут загружать изображения с одинаковым соотношением сторон. Что же делать?

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

Использование встроенных SVG с резервной поддержкой Grunticon

2

Перевод статьи Inline SVG with Grunticon Fallback с сайта css-tricks.com, c разрешения автора — Криса Койера.

Вышел Grunticon 2! Он обзавелся новым вебсайтом. Grunticon — это невероятно крутой инструмент для создания системы SVG-иконок. Рабочий процесс выглядит следующим образом:

  1. Поместите все SVG-иконки в одну папку
  2. Запустите Grunticon в этой папке, и он подготовит всё, что необходимо
  3. Поместите в <head> крохотный скрипт
  4. И используйте HTML в формате <div class="icon-image"></div> там, где вам понадобится использовать иконки
  5. Наслаждайтесь!