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

18 марта 2015 CSS, Статьи, Трюки 2 583

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

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

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

Читать полностью

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

13 марта 2015 CSS, Статьи 1 938

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

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

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

Читать полностью

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

13 марта 2015 CSS, Статьи 1 766

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

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

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

Читать полностью

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

9 марта 2015 CSS, Статьи 496

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

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

Читать полностью

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

4 марта 2015 CSS, Статьи 2 665 Перевод

Перевод статьи 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

1 марта 2015 CSS, Статьи 913 Перевод

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

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

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

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

Читать полностью

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

1 марта 2015 CSS, Статьи 2 211 Перевод

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

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

Читать полностью

Создание аудиоплеера при помощи HTML5. Часть 3: микроданные и внешний вид2

28 февраля 2015 CSS, F.A.Q., HTML5, JavaScript, Статьи 481 Перевод

Перевод статьи Making An Audio Player With HTML5, Part 3: Microdata and Skinning с сайта demosthenes.info, c разрешения автора — Дадли Стори.

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

Читать полностью

Создание аудиоплеера при помощи HTML5. Часть 2: прототипирование0

27 февраля 2015 CSS, F.A.Q., HTML5, JavaScript, Статьи 417 Перевод

Перевод статьи Making An Audio Player With HTML5, Part 2: Prototyping с сайта demosthenes.info, c разрешения автора — Дадли Стори.

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

Читать полностью

Производительность CSS-анимаций: нерассказанная история (с комментариями Пола Айриша)0

26 февраля 2015 CSS, Статьи 1 908 Перевод

Перевод статьи CSS animations performance: the untold story с сайта greensock.com, c разрешения автора — Джека Дойла.

У использования CSS-анимаций есть несколько интересных (и удивительных) последствий для производительности, о которых не все знают. Я столкнулся с некоторыми из этих последствий, пока тестировал их для клиента в рекламной индустрии, который настаивал на том, что GSAP принят в качестве стандарта, поэтому я записал скринкаст, поясняющий что именно я обнаружил. Я решил, что было бы полезно поделиться этим:

Читать полностью

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

25 февраля 2015 SVG, Статьи 1 337 Перевод

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

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

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

Читать полностью

Как использовать ECMAScript 6 сегодня?3

23 февраля 2015 JavaScript 992

Присказка

Эта статья о новой волне JavaScript, о том, как будут писаться проекты в ближайшие год-полтора в ES5-окружениях.

Сказка. Что нас ждет?

ECMAScript 6 — грядущая версия стандарта, формальное утверждение которого намечено на июнь этого года. Данный стандарт несет в себе существенные изменения:

  • новые глобальные объекты: Map, Set, Symbol и т.д.
  • новые синтаксические конструкции: module, class, const и т.д.
  • новые концепции, которые реализованы преимущественно посредством п.2: модули (импорт/экспорт), итераторы, генераторы и т.д.
  • расширение существующих глобальных объектов и прототипов этих объектов: Array.from(), Array.prototype.find() и т.д.

Описание всех нововведений лежит за рамками данной статьи, но прежде чем перейти к основной ее части, я размещу пару ссылок пройдя по которым вы сможете ознакомится с ними более детально: Поддержка ECMAScript 6 в Mozilla, ECMAScript 6 Features.

Читать полностью

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

21 февраля 2015 CSS, Статьи 1 063 Перевод

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

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

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

Читать полностью

Секреты браузерных инструментов разработчика (часть 2)0

20 февраля 2015 F.A.Q., Статьи 4 310

Перевод статьи Secrets of the Browser Developer Tools с сайта devtoolsecrets.com, c разрешения автора — Энди Смита.

Редактирование

Редактирование кода при помощи консоли.

Увеличение/уменьшение CSS-значений

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

Вы можете увеличить/уменьшить значение на 10 единиц, удерживая клавишу «Shift» и нажимая клавиши управления курсором «вверх» и «вниз»; также можно увеличить/уменьшить значение на 0.1 единицы, удерживая клавишу «Alt» и нажимая клавиши управления курсором «вверх» и «вниз»;

Читать полностью

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

18 февраля 2015 CSS, SVG, Статьи 992

Перевод статьи 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. Наслаждайтесь!
Читать полностью

Мы в социальных сетях

Поддержите наш проект

R356817191883

41001285897040

В примечании к платежу укажите: "Помощь проекту".

Подпишись на css-live.ru

и получай обновления по email

Лучшие материалы

Комментарии Просмотры

Мы на Facebook

Мы ВКонтакте