Блоки с разноцветными пузырями
Анимированные разноцветные пузыри вокруг информационных блоков на JS
Решение не использует дополнительных библиотек и хорошо подойдет для оформления блоков на сайтах детской тематики.
Простые решения по работе с вкладками, блоками и списками
Перейти в разделШаблоны сеток на CSS Grid
Резиновые квадраты на CSS
Тень для clip-path
Внутренний border-radius у блока
Блок из 4-х фотографий
Эффект радиоволны на кнопке или блоке
Предупредительные сообщения на CSS
Background для бордюров
Полупрозрачный бордюр на CSS
Зигзагообразный бордюр на CSS
Обновление фрейма по клику
Masonry сетка на CSS
SVG фильтры для создания эффекта дрожания
Длинная тень от блоков
Адаптивные вкладки openTabby
jQuery плагин openTabby для создания адаптивных табов с разными настройками.
Несмотря на то, что данный плагин довольно старый (2015 года) и не имеет даже документации от разработчика, в нем есть ряд полезных возможностей.
Открытие и закрытие контента на jQuery
Кнопки "показать полностью" и "показать еще" для открытия и закрытия дополнительного контента
По своей сути "показать полностью" и "показать еще" это одно и тоже, но для каждого варианта в этой заметке используются разные решения.
В интернете масса различных примеров, как показать и скрыть контент, нажав на кнопку, но все они, как правило, реализованы для одного конкретного блока. В данной теме оба примера можно применять к неограниченному их числу.
Скрипты используемые в этих примерах сделаны для библиотеки jQuery
Поздравление с 8 марта
Блок с вращающимся цветком и поздравлением с 8 марта
Поздравление имеет мобильный вариант и занимает совсем немного места
Замена блока на фотографию при наведении курсора
Красивая замена блока на фотографию при наведении и движении курсора мыши
Ховер-эффект реализован с использованием SVG, JS и CSS-переходов.
Анимированный Tab Bar
Нижняя панель вкладок с красивым анимированным переходом
Решение выполнено на JS с использованием SVG-иконок.
3D табы с картинкой и описанием
Трехмерное переключение вкладок, в которых присутствует фотография и ее описание
В данном решении для библиотеки jQuery:
- Фотография и описание поворачиваются в разные стороны
- Меню табов создается автоматически через дата-атрибут
- Цвет фона каждой вкладки и ее пункта меню задается также через дата-атрибут
- Корректно отображается на мобильных устройствах
Размер шрифта в зависимости от ширины блока
Установка размера текста и его позиции в зависимости от ширины блока
Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.
Новогодняя секция
Новогодняя блок-секция с поздравлением
Всех с наступающим Новым Годом!
В преддверии этого праздника, я собрал небольшую блок-секцию с параллакс-эффектом, падающим снегом и поздравительным текстом.
