Установка размера текста и его позиции в зависимости от ширины блока
Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.
Новогодняя блок-секция с поздравлением
Всех с наступающим Новым Годом!
В преддверии этого праздника, я собрал небольшую блок-секцию с параллакс-эффектом, падающим снегом и поздравительным текстом.
Наложенные друг на друга карточки для заметок, комментариев или отзывов средствами CSS
Карточки увеличиваются и переходят на передний план при заходе на них курсора мыши, а на узких экранах располагаются без наложения.
Адаптивная сетка с одинаковыми по высоте блоками для превью новостей или статей
Фотографии в блоках имеют одинаковый размер. По причине того, что обычно все добавляют разные по формату картинки — лишнее просто отрезается.
Кнопка "подробнее" всегда находится на одном уровне у всех блоков в строке
Решение основано на css-свойстве display: grid
JQuery плагин для простого создания горизонтальных вкладок с анимированным выводом их содержимого
Плагин имеет 4 эффекта отображения контента и занимает менее 100 строчек кода.
3D hover-эффект ориентированный на направление движения курсора мыши
Эффект работает таким образом, что описание для фотографий (всплывающий блок) появляется с той стороны, откуда заходит курсор, и убирается туда, куда он уходит.
Небольшая, но удобная библиотека parallax.js для добавления тегам параллакс-эффектов
Механизм параллакса, создаваемый этой библиотекой реагирует на положение курсора, гироскоп или другое оборудование для обнаружения движения
Вариант оформления блока с шестиугольными фотографиями разного размера
Данное решение можно использовать как вспомогательный блок к какой-либо текстовой информации, или, увеличив масштаб, как самостоятельную секцию.
Также на фотографии можно установить ссылки или появляющийся поясняющий текст
Вариант оформления списка, сгруппированного по первым буквам
Как создать такой список описано в теме: "Группировка списка по первым буквам на PHP". В этой рассмотрен вариант его оформления с "залипанием" буквы алфавита
