搭建一个网站,虽然布局第一、颜色其次。但颜色的搭配在用户视觉体验中确实最重要的元素。网页的色彩也是树立网站形象的关键之一。作为一个优秀、专业的网页设计师,首先要了解各种颜色的象征,以及不同类型网站常用的色彩搭配。色彩搭配看似复杂,但并不神秘。一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。色彩是人的视觉最敏感的东西。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。
笔者上一篇博客 《如何在命令行中显示五彩斑斓的“黑”》,讲到了任何编程都可以在命令行终端打印彩色字体和彩色背景的文字,以及一些简单文本格式(粗体,下划线,闪烁,反转背景色,隐藏),并给出了 python 语言的实现。为了让前端开发的同学也能快速使用这一功能,在自己的项目中输出漂亮的日志,笔者用 js 重写了一遍,并发布到 github 和 npm 。读者可以到 github 查看源码,项目地址:https://github.com/kenblikylee/colorconsole,也可以直接 npm 安装使用。
首先,要区分照度和亮度,照度是一个客观的量,亮度是一个主观的量,不同的人看相同照度的物体所感受到的亮度是不一样的。对于照度线性变化的物体,人眼感受到的亮度不是线性的。人眼对于低照度的物体更敏感,这意味着对于照度为2、3、4的三个物体,人眼能够区分,而对于照度为222、223、224的三个物体,人眼不能区分。
大家好,本篇文章,笔者将给大家聊聊关于设计方面的一些常识,你也许会很奇怪的问,前端工程师有必要了解设计相关的常识吗?那我的答案就是十分有必要。因为我们这个工作岗位做的产品直接面向使用用户,因此用户直观的感受决定着产品的好与坏,其中设计的展现就是给用户的第一印象。为了保证产品的质量,你就避免不了和相关工作岗位的人直接沟通,比如产品经理,设计师,后端工程师等等。
html要求: <body onload="draw('canvas');"> body这里的onload一定要写,在这个处理模式下,是在body这里执行加载页面完成后加载canvas的命令。有的写在了js中的window.onload=function(){},这里就要换一种写法了。(其实实现方法是多种多样的,重在理解原理。) <canvas id="canvas" width="523" height="523">这里可以填写文字(譬如:您的浏览器不支持canvas),仅用于当canvas不运行时显示的
很有意思的问题,我们在百度谷歌,搜索 qrcode,能搜到非常多在线制作二维码的工具,它们其中一些也会带有制作渐变二维码的功能。但是它们大部分都是 Canvas 或者其它编程语言实现的。
CSS(层叠样式表)是一个强大的工具,可以让开发人员设计出漂亮的网页。在今天这篇本文章中,我们将分享10个 CSS 高级技巧,它们可以将你的网页设计技能提升到一个新的水平。
CSS attr() 函数允许开发人员检索样式表中HTML属性的值。在下面的示例中,我使用 attr() 函数使用其 data-value 属性来显示 span HTML 元素的 ::after 伪类的文本内容。
颜色需要有自身的意义。不同的颜色表示不同的分组,相近的颜色表示同一个分组;配色需要展现数据逻辑关系,突出关键数据,比如重要的数据用深色或暖色表示,不重要的数据用浅色或冷色表示。
色深用 2 的幂指数来表示,bit 数愈高,色深值便愈高,影像所能表现的色彩也愈多。
将彩色图片转换成黑白图片是自己拿到的第一个小任务。在全文开始之前给自己科普一个公式:
最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。
(3)一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg"
最近看了一下百度的热力图,通过百度地图,确实是一个实时大数据渲染的一个形象表达形式,正好借这个机会学习一下,刚买的机械键盘,发现有两个好处:每天不写点代码(或调试),感觉对不起这价钱啊,估计我之前买的所有键盘+鼠标花费总和都不如这个键盘贵;其次就是控制自己不再吃零食了,怕掉进键盘里心疼啊。 好了,热力图还是相对比较容易,我们主要讨论如下3+1点吧,主要是前三部分,后面只是简单分析一下百度热力图和个人的简单看法。热点图的实现参考了SuperMap的热点图和百度Echarts的热点图实现。 原理 实现 优化 百
(1)使用2个canvas 一个是背景圆环,一个是彩色圆环。 (2)使用setInterval 让彩色圆环逐步绘制。
今天无意中看到一个可视化作品: WHAT MADE ME? INTERACTIVE PUBLIC INSTALLATION Most Original Exhibit Award at the Bi
colorBar主要是指一些图像处理中使用的常见纯色或者渐变色条。colorBar用途可作为测试样图来验证某些图像算法的效果,从而避免图像内容或者硬件对图像的干扰,使图像算法能够达到预期效果。colorBar常见类型如下:
之前在《使用GDAL实现DEM的地貌晕渲图(一)》和《使用GDAL实现DEM的地貌晕渲图(二)》这两篇文章中详细介绍了DEM生成地貌晕渲图的原理与实现。不过之前生成的都是晕渲强度值对应的灰度图,而实际的应用过程中都会将DEM晕渲成彩色图。
红外成像的最终目的是用图像来表现温度变化,并且可以通过颜色来区分出不同热量的物体轮廓和形状。那么,到底用什么颜色来表示什么温度呢?是否有什么标准规范呢?
在项目开发中,我们可以通过创造有趣的动画来为我们的项目增加视觉感与用户体验,同时,也为我们的网站增添了独特的美感,而且还提高了用户参与度并创造了令人难忘的第一印象。
如果想成为一名优秀的 UI 设计师,必须学会如何以一种吸引人的方式将文本放置于图像之上。每个优秀的 UI 设计师在这个方面都能做得很好,相反的糟糕的 UI 设计师都处理的很差,或者根本不处理。不管你是优秀还是平庸的设计师,阅读这篇文章后,多多少少对你都有帮助。
2、该模式是根据原有图像像素采用一套内部的公式,转化为灰度,越黑代表黑色浓度越高,越白代表黑色浓度越低。
苹果在2019年6月发布的iOS13中增加了“黑暗模式”,用户打开“黑暗模式”后,应用界面将会变为深色,随后Google Android 10的发布同样搭载“黑暗模式”。为了适配系统,不少APP纷纷推出了深色模式。
本期责编:Sophie 文 | Samantha Zhang 来源 | GRAPHIQ 摘要:虽然如今好的配色方案已经唾手可得,但为数据可视化找到合适的配色方案,却仍是一项巨大挑战。 在Graphiq,事情甚至更加棘手,因为我们要通过上千种各不相同的数据集合来传递信息,它们有着各自迥异的视觉表现。 目前的问题 我们没有立刻开始建立自己的配色表,而是发起了一些调查,研究网络上已存在的配色方案。令人惊讶的是,我们发现其中只有少数是为复杂的图表和数据可视化而设计的。我们发现一些不能使用现有配色的原因。 问题1:辨
小包在学习阮一峰大佬的《ES6入门教程》时,对文章顶部的阅读进度功能产生了浓厚的兴趣。小包当时猜想应该是使用 JavaScript 实现的,但最近爱上了浩如烟海的 CSS ,于是小包有个大胆的想法,单纯的 CSS 能实现阅读进度功能吗?
background-image:linear-gradient(angle,color,color);
| 导语 CSS 未来标准圆锥渐变,介绍它的各种用法,使用它完成不可思议的美妙图形。 感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性。 conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟: linear-gradient : 线性渐变 radial-gradient : 径向渐变 说这两个应该还是有很多人了解并且使用过的。CSS3 新增的线性渐变及径向渐变给 CSS 世界带来了很大的变化。 而 conic-gradient
之前发表过一篇关于视错觉的文章:《视错觉:从一个看似简单的自定义控件说起》,虽然不是用iOS开发中的Mask来实现的,但是原理和Mask原理是一样的,相当于手动给上面一层加了个Mask。当然用mask完全可以实现上篇博客中的效果,无论是使用Mask还是不使用Mask,都是利用了视错觉,都是两层不一样的视图进行叠加而成的。今天这篇博客是视错觉Demo的升级版,上篇博客发表后,好多小伙伴说使用Mask实现会更容易,其实使用Mask和之前的原理是一样的。今天我们这篇博客就使用Mask来实现视错觉的效果,并给出不使
前言 说起动画H5,作为一个前端,可谓是“又爱又恨”。爱的是加上动画动效后H5会变得生动有趣,吸引力Max;恨的是做动画时都是一边在脑海中yy效果,一边用css、js代码模拟出来,既低效又
感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性。 conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟: linear-grad
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源
网页色彩的使用方式有很多。而我认为,但凡用一件东西,懂得其原理肯定大有裨益。网页色彩也不例外。现在就来死抠一下网页色彩的究竟吧。
不管学什么,这种学习的动力,要么是欲望,要么是痛苦。今天有一个同学问我,学习JS半个多月,依然是不会写JS,怎么办?我回答ta说,这多正常啊,如果那么容易就学会,这工作就不这么值钱了。一般会问这类问题的人,我觉得要么是欲望不够大,要么就是痛苦不够深。否则上天入地也得学会它。 学习这事,从来不是单独某一个动作,或是一个结果。它是一种状态,是多个动作的连续,是对目标的多角度理解和观察。在付出相当的时间之后,在这种状态下,这些连续的动作会有一个结果,这就是你学会了某种技能。 上面这段话的意思是说,在我的理解中,学
当我们需要用更直观有效的形式来展现各类大数据信息时,热力图无疑是一种很好的方式。作为一种密度图,热力图一般使用具备显著颜色差异的方式来呈现数据效果,热力图中亮色一般代表事件发生频率较高或事物分布密度较大,暗色则反之。值得一提的是,热力图最终效果常常优于离散点的直接显示,可以在二维平面或者地图上直观地展现空间数据的疏密程度或频率高低。
今天想把之前在微信小程序开发过程中,制作的一个圆形进度条做成一个组件,方便以后直接拿来用。
颜色的选择是创建有效图表的主要因素。一组好的颜色将突出您希望数据讲述的故事,糟糕的颜色会隐藏或分散可视化数据的目的。
今天我们来看看2019年的一些伟大的JavaScript动画库。在2002年左右,我们使用Flash来制作网络动画。而在2008年,由Flash制作的网站是非常受欢迎(Flash网页游戏风靡一时)。
PNG图像格式介绍: PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG’s Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可 存储多到16位的α通道数据
文章来源:https://www.88cto.com/article/XpuPdyTT
注:大多css没有提供可以直接引用的链接,大家可以自行创建css,然后放到博客目录进行引用。
前一段时间一直在做富文本展示和文本处理,主要用到了Html.fromHtml()实现加载网页,但实现整段文本的某些特殊如个别文字的点击,改背景色、前景色等效果,就用到了我们今天要用到的Span这个类。
如何搭建数据可视化系统,用丰富的设计语言清晰表达复杂和庞大数据,并形成鲜明的设计风格?我们把数据可视化的元素进行拆分并建立相应的规范体系。 图表设计 1. 图表基本类型 六种基本图表涵盖了大部分图表使用场景,也是做数据可视化最常用的图表类型: 柱状图 分类照片照片什么照片什么什么项目之间的比较; 饼图 构成即部分占总体的比例; 折线图 随时间变化的趋势; 条形图 分类照片照片什么照片什么什么项目之间的比较; 散点图 相关性或分布关系; 地图 区域之间的分类照片照片什么照片什么什么比较
把图像转为灰度图像的像素网格以及 x 和 y 的函数来处理以后,我们还需要学会如何利用这些信息,例如如何用图像信息来分离特定区域。
效果: 实现代码(需要引入jquery): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jq
二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图案表示二进制数据,被设备扫描后可获取其中所包含的信息。
渐变的主要因素是色标。色标是一种颜色及其出现位置的组合。一个渐变是由多个色标组成(至少两个)。
色彩几乎是所有设计体系中不可忽略的组成部分,而在网页设计中,色彩本身所发挥的作用并不单一,除了最基本的着色构成色彩搭配的作用之外,色彩能够通过对比创造视觉焦点,构建信息层次,影响用户情绪,甚至引导访客
之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结. 首先我觉得在学习任何知识之前必须要有一个明确的学习目标,
领取专属 10元无门槛券
手把手带您无忧上云