layui 颜色设计感

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

颜色设计感的优点:

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

常用颜色:

img_b234277f2926e579587749e561baf4f3.png

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

场景色:

img_452393353ee44b67973406b0a9daa2df.png

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

及简中性色:

img_8e64faa48c782d150a5f318127f15bf6.png

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

内置的背景色CSS类:

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

极客大全

目录
相关文章
|
1月前
|
前端开发 开发者 容器
【掰开揉碎】详解 CSS3 Grid 布局
【掰开揉碎】详解 CSS3 Grid 布局
|
2月前
|
前端开发
纯css实现的3D立体鸡蛋动画视觉效果
纯css实现的3D立体鸡蛋动画视觉效果
32 6
纯css实现的3D立体鸡蛋动画视觉效果
|
3月前
|
前端开发 JavaScript API
|
5月前
什么是瀑布流布局?瀑布流式布局的优缺点
什么是瀑布流布局?瀑布流式布局的优缺点
152 0
非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
|
10月前
swiper轮播图缩略图效果彩色到黑白的变化的解决方案
swiper轮播图缩略图效果彩色到黑白的变化的解决方案
56 0
|
编解码 前端开发 容器
举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效
喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的Logo环节做一个小特效:暗影流动之间光泽一闪而过,这样做不仅可以提高Logo的辨识度,还可以提升质感,一举两得。参照华纳兄弟影业(Warner Bros. Pictures)的例子
举重若轻流水行云,前端纯CSS3实现质感非凡的图片Logo鼠标悬停(hover)光泽一闪而过的光影特效
|
前端开发
脑洞大开:如何使用CSS实现自定义圆角虚线框
在CSS中,我们常用`border`来表示一个元素的边框样式,也可以使用`border`来绘制简单的分割线。最近遇到一个项目,需要用虚线来显示元素的边框。初步一看,这不很简单嘛,一行代码搞定`border: 1px dashed #ccc`。自我感觉良好,结果UI的同事直接提刀来了,“这是我想要的效果吗,我要的是……”。没办法,还是老老实实想办法解决自定义的虚线边框。
840 1
脑洞大开:如何使用CSS实现自定义圆角虚线框
|
前端开发 JavaScript
SVG + 动画 实现一个有个性的404页面
我正在参加 码上掘金体验活动,详情:[show出你的创意代码块],我们的博客网站有时候 404页面比较普通,我们可以通过SVG 加动画来实现一个有个性的页面。
162 0
|
前端开发 JavaScript
创意代码之图片悬停效果
自己也想写一个类似这种的特效,就是鼠标放图片上时图片会悬停,就是那种戳一下动一下的效果,本文会先分解实现的步骤,使用到知识点都会有案例,那么我们开始吧。
204 0
创意代码之图片悬停效果