Верстка \ HTML5

Разукрасьте свое имя огоньками при помощи HTML5 Canvas и режимов наложения в CSS

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

Продолжить чтение

Верстка \ HTML5

Изображение с помехами при помощи HTML5 Canvas

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

Продолжить чтение

Верстка \ HTML5

Как создать плавно изменяющуюся кнопку Play-Pause для HTML5 видео с помощью SVG

От автора: если внимательно присмотреться к плееру YouTube, можно заметить, что кнопка play не просто переключается на иконку паузы по клику, а плавно и быстро перетекает между двумя состояниями. Сделать это можно с помощью SVG под управлением JavaScript. Сегодня я покажу мою интерпретацию данного UI шаблона.

Продолжить чтение

Верстка \ HTML5

Совет: как быстро вставить фавикон в HTML

От автора: фавикон добавляет лоска сайту, выделяя его среди других. Десктопные браузеры, операционные системы и мобильные устройства предоставляют возможность сохранения любимых сайтов в закладки, что делает эти иконки все более важным атрибутом веб-сайта. Крайне важно правильно вставить фавикон, чтобы вне зависимости от того, на каком устройстве или операционной системе пользователь закрепил сайт, слева от сайта всегда красовалась красивая иконка.

Продолжить чтение

Верстка \ HTML5

Генерация помех в HTML5 Canvas

От автора: мои недавние статьи о canvas анимации, имитации звездного неба и создании генератора случайных чисел вылились в эксперимент по созданию телевизионных помех… и так вышло, что все эти темы связаны. Как и в статье со звездным небом, в данном уроке будет разбор кода с примерами.

Продолжить чтение

Верстка \ HTML5

Клонирование SVG элементов с помощью Use

От автора: use – инструмент клонирования SVG элементов. С его помощью можно дублировать существующие и заданные элементы. Также данный инструмент предоставляет возможность изменять созданные копии. Use – легкий способ облегчить ваш SVG код, используя при этом лучшие DRY практики («Не повторяться»).

Продолжить чтение

Верстка \ CSS 3

Как повысить UX валидаторов форм в HTML и CSS

От автора: только лишь на HTML атрибутах можно сделать несчетное множество различных валидаторов форм. CSS селекторы помогут вам упростить работу и сделать ее более понятной для пользователей. Однако, чтобы добиться действительного хорошего результата, придется немного попотеть с CSS!

Продолжить чтение

Верстка \ HTML5

Линейный ползунок на HTML5, SVG и JavaScript

От автора: в большей степени пользователи легко разбираются в элементах интерфейса с численной системой измерения, но графический интерфейс может «направлять» пользователя и повышает ассоциативную составляющую, особенно при работе с большими диапазонами значений. Как и в предыдущем примере с кольцом, тут также используется SVG, JavaScript и input типа range.

Продолжить чтение

Верстка \ HTML5

Круговые элементы интерфейса при помощи HTML5, CSS, JS и SVG

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

Продолжить чтение