Стили для карточек html

26 CSS Product Cards

Collection of free HTML and CSS product card code examples from Codepen, GitHub and other resources. Update of November 2021 collection. 4 new items.

Related Articles

1. CSS Cards
2. CSS Blog Cards
3. CSS Card Hover Effects
4. CSS Card Layouts
5. CSS Flip Cards
6. CSS Material Design Cards
7. CSS Movie Cards
8. CSS Credit Cards
9. CSS Profile Cards
10. CSS Recipe Cards
11. CSS Business Cards
12. Bootstrap Product Cards

Author

Links

Made with

About a code

Pure CSS Product Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Simple Product Card UI Design

Simple product card UI design using HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Card UI Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Responsive Product Card

Responsive product card view with change color/image functionality.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

Верстка интернет-магазина: список товаров

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

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

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

Адаптивная сетка

Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:

Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.

Теперь используем медиа-запросы, чтобы разместить по две, три и четыре плитки в ряд при больших разрешениях монитора.

@media only screen and (min-width: 450px) < .product-wrapper < width: 50%; >> @media only screen and (min-width: 768px) < .product-wrapper < width: 33.333%; >> @media only screen and (min-width: 1000px) < .product-wrapper < width: 25%; >> 

И зададим стили карточек товаров.

Из-за того, что карточки имеют margin-right равный 20px , весь список имеет нежелательный отступ справа.

Исправим это с помощью отрицательного значения margin-right у родителя.

Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо. Для наглядности блокам в демо задана фиксированная высота.

Фото товаров

Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:

Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.

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

Осталось немного увеличивать фото при наведении.

.product:hover .product-photo img

Как все это работает можно посмотреть на примере демо.

Описание товара

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

Первую задачу можно решить, задав высоту параграфа с описанием, равную четырем line-heigth .

А эффекта размытия последних букв четвертой строки мы добьемся с помощью псевдоэлемента :after с линейным градиентом в качестве фона.

Перечеркнутые цены

Чтобы перечеркнуть цену линией отличной по цвету от текста, задаем блоку с ценой значение color равное #ff3535 и text-decoration — line-through . При этом устанавливаем для вложенных элементов серый цвет текста.

.product-price-old b, .product-price-old small

Всплывающие кнопки

Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом .product-photo , скрыта с помощью opacity: 0 и немного сдвинута вниз за счет transition: translateY(2em) . При наведении курсора на карточку товара стили кнопки меняются следующим образом.

.product:hover .product-preview

Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер .product-buttons-wrap абсолютно позиционирован в блоке .product и равен родителю по ширине и высоте.

Далее мы стилизуем псевдоэлемент .product-buttons-wrap:before таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.

Теперь можно добавить собственно контент — кнопки, размещенные в блоке .buttons .

Благодаря правилу float: left у псевдоэлемента .product-buttons-wrap:before , кнопки расположены ниже основного контента, и блок .buttons занимает всю площадь карточки.

Чтобы лучше разобраться с кнопками, можно посмотреть это демо.

Переключение вида карточек товаров

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

По клику на кнопки у списка товаров удаляется и добавляется класс .table-layout .

$productList.toggleClass('table-layout'); 

Таким образом, прописав стили для карточек-дочерних элементов блока ul.table-layout , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:

Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.

.table-layout .product-buttons-wrap

Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.

Источник

50+ CSS Cards Layouts with Code and Demos

This article will provide a list of the top 40 best CSS Card design examples from codepen. I’ve also created a collection of CSS cards for you to use for inspiration.

Title:- Card Hover Interactions
Author:- Ryan Mulligan
Made with:- CSS HTML JS

Title:- Parallax Depth Cards
Author:- Andy Merskin
Made with:- CSS HTML JS

Title:- Expanding flex cards
Author:- Zed Dash
Made with:- CSS HTML JS

Title:- Pokemon Card Holo Effect
Author:- Simon Goellner
Made with:- CSS HTML JS

Title:- Expanding card page transition effect
Author:- Rachel Smith
Made with:- CSS HTML JS

Title:- Isometric Card Grid
Author:- Jon Kantner
Made with:- CSS HTML JS

See the Pen 3D Fold out reveal by Andrew Canham (@candroo) on CodePen.

Title:- 3D Fold out reveal
Author:- Andrew Canham
Made with:- CSS HTML JS

Title:- Clash of Clans Cards
Author:- Andre Madarang
Made with:- CSS HTML JS

Title:- Swipeable Cards nightly
Author:- Ionic
Made with:- CSS HTML JS

Title:- Slider Parallax Effect
Author:- Manuel Madeira
Made with:- CSS HTML JS

See the Pen Blog Cards by Chyno Deluxe (@ChynoDeluxe) on CodePen.

Title:- Blog Cards
Author:- Chyno Deluxe
Made with:- CSS HTML JS

Title:- Animated Weather Cards
Author:- Steve Gardner
Made with:- CSS HTML JS

Title:- Flexbox Cards
Author:- Lindsey
Made with:- CSS HTML JS

See the Pen News Cards – CSS only by Aleksandar Čugurović (@choogoor) on CodePen.

Title:- News Cards – CSS only
Author:- Aleksandar Cugurovic
Made with:- CSS HTML JS

See the Pen 3D Carousel by Yoav Kadosh (@ykadosh) on CodePen.

Title:- 3D Carousel
Author:- Yoav Kadosh
Made with:- CSS HTML JS

Title:- Expanding Card Grid With Flexbox
Author:- Naila Ahmad
Made with:- CSS HTML JS

Title:- 3D CSS Parallax Depth Effect
Author:- Adrian Payne
Made with:- CSS HTML JS

Title:- Steam inspired game card hover effect
Author:- Andrew Hawkes
Made with:- CSS HTML JS

Title:- Parallax Flipping Cards
Author:- Nicolas Pavlotsky
Made with:- CSS HTML JS

Title:- Parallax Tilt Effect Cards
Author:- Abubaker Saeed
Made with:- CSS HTML JS

Title:- FlexBox Exercise #4 – Same height cards
Author:- Veronica
Made with:- CSS HTML JS

See the Pen CSS Filter Cards by Steve Meredith (@steveeeie) on CodePen.

Title:- CSS Filter Cards
Author:- Steve Meredith
Made with:- CSS HTML JS

See the Pen CSS Cards by Tristan White (@triss90) on CodePen.

Title:- CSS Cards
Author:- Tristan White
Made with:- CSS HTML JS

Title:- Beautiful CSS Cards
Author:- CodingTuting
Made with:- CSS HTML JS

Title:- Modern css cards design
Author:- FlorinCornea
Made with:- CSS HTML JS

Title:- Comment Card Animation
Author:- Shaw
Made with:- CSS HTML JS

See the Pen Cards by Abhishek Mane (@abhishek747) on CodePen.

Title:- Cards
Author:- Abhishek Mane
Made with:- CSS HTML JS

Title:- Playlist Carousel – css only
Author:- Aybüke Ceylan
Made with:- CSS HTML JS

Title:- CSS leaning card effect
Author:- Lynn Fisher
Made with:- CSS HTML JS

Title:- Hearthstone Style Card Hover
Author:- Jack Rugile
Made with:- CSS HTML JS

Title:- Player/User Cards
Author:- Alvaro Montoro
Made with:- CSS HTML JS

See the Pen Info Cards by Nathan Taylor (@nathantaylor) on CodePen.

Title:- Info Cards
Author:- Nathan Taylor
Made with:- CSS HTML JS

Title:- Vue card carousel
Author:- Will
Made with:- CSS HTML JS

Title:- Payment Card Swipage
Author:- Jamie Coulter
Made with:- CSS HTML JS

Title:- 3D Product Cards
Author:- Zac
Made with:- CSS HTML JS

Title:- CSS Grid: Card Variations
Author:- Olivia Ng
Made with:- CSS HTML JS

Title:- Blog Posts Card Layout – Code The Web
Author:- Booligoosh
Made with:- CSS HTML JS

Title:- Holiday Feature Folding Cards [Pure CSS]Author:- Madalena
Made with:- CSS HTML JS

Title:- Info Cards Concept
Author:- Yancy Min
Made with:- CSS HTML JS

Title:- Animated Card Flip
Author:- Ana Travas
Made with:- CSS HTML JS

Title:- Pure CSS Card Carousel
Author:- Adam Kuhn
Made with:- CSS HTML JS

Title:- Daily UI #006 User Profile
Author:- Tobias
Made with:- CSS HTML JS

Title:- Spread – Messaging App
Author:- Mahmoud Aslan
Made with:- CSS HTML JS

Title:- Horizontal Scroll Cards
Author:- Ryan Mulligan
Made with:- CSS HTML JS

See the Pen Tariff Cards by Andreas Storm (@avstorm) on CodePen.

Title:- Tariff Cards
Author:- Andreas Storm
Made with:- CSS HTML JS

Title:- Flexy Product Cards
Author:- Jack Thomson
Made with:- CSS HTML JS

Title:- Dribble Mockup – Travel Homepage
Author:- miranda
Made with:- CSS HTML JS

Title:- MaterializeCSS Multi-Column Card Flow
Author:- Mike North
Made with:- CSS HTML JS

Title:- Payment card checkout
Author:- Simone Bernabè
Made with:- CSS HTML JS

Title:- Cards Against Developers(Tap to choose!) . #CodePenChallenge
Author:- Jhey
Made with:- CSS HTML JS

Title:- Flipping Cards
Author:- Shahid Shaikh
Made with:- CSS HTML JS

Similar Posts

10+ Animated rainbow text Effects

Check Out Best Animated rainbow text Effects Made With HTML CSS JAVASCRIPT See the Pen hairy rainbow text – pixi.js by Rachel Smith (@rachsmith) on CodePen. Title:- Rainbow text hover Author:- Sarah FossheimMade With:- HTML CSS JAVASCRIPT See the Pen Rainbow text hover animation by Sarah Fossheim (@fossheim) on CodePen. Title:- Rainbow text hover animationAuthor:-…

20+ CSS Neon Text Effects

Check Out Best Handpicked 20+ CSS Neon Text Effects Made With HTML CSS See the Pen CSS-only shimmering neon text by Giana (@giana) on CodePen. Title:- CSS-only shimmering neon textAuthor:- GianaMade With:- HTML CSS JAVASCRIPT See the Pen Neon Text Effect by Matt Smith (@AllThingsSmitty) on CodePen. Title:- Neon Text EffectAuthor:- Matt SmithMade With:- HTML…

30+ Ultimate Collection of CSS Border Styles for Web Designers

Even the most experienced programmers may find debugging CSS to be a difficult task. This article will provide you with time-saving and workflow-enhancing advice on how to debug CSS borders like an expert. Title:- over.cssAuthor:- Ian LunnMade With:- HTML CSS JAVASCRIPT See the Pen CSS Border transitions by Giana (@giana) on CodePen. Title:- CSS Border…

A collection of 30+ stunning CSS magazine designs from CodePen

Be inspired by 30+ CSS magazine designs from CodePen, created by talented developers from around the world. Title:- open-magazine-layout: CSS Grid Author:- trapti Made with:- HTML CSS JS Title:- Trump TIME – Editable Donald Trump magazine cover Author:- Matt Brothers Made with:- HTML CSS JS Title:- Responsive magazine layout Author:- Mark Made with:- HTML CSS…

CSS Digital Clock Animation | CSS Clock – GS CODE

CSS3 Working Clock This is a pure-CSS3 clock. It uses CSS animations and shapes, without any images or JavaScript. Author Ilia Made With HTML,CSS Demo Check Out Demo Links Download Digital Clock with Vue.js Author Toshiyuki TAKAHASHI Made With HTML,CSS(SCSS),JS Demo Check Out Demo Links Download 30+ Best CSS tooltip Example You Can Use In…

Latest 50+ CSS Toggle Switches Example For Students With Source Code

The latest CSS Toggle Switches topics and ideas 2021 with source We provide Toggle Switches with source code for making website See the Pen Pure CSS Toggles by Rafael González (@rgg) on CodePen. Title:- Pure CSS TogglesAuthor:- Rafael GonzálezMade With:- HTML CSS JAVASCRIPT See the Pen CSS Theme Switcher by Michelle Barker (@michellebarker) on CodePen….

Источник