卡片样式 html源码,这个彩色卡片样式，可以自定义颜色！

原标题：这个彩色卡片样式，可以自定义颜色！

大家好，我是老沙。新的一周又来送教程啦。

每周老沙都会送上与排版、运营有关的各种干货，并及时更新到i排版公众号的菜单栏里。所以，哪天你错过了某篇干货文章，或者想再看几遍，按照如图所示的位置便能找到。

上周老沙曾教大家制作 文字彩色背景(戳蓝字可直接查看)，教程中涉及到代码，有些小伙伴被样式吸引，转眼又被代码劝退。其实，大可不必。

老沙的教程凡是涉及到代码的，基本上粘贴复制即可，最多改改里面的一些数值。代码的原理也会给大家讲一讲，简单易懂，对于看教程的小伙伴来说，不需要有任何会代码的基础。所以，如果你觉得玩法合自己心意，看到代码，也请放心“食用”。

嘿嘿，比如今天，一份「彩色背景卡片」的教程。不仅文字背景可以变色，你还可以设置彩色渐变的卡片。下面的例子，便是通过代码实现。

下面，来看具体步骤：

教程

打开i排版(iPaiban.com)编辑器，点击工具栏上的 HTML 按钮，将以下代码粘贴进去。

效果如图：

此时背景已经添加好了，点击 HTML 按钮，回到编辑器页面，便可以添加编辑文字了。

根据文字的多少，调整代码中height的数值(如图所示)，可以增长缩短卡片的长度。

调整代码中的颜色色值(如图所示)，就可以改变渐变卡片的颜色。渐变颜色多于2种的话，直接在后面增加相应的色值即可，中间用英文逗号隔开。

使用

这种彩色背景卡片，比较适用于一些时尚、活泼风格的公众号。可以放在文章开头，用作引言背景。

引言：身边好多姐妹一到冬天，皮肤就从混油变混干，干皮变沙漠干皮。

另外，当我们制作一篇风格鲜明的排版，却又找不到合适的卡片样式时，利用「彩色背景卡片」可以随意变换颜色的特性，或许可以满足我们的风格需求。比如春节大红渐变：

春节

如果 代码中height 的数值足够大，它还可以用作全文背景。

教程已经掌握，那配色怎么办呢？一文中老沙推荐了两个实用的渐变色网站，这里再给大家放上，同时附有应用方法。

渐变色网站

1.WebGradients.com

WebGradients 是一个设计师们经常需要用到的 UI 背景渐变颜色组合，可轻松复制颜色代码到 CSS 里，同时还支持 PSD 和 PNG 版本。

2.uiGradients.com

uiGradients 不仅可以点击页面左右侧的箭头，更换渐变色，还可以选择包含某种特定颜色的渐变色。

这两个网站的渐变色要怎么应用在代码中呢？

我们以第二个网站 uiGradients 为例。

1.点击复制网页中渐变色顶端的色号。

2.在i排版(iPaiban.com)编辑器中 HTML 界面，刚刚添加的代码中，找到设置颜色的色值。

3.把默认色值替换成复制网页的颜色代码就行了。

效果如下：

更多彩色卡片示例：

责任编辑：