Постер для игры GTA5 с помощью css grid и clip-path
С помощью css свойства display: grid и clip-path воспроизведён постер для компьютерной игры GTA5.
Бесконечный CSS grid
Бесконечно перетаскиваемые изображения по всем направлении на гридах и с применением библиотеки anime.js
Гонки за амебой по css grid ячейкам
Эффект наведения на ячейки css grid, который похож, как будто мы преследуем какую-то кляксу или амёбу. При этом, все сделано на CSS
Эффект тесселяции при наведении на ячейку в grid css
Эффект тесселяции при наведении на ячейки в сетке. Сетка grid построена на базе 200 блоков. Сделан эффект на чистом CSS
Витрина магазина в изометрии на CSS GRID
На css grid реализована витрина магазина с изометрическим эффектом.
Susy 3 — инструмент для верстки сеток на SASS
Набор инструментов для упрощения вычислений связанных с версткой сеток на SASS. Рассмотрим примеры сеток на float, flex, grid. Теперь нам не нужен bootstrap или foundation для сеток, мы можем сами быстро всё написать, включая 5 колоночную и любую другую сетку.
UniteGallery - многофункциональная адаптивная галерея
Unite Gallery - многофункциональная галерея для вывода изображений, музыки, видео. Галерея адаптивная с поддержкой touch устройств.
BlocksIt - динамическая сетка
BlocksIt - плагин позволяющий создавать динамическую сетку разметки. Он управляет преобразованием HTML элементов в "блоки" и располагает их в сетке страницы. Для этого достаточно указать количество столбцов, а всё остальное сделает плагин. Кроме того, вы можете даже объединить "блоки" и сделать один большой.
Галерея использующая z-index
В этой галерее мы будем комбинировать свойство z-index и мощь jQuery. Будем изменять значение z-index и тем самым пролистывать изображения, а jquery займется анимацией.
Grid 960 - CSS фреймворк
Grid 960 — CSS фреймворк, который позволяет разработчику быстро разрабатывать основную концепцию дизайна сайта, перекладывая на себя часть работы по созданию макетов, сетки.
Прокрутка изображений на jQuery
Будем прокручивать изображения при кликах по стрелочкам вверх и вниз. В демках будет несколько вариантов с различными эффектами перехода при листании миниатюр.
Процентная сеточная система
Главной характеристикой этой сеточной схемы является задание ширины колонок в процентах. То есть вам не нужно будет определять ширину каждой колонки вручную, просто поместите её в любой контейнер и ширина колонок автоматически установится.