Верстка \ HTML&CSS

Анимация других элементов вдоль SVG-пути с использованием JavaScript

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

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

Верстка \ HTML&CSS

Анимация элементов вдоль SVG-пути: Введение в PathSlider

От автора: одним из элементов, которые привлекают меня в SVG больше всего, является элемент path. Если вы следите за моими руководствами, вы, вероятно, заметили это :) И мы можем делать так много всего с SVG-путями, что я никогда не устаю экспериментировать с ними, всегда пытаясь использовать их для создания привлекательного и оригинального опыта интерфейса сайтов или приложений.

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

Верстка \ HTML&CSS

Немного о тексте в атрибуте «alt»

От автора: уверен, вы знаете, что такое alt текст. Это атрибут тега изображения, несущий важную задачу – он описывает изображение для тех, кто не может видеть по тем или иным причинам. Пожалуйста, используйте их. Не хочу преуменьшать послание «пожалуйста, используйте их», но некоторые интересные факторы, связанные с альтернативным текстом, изо дня в день попадались мне.

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

Верстка \ HTML&CSS

Создание анимированных SVG-баннеров

От автора: я не занимаюсь дизайном и маркетингом. Я разработчик софта, но, будучи предпринимателем, я занимаюсь всем подряд. Я трачу много времени на создание зарисовок и поиски в Google , чтобы понять, что как работает, и я хотел бы поделиться своими навыками в дизайне и создании анимированной SVG-рекламы.

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

Верстка \ HTML&CSS

Изучаем селекторы с общим родственником: пользовательские поля формы

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

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

Верстка \ HTML&CSS

Уменьшите размер файлов с помощью этих трех инструментов минификации HTML

От автора: четкого мнения по поводу преимуществ минификации HTML нет, однако если протестировать свой сайт на PageSpeed Insights, часть советов будет в сторону минификации HTML, CSS и JavaScript. Минификация ресурсов – избавление от избыточных элементов, элементов, которые не нужны браузеру для правильной обработки документа.

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

Верстка \ HTML&CSS

Повышают ли SVG-изображения производительность сайта?

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

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

Верстка \ HTML&CSS

Линтинг HTML с помощью CSS

От автора: если в HTML есть ошибки, на экране вы этого не заметите. Поэтому они довольно легко закрадываются в код, могут проскакивать несемантические и недоступные элементы, и это нельзя заметить сразу. Линтить HTML и исправлять ошибки можно разными способами. Например, с помощью W3C Markup Validation Service. Другой способ – использовать продвинутые селекторы для подсвечивания потенциальных областей с ошибками. Такой способ гораздо легче интегрировать в процесс разработки. Ниже представлены несколько способов, как с помощью CSS-селекторов можно линтить разметку.

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

Верстка \ HTML&CSS

Жидкая типографика

От автора: с помощью вьюпорт единиц измерения и функции calc() можно настраивать размер font-size и других свойств относительно размера экрана. То есть размер может быть жидким. Шрифт не будет всегда фиксированным или прыгать с размера на размер в медиа запросах.

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

Верстка \ HTML&CSS

Как мы создали свой frontend фреймворк MarsMan (и зачем)

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

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