See the Pen V I — Before and After Image Comparison Slider using CSS Variables. SUPER simple. by Mark Sottek…
CSS решения при разработке сайта
CSS (Cascading Style Sheets «каскадные таблицы стилей») — формальный язык декорирования и описания внешнего вида HTML-документа. В разделе представленны различные решения при разработке сайтов, где CSS играет одну из ключевых ролей.
Слайдер с видео- и другим типом контента: Owl-Carousel, jQuery
Задача. Нужно сделать на странице сайта карусель (слайдер) с разным типом контента — видео, текст, вставка видео из Youtube. Такое…
WordPress: Вывод списка категорий ссылками и с изображениями
Задача 1. Необходимо сделать шорткод, который выводил бы список всех категорий товаров в магазине на Woocommerce. Также, нужно стилизовать список,…
Вкладки (Табы) на JavaScript
Задача. Нужно сделать вкладки и настроить переключение между ними с помощью JavaScript. Есть вариант сделать табы только с помощю HTML…
Список в две колонки на CSS и HTML
Задача. Часто необходимо сделать список в две колонки. Эту задачу можно решить несколькими способами. Решение 1. Через свойство float и…
HTML: Как сделать отступ при скролле к якорю
Задача. Есть блок с содержанием в статье. Оглавления в виде ссылок ссылаются на якоря в соответствующих заголовках, например ссылка <a…
Плавающий блок на CSS при прокрутке
Задача. Необходимо настроить на сайте сайдбар так чтобы он прилипал при прокрутке страницы. Называют это ещё как «плавающий блок». Решение….
Раскрывающаяся HTML-таблица по клику
Задача. Есть длинная таблица и нужно сделать, чтобы часть таблицы скрывалась и раскрывалась по клику (см. Пример №1). СвернутьРазвернутьСтолбец 1Столбец…
HTML всплывающая подсказка: Подборка примеров оформления
Подборка интересных кодов для создания всплывающих подсказок на HTML может дать идеи для реализации своих проектов. Всплывающие подсказки на чистом…
Всплывающее (модальное, popup) окно HTML и CSS + Примеры
Задача. Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно). Решение. Можно использовать несколько примеров, как на HTML…
Шпаргалка CSS Flexbox: Flex-префиксы для кросбраузерности
CSS Flexbox (флексы) — модель верстки, которая делает более удобным решение таких вопросов как: Создание всех колонок в макете одинаковой…
Заготовка таблицы с прокруткой на мобильных на HTML и CSS
Задача. Необходима простая заготовка таблицы, которая прокручивалась бы на мобильных устройствах если не помещается в экран. Решеине. Предлагаю такую html-таблицу,…