Что такое карточка? Это, как правило, html-блок, в котором есть заголовок, основной текст, кнопки или ссылки и картинка в виде изображения или фона. Ну, и, конечно, часто есть некая анимация, которая срабатывает при наведении на карточку, задавая некий визуальный или 3D-эффект (смена фона, увеличение картинки, переворот, изменение тени и т.п.).
Карточка может оформлять товар, билет, какие-то преимущества компании, даже отзывы, про своему виду могут быть карточками. Их можно использовать в слайдерах, блоках "Наша команда" или абсолютно самостоятельно.
Здесь вы найдете множество примеров, реализованных разными авторами на сайте codepen.io. Во вкладках HTML, CSS, JS можно скопировать код и использовать его в своем проекте. Надеюсь, что эти примеры вас вдохновят на создание собственных или станут отличной подсказкой в написании кода.
Для того чтобы посмотреть код на сайте, кликните на кнопку 
и внесите изменения, чтобы посмотреть на результат. Здесь вы найдете такие примеры:
- Простые карточки
- Горизонтальные карточки
- Карточки с товаром (Product Card)
- Градиенты и тени в карточках
- Анимация при наведении на карточку
- Использование 3D в карточках
- Использование карточек на html-странице
Простые карточки
Довольно стандартный вид карточки от Frank Benedik.
See the Pen Blog Card UI Template by Frank Benedik (@bajabenedik) on CodePen.
Минималистичные карточки с наложением и возможностью их просмотреть от Vanaja Kothai.
See the Pen Park Activities Toggle UI | Show/Hide Feature with HTML, CSS & JS by Vanaja Kothai (@Vanaja-Kothai)on CodePen.
Карточка с кнопкой для просмотра видео от Mason Fox.
See the Pen Video Course Card Concept by Mason Fox (@masonfox) on CodePen.
Карточка с рваными краями за счет SVG-фильтра от Chris Smith.
See the Pen Torn paper by Chris Smith (@BlogFire) on CodePen.
Карточки со смещенным изображением и текстом.
See the Pen Expanding card page transition effect by HTML-plus (@ambassador) on CodePen.
Горизонтальные карточки
Карточка товара (пиццы) от Elsharbatly.
See the Pen A Simple Flexbox Card by Elsharbatly (@ahmed-elsharbatly) on CodePen.
Карточка для курса/книги от Florin Pop.
See the Pen Course Card UI Design - #094 of #100Days100Projects by Florin Pop (@FlorinPop17) on CodePen.
Билетная карточка от Kia Skretteberg.
See the Pen Ticket Stub by Kia Skretteberg (@KiaSkretteberg) on CodePen.
Карточки с анимацией при наведении от Yancy Min.
See the Pen Info Cards Concept by Yancy Min (@yancy) on CodePen.
Карточки с товаром (Product Card)
Несколько примеров с кроссовками в качестве товаров.
Автор Ahmad Khan.
See the Pen Product Card by Nabeel Ahmad Khan (@nabeelahmadk) on CodePen.
Автор Muhammad Fatih Takey.
See the Pen Product Card TO Code by Muhammad Fatih Takey (@fatihtakey) on CodePen.
Автор iamevg.
See the Pen List of sneakers (cards of shop) by HTML-plus (@ambassador) on CodePen.
Автор amira.
See the Pen June challenge by amira (@amira1ayah) on CodePen.
Автор Graham.
See the Pen https://d13yacurqjgara.cloudfront.net/users/102697/screenshots/2129263/dribbble.png by Graham (@gthetwong) on CodePen.
Автор Jorge Mendes.
See the Pen Sneakers Shop Layout - Loop 21 by Jorge Mendes (@jorgemoovein-the-bashful) on CodePen.
Карточка с вином от Kirby Bukowski.
See the Pen Product Review Lightbox by Kirby Bukowski (@kirbybukowski) on CodePen.
И снова кроссовки с анимацией подъема вверх от seragshash.
See the Pen Shop layout by seragshash (@seragshash) on CodePen.
Похожий вариант, но в другой цветовой гамме от timmy.
See the Pen One day i will be done by timmy (@TIMMMYYYHHH) on CodePen.
Карточки с нарисованными кроссовками от ayush gupta.
See the Pen Sneaker Product Cards by ayush gupta (@ayushgptaa) on CodePen.
Интересный вариант от Kristen с border и border-radius, инвертированной внутрь.
See the Pen Cards with inverted border-radius #scss by Kristen (@kristen17) on CodePen.
Много пластинок от Hannah.
See the Pen Album Cover Gallery 2.0 by Hannah (@hluebbering) on CodePen.
Рваные края рамок ( Zig-Zag box) от Temani Afif.
See the Pen CSS-only Zig-Zag box by Temani Afif (@t_afif) on CodePen.
Градиенты и тени в карточках
Градиентные переходы и border от Kristen.
See the Pen Course design cards #scss by Kristen (@kristen17) on CodePen.
Эффект высвечивания карточек при прокрутке. Автор Jhey.
See the Pen CSS Scroll-Driven Glow Cards by Jhey (@jh3y) on CodePen.
Карточка профиля в стиле Tailwind CSS от Chris Bolson.
See the Pen [Tailwind] Glassy Profile by Chris Bolson (@cbolson) on CodePen.
Перетекающая граница с градиентом от Dan.
See the Pen Cards (gradient border) by Dan (@dtab428) on CodePen.
Анимация при наведении на карточку
Темный прямоугольник с информацией при наведении на карточку. Автор Anton Rikhnovets.
See the Pen #1584 - Image Hover by Anton Rikhnovets (@rikhnovets) on CodePen.
Course Card UI с фоном от автора Abhishek Dana.
See the Pen Course Card UI by Abhishek Dana (@abhishekdana) on CodePen.
Карточки для курсов с анимацией фона от Joel.
See the Pen Cards with background animation by Joel (@JL-web) on CodePen.
Карточка с перекрывающим фоном от lemon.
See the Pen Course-Product Card by lemon (@unseen-ninja) on CodePen.
Анимация с подъемом изображения от Muhammad Fadzrin Madu.
See the Pen Product Card UI Design using HTML and CSS by Muhammad Fadzrin Madu (@fadzrinmadu) on CodePen.
Аналогичный вариант от Mudassar Ahmad.
See the Pen Product Card by Mudassar Ahmad (@mewoma) on CodePen.
Перетекающий от карточки к карточке фоновый блок от Yudiz Solutions Limited .
See the Pen Card Mouse Hover Effect by Yudiz Solutions Limited (@yudizsolutions) on CodePen.
И еще один похожий вариант с перетекающим блоком от Jhey.
See the Pen Anchor Positioning :hover Cards by Jhey (@jh3y) on CodePen.
Настоящие карты от Delvigne Frédéric.
See the Pen lapisCordis | a greco-roman mythological card game by Delvigne Frédéric (@delvignefred) on CodePen.
Вариант с внутренней анимацией от CJ Gammon.
See the Pen AI13: GLSL Video Transition by CJ Gammon (@cjgammon) on CodePen.
Эффект размножающейся картинки при наведении на карточку-изображение. Автор Hyperplexed
See the Pen Hover Effect with image cards by HTML-plus (@ambassador) on CodePen.
Polaroid Cards от Manoj Silag.
See the Pen #hover Card Effect by Manoj Silag (@manojsilag) on CodePen.
Разъезжающиеся карточки-изображения. Автор Hyperplexed.
See the Pen Kippo Hover Card Effect by Hyperplexed (@Hyperplexed) on CodePen.
И карточка с видео от того же автора.
See the Pen Futuristic Card Effect by Hyperplexed (@Hyperplexed) on CodePen.
Карточки Error/Success от Julie Park с анимацией смайлов.
See the Pen Daily UI#011 | Flash Message (Error/Success) by Julie Park (@juliepark) on CodePen.
Использование 3D в карточках
В этом примере 3D используется внутри самой карточки, чтобы показать трехмерную модель. Автор Grzegorz Rogala. Для реализации был использован код three.js. Кроме того, здесь можно переключать тему карточек с темной на светлую за счет css-переменных.
See the Pen Responsive 3d Model Cards by Grzegorz Rogala (@grzegorz-rogala) on CodePen.
Flip-card (карточка с переворотом) от fail.
See the Pen #CodePenChallenge Interactive and Responsive Card with Space Theme by fail (@faelplg) on CodePen.
Слайдер изображений при перевороте карточки по клику на кнопке View Details от jayadul.
See the Pen Ecommerce Card by jayadul (@jayadul) on CodePen.
Открывающиеся карточки от Madalena.
Uh oh!
Something is wrong with your CodePen shortcode.
Даже не карточка, а открытка с разворотом от Hannah.
See the Pen Valentine's Card Flip by Hannah (@hluebbering) on CodePen.
Использование карточек на html-странице
Тут вы найдете примеры, где карточки являются уже составной частью html-страницы.
Автор Anas Mughal.
See the Pen CryptoLearn: The Next Generation - A Comprehensive Frontend Simulation by Anas Mughal (@Anas-Mughal-the-animator) on CodePen.
Карточки в админ-панели от того же автора.
See the Pen Untitled by Anas Mughal (@Anas-Mughal-the-animator) on CodePen.
Карточки с товаром. Автор Anas Mughal.
See the Pen Untitled by Anas Mughal (@Anas-Mughal-the-animator) on CodePen.
Карточки с прокручиваемы контентом от David.
See the Pen Shopping Layout incl. Lottie by David (@David_Germany) on CodePen.
Несколько вариантов карточек-изображений. Для отображения введите код 1234. Автор Hyperplexed.
See the Pen App Menu With Lock Screen by Hyperplexed (@Hyperplexed) on CodePen.
Карточки, как часть страницы. Автор Madalena.
See the Pen John Steinbeck Tribute Page by Madalena (@Maza-designDev) on CodePen.
