CSS 小教程:在网格型选择工具上添加渐变背景

新年开始了,要努力,本博客开始 2024 年招商,欢迎各位想推广产品的老板投广告,目前定价 4800/年,亦可增加评测文章、教学文章配合,详情可与我联系。具体详情更新在 本站广告 2024 年招商


好几个月之前,我遇到这样一个需求:

这个东西叫作 Emotional Scale,是一大堆描述情绪的形容词,存在从积极到消极的渐进关系,老板希望我们用颜色给予它们比较明显的区分。于是我就想到这样一种表现方式:

  1. 用网格化来布局每个形容词
  2. 给它们添加从上至下的渐变背景
  3. 再让 ChatGPT 给每个形容词选一个 emoji

最后一项不用多说,直接丢给 ChatGPT 就行。这里重点说下前面两个。

网格化布局用 display:grid + grid-template-columns: repeat(N, minmax(0, 1fr)) 即可,其中 N 可以根据宽度调整成需要的列数。

接下来处理渐变。这里的难点在于,每个小格子是独立的,要维持统一的渐变比较困难。我想到两个方式:

  1. 画一个大的渐变背景,然后用 clip-path
  2. 通过计算的方式给每个小格子加渐变背景

后面我决定选择第二种方式。我总共有 38 个格子,一行 4 个的话,就是 10 行;有 6 个颜色,刚好每两行是一个过渡。于是一行就应该是 0 -> 50%,如何渐变一半呢?我尝试了一下,发现可以用 -100% 和 200% 来做。

于是我就配合 Vue 开发了这个组件:

<script lang="ts" setup>
function getBgColor(index: number): string {
const colors = ['#1B4397', '#648EF7', '#5DC264', '#FFAE43', '#F15146', '#b91c1c']; // 总共 6 个颜色
const start = index / 8 >> 0; // 8个=2行,就是两行完成两个颜色的过渡
const end = start + 1;
const line2 = index % 8 >= 4;

  // 借助 CSS 变量完成过渡效果
return `--tw-gradient-stops: ${colors[start]} ${line2 ? '-100%' : ''}, ${colors[end]} ${line2 ? '' : '200%'}`;
}
</script>

<template lang="pug">
  .grid.grid-cols-4.gap-2
label.flex.flex-col.justify-center.items-center.bg-base-100.rounded-3xl.w-full.aspect-square.cursor-pointer.bg-gradient-to-b(
v-for="([label, face], index) in todayDoingsScale"
class="hover:bg-base-200"
:style="getBgColor(index)"
:key="index"
@click="doSelect"
)
input.hidden(
type="radio"
name="feel"
:value="label"
v-model="score"
)
</template>

最终完成的效果就如同上面截图所示。

CSS 作为前端开发的必备技能,搞起来别有一番乐趣。新特性不断被添加进来,就有越来越多的功能可以实现,有越来越多的功能可以更容易的实现。相信我们下一步的开发环境和产品体验会更好。

如果各位读者对上面的 CSS 实现有什么问题,或者有其它关于 CSS 的问题,欢迎留言提问。

如果您觉得文章内容对您有用,不妨支持我创作更多有价值的分享:


已发布

分类

来自

评论

发表回复

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据