Мы хотим Вам показать и донести, что красивый, а главное оригинальный сайт ценится больше чем повседневные однообразные сайты «без души». Для многих сайты это просто кусок работы о котором забываешь когда видишь заветные деньги от заказчика. Но если вы действительно хотите запомнится и быть востребованный разработчиком и дизайнером то не надо бояться экспериментов, а смело двигаться вперед и пробовать новые идеи. Сегодня мы бы хотели поговорить о создании превью, а именно превью для постов сайта, и сделаем это мы с помощью  Flexbox и CSS3.

 

Для примера у нас будет две карточки, которые будут полностью адаптивными, а также «живыми», ведь нам нужно, чтобы на них обратили внимание и кликнули. При наведении курсора карточка с постом будет оживать при  помощи быстрой и красивой анимации. Давайте посмотрим как у нас это получилось. Смотрите бесплатные шаблоны от наших партнеров:

Шаг 1. HTML

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

В первой части кода мы создаем основной блок, в который будет заключена все информация, затем мы добавляем верхние элементы, такие как лайк и иконка времени, далее мы добавляем ссылки и описание к нашему блоку:

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

Шаг 2. CSS

Для начала определим общие стили для нашего контейнера где будут содержаться наши блоки карточек:

Затем нам необходимо добавить изображения к каждой карточке, как вы заметили мы заранее установили две картинки на фон:

Теперь определяем позиции и классы для лайка и времени:

Затем мы устанавливаем классы для ховер эффекта наших карточек, эти небольшие правила помогут нам немного вдохнуть жизни в них:

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

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

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