首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Material Design Lite ,简洁惊艳的前端工具箱

在每个调色板中,色调为500的颜色为基准色,其他颜色是基准色在不同色调(50-900, A100-700) 下的表现。 在右边的示例代码中,我们绘制了Material Design完整的调色板集。...下面的示例选择indigo调色板中的三个色调(100、500和700),从pink 调色板中选择色调A200作为强调色: ? 2....工具栏和状态栏 工具栏和大色块应当使用调色板中色调为500的颜色为基准色。状态栏应当选择 调色板中比基准色略深的色调为700的颜色。...在下面的示例中,左图的工具栏和右图的大色块,使用了indigo调色板中的色调 500的基准色;而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色: ? 4....使用强调色 在大色块上绝对不要使用强调色,对动作按钮、开关或滑动条之类的组件应当使用强调色: ?

1.4K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Material Design Lite,简洁惊艳的前端工具箱

    在每个调色板中,色调为500的颜色为基准色,其他颜色是基准色在不同色调(50-900, A100-700) 下的表现。 在右边的示例代码中,我们绘制了Material Design完整的调色板集。...下面的示例选择indigo调色板中的三个色调(100、500和700),从pink 调色板中选择色调A200作为强调色: 2....工具栏和状态栏 工具栏和大色块应当使用调色板中色调为500的颜色为基准色。状态栏应当选择 调色板中比基准色略深的色调为700的颜色。...在下面的示例中,左图的工具栏和右图的大色块,使用了indigo调色板中的色调 500的基准色;而两幅图顶端的状态栏则使用了indigo调色板中的色调700的深色: 4....使用强调色 在大色块上绝对不要使用强调色,对动作按钮、开关或滑动条之类的组件应当使用强调色: 五、图标/Icon Google提供了适用于Material Design的图标字体,我们可以直接在前端样式表中使用

    1.1K10

    进阶渲染系列(一)——平坦和线框着色(导数和几何体)

    理想情况下,可以使用自定义材质 在一个单一的pass下,对任何网格进行平面着色和线框渲染。要创建这种材质,需要一个新的着色器。我们将使用“渲染”系列第20部分中的最终着色器作为基础。...在顶点程序中,我们只能访问单独的存储在网格中的顶点数据。除非它们有明确设计过,用来表示三角形的法线,否则此处存储的法线向量对我们没有用。在片段程序中,我们只能访问插值的顶点法线。...这是通过特殊指令完成的,该指令告诉我们屏幕空间X或Y维度中任何数据片段在片段之间的变化率。 例如,我们当前片段的世界位置是 p 0 。屏幕空间X维度中下一个片段的位置是 p X 像素。...为什么几何程序看起来如此不同? Unity的着色器语法是CG和HLSL代码的混合体。通常看起来像CG,但现在,它类似于HLSL。...这可以通过将三角形的重心坐标添加到插值数据中来完成。 什么是重心坐标? 三角形具有三个分量的坐标。每个分量沿一个边为0,在与该边相对的顶点为1,在这两个边之间线性过渡。这些坐标也用于插值顶点数据。

    2.7K21

    《Unity Shader入门精要》笔记:基础篇(1)

    在大部分书籍中总会有一些通病,作者总会下意识或者想当然的以为读者会对一些专有名词有详尽的了解,实则不然。例如本书开篇就提到的片元,采样,插值。...---- 目录 渲染流水线 额外补充 Unity Shader基础 额外补充 渲染流水线 (本篇部分内容在HLSL的笔记中也有所提及) 什么是渲染流水线:传送门 CPU和GPU之间的通信:1、把数据加载到显存中...---- Unity Shader基础 在Unity中Shader需要配合材质(Material)和Unity Shader一起使用,流程为 1、创建材质,Unity Shader 2、把Unity Shader...Tip:Unity Shader和渲染管线中的Shader有很大区别,在阅读时请区分两者,具体内容会在之后表述。...在Unity中,CG和HLSL语法从写法上基本一直。所以在Unity中CG基本等价HLSL。

    1.2K20

    篆刻刻刀如何选择?不要选择哪些刻刀?

    篆刻刻刀都是平刃刀,没有选择尖角或斜角的,因为篆刻是用 90 度的刀角刻印的,并不是用刀尖刻印的。 在了解如何选择刻刀之前,我们需要先细致看一下篆刻的分类。...第三种选择是某宝上匠人自制的白钢或钨钢刻刀。 例如下面这款 6mm、刃度 22 度的双坡度白钢刻刀,长度 16cm 左右,价格仅 30 左右,已经相当实惠了,还是包邮的。...不要选择什么样的刻刀? 下面说一下哪些篆刻刀不要选择。 首先,圆头刻刀不要选择! 刻刀治印用的是刀角,圆角刻刀没有刀角怎么刻印? 刃面不平的不要选择!...在磨制之前,首先明确一下工具,你需要一个金刚磨盘,和一个刻刀定角器。 为什么一定要使用金刚磨盘?...对于没有开刃的刻刀,或者钎子,如果没有定角器,根本是没有办法磨制的。 在购买刻刀的时候,如果有方杆的,就不要选择圆杆的。为什么?圆杆不是更不易硌手吗?

    5.5K10

    【图像上色小综述】生成对抗网络的GAN法

    0,图像上色及其分类 图像上色一般分为两种:无引导上色和有引导上色。...本文将残差U-net集成到带有辅助分类器的生成对抗网络(AC-GAN)中,以完成动漫草图上色任务。 ? 该方法属于有引导的图像上色方法。 ?...上图网络结构中,使用了预训练的VGG网络提取”全局风格提示“来辅助训练。对于照片着色、阴影、材质和纹理是输入中的变量,网络可依据提示信息分析颜色分布。...这些方法避开了传统的计算机图形渲染流程,而是通过从大量照片(例如人脸或卧室)中学习来生成像素级别的图像。但是,由于用户难以控制网络产生的内容,作者这些方法的用途有限。...本文提出了一种以草图和稀疏的笔画为条件,生成逼真的汽车、卧室或面孔。 ?

    2K20

    腾讯文档 - 色彩系统应用篇

    前言 在《腾讯文档-构建科学有效的色彩系统》这篇文章中,我们阐述了腾讯文档如何升级了新的品牌色,为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和品牌认知,以及如何构建一个科学有效的调色板。...如果在不同的主题下(例如浅色/深色模式)button有不同的颜色表现,颜色变量Fill-01可以在不同主题下,映射不同的十六进制色值。这就是我们建设协同工作流的基础逻辑。...腾讯文档的界面中,灰色系列占主导地位,起着至关重要的作用,为产品界面创造结构、表达边界、建立信息层次。在调色板中,我们选择了两种灰色:中性灰色和蓝灰色,来支撑系统的设计。...品类图标基准色: 在腾讯文档中,不同的品类有不同的基准色。 Part 4 颜色变量的语义化命名 定义了颜色在系统设计中的使用规则后,我们需要根据颜色变量的使用用途对其进行语义化命名。...在需要更明确的用途说明的任务中,直接描述其用途,例如:hover,pressed、disabled等。

    1.6K31

    OBJ 3D模型格式介绍

    有字的行都由一两个标记字母也就是关键字(Keyword)开头,关键字可以说明这一行是什么样的数据。 多行可以逻辑地连接在一起表示一行,方法是在每一行最后添加一个连接符()。...1开始,一个面由三个顶点组成,所以有三个顶点序号和纹理序号 mtl 文件格式 mtl记录了纹理的一些配置信息,主要有: newmtl *: 创建一个材质,材质名为*,对应obj中的usemtl * ka...有字的行都由一两个标记字母也就是关键字(Keyword)开头,关键字可以说明这一行是什么样的数据。 多行可以逻辑地连接在一起表示一行,方法是在每一行最后添加一个连接符 ()。...例如上面的 Obj 文件中,我们需要解析顶点位置,纹理坐标等数据,构成 OpenGL 可以渲染的 Mesh 对象。 obj 文件在导出时一般包括两个文件 .obj 文件和 .mtl 文件和贴图图像。...最终每个三角面的颜色,是由构成这个三角面的三个顶点进行插值计算(有例如:一个三角面其中两个顶点对应的纹理坐标是黑色的,另外一个是白色,那整个面呈现的颜色是由黑变白渐变,而不是三个颜色值的平均值。

    47910

    Material小结

    Blinn-Phong OpenGL中渲染会使用Blinn-Phong: 其中 , , 是材质对应的颜色, 是光线 在法线 对应的反射, 和 是对应的光源和环境光。...首先是MERL 100 BRDF材质库,如上图,显示两个不同材质同一点在不同的入射角和反射角之间变化效果,比如左上角高光部分,对应我们水平观察物体的边缘。 针对不同的材质,这样的观察结果有很多。...这里仅总结了主要的三个BRDF模型,现实世界要比模型复杂的多,我们没有介绍isotropic和anisotropic之间的区别,以及各类差异很大的材质,毛发或participating media,次表面等内容...假设对一个点测试,MERL 100假设材质是isotropic,这样只需要关心 和 相对的方位角,因此是一个三维 ,以90*90*180插值来检测。...就是入射角和反射角相同,方向相反,这样只有一个维度需要测量,极大的提高了测量的效率。

    96140

    程序员看过都说好的资源网站,你懂得!

    色彩对视觉有刺激作用,在视觉传达设计中常常具有先声夺人的力量,这就是人们常说的设计的视觉冲击力的主要体现吧。“远看色彩近看花”、“七分颜色三分花”正说明色彩极易引起人的情感反应与变化。...人的视觉对于色彩的特殊敏感性,决定了色彩设计在包装视觉传达中的重要价值。...picjumbo相片皆为高解析度、无浮水印或广告,可自由使用在个人或商业用途,无需标示出处来源,如果你想支持喜欢的摄影师可透过网站的赞助功能。...网站:http://wefunction.com/ 4、Pexels   最好的免费图片和视频,免费素材照片,可以在任何地方使用。✓ 免费用于商业用途, ✓ 无需注明归属。...mcgpalette0=%233f51b5 7、Material UI Colors   Material UI Colors是一个材质UI颜色,调色板材料设计网站。

    5.3K10

    借助 Material You 动态配色丰富您的应用

    在本篇文章中,我们将为您展示更多有关 Material You 动态配色的内容,包括动态配色是什么,以及如何在您的应用中实现它。 如果您更喜欢通过视频了解此内容,请 点击此处 查看。...那么,什么是动态配色?Android 12 可以通过动态配色提取算法来选择颜色值,基于动态配色,您可根据用户的桌面壁纸颜色生成自定义调色板。动态的浅、深色方案可体现在整个用户系统界面,以及某些应用中。...△ 在界面中使用 Token Token 可以有多种类型,它可以与某个值配对或引用另一个 Token。在使用了 M3 后,我们就有了调色板、色彩引用和系统 Token 三个概念。...如下图所示,您可在左侧输入品牌的关键颜色,每种颜色都会分配到相应的关键颜色角色,具体情况视其在界面中的用途而定。...您可添加一个切换开关,以便用户在动态或自定义的主题背景之间进行切换,这两种方案都提供了深色和浅色两种方案供用户选择。 您可以有选择地应用动态配色,并与品牌配色方案同时生效。

    2.7K30

    基础渲染系列(二)——着色器

    现在,我们的着色属性应显示在着色器检查器的“properties”部分中。 ? (着色器属性) 选择材质后,你将看到新的“Tint ”属性,设置为白色。你可以将其更改为任何喜欢的颜色,例如绿色。 ?...Unity球体在极点附近只有几个三角形,其中UV坐标变形最大。因此,UV坐标在顶点之间非线性地变化,但是在顶点之间,它们的变化是线性的。结果,纹理中的直线突然在三角形边界处改变了方向。 ?...这些额外的纹理数据存储在材质中,也可以由着色器访问。你可以通过与关联材质具有相同名称的变量加上_ST后缀来执行此操作。此变量的类型必须为float4。 _ST是什么意思?...它存储在变量的XY部分中。要使用它,只需将其与UV坐标相乘即可。这可以在顶点着色器或片段着色器中完成。在顶点着色器中执行此操作很有意义,因此我们仅对每个顶点执行乘法,而不是对每个片段执行乘法。 ?...(有mipmap和没有mipmap) 那么应该在哪里使用了哪个mipmap级别呢?它们看起来有什么不同?我们可以通过在高级纹理设置中启用Fadeout Mip Maps 来使过渡可见。

    4.4K20

    OpenGL API 简介

    颜色、光照和材质的函数: 如设置颜色模式函数 glColor*()、glIndex*(),设置光照效果的函数 glLight*() 、glLightModel*()和设置材质效果函数glMaterial...在跨平台的编程实例和演示中,aux 很大程度上已经被 glut 库取代。OpenGL 中的辅助库不能在所有的 OpenGL 平台上运行。...这部分函数主要用于连接 OpenGL 和 Windows ,以弥补 OpenGL 在文本方面的不足。Windows 专用库只能用于 Windows 环境中。...例如,后缀 WIN 表明一个符合 Windows 规范的扩展,EXT或 ARB 后缀表明该扩展由多个卖主定义。...glColorMaterial 使一个材质色彩指向当前的色彩 glColorPointer 定义一列色彩 glColorTableEXT 定义目的一个调色板纹理的调色板的格式和尺寸 glColorSubTableEXT

    2.4K41

    SceneKit 场景编辑器-为您的AR体验构建3D舞台

    它可以是颜色或图像。它也是整个表面上光线的直接反射。我们也将漫反射贴图称为纹理。例如,飞船的漫反射图像设置为texture.png。您可以在飞船场景下查看该图像。...镜面之后的地球 正常 法线是为光滑表面增加粗糙度,在3D中给出更多真实物体的错觉。例如,您可以在男士的脸上为石头或胡须添加粗糙的外观。至于地球,法线贴图决定了山脉的位置。...转到“ 材质”检查器,在“ 属性”部分中,将“ 着色”更改为“ Blinn”。然后,单击“ 漫反射”。在调色板窗口的底部,有一个颜色选择器图标。...在此之前,让我们将视图更改为Front并倾斜大小写以从大约45度角的轮廓中查看它。现在,转到对象库并添加全向灯,它将从该光源的每个方向照亮场景。在场景的左上角添加一个,在右下角添加另一个。...因此,请从对象库中添加它。 管子尺寸 管子有2个半径,一个内部和一个外部。在“ 属性”检查器中,将“ 内半径”更改为2.3,将“ 外半径”更改为2.5。该高度也将是2.5。

    6.3K20

    用Three.js建模

    在Three.js中,一个可见的物体是由几何体和材料构成的。在这个教程中,我们将学习如何从头开始创建新的网格几何体,研究Three.js为处理几何对象和材质所提供的相关支持。...三角面的材质索引是一个整数,表示所使用的材质在材质数组中的索引。BoxGeometry的面具备正确的索引。请注意,一个Box几何体有 12 个面,因为每个矩形侧面需要被拆分成两个三角面。...构成矩形侧面的两个三角面具有相同的材质索引。 假设我们希望在金字塔的每一个侧面使用上面创建的不同材质。要使之发挥作用,每个面都需要一个材质索引,该索引存储在名为MaterialIndex的属性中。...然后,就可以在对象上使用普通材质,而不是一系列材质。但你也必须告诉材质使用几何体的颜色代替材质的color属性。 有几种方法可以将颜色分配给网格中的面。一是简单地将每个面设置为不同的纯色。...属性tex.repeat在水平和垂直方向上提供纹理缩放。例如: tex.repeat.set(2,3); 将横向和垂直扩展 2 倍和 3 倍的纹理坐标。

    7.9K02

    科普:零基础了解3D游戏开发

    这两种坐标系没有好或不好,都应用的都比较广泛,比如Unity等引擎采用的是左手坐标系,LayaAir等引擎采用的是右手坐标系。所以我们有必要理解什么是左手坐标系与右手坐标系,以及两者的区别。...之所以把三角面视为最基本的多边形,其中一个重要原因是,由三个点构成的三角面一定是在同一个平面上,而四个或更多点构成的多边形在三维空间中,不一定会在同一个平面上。...而网格( Mesh)则是由一个三角面或多个三角面拼接形成,是构建模型形状的基础。...它在每个顶点上调用,可将几何图形(例如:三角形)从一个位置转换为另一个位置, 例如,用于顶点变换、纹理坐标生成、 纹理坐标变换等等。 片段着色器用来计算和填充每个像素的颜色,所以也称为像素着色器。...十一、3D基础的常用数学概念 在之前的10个小节中,我们已经可以对3D游戏和图形开发,有了一个基础的概念性认知。最后简单介绍一些3D数学的基础常用概念。

    9.7K52

    机械人必备,丝锥选型、断裂分析大全

    直槽丝锥,它通用性最强,通孔或不通孔、有色金属或黑色金属均可加工,价格也最便宜。但是针对性也较差,什么都可做,什么都不是做得最好。切削锥部分可以有2、4、6牙,短锥用于不通孔,长锥用于通孔。...由于螺旋角的缘故,丝锥实际切削前角会随螺旋角增大而加大。经验告诉我们:加工黑色金属的,螺旋角选的小一点,一般在30度左右,保证螺旋齿的强度。...例如,丝锥截面过渡处尺寸差别太大或没有设计过渡圆角导致应力集中,使用时易在应力集中处发生断裂。...建议根据丝锥的种类及攻件材质的不同选择正确的底孔直径,如果没有完全符合的钻头可以选择大一级的。  5.攻件材质问题:   攻件材质不纯,局部有过硬点或气孔,导致丝锥瞬间失去平衡而折断。  ...攻丝开始时,丝锥起步定位不正确,即主轴轴线与底孔的中心线不同心,在攻丝过程中扭矩过大,这是丝锥折断的主要原因。

    1.3K10

    最新iOS设计规范八|3大图标和图像规范(Icons and Images)

    将8位调色板用于不需要全24位颜色的PNG图形。使用8位调色板可以减小文件大小,而不会降低图像质量。此调色板不适用于照片。 优化JPEG文件以在大小和质量之间找到平衡。...您无需在整个图标中填充内容。 仅在必不可少的徽标或徽标的一部分时使用单词。应用程序的名称显示在主屏幕上其图标下方。请勿使用不必要的词来重复名称或告诉别人如何处理您的应用,例如“观看”或“播放”。...不要包含照片,屏幕截图或界面元素。小尺寸的照片细节可能很难看清。屏幕截图对于应用程序图标而言过于复杂,通常无法帮助传达应用程序的用途。图标中的界面元素具有误导性和混乱性。...当你的APP在iOS 12或更早版本中运行时,请按照以下指南操作。 系统提供内置图标,表示各种用例中的常见任务和内容类型。...导航栏和工具栏图标 在导航栏和工具栏中使用以下图标。 注:可以使用文本代替图标来表示导航栏或工具栏中的项目。例如:日历在工具栏中使用“今日”、“日历”和“收件箱”。

    3.4K20
    领券