”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 有趣的彩色 Codepen

有趣的彩色 Codepen

发布于2024-11-09
浏览:958

Fun Colorful Codepens

嗨,作为设计师,色彩对我来说真的很重要。

在过去的两年里,我收集并创建了一些调色板。但这不是今天帖子的主题。

今天我想分享一些我制作的有趣的彩色笔。

我们走吧…

(注意:其中一些可能在移动设备上不兼容。)


1. RGB 颜色滑块

对此我能说什么。首先,在我们进一步讨论之前,我应该说我使用 Microsoft Copilot 来帮助我了解 CSS 和 JS 的更多细节。

好的,这有哪些很酷的功能。使用滑块会立即更新页面背景颜色和 RGB 文本输入值。如果您想输入一个值而不是使用滑块,那么这可以双向工作。

2. 颜色计算器

谁不喜欢基本计算器?这个有一个很酷的功能,允许您在答案显示中键入或粘贴颜色十六进制代码来更改颜色!

3. JS随机调色板

说到调色板。这是一个随机调色板生成器。我创建这个只是为了好玩。我知道我经常使用人工智能来帮助我创建项目。但说到调色板,我不使用人工智能或随机调色板生成器。它可能有它的用例,但我的很多设计项目对我来说非常珍贵,我尝试对我使用的颜色有意识。

4. 黑白钟面

非常漂亮简单的鸡巴脸。会成为一个很棒的屏幕保护程序。单击可切换浅色和深色主题。

5.带有颜色主题选项的SunBible应用程序框架

这是我多年来致力于的一个项目。我从头开始构建了这个,并将其打包为带有 Electron 的桌面应用程序。您可以在 GitHub 上查看它的完整代码

6. ABC 的彩色动画无限快速滚动

谢谢您滚动到本文末尾。如果你喜欢滚动,我可以满足你的需求。

我很乐意在评论中与您联系。让我知道你喜欢什么,也许可以给我一个关于另一个有趣项目的想法。

版本声明 本文转载于:https://dev.to/nonresistantreally/colorful-fun-codepens-1o81?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • `useCallback` 与 `useMemo` 挂钩
    `useCallback` 与 `useMemo` 挂钩
    提升 React 性能:useCallback 与 useMemo Hooks React 的 useCallback 和 useMemo 挂钩对于优化应用程序的性能至关重要。了解何时以及如何使用它们可以使您避免不必要的重新渲染并确保您的应用程序顺利运行。在本文中,我们将深入研究有...
    编程 发布于2024-11-09
  • jQuery 如何简化 JSON 数据到 HTML 表的转换?
    jQuery 如何简化 JSON 数据到 HTML 表的转换?
    jQuery 的 JSON 到 HTML 表格转换的简化方法将 JSON 数组转换为 HTML 表格可能是一项繁琐的任务,但 jQuery 简化了这个过程要从 JSON 数组生成表,请使用 getJSON() 函数检索数据:$.getJSON(url , function(data) {接下来,创建...
    编程 发布于2024-11-09
  • 如何从 Node.js 中的大型 Firebase 数据集中高效地检索随机乘积?
    如何从 Node.js 中的大型 Firebase 数据集中高效地检索随机乘积?
    如何在 Node Firebase 中检索唯一的随机乘积?Firebase 提供灵活的数据结构,允许您以分层方式存储数据。在某些情况下,您可能拥有大量记录,但只需要一条唯一且随机的记录。本文将指导您通过两种方法在 Node Firebase 中实现此目的。经典方法:下载所有记录假设您的数据库结构类似...
    编程 发布于2024-11-09
  • PHP 中的 session_unset() 和 session_destroy() 有什么区别?
    PHP 中的 session_unset() 和 session_destroy() 有什么区别?
    深入探讨 PHP 中 session_unset() 和 session_destroy() 之间的区别使用 PHP 会话时,开发人员通常必须在函数 session_unset() 和 session_destroy()。尽管听起来相似,但这些函数表现出显着的差异。功能差异虽然这两个函数都会影响会话...
    编程 发布于2024-11-09
  • 如何在 JavaScript 中组合数组并同时存储唯一元素?
    如何在 JavaScript 中组合数组并同时存储唯一元素?
    在 JavaScript 中将数组与唯一元素组合要基于唯一项合并数组,您可以利用以下技术:var newCells = []; for (var i = 0; i < totalCells.length; i ) { var lineNumber = totalCells[i].li...
    编程 发布于2024-11-09
  • 将日期对象转换为时间戳时,一元加运算符有何作用?
    将日期对象转换为时间戳时,一元加运算符有何作用?
    Unary Plus:将日期对象转换为毫秒时间戳在 JavaScript 中,您可能会遇到类似于以下内容的代码:function fn() { return new Date; }此表达式返回表示当前时间的时间戳,而不是完整的 Date 对象。然而,加号 ( ) 的作用并不是立即显而易见。答案...
    编程 发布于2024-11-09
  • 如何消除 Mac 版 Chrome 中不需要的“过度滚动”?
    如何消除 Mac 版 Chrome 中不需要的“过度滚动”?
    克服网页中的“过度滚动”在 Mac 版 Chrome 中,“过度滚动”是一种不良效果,它允许用户将页面拖到其正常查看区域之外,如所提供的图像所示。要解决此问题并改善用户体验,请考虑以下两种方法:方法一:限制过度滚动如果要完全禁用过度滚动,请使用以下 CSS 代码:html { overflo...
    编程 发布于2024-11-09
  • ## 为什么 JQuery 的 `load()` 函数在不同浏览器中表现不同?
    ## 为什么 JQuery 的 `load()` 函数在不同浏览器中表现不同?
    Jquery load() 跨浏览器的不一致在尝试深入研究 JQuery 和 AJAX 时,开发人员可能会遇到一个特殊的问题,其中 load( ) 函数在不同浏览器中表现出不一致的行为。具体来说,在提供的代码片段中,load()函数用于将list1.html的内容附加到index.html上id为“...
    编程 发布于2024-11-09
  • 为什么我在 Go 中收到“语法错误:Else 之前出现意外的分号”?
    为什么我在 Go 中收到“语法错误:Else 之前出现意外的分号”?
    Go 中 Else 之前意外的分号:详细解释你的 Go 代码在第 21 行遇到异常错误:“syntax error:unexpected其他之前的分号或换行符。”尽管你这么说,但仔细检查发现,这一行的“else”语句之前确实有一个分号(;)。这里的核心问题源于Go的自动分号插入规则。通常,Go 中分...
    编程 发布于2024-11-09
  • 如何防止 Apache 缓存 CSS 文件并确保显示最新版本?
    如何防止 Apache 缓存 CSS 文件并确保显示最新版本?
    使用 Apache 防止服务器端 CSS 文件缓存开发网站时,确保访问者访问最新版本至关重要用于防止缓存问题的 CSS 文件。本文解决了 Apache 是否缓存资源的问题,并提供了防止其这样做的解决方案,特别是遇到尽管重新加载页面但 CSS 更改未反映在浏览器中的场景时。是Apache 真的会缓存资...
    编程 发布于2024-11-09
  • 您应该使用哪种 MySQL 整数数据类型?
    您应该使用哪种 MySQL 整数数据类型?
    了解 MySQL 整数数据类型之间的差异MySQL 提供了一系列整数数据类型,它们的存储要求和值范围各不相同。这些类型包括tinyint、smallint、mediumint、bigint 和int。了解它们之间的区别对于为您的特定数据需求选择适当的数据类型至关重要。数据大小和范围注意事项这些数据类...
    编程 发布于2024-11-09
  • 为什么我在 JavaScript 中的输入值为空?
    为什么我在 JavaScript 中的输入值为空?
    输入值和变量存储:为什么会陷入空困境?当尝试使用 JavaScript 从输入字段检索值时,开发人员经常遇到如果数据存储在变量中,则为空值。这个令人费解的问题可能源于 Web 开发的异步特性以及浏览器执行代码的方式。在 JavaScript 中,执行脚本时会检索输入字段的初始值。如果稍后在 HTML...
    编程 发布于2024-11-09
  • 如何使用 RequestAnimationFrame 来稳定动画的帧速率 (FPS)?
    如何使用 RequestAnimationFrame 来稳定动画的帧速率 (FPS)?
    RequestAnimationFrame Fps 稳定RequestAnimationFrame (rAF) 已在动画中变得流行,可提供流畅且高效的执行。然而,控制帧速率 (FPS) 以确保一致性可能具有挑战性。将 rAF 限制为特定 FPS要将 rAF 限制为特定 FPS,您可以自上一帧执行以来...
    编程 发布于2024-11-09
  • 适合初学者的关键 Python 术语
    适合初学者的关键 Python 术语
    您是否曾经在与程序员交谈时,因不熟悉的行话而感到茫然?或者,也许您是 Python 编程的初学者,并且遇到了某些您不完全理解的术语。学习Python中使用的常用术语不仅可以帮助你更专业地解释你的代码,还可以让你更轻松地跟上讨论。本文通过简单的解释、用例和示例探讨了基本的 Python 术语,以帮助您...
    编程 发布于2024-11-09
  • 使用 Puppeteer 生成 PDF 之前如何确保页面完成?
    使用 Puppeteer 生成 PDF 之前如何确保页面完成?
    使用 Puppeteer 生成 PDF:等待页面完成使用 Puppeteer 从网页创建 PDF 时,等待页面完全加载以确保完整性至关重要以及生成文档的准确性。让我们深入研究如何在不诉诸手动延迟的情况下实现此目的。page.waitForNavigation() 方法提供了一种可靠的方法来等待页面导...
    编程 发布于2024-11-09

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3