Верстка \ HTML5

Создаем анимированную сеть из динамических точек при помощи HTML5 Canvas

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

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

Верстка \ HTML5

Понятие линейных градиентов в SVG

От автора: CSS градиенты уже стали обычным делом для большинства веб-дизайнеров, в то время как у SVG градиентов есть свои преимущества. Если вы собираетесь использовать SVG элементы, вам нужно понять принцип работы градиентов.

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

Верстка \ 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!

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