Загрузка...
Древовидное представление (сворачиваемый список) можно сделать, используя только html и css, без использования JavaScript.
Древовидные представления, только html и css
Метка: tips-and-tricks
CSS clip и mask для всплывающих подсказок
Несколько техник вырезания и использования слоёв маски для формирования фигуры всплывающих подсказок с произвольным хвостиком-стрелкой.
CSS для настройки текста поверх изображений
Улучшение читаемости текста, расположенного над фоновым изображением, с использованием разных техник комбинирования градиентов, прозрачности подложки и теней.
Смягчение теней с помощью слоёв в CSS-свойстве box-shadow
Запечатлеть все тонкости реальной тени с помощью box-shadow не просто, но кое-то можно улучшить, применяя к блокам несколько слоев теней.
Выезжающая боковая панель (sidebar)
Как создать отзывчивую выдвигающуюся боковую панель (sidebar) для навигации, которая отслеживает состояние, поддерживает управление с клавиатуры, работает с Javascript и без него в разных браузерах
Календарь с помощью CSS-grid в несколько строк кода
Макет сетки календаря — идеальный кандидат для использования CSS-grid и его свойств: grid-template-columns и grid-column.
Float-блоки по углам контейнера c текстом вокруг
Как с помощью только CSS расположить картинку или любой float-блок в нижнем углу или по бокам контейнера и текстом вокруг неё.
Поиск в DOM ближайшего родителя с position: relative
Отладка взаимного позиционирования HTML-элементов и поиск ближайшего родителя с CSS-свойством position: relative с помощью JavaScript в консоли браузера.
Передача данных между CSS и JavaScript с помощью CSS-переменных
Практические примеры обмена данных между CSS и JavaScript с помощью CSS-переменных. Передача значений настраиваемым CSS-свойствам из Javascript.
Node.textContent и Element.innerText для получения и установки текста
Оба метода Node.textContent и Element.innerText используются для получения и установки текста в HTML-элементе, рассмотрим их сходство и отличие.
Градиент для текста
Как с помощью CSS сделать градиентную заливку текста.
Аккордеон из HTML-элементов details и summary
Вы можете использовать их для интерактивных компонентов с раскрыванием контента (accordion) совсем без JavaScript.
Динамические выпадающие списки
Как связать нескольких выпадающих списков (html-элементов select), чтобы значения (option) каждого следующего зависели от выбранной опции в предыдущем.
CSS центрирование элемента внутри контейнера
Как центрировать html-элемент по горизонтали и вертикали с помощью двух-трёх строк CSS.
5 приёмов ленивой загрузки изображений
повышение производительности веб-страницы, примеры lazy load (отложенная загрузка) для картинок
Всё, что нужно знать про inputmode
атрибут inputmode подсказывает, какой набор кнопок экранной клавиатуры предложить пользователю для удобства ввода в зависимости от типа input: none, numeric, tel, decimal, email, url, search
Поле ввода с автозаполнением, только HTML
Как сделать поле ввода с автозаполнением (autocomplete, автокомплит) с применением только HTML. Элемент datalist.