创建css内容卡的10个免费代码片段

CSS内容卡是组织博客文章、产品、服务或任何重复内容列表的好方法。当设计良好的时候，每张卡片都能从列表中脱颖而出，很容易阅读。使用诸如悬浮状态和图像过滤器等附加效果可以进一步增强功能。

这里有10张CSS内容卡，既美观又实用。最棒的是，你可以使用源代码来激发自己的项目。

See the Pen Material Design – Responsive card

这些卡片的特点是谷歌的材料设计原则，并具有华丽的互动性。点击“汉堡包”菜单，就会显示出一个漂亮的动画，在这个动画里，照片会缩小，内容也会显示出来。认为它有点像传统交易的在线版本的名片。

See the Pen Google Now Inspired Flip Cards

受到谷歌现在个人助理的信息的启发，每张卡片上都有一个戏剧性的落选效果，并在点击或触摸时“翻转”，以显示更多内容。

See the Pen Parallax Depth Cards

设计师在寻找真正独特的东西，将会爱上Andy Merskin的创作。在这些照片卡上悬停将会导致他们改变的视角，与你的光标位置的视差滚动效果。文本内容也同时显示。这是令人惊叹的。

See the Pen Product Card

当谈到在线产品目录时，简单的通常更好。这就是这种产品的漂亮简单的例子。需要更多的细节吗?悬停显示大小和颜色信息。其结果是一个非常优雅的用户界面。

See the Pen Article News Card

对于一个新闻或博客为中心的网站，这个卡设计提供了一切你想要的组织良好的格式。类别、日期/时间、评论、标题和足够的照片空间都有。悬停也揭示了一个故事的摘录。

See the Pen Blog Cards

我们已经习惯了用垂直的方式看到卡片。这也是为什么看到Chyno Deluxe的水平布局如此引人注目的原因之一。另一个原因是它们看起来很神奇。设计很好地组合在一起，有角度的照片边缘添加了一种优雅的效果。悬浮在照片上方，显示更多的内容。

See the Pen Material Design: Profile Card

我非常喜欢设计的细节，而这种材料设计风格的卡片也有它的魅力。这张照片周围的光边框给它带来了额外的关注。根据屏幕大小，卡片将在水平和垂直布局之间切换。整体布局非常简单明了——就像一张个人资料卡应该是什么样子。

See the Pen News Cards – CSS only

这张卡片的设计功能齐全，美观，不需要任何JavaScript。其中的任何一个看起来都很适合展示博客文章。如果你真的想把重点放在有特色的图片上，那么右边的全尺寸照片是完美的。

See the Pen Flexbox Cards

这种布局的优点之一是它可以很好地适应多行标题。所以我们经常被迫把标题剪成不自然的长度，这给了我们更多的自由。除此之外，这个纯CSS的设计很有吸引力而且很容易让用户跟随。

See the Pen Recipe Card

这种食谱卡片的布局肯定会让人流口水。它比这篇综述中的大多数卡片要宽一些，它是展示更多内容的完美尺寸。图标的使用增加了索引卡的外观。

在卡片里

虽然CSS内容卡为你的布局提供了一个高水平的组织，但它们也提供了一些额外创造力的机会。你会发现很多例子所示利用悬停和点击状态为了分享更多详细信息和展示一些令人难以置信的特殊效果。这样的话，它们比你第一眼看到的要灵活得多。

花些时间去尝试上面的卡片布局——他们甚至可能激发你设计自己的设计。他们会给用户一个有趣的、有趣的方式来与你的内容互动。