С информацией
Только заголовки

Адаптивные вкладки openTabby

jQuery плагин openTabby для создания адаптивных табов с разными настройками.

Несмотря на то, что данный плагин довольно старый (2015 года) и не имеет даже документации от разработчика, в нем есть ряд полезных возможностей.

Читать далее

Поздравление с 8 марта

Блок с вращающимся цветком и поздравлением с 8 марта

Поздравление имеет мобильный вариант и занимает совсем немного места

Читать далее

Замена блока на фотографию при наведении курсора

Красивая замена блока на фотографию при наведении и движении курсора мыши

Ховер-эффект реализован с использованием SVG, JS и CSS-переходов.

Читать далее

3D табы с картинкой и описанием

Трехмерное переключение вкладок, в которых присутствует фотография и ее описание

В данном решении для библиотеки jQuery:

  • Фотография и описание поворачиваются в разные стороны
  • Меню табов создается автоматически через дата-атрибут
  • Цвет фона каждой вкладки и ее пункта меню задается также через дата-атрибут
  • Корректно отображается на мобильных устройствах
Читать далее

Размер шрифта в зависимости от ширины блока

Установка размера текста и его позиции в зависимости от ширины блока

Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.

Читать далее

Новогодняя секция

Новогодняя блок-секция с поздравлением

Всех с наступающим Новым Годом!

В преддверии этого праздника, я собрал небольшую блок-секцию с параллакс-эффектом, падающим снегом и поздравительным текстом.

Читать далее

Карточки для заметок, комментариев или отзывов

Наложенные друг на друга карточки для заметок, комментариев или отзывов средствами CSS

Карточки увеличиваются и переходят на передний план при заходе на них курсора мыши, а на узких экранах располагаются без наложения.

Читать далее

Адаптивная сетка для новостных блоков

Адаптивная сетка с одинаковыми по высоте блоками для превью новостей или статей

Фотографии в блоках имеют одинаковый размер. По причине того, что обычно все добавляют разные по формату картинки — лишнее просто отрезается.

Кнопка "подробнее" всегда находится на одном уровне у всех блоков в строке

Решение основано на css-свойстве display: grid

Читать далее