2018-05-23 
От автора: при помощи CSS3 можно реализовать довольно много интересных задач. Одну из них мы рассмотрим сегодня и создадим переключатель на чистом CSS3 без использования сторонних библиотек и иных скриптов.
От автора: радиальный градиент CSS — довольно крутая штука. Удивительно, насколько легко с их помощью рисовать фон элемента. Однако легко термин относительный. Это, безусловно, проще, чем создавать графику для фона в стороннем ПО. А синтаксис хорошо запоминается. Его также легко забыть, если не использовать часто, и он сложнее linear-gradient ().
От автора: некоторые из наиболее вдохновляющих примеров, которые я видел во front end разработке, связаны с переходом на страницу. Анимация перехода гладкая, как в мобильных приложениях. Взаимодействий подобного рода можно представить множество, но на посещаемых мной сайтах я их не вижу. Существует несколько способов сделать такую анимацию!
От автора: стандартные подсказки в поле input при вводе значений в эти поля пропадают. В данном уроке мы с вами создадим интерактивную подсказку, которая не исчезает при попадании фокуса на input, и, кроме этого, она с эффектом плавно перемещается и остается всегда на виду.
Создание уникального веб-опыта с помощью пользовательских курсоров на CSS
От автора: создание пользовательского курсора CSS для замены стандартного указателя мыши: для чего это нужно и подробное описание примера реализации. Как создать пользовательский курсор CSS всего за 5 минут? Узнаем из статьи.
От автора: как работает анимация CSS: работа со свойством animation, основной синтаксис, настройка параметров, примеры использования — об этом в статье.
От автора: реализация выпадающего меня с помощью HTML и CSS, обеспечение необходимого уровня доступности навигации, фокусировка пунктов, поддержка браузерами — об этом в статье.
От автора: как создаются слои анимации? Ответ — will-change: transform. Или нет? Если только вы не будете изменять преобразование, не используйте will-change: transform. Используйте will-change: opacity или backface-visibility: hidden, поскольку их побочные эффекты, как правило, не вызывают столько проблем.
Более доступная разметка с использованием CSS display: contents
От автора: CSS Grid Layout позволяет превратить элемент в сетку и поместить в него его дочерние элементы первого уровня. Учитывая это, может возникнуть соблазн использовать более плоскую разметку, с меньшим количеством значений, но, как правило, менее доступную. С использованием display contents CSS мы можем поместить в сетку дочерние элементы второго уровня, что позволяет получить доступную разметку и красивую компоновку. Давайте рассмотрим это подробнее!
От автора: свойство line clamp усекает текст до определенного количества строк. Спецификация для него в настоящее время находится в Editor’s Draft, что значит, что ничего еще не закреплено — она в работе. Тем не менее, оно определено как сокращение для свойств max-lines и block-overflow, первое из которых помечено, как такое, которое в скором времени может быть удалено.
Все права защищены © 2026
Бернацкий Андрей Васильевич
Служба поддержки
Материалы сайта (статьи, уроки, видео уроки, курсы и прочее) предназначены исключительно для самостоятельного изучения