CSS系列（46）-- Color Functions详解
前端技术探索系列：CSS Color Functions详解 🎨
致读者：探索颜色函数的艺术 👋
前端开发者们，
今天我们将深入探讨 CSS Color Functions，这个强大的颜色处理特性。
基础函数 🚀
颜色空间
/* 基础颜色空间 */
.color-spaces {/* RGB空间 */color: rgb(255 0 0);color: rgba(255 0 0 / 0.5);/* HSL空间 */color: hsl(0 100% 50%);color: hsla(0 100% 50% / 0.5);/* LAB空间 */color: lab(50% 50 0);/* LCH空间 */color: lch(50% 50 0);/* OKLAB空间 */color: oklab(50% 0 0);
}/* 颜色转换 */
.color-convert {--brand-color: #ff0000;background: color(var(--brand-color) space hsl);border-color: color(var(--brand-color) space lab);
}
颜色操作
/* 颜色修改 */
.color-modify {/* 亮度调整 */color: color-mix(in lch, var(--color) 80%, white);/* 饱和度调整 */color: color(var(--color) saturation(150%));/* 色相旋转 */color: color(var(--color) hue(+ 180deg));/* 透明度 */color: color(var(--color) alpha(50%));
}/* 颜色混合 */
.color-blend {/* 基础混合 */background: color-mix(in srgb, #ff0000 50%, #0000ff);/* 空间混合 */background: color-mix(in lch, var(--color-1), var(--color-2));/* 渐变混合 */background: linear-gradient(to right,color-mix(in lch, var(--start) 0%, var(--end)),color-mix(in lch, var(--start) 100%, var(--end)));
}
高级特性 🎯
动态颜色
/* 相对颜色 */
.dynamic-colors {/* 亮度相对调整 */--lighter: color-mix(in lch, var(--base) 80%, white);--darker: color-mix(in lch, var(--base) 80%, black);/* 对比度保证 */--text-color: color-contrast(var(--background-color)vswhite, black);/* 互补色 */--complement: color(var(--base) hue(+ 180deg));
}/* 颜色系统 */
.color-system {/* 主色调变体 */--primary-100: color-mix(in lch, var(--primary) 10%, white);--primary-200: color-mix(in lch, var(--primary) 20%, white);--primary-300: color-mix(in lch, var(--primary) 30%, white);--primary-400: color-mix(in lch, var(--primary) 40%, white);--primary-500: var(--primary);--primary-600: color-mix(in lch, var(--primary) 20%, black);--primary-700: color-mix(in lch, var(--primary) 40%, black);--primary-800: color-mix(in lch, var(--primary) 60%, black);--primary-900: color-mix(in lch, var(--primary) 80%, black);
}
主题系统
/* 主题定义 */
.theme-system {/* 亮色主题 */&[data-theme="light"] {--bg-color: oklch(98% 0 0);--text-color: oklch(20% 0 0);--primary-color: oklch(60% 0.2 250);/* 自动对比度调整 */--accent-color: color-contrast(var(--bg-color)vsoklch(60% 0.2 250),oklch(50% 0.2 250));}/* 暗色主题 */&[data-theme="dark"] {--bg-color: oklch(20% 0 0);--text-color: oklch(95% 0 0);--primary-color: oklch(70% 0.2 250);/* 自动对比度调整 */--accent-color: color-contrast(var(--bg-color)vsoklch(70% 0.2 250),oklch(80% 0.2 250));}
}
实际应用 💫
按钮组件
/* 按钮颜色系统 */
.button-system {/* 基础按钮 */--button-bg: var(--primary-color);--button-text: color-contrast(var(--button-bg)vswhite, black);--button-hover: color-mix(in lch, var(--button-bg) 90%, black);--button-active: color-mix(in lch, var(--button-bg) 80%, black);background: var(--button-bg);color: var(--button-text);&:hover {background: var(--button-hover);}&:active {background: var(--button-active);}
}
卡片阴影
/* 动态阴影 */
.card {--shadow-color: color-mix(in oklab,var(--primary-color) 30%,rgb(0 0 0 / 20%));box-shadow: 0 2px 4px color(var(--shadow-color) alpha(10%)),0 4px 8px color(var(--shadow-color) alpha(20%));&:hover {box-shadow: 0 4px 8px color(var(--shadow-color) alpha(15%)),0 8px 16px color(var(--shadow-color) alpha(25%));}
}
性能优化 ⚡
计算优化
/* 缓存颜色 */
.optimized {/* 预计算颜色 */--cached-color: color-mix(in lch, var(--base) 80%, white);/* 重用计算结果 */background: var(--cached-color);border-color: color(var(--cached-color) alpha(50%));
}/* 条件计算 */
@media (prefers-color-scheme: dark) {:root {/* 仅在需要时计算 */--theme-color: color-mix(in lch, var(--base) 60%, black);}
}
最佳实践建议 💡
-
颜色管理
- 系统设计
- 变量组织
- 主题控制
- 对比度保证
-
性能考虑
- 计算缓存
- 选择器优化
- 渲染性能
- 降级方案
-
开发建议
- 语义化命名
- 文档规范
- 团队协作
- 维护性考虑
-
设计技巧
- 色彩和谐
- 可访问性
- 视觉层次
- 品牌统一
写在最后 🌟
CSS Color Functions为我们提供了强大的颜色处理能力，通过合理运用这一特性，我们可以构建出更加灵活和专业的颜色系统。
进一步学习资源 📚
- 颜色理论指南
- 主题设计模式
- 性能优化技巧
- 实战案例分析
如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇
终身学习，共同成长。
咱们下一期见
💻
相关文章：
CSS系列（46）-- Color Functions详解
前端技术探索系列：CSS Color Functions详解 🎨 致读者：探索颜色函数的艺术 👋 前端开发者们， 今天我们将深入探讨 CSS Color Functions，这个强大的颜色处理特性。 基础函数 🚀 颜色空间 /…...
MySQL数据库误删恢复_mysql 数据 误删
2、BigLog日志相关 2.1、检查biglog状态是否开启 声明: 当前为mysql版本5.7 当前为mysql版本5.7****当前为mysql版本5.7 2.1.1、Navicat工具执行 SHOW VARIABLES LIKE LOG_BIN%;OFF 是未开启状态，如果不是ON 开启状态需要开启为ON。{默认情况下就是关闭状态} 2.…...
ModiLeo交易平台：引领数字货币交易新未来
在当今数字化高速发展的时代，数字货币作为一种新兴的金融资产形式，正逐渐改变着全球金融格局。而此刻，由印度 ModiLeo 实验室联合全球顶级投行共同打造的全球领先的一站式数字货币交易平台——ModiLeo 即将上线，这无疑是数字货币领…...
57.插入区间 python
插入区间 题目题目描述示例 1：示例 2：提示： 题解解题思路python实现代码解释提交结果 题目 题目描述 给你一个 无重叠的 ，按照区间起始端点排序的区间列表 intervals，其中 intervals[i] [starti, endi] 表示第 i 个…...
使用WebRTC进行视频通信
一、WebRTC技术简介 什么是WebRTC？ 是一种支持浏览器之间实时音频、视频和数据传输的开放源代码项目。它允许开发者在不需要任何第三方插件或软件的情况下实现点对点的实时通信。WebRTC已经成为现代Web应用中的关键技术，为开发者提供了强大的工具和API…...
详细讲解axios封装与api接口封装管理
一、axios封装 axios是基于promise的http客户端，用于浏览器和nodejs发送http请求 ，对它进行封装主要是为了统一管理请求配置和处理请求和响应的通用逻辑等。以下是常用的封装逻辑和要点 1：引入axios相关依赖 首先引用项目中的axios库&…...
likeAdmin架构部署（踩坑后的部署流程
1、gitee下载 https://gitee.com/likeadmin/likeadmin_java.git 自己克隆 2、项目注意 Maven：>3.8 ❤️.9 (最好不要3.9已经试过失败 node ：node14 (不能是18 已经测试过包打不上去使用14的换源即可 JDK：JDK8 node 需要换源 npm c…...
算法-回文数判断
给你一个整数 x ，如果 x 是一个回文整数，返回 true ；否则，返回 false 。 回文数 是指正序（从左向右）和倒序（从右向左）读都是一样的整数。 例如，121 是回文，…...
力扣-数据结构-7【算法学习day.78】
前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向（例如想要掌握基础用法，该刷哪些题？建议灵神的题单和代码随想录）和记录自己的学习过程，我的解析也不会做的非常详细，只会提供思路和一些关…...
-- 指令系统·其一 指令的组成以及数据寻址方式/RISK和CISK)
计算机组成原理的学习笔记(8)-- 指令系统·其一 指令的组成以及数据寻址方式/RISK和CISK
学习笔记 前言 本文主要是对于b站尚硅谷的计算机组成原理的学习笔记，仅用于学习交流。 1. 指令 1.1 组成 操作码（Opcode）：指指令中执行特定操作的部分。地址码：指令中用于指定操作数位置的部分。 1.2 扩展操作…...
Hive刷分区MSCK
一、MSCK刷分区 我们平时通常是通过alter table add partition方式增加Hive的分区的，但有时候会通过HDFS put/cp命令或flink、flum程序往表目录下拷贝分区目录，如果目录多，需要执行多条alter语句，非常麻烦。Hive提供了一个"…...
2024年12月HarmonyOS应用开发者基础认证全新题库
注意事项：切记在考试之外的设备上打开题库进行搜索，防止切屏三次考试自动结束，题目是乱序，每次考试，选项的顺序都不同，如果有两台电脑设备建议一台打开题库一台考试，如果只有一台电脑设备建议手…...
集成方案 | Docusign + 蓝凌 EKP，打造一站式合同管理平台，实现无缝协作！
本文将详细介绍 Docusign 与蓝凌 EKP 的集成步骤及其效果，并通过实际应用场景来展示 Docusign 的强大集成能力，以证明 Docusign 集成功能的高效性和实用性。 在当今数字化办公环境中，企业对于提高工作效率和提升用户体验的需求日益迫切。蓝凌…...
centos7 免安装mysql5.7及配置（支持多个mysql）
一） 下载免安装包： mysql下载地址: https://dev.mysql.com/downloads/mysql/下载时，选择以前5.7版本： image 下载第一个TAR压缩包： image 二） 定义安装路径并解压安装包 1、假设需要把MySQL放到 /usr/local…...
【若依框架】代码生成详细教程，15分钟搭建Springboot+Vue3前后端分离项目，基于Mysql8数据库和Redis5，管理后台前端基于Vue3和Element Plus，开发小程序数据后台
今天我们来借助若依来快速的搭建一个基于springboot的Java管理后台，后台网页使用vue3和 Element Plus来快速搭建。这里我们可以借助若依自动生成Java和vue3代码，这就是若依的强大之处，即便你不会Java和vue开发，只要跟着石头哥也可…...
什么是容器？
什么是容器？ 容器是一种虚拟化技术，用于将应用程序及其所有依赖项打包在一起，以便在不同的计算环境中进行移植和运行。容器提供了一种隔离的运行环境，使不同应用程序能够在独立的文件系统、网络和进程空间等独立运行环境中运行&a…...
苍穹外卖——准备工作
模块介绍 后端的工程基于Maven进行项目构建，并且进行分模块开发，我们创建四个模块： sky-take-out：maven父工程，统一管理依赖版本，聚合其他子模块sky-common：子模块，存放公共类&…...
LLMs之o3：《Deliberative Alignment: Reasoning Enables Safer Language Models》翻译与解读
LLMs之o3：《Deliberative Alignment: Reasoning Enables Safer Language Models》翻译与解读 导读：2024年12月，这篇论文提出了一种名为“审慎式对齐 (Deliberative Alignment)”的新方法，旨在提高大型语言模型 (LLM) 的安全性。论…...
百度二面，MySQL 怎么做权重搜索？
考虑这样一个搜索需求，有一个 MySQL 表，表中很多个列存放着不同的内容，希望用户通过关键词进行搜索的时候，能够模糊匹配多个列，比如有 t1 列、t2 列、t3 列，同时还希望 t1 列的匹配权重最高，t3 …...
PHP：IntelliJ IDEA 配置 PHP 开发环境及导入PHP项目
在创建PHP项目之前我们需要安装PHP插件，安装步骤如下：Windows：IntelliJ IDEA Ultimate 安装 PHP 插件-CSDN博客 1、导入已有PHP项目，导入之后选择，File > Setting 选择对应CLL Interpreter，如果没有操作…...
国产数据库TiDB从入门到放弃教程
国家层面战略，安全的角度，硬件、软件国产化是趋势，鸿蒙电脑操作系统、鸿蒙手机操作系统…数据库也会慢慢国产化，国产数据库TiDB用起来比OceanBase丝滑，本身没有那么重。 从入门到放弃 1. 介绍1.1 TiDB 的主要特点1.2 T…...
Android 自定义控件
目录 Android 自定义控件 一、什么是自定义控件 二、创建自定义控件的常见方式 2.1继承现有控件（如 Button、TextView 等） 2.2直接继承 View 类 2.3组合控件 三、自定义控件的基本步骤 3.1创建一个继承自 View 或现有控件的类 3.2重写 onDraw()…...
学习笔记 --C#基础其他知识点（同步和异步）
C#中的同步和异步《一》 以下理解借鉴博客：借鉴博客地址1 异步编程（Asynchronous） 允许任务在后台执行，而不会阻塞调用线程。C#使用async和await关键字 async Task AsynchronousMethod() {// 等待异步操作完成await Task.Dela…...
药片缺陷检测数据集，8625张图片，使用YOLO，PASICAL VOC XML，COCO JSON格式标注，可识别药品是否有缺陷，是否完整
药片缺陷检测数据集，8625张图片，使用YOLO，PASICAL VOC XML，COCO JSON格式标注，可识别药品是否有缺陷，是否完整 有缺陷的标注信息： 无缺陷的标注信息 数据集下载： yolov11:https://d…...
Hive如何创建自定义函数（UDF）？
目录 1 自定义UDF函数基础 2 自定义UDF函数案例 3 创建临时函数 4 创建永久函数 1 自定义UDF函数基础 1. 内置函数：Hive 自带了一些函数...
深入理解MVCC：快照读与当前读的原理及实践
一、引言 MVCC是数据库系统中一种常见的并发控制技术，它允许多个事务同时对同一数据进行读取和修改，而不会相互干扰。在MVCC中，数据行存在多个版本，每个版本对应一个事务。本文将重点讨论MVCC中的两种读取方式：快照读…...
活动预告 |【Part1】Microsoft Azure 在线技术公开课：数据基础知识
课程介绍 参加“Azure 在线技术公开课：数据基础知识”活动，了解有关云环境和数据服务中核心数据库概念的基础知识。通过本次免费的介绍性活动，你将提升在关系数据、非关系数据、大数据和分析方面的技能。 活动时间：01 月 07 日…...
小程序笔记
1.小程序全局配置app.json {"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTit…...
linux安装nginxs报错：openssl not found
系统： linux 版本：centOS7 nginx版本：nginx-1.20.2 linux安装nginx时 执行下面命令时报错： ./configure --with-http_stub_status_module --with-http_ssl_module --prefix/usr/local/nginxchecking for OpenSSL library ... not …...
Vite内网ip访问，两种配置方式和修改端口号教程
目录 问题 两种解决方式 结果 总结 preview.host preview.port 问题 使用vite运行项目的时候，控制台会只出现127.0.0.1（localhost）本地地址访问项目。不可以通过公司内网ip访问，其他团队成员无法访问，这是因为没…...
地理数据库Telepg面试内容整理-如何在高并发情况下保证GIS服务的高可用性？
在高并发情况下，保证 GIS 服务的高可用性是一个重要的挑战，尤其是当空间数据量巨大、请求频繁时。为了确保 GIS 服务的高可用性和稳定性，需要考虑以下几个方面： 分布式架构设计 分布式架构通过将工作负载分配到多个服务器上，能够大大提高服务的可用性和扩展性。通过设计高…...
ES中查询中参数的解析
目录 query中参数match参数match_allmatch:匹配指定参数match_phrase query中其他的参数query_stringprefix前缀查询:wildcard通配符查询:range范围查询：fuzzy 查询: 组合查询bool参数mustmust_notshould条件 其他参数 query中参数 词条查询term:它仅匹配在给定字段…...
【Java 数据结构】合并两个有序链表
🔥博客主页🔥：【 坊钰_CSDN博客 】 欢迎各位点赞👍评论✍收藏⭐ 目录 1. 题目 2. 解析 3. 代码实现 4. 小结 1. 题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示…...
OpenCV-Python实战（8）——图像变换
一、缩放 cv2.resize() img cv2.resize(src*,dsize*,fx*,fy*,interpolation*) img：目标图像。 src：原始图像。 dsize：（width，height）图像大小。 fx、fy：可选参数，水平/垂直方向…...
深入浅出：从入门到精通大模型Prompt、SFT、RAG、Infer、Deploy、Agent
阅读原文 渐入佳境 我们都知道，通过编写一个提示词（prompt），我们可以引导大模型生成回答，从而开启愉快的人工智能对话，比如让模型介绍一下卡皮巴拉。上边简图描述了这个过程，我们拆成两部分 pr…...
GXUOJ-算法-第二次作业（矩阵连乘、最长公共子序列、0-1背包问题、带权区间调度）
1.矩阵连（链）乘 问题描述 GXUOJ | 矩阵连乘 代码解答 #include<bits/stdc.h> using namespace std;const int N50; int m[N][N]; int p[N]; int n;int main(){cin>>n;//m[i][j] 存储的是从第 i 个矩阵到第 j 个矩阵这一段矩阵链相乘的最小…...
生态碳汇涡度相关监测与通量数据分析实践技术应用
1.以涡度通量塔的高频观测数据为例，基于MATLAB开展上机操作： 2.涡度通量观测基本概况：观测技术方法、数据获取与预处理等 3.涡度通量数据质量控制：通量数据异常值识别与剔除等 4.涡度通量数据缺失插补：结合气象数据…...
使用OpenAI、LangChain、MongoDB构建一个AI agent
LangChain真是好起来了。24年中的时候用LangChain V2差点把我气死，现在V3用起来开始真香了~ 像 ChatGPT、Gemini 和 Claude 这样的大模型已成为企业必不可少的工具。如今，几乎每家公司都希望根据自己的需求或客户群体，开发一款定制化的AI Age…...
如何在 Ubuntu 22.04 上安装并开始使用 RabbitMQ
简介 消息代理是中间应用程序，在不同服务之间提供可靠和稳定的通信方面发挥着关键作用。它们可以将传入的请求存储在队列中，并逐个提供给接收服务。通过以这种方式解耦服务，你可以使其更具可扩展性和性能。 RabbitMQ 是一种流行的开源消息代…...
【ETCD】【实操篇（十九）】ETCD基准测试实战
目录 1. 设定性能基准要求2. 使用基准测试工具基准测试命令 3. 测试不同的负载和场景4. 监控集群性能5. 评估硬件和网络的影响6. 对比性能基准7. 负载均衡和容错能力测试8. 优化与调优9. 测试在高负载下的表现总结 1. 设定性能基准要求 首先，明确集群性能的目标&am…...
HTML——29. 音频引入二
<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>音频引入</title></head><body><!--audio:在网页中引入音频IE8以及之前版本不支持属性名和属性值一样，可以只写属性名src属性:指定音频文件…...
【SQLi_Labs】Basic Challenges
什么是人生？人生就是永不休止的奋斗！ Less-1 尝试添加’注入，发现报错 这里我们就可以直接发现报错的地方，直接将后面注释，然后使用 1’ order by 3%23 //得到列数为3 //这里用-1是为了查询一个不存在的id,好让第一…...
InnoDB存储引擎对MVCC的实现
多版本并发控制 (Multi-Version Concurrency Control) MVCC（Multi-Version Concurrency Control），即多版本并发控制，是一种并发控制方法，主要用于数据库管理系统中实现对数据库的并发访问。以下是MVCC的详细解释&#…...
3D线上艺术展：艺术与技术的完美融合
随着数字技术的飞速发展，未来的艺术展览正逐步迈向线上线下融合的新阶段。其中，3D线上展览以其独特的魅力，成为线下展览的延伸与拓展，为艺术爱好者们开辟了全新的观赏途径。 对于艺术家和策展人而言，3D线上展览不仅打…...
EasyExcel（读取操作和填充操作）
文章目录 1.准备Read.xlsx（具有两个sheet）2.读取第一个sheet中的数据1.模板2.方法3.结果 3.读取所有sheet中的数据1.模板2.方法3.结果 EasyExcel填充1.简单填充1.准备 Fill01.xlsx2.无模版3.方法4.结果 2.列表填充1.准备 Fill02.xlsx2.模板3.方法4.结果 …...
【CSS in Depth 2 精译_095】16.3：深入理解 CSS 动画（animation）的性能
当前内容所在位置（可进入专栏查看其他译好的章节内容） 第五部分 添加动效 ✔️【第 16 章 变换】 ✔️ 16.1 旋转、平移、缩放与倾斜 16.1.1 变换原点的更改16.1.2 多重变换的设置16.1.3 单个变换属性的设置 16.2 变换在动效中的应用 16.2.1 放大图标&am…...
目前最流行的 Rust Web 框架有哪些？
目前最流行的 Rust Web 框架有哪些？ 1. Actix Web：高性能之王，老牌框架 特点： 高性能：基于 Actor 模型，是目前 Rust 生态中最成熟、性能最强的 Web 框架之一。功能强大：支持 HTTP/1.x、HTTP/2、WebSocket 等，内置中间件和多种插件。社区支持广泛：拥有大量使用者，资料…...
连锁餐饮行业数据可视化分析方案
引言 随着连锁餐饮行业的迅速发展，市场竞争日益激烈。企业需要更加精准地把握运营状况、消费者需求和市场趋势，以制定科学合理的决策，提升竞争力和盈利能力。可视化数据分析可以帮助连锁餐饮企业整合多源数据，通过直观、动态的可…...
如何通过采购管理系统提升供应链协同效率？
供应链是企业运营的命脉，任何环节的延迟或失误都会对企业造成严重影响。在采购环节中，如何保证与供应商的协同效率，避免因信息不对称而导致的决策失误，是企业面临的一大挑战。采购管理系统作为数字化供应链管理的重要工具…...
1、Jmeter、jdk下载与安装
1、访问官网，点击下载Jmeter http://jmeter.apache.org/ 2、在等待期间，下载对应的Java https://www.oracle.com/cn/java/technologies/downloads/#jdk23-windows 3、全部下载好，先安装JDK ![在这里插入图片描述](https://i-blog.csdnimg…...