Горизонтальные вкладки с анимацией
JQuery плагин для простого создания горизонтальных вкладок с анимированным выводом их содержимого
Плагин имеет 4 эффекта отображения контента и занимает менее 100 строчек кода.
Простые решения по работе с вкладками, блоками и списками
Перейти в разделТень для clip-path
Внутренний border-radius у блока
Блок из 4-х фотографий
Эффект радиоволны на кнопке или блоке
Предупредительные сообщения на CSS
Background для бордюров
Полупрозрачный бордюр на CSS
Зигзагообразный бордюр на CSS
Обновление фрейма по клику
Masonry сетка на CSS
SVG фильтры для создания эффекта дрожания
Длинная тень от блоков
3D hover-эффект ориентированный на направление курсора
3D hover-эффект ориентированный на направление движения курсора мыши
Эффект работает таким образом, что описание для фотографий (всплывающий блок) появляется с той стороны, откуда заходит курсор, и убирается туда, куда он уходит.
Параллакс-эффекты с библиотекой parallax.js
Небольшая, но удобная библиотека parallax.js для добавления тегам параллакс-эффектов
Механизм параллакса, создаваемый этой библиотекой реагирует на положение курсора, гироскоп или другое оборудование для обнаружения движения
Секция с шестиугольными фотографиями
Вариант оформления блока с шестиугольными фотографиями разного размера
Данное решение можно использовать как вспомогательный блок к какой-либо текстовой информации, или, увеличив масштаб, как самостоятельную секцию.
Также на фотографии можно установить ссылки или появляющийся поясняющий текст
Оформление списка, сгруппированного по алфавиту
Вариант оформления списка, сгруппированного по первым буквам
Как создать такой список описано в теме: "Группировка списка по первым буквам на PHP". В этой рассмотрен вариант его оформления с "залипанием" буквы алфавита
Секция с падающим снегом на JS
Падающие в блоке или на всей странице снежинки, квадратики, треугольники и другие элементы
Решение реализовано на библиотеке sparticles.js
Адаптивная таблица на Flexbox
Таблица, которая меняет расположение ячеек на узких экранах
Ранее уже была похожая тема: "Адаптивная таблица", но она имела фиксированный размер ячеек и могла использоваться не для всех решений .
Вариант изложенный в этой теме универсальный и подойдет для любого объема текста.
Адаптивная таблица на CSS
Вариант оформления таблицы, которая меняет расположение ячеек на узких экранах
Обратите внимание: Ячейки у данной таблицы имеют фиксированный размер, и соотв. информация, расположенная в них, должна умещаться (иначе ее будет не видно). Если в ячейках информации больше, можно увеличить их ширину или воспользоваться решением: Адаптивная таблица на Flexbox, в котором нет таких ограничений.
Вертикальный таймлайн на CSS
Вертикальный адаптивный таймлайн событий, выводящихся по разные стороны от шкалы
Данный таймлайн является адаптивным, и на узких экранах он складывается, показывая события друг под другом.
