layui 颜色设计感

简介: 颜色设计感的优点:视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感,而 layui 提供的颜色,清新而不乏深沉,互相柔和,不过分刺激大脑皮层的神经反应,形成越久越耐看的微妙影像。

颜色设计感的优点:

视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感,而 layui 提供的颜色,清新而不乏深沉,互相柔和,不过分刺激大脑皮层的神经反应,形成越久越耐看的微妙影像。合理搭配,可与各式各样的网站避免违和,从而使你的 Web 平台看上去更为融洽。

常用颜色:

img_b234277f2926e579587749e561baf4f3.png

layui 主要是以象征包容的墨绿作为主色调,由于它给人以深沉感,所以通常会以浅黑色的作为其陪衬,又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳,整体让人清新自然,愈发耐看。【取色意义】:我们执着于务实,不盲目攀比,又始终不忘绽放活力。这正是 layui 所追求的价值。

场景色:

img_452393353ee44b67973406b0a9daa2df.png

事实上,layui 并非不敢去尝试一些亮丽的颜色,但许多情况下一个它可能并不是那么合适,所以我们把这些颜色归为“场景色”,即按照实际场景来呈现对应的颜色,比如你想给人以警觉感,可以尝试用上面的红色。他们一般会出现在 layui 的按钮、提示和修饰性元素,以及一些侧边元素上。

及简中性色:

img_8e64faa48c782d150a5f318127f15bf6.png

layui 认为灰色系代表极简,因为这是一种神奇的颜色,几乎可以与任何元素搭配,不易形成视觉疲劳,且永远不会过时。低调而优雅!

内置的背景色CSS类:

layui 内置了七种背景色,以便你用于各种元素中,如:徽章、分割线、导航等等
img_adc2a4f405490a732ec5f53090bc1252.png

极客大全

目录
相关文章
|
2月前
|
编解码 前端开发 JavaScript
|
1月前
|
前端开发 开发者 UED
CSS:塑造网页外观的艺术
CSS(层叠样式表)是前端开发的核心技术之一,它负责网页的样式设计和布局。通过CSS,开发者能够控制网页元素的外观、位置以及交互效果,从而打造出美观、易用的网页界面。本文将探讨CSS的基本概念、使用技巧以及在前端开发中的重要性。
|
12月前
|
前端开发
CSS 如何实现“咖啡墙错觉”效果?神奇~
CSS 如何实现“咖啡墙错觉”效果?神奇~
|
前端开发
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
玻璃拟态是目前市面上的新风格,越来越受欢迎,新拟态 (Neumorphism) 模仿受到挤压的塑料材质,这种新的视觉风格更加注重垂直空间z轴的使用。它的典型特征是:
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
|
Web App开发 前端开发 容器
CSS 还能这样玩?奇思妙想渐变的艺术
CSS 还能这样玩?奇思妙想渐变的艺术
115 0
CSS 还能这样玩?奇思妙想渐变的艺术
|
前端开发 算法
CSS奇思妙想 -- 使用 background 创造各种美妙的背景
CSS奇思妙想 -- 使用 background 创造各种美妙的背景
534 0
CSS奇思妙想 -- 使用 background 创造各种美妙的背景
|
前端开发 安全
仅使用 CSS 旋转制作八卦迷惑动画 🧘‍♀️
我之所以将其拿出来分享,一方面觉得它看起来比较酷,也像原作者所说的那样:看起来是个令人生畏的病毒,另一方面觉得作者的编码思路和代码值得了解学习下。
仅使用 CSS 旋转制作八卦迷惑动画 🧘‍♀️
|
前端开发 固态存储 JavaScript
【SSD系列】雪花飘,购物抛物线,进度条等四个案列,带入走进 CSS transition
Transition事件的触发次数是非复合的过渡属性的个数, 比如width, height同时变换,那么就是两次。 还比较有趣的事, 比如hover到某元素的时候,开始变换,没变换结束,你就离开。 变换效果会倒着来。上面的demo,就会看到。
133 0
【SSD系列】雪花飘,购物抛物线,进度条等四个案列,带入走进 CSS transition
|
前端开发 JavaScript 容器
如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1061 0
|
前端开发 容器 Web App开发
如何用纯 CSS 创作一个失落的人独自行走的动画
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
964 0