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