layui 颜色设计感

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

颜色设计感的优点:

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

常用颜色:

img_b234277f2926e579587749e561baf4f3.png

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

场景色:

img_452393353ee44b67973406b0a9daa2df.png

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

及简中性色:

img_8e64faa48c782d150a5f318127f15bf6.png

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

内置的背景色CSS类:

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

极客大全

目录
相关文章
|
5月前
|
前端开发
翻转视角:CSS让卡片设计在网页上活起来!
翻转视角:CSS让卡片设计在网页上活起来!
|
5月前
|
前端开发 UED
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
设计新潮流:CSS动画毛玻璃按钮,展开效果引人入胜!
|
5月前
|
前端开发 搜索推荐 容器
创意按钮,触手可及:CSS不规则形状效果揭秘!
创意按钮,触手可及:CSS不规则形状效果揭秘!
|
7月前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`<html>`、`<head>`、`<body>`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
76 0
|
8月前
|
前端开发 JavaScript UED
【专栏:交互与用户体验篇】CSS 滚动效果与视差滚动
【4月更文挑战第30天】本文探讨了CSS滚动效果和视差滚动在提升网页用户体验中的作用。CSS滚动效果通过`transition`和`animation`属性实现元素动态变化,包括平滑滚动、元素跟随和滚动触发动画。视差滚动则利用不同元素滚动速度差异营造立体感,适用于长页面设计、故事讲述和创意展示。实现方法包括纯CSS和结合JavaScript。这些效果能增强吸引力、提升沉浸感并引导用户注意力,但需注意性能优化、适度使用和兼容性测试。案例分析展示了它们在实际项目中的应用和影响。
93 2
|
8月前
|
前端开发 JavaScript API
|
8月前
|
前端开发 UED
CSS一些冷门但优化用户体验的样式属性
CSS一些冷门但优化用户体验的样式属性
47 1
|
前端开发
web前端-css中最直观的反馈-伪类及伪元素选择器的使用
web前端-css中最直观的反馈-伪类及伪元素选择器的使用
115 0
|
前端开发 JavaScript
SVG + 动画 实现一个有个性的404页面
我正在参加 码上掘金体验活动,详情:[show出你的创意代码块],我们的博客网站有时候 404页面比较普通,我们可以通过SVG 加动画来实现一个有个性的页面。
211 0
|
Web App开发 JSON 前端开发
【问题归纳】前端开发问题集 | css 设置div宽高比1:2 下
【问题归纳】前端开发问题集 | css 设置div宽高比1:2
281 0
【问题归纳】前端开发问题集 | css 设置div宽高比1:2 下