layui 颜色设计感

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

颜色设计感的优点:

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

常用颜色:

img_b234277f2926e579587749e561baf4f3.png

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

场景色:

img_452393353ee44b67973406b0a9daa2df.png

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

及简中性色:

img_8e64faa48c782d150a5f318127f15bf6.png

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

内置的背景色CSS类:

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

极客大全

目录
相关文章
|
6月前
|
前端开发 UED
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
|
6月前
|
前端开发 搜索推荐 容器
创意按钮,触手可及:CSS不规则形状效果揭秘!
创意按钮,触手可及:CSS不规则形状效果揭秘!
|
6月前
|
前端开发
翻转视角:CSS让卡片设计在网页上活起来!
翻转视角:CSS让卡片设计在网页上活起来!
|
9月前
|
前端开发 UED
CSS一些冷门但优化用户体验的样式属性
CSS一些冷门但优化用户体验的样式属性
50 1
|
Web App开发 前端开发 JavaScript
css黏性定位-实现商城的分类滚动的标题吸附
css黏性定位-实现商城的分类滚动的标题吸附
132 0
|
前端开发
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
玻璃拟态是目前市面上的新风格,越来越受欢迎,新拟态 (Neumorphism) 模仿受到挤压的塑料材质,这种新的视觉风格更加注重垂直空间z轴的使用。它的典型特征是:
【我的前端】玻璃拟态效果实战开发:比毛玻璃更好看的CSS背景玻璃拟态效果
CSS3第五课 平角在渐变的基础上
CSS3第五课 平角在渐变的基础上
118 0
CSS3第五课 平角在渐变的基础上
|
编解码 前端开发 容器
举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效
喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的Logo环节做一个小特效:暗影流动之间光泽一闪而过,这样做不仅可以提高Logo的辨识度,还可以提升质感,一举两得。参照华纳兄弟影业(Warner Bros. Pictures)的例子
举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效
|
前端开发
脑洞大开:如何使用CSS实现自定义圆角虚线框
在CSS中,我们常用`border`来表示一个元素的边框样式,也可以使用`border`来绘制简单的分割线。最近遇到一个项目,需要用虚线来显示元素的边框。初步一看,这不很简单嘛,一行代码搞定`border: 1px dashed #ccc`。自我感觉良好,结果UI的同事直接提刀来了,“这是我想要的效果吗,我要的是……”。没办法,还是老老实实想办法解决自定义的虚线边框。
1020 1
脑洞大开:如何使用CSS实现自定义圆角虚线框
好客租房106-外观和样式调整
好客租房106-外观和样式调整
67 0
好客租房106-外观和样式调整