Выставка мобильных приложений и технологий (МАТЕ)

Большая выставка технологий Moscow Application & Technology Expo0

16 февраля 2015 ВеCSSти с полей 118

Это рекламная статья. Ради поддержки сайта, чтобы мы могли публиковать больше переводов и для того, чтобы делать лучше и полезнее конференции в целом (прим. редакции css-live.ru)

Большая выставка технологий Moscow Application & Technology Expo

В начале весны в российской столице состоится поистине технологичное шоу, объединяющее новинки мобайла, дополненной и виртуальной реальности, Интернета  вещей, wearable-технологий, потребительскую электронику медицинского назначения, а также еще недостаточно знакомый россиянам так называемый подключенный автомобиль (технология Connected Car).

Все это будет представлено на III Международной выставке MATE 2015, которая состоится 1214 марта в московском выставочном центре «Сокольники». Регистрация – по ссылке.

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

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

4 марта 2015 CSS, Статьи 179

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

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

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

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

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

1 марта 2015 CSS, Статьи 615

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

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

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

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

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

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

1 марта 2015 CSS, Статьи 1 441

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

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

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

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

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

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

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

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

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

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

26 февраля 2015 CSS, Статьи 892

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

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

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

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

25 февраля 2015 SVG, Статьи 844

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

Присказка

Эта статья о новой волне 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, Статьи 885

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание аудиоплеера при помощи HTML5. Часть 1: функции и дизайн0

15 февраля 2015 CSS, F.A.Q., HTML5, JavaScript, Статьи 1 463

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

Возможно, вы не настолько стары, чтобы помнить дни WinAmp-а, который был (в своём первноначальном воплощении) основной программой для проигрывания MP3 с "киллер-фичей" в виде настраиваемых тем. Сегодня у вас есть возможность создать свой собственный плеер, используя  HTML5 и JavaScript, и настроить его внешний вид при помощи CSS. Планирование и разработка этого плеера позволит разработчикам познакомиться с HTML5-мультимедиа, JavaScript DataViews и WebAudio API.

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

Развлечения с line-height!9

7 февраля 2015 CSS, Статьи 1 353

Перевод статьи Fun with line-height! с сайта css-tricks.com, c разрешения автора — Криса Койера.

Свойство line-height в CSS управляет расстоянием между строками текста. Его часто устанавливают в безразмерное значение (напр. line-height: 1.4;), чтобы оно было пропорционально размеру шрифта. Это свойство крайне необходимо для управления типоргафикой. Если расстояние между строк слишком маленькое, то строки неуклюже придавлены друг к другу; а если слишком большое, то строки выглядят неуклюже растопыренными. Оба случая тормозят чтение текста. Но, вероятно, вы уже сами это знаете.

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

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

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

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

Секреты

Общие советы

Общие советы и подсказки, которые не входят ни в одну категорию.

Как найти инструменты разработки

Если инструменты разработчика — полная загадка для вас, вам могло оказаться непросто найти их!

Как и через главное меню, вы легко можете открыть инструменты разработчика, либо нажав «F12» в Windows или «Cmd» ⌘, «Option» ⌥ и «I» в Mac, либо кликнув правой кнопкой мыши по странице и выбрав пункт «Исследовать элемент»

В Safari вам сначала понадобится включить панель инструментов разработчика, поставив флажок в меню Настройка > Дополнения > Показать меню «Разработка» в строке меню.

В Opera вам понадобится включить панель инструментов разработчика через Дополнительные инструменты > Включить инструменты разработчика.

Поскольку Firebug – это расширение для Firefox, вам нужно установить дополнение с http://getfirebug.com/.

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

Почему мы не можем делать по-настоящему адаптивные изображения при помощи CSS или JavaScript13

27 января 2015 CSS, Статьи 2 607

Перевод статьи Why we can’t do real responsive images with CSS or JavaScript с сайта brucelawson.co.uk, c разрешения автора — Брюса Лоусона.

Среда, 21 января 2015

Я пишу доклад на тему <picture>, srcset и их «товарищей» для конференции Awwwards в Барселоне через месяц (да, я знаю, что это неслыханный запас по времени; но я планирую поехать отдохнуть в течении двух недель). Я решил, что, прежде чем перейти к основной теме, я должен ответить на вопрос «Зачем вся эта новая сложная разметка? Почему бы просто не использовать CSS или JavaScript?», поскольку его неизменно задают.

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

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

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

R356817191883

41001285897040

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

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

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

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

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

Мы на Facebook

Мы ВКонтакте