Туториалы

Как вы думаете, сколько CSS-градиентов нужно, чтобы нарисовать каждую из этих фигур?

Один! 🤯 Причем его даже не надо дублировать: достаточно указать один раз в одном-единственном свойстве. Таким примером в CodePen на днях поделился Темани Афиф, автор занятного и познавательного проекта css-challenges.com.

Эта «магия» — заслуга свойства border-image. У нас уже есть статья о нем и его возможностях. Увы, громоздкий синтаксис и неинтуитивное поведение — особенно с градиентами — до сих пор мешают ему стать популярным. Сам Афиф в Твиттере признал, что «border-image принадлежит к тёмной стороне CSS»: очень уж трудно представить себе наглядно, как масштабируются, нарезаются и потом опять масштабируются части картинки. И многие даже не пытаются разобраться в нем. А зря!

Хотя свойство border-image уже поддерживают более 96% браузеров (с оговорками, но всё же), популярным пока его не назовешь. Пожалуй, поначалу оно кажется неоправданно сложным: объединяет в себе 5 отдельных свойств, каждое с несколькими значениями, да еще неочевидные правила взаимодействия с обычным border — легко запутаться. Даже многие неплохие руководства (типа статьи Дадли Стори, которую мы переводили в прошлом году) грешат тем, что даже после них ощущение сложности не проходит.

Есть мнение, что его сложность преувеличена, а возможности недооценены. Попробуем исправить это упущение.

Благодаря нашим недавним погружениям в волшебный мир этого модуля, мы уже смогли прочувствовать его силу и невероятные возможности, которыми он наделён. Но, несмотря на множество примеров и описаний разделов CSS Grid Layout Module Level 1, есть ещё немало сюрпризов, о которых стоит поговорить. Поэтому, как вы уже догадались, в этой статье мы продолжим прогулку по этой спецификации, ведь золотая рыбка задолжала нам ещё желания;)

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

Пожалуй, начнём…

Перевод статьи Web Animations API Reference с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

В своей серии статей я изучал Web Animations API, чтобы поделиться тем, что я узнал об этом новом инструменте. Полагаю, что пришло время собрать в одном месте все обнаруженные мной ресурсы. Надеюсь, этот раздел будет часто обновляться по мере того, как люди начнут использовать и обсуждать Animations API.

Перевод статьи Web Animations API Tutorial Conclusion с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это заключение серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Мы неплохо поработали и, надеюсь, выяснили, что из себя представляет Web Animations API. В завершении этой серии давайте резюмируем, что мы обсудили ранее и рассмотрим, что ещё не реализовано.

Перевод статьи Web Animations API Tutorial Part 5: The Loveable Motion Path с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это пятая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson. Раньше на моем блоге на Codepen вышла более краткая версия этой статьи, почти сразу после того, как Хром объявил о поддержке Motion Path за флагом.

Наконец-то! Анимация движения по контуру… теперь возможна не только в SVG.

Перевод статьи Web Animations API Tutorial Part 4: GroupEffects & SequenceEffects с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это четвёртая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Давайте продолжим изучать множественные анимации с Web Animations API, и рассмотрим несколько вещей, которые сегодня доступны в полифилле, предназначенные для группировки и последовательности анимаций.

Перевод статьи Web Animations API Tutorial Part 3: Multiple Animations с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это третья часть из серии учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

После обсуждения AnimationPlayer и шкалы времени в Web Animations API давайте поговорим о проигрывании сразу нескольких анимаций.

Перевод статьи Web Animations API Tutorial Part 2: The AnimationPlayer & Timeline Controls с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это вторая часть из серии учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Теперь, когда мы знаем, как с помощью Web Animations API создать базовую анимацию, пришло время поговорить о состояниях, управлении, обратных вызовах и шкале времени.

Перевод статьи Web Animations API Tutorial Part 1: Creating a Basic Animation с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это первая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Мы окинули беглым взглядом Web Animations API, но так и не добрались до какой-либо конкретики… так что давайте приступим к этому прямо сейчас.

Перевод статьи Let’s talk about the Web Animations API с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это введение в серию учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Около года назад Google анонсировал «Материальный дизайн» с реализацией для веба на базе Полимера…, используя полифилл для предстоящего стандарта Web Animations API.

Перевод статьи Grid Tidbits part 3: grid track sizing с сайта thatemil.com, опубликовано на css-live.ru с разрешения автора — Эмиля Бьёрклунда (твиттер — @ThatEmil).

В этой заметке исследуются некоторые тонкости задания размеров грид-полос (иначе — рядов и колонок) в CSS Grid Layout. Гибкие размеры, функция повторения, функция minmax — вот это да!

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

Чтобы экспериментировать с примерами из этой заметки, рекомендую скачать и запустить Chrome Canary, поскольку в этом браузере самая актуальная реализация.

Перевод статьи Grid Tidbits part 2: terminology and basics с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

В этой статье мы познакомимся с терминологией «CSS Grid Layout», основами определения grid-шаблонов и размещения в них элементов.

Это вторая из цикла относительно небольших статей про «Grid Layout». В первой части мы узнали о назначении grid-ов и о текущей ситуации в браузерах.

Для этого «лакомого кусочка» мы сделаем следующее:

• Возьмём элемент и превратим его в grid.
• Увидим, как элементы сами размещаются в grid’е
• Поупражняемся в том, как управлять этим размещением

Перевод статьи Grid tidbits, part 1: the Why and Where с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

CSS Grid Layout — новый способ управления раскладкой в браузере. У него и других модулей (например, flexbox) разные возможности и перспективы, но в чем-то они и перекрываются. Да, и совсем скоро он появится во многих браузерах.  В этой статье мы узнаем, что это за модуль и для чего он нужен.

Это первая из нескольких статей приемлемой длины про «Grid Layout». Вместо того, чтобы написать статью «всё, что нужно знать про Grid Layout» (которая никогда бы не появилась на свет из-за моей лени), я решил разбить её на легко усваиваемые части. Поскольку эта спецификация довольно большая, понятие «приемлемая длина» — очень условное.

Статьи предполагают по крайней мере базовые знания CSS-раскладки, в том числе Flexbox.

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

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