В последнее время использование карточного шаблона стало весьма популярным среди разработчиков, но не все функции CSS могут нам помочь в реализации данного приема, по этому нам понадобиться Flexbox и CSS Grid. Благодаря их свойствам мы сможем реализовать замечательную карточную сетку, которая будет адаптивная и трансформироваться с плавной анимацией. Все это выглядит очень привлекательным для посетителя, никаких резких анимаций и странных переходов. Очень удобно для предварительного осмотра постов.

 

Мы создадим шесть блоков, которые будут изменяться под наши нужны, по умолчанию часть текста будет скрыта от просмотра, но при нажатии на "Читать далее" будет происходить анимация и плавный разворот поста.

Шаг 1. HTML

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

У нас есть общий контейнер станицы, а именно a-container, он будет содержать общие параметры для страницы, затем мы устанавливаем класс o-card_container, который обвернет всю карточную сетку, для каждого блока мы будем присваивать отдельный id, в нашем случае это  id="Nikola_Tesla". Обратите внимание, что часть информации которая будет подгружаться через a-readMore будет браться непосредственно с Wikipedia, для этого будут служить функции js.

Шаг 2. СSS

Теперь нам надо придать стили для нашей карточной сетки, для начала нам необходимо указать параметры для общего контейнера, для этого мы применяем следующие классы:

Затем мы указываем классы для самой карты, уже для присвоенного ранее нами класса .o-card для всей карточной сетки.

Теперь мы должны указать стили для шапки нашей первой карты, данный класс будет применяться ко всем картам в демонстрации:

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

Шаг 3. JS

По умолчанию мы уже подключили jQuery и скрипт js, в файле index.js у нас будут содержаться функции и правила которые отвечают за большую часть работы. Для начала мы установили правила для загрузки всего контента, теперь устанавливаем значения для кнопки "Читать далее":

Так как у нас информация подгружается с Wikipedia, нам необходимо организовать это на уровне скрипта:

Теперь устанавливаем значения для закрытия модального окна с подробной информацией и установки его к первоначальному значению:

В результате у нас получился замечательный карточный CSS Grid, который стилизованный приятной анимацией и элементами переходов.

Вот и все. Готово!

Читайте также: