网站建设过程中可以用到的10个用于创建CSS内容卡的免费代码片段

CSS内容卡是组织博客文章，产品，服务列表或任何重复内容的绝佳方式。如果设计良好，每张卡都可以从列表中脱颖而出，并且易于阅读。使用悬停状态和图像过滤器等附加效果可以进一步增强事物。

这里有10个既美观又实用的CSS内容卡的例子。最重要的是，您将可以访问源代码以激发自己的项目。

材料设计 – 响应卡

这些卡采用Google的Material Design原则，并且具有华丽的互动性。点击汉堡包菜单可以创建一个光滑的动画，其中照片会缩小并显示详细的内容。想想它有点像传统交易卡的在线版本。

请参阅 David Foliti的笔材质设计 – 响应卡。

Google Now Inspired Flip Cards

受到Google Now个人助理中共享的信息的启发，每张卡都具有戏剧性的投影效果，并在点击或触摸时“翻转”以显示更多内容。

通过Ettrics查看Pen Now In Flip Cards。

视差深度卡

设计师寻找真正独特的东西，将会爱上Andy Merskin的创作。将鼠标悬停在这些照片卡上会导致其视角变化，视差滚动效果与您的光标位置相关。文本内容也同时显示。这一个只是惊人的。

请参阅 Andy Merskin的Pen Parallax Depth Cards。

产品卡

谈到在线产品列表，简单通常会更好。这种产品卡的美观简单就是这种情况。需要更多细节？悬停显示尺寸和颜色信息。结果是一个非常优雅的用户界面。

请参阅 Virgil Pana的Pen Product Card。

文章新闻卡

对于专注于新闻或博客的网站，此卡片设计以精心组织的形式提供您所需的一切。类别，日期/时间，评论，标题和大量的照片空间都在那里。悬停也揭示了一个故事摘录。

请参阅 Andy Tran的钢笔文章新闻卡片。

博客卡

我们习惯于以垂直格式看卡片。这就是为什么看到Chyno Deluxe的水平布局如此惊人的原因之一。另一个原因是他们看起来很神奇。设计非常完美，倾斜的照片边缘增添了优雅的效果。悬停可以在照片上方显示更多内容。

请参阅 Chyno Deluxe的Pen Blog Cards。

材料设计：配置文件卡

我是设计上的微妙风扇，而这种材质设计档案卡有其特点。照片周围的光线边缘只是给它带来了额外的注意力。根据屏幕大小，卡将在水平和垂直布局之间切换。总体布局非常简单直接 – 简介卡应该是什么样的。

请参阅 Emil Devantie Brockdorff的笔材质设计：配置文件卡。

新闻卡 – 仅限CSS

此卡设计功能强大，美观，不需要任何JavaScript。包含的任何一种外观都可以很好地展示博客文章。如果你真的想专注于特色图片，右侧的全尺寸照片版本是完美的。

请参阅Pen News Card – 仅由Aleksandar Cugurovic提供的 CSS。

Flexbox卡

这种布局的一个很好的方面是它适应多行标题。所以我们经常会被迫将标题修剪到一个不自然的长度，这给了我们更多的自由。除此之外，这种纯粹的CSS设计很有吸引力，用户很容易遵循。

请参阅 Lindsey的Pen Flexbox卡。

食谱卡

这个食谱卡布局肯定会得到一些嘴巴浇水。比本次综述中看到的大多数牌稍宽一些，这是展示更多内容的完美尺寸。图标的使用增加了索引卡的外观。

请参阅 Kevin Lesht的Pen Recipe Card。

它在卡片中

尽管CSS内容卡为您的布局提供了高度的组织性，但它们还提供了一些额外创意的机会。您会注意到，此处显示的许多示例都利用悬停和点击状态来分享更详细的信息并展示一些令人难以置信的特殊效果。这样，它们比第一眼看到的要灵活得多。

花一些时间来试验上面的卡片布局 – 他们甚至可能会鼓舞你想出一些你自己的设计。他们会为用户提供一种视觉上有趣且有趣的方式来与您的内容进行互动。