1. David Wu首页
  2. web前端
  3. CSS

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

CSS内容卡是组织博客文章,产品,服务列表或任何重复内容的绝佳方式。如果设计良好,每张卡都可以从列表中脱颖而出,并且易于阅读。使用悬停状态和图像过滤器等附加效果可以进一步增强事物。 这里有10个既美观又实用的CSS内容卡的例子。最重要的是,您将可以访问源代码以激发自己的项目。 材料设计 – 响应卡 这些卡采用 WP网站建设

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

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

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/11290

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注