首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

深色主题的色彩应该足以覆盖整个深色主题的UI界面,包括: 色彩(主色、次要色以及色彩变体) 界面主体(背景控件) 状态呈现(比如报错状态) 内容呈现(字体排版图像) ?...容器底色使用基准色而文本使用白色的时候,被启用、悬停、长按、按下拖动的不同状态。 ? 容器底色使用基准色而文本使用主色的时候,被启用、悬停、长按、按下拖动的不同状态。...不同的状态下,叠加层的不透明度的状态各不相同,正常状态下是未叠加,其他状态下的叠加透明度则从4%到12%不等。 ? 底部容器使用半透明主色的时候,被启用、悬停、长按、按下拖动的不同状态。 ?...底部容器使用主色的时候,被启用、悬停、长按、按下拖动的不同状态。...禁用状态 所有的被禁用的组件,都使用不透明度为 12% 的白色用来呈现外轮廓填充色,并使用不透明度为 38% 的白色来显示文本表层的内容。 ?

9.5K10

为你的网页添加深色模式

我们使用 span 标签应用颜色,并用它来突出显示文本中的内容。...应用自定义属性 现在定义了一些可以CSS中使用的自定义属性。我们将从正文开始,并应用背景和文本颜色。为了使用自定义属性,我们用了 var(--custom-property-name)语法。...完全控制 自定义属性使我们可以完全控制选择自己的颜色其他属性。能够对页面容器上的边框阴影进行更新,使其使用深色模式不太透明。索引我们需要为页面阴影创建一个新的自定义属性。...应用阴影 现在我们已经有了另一个自定义属性,接下来需要将它应用于页面上正确的元素。然后覆盖root元素中的值,以降低透明度。...创建按钮悬停样式 使用相同的变量,还可以创建可用于两个主题的悬停样式。为了实现这一点,当用户将鼠标悬停在按钮上并转换这些属性,我们将反转颜色。

1.6K30

Sketch 94 mac,草图94中文最新版支持M1,支持macOS Ventura 13

新的面板组按类型覆盖,使您可以轻松地查看更改符号实例中的颜色、图像文本图层样式——一次完成。我们还改进了实例中显示嵌套符号的方式——现在应该感觉更整洁了。...将鼠标悬停文本层上,按T,单击它并输入。您现在可以像使用任何其他图层一样隐藏显示嵌套符号 - 点击退格键将隐藏嵌套符号而不是删除它。...它现在使用应用程序的强调色,更容易看到选定的图层(特别是选择多个形状画板)。Symbol 实例中的选定图层现在在其角上显示 X 标记更粗的边框,以将它们与普通图层区分开来。...深入研究符号,您会在检查器中找到您的选择覆盖的定制列表。层列表现在显示符号中的每个层(而不仅仅是那些应用了样式的层)——继续并更改不是符号或未应用任何样式的层的属性。...修复了使用选定的画板将图像拖放到画布上会忽略您放置它的位置的问题。修复了如果叠加层是自动链接目标,则叠加层预览无法正确显示的问题。修复了一个错误,如果交互文本层上,您将无法画布周围移动叠加层。

10.9K70

Adobe Photoshop 2022 v23.5.2 ACR15 中文一键安装版 X64

悬停功能可预览选择并轻易地为图像生知识兔产蒙版;互操作性重大提升,知识兔将内容粘贴到 Photoshop 可用 Illustrator;分享文件以收集查看反馈;知识兔新增 Neural Filters...以改变创建新风景;知识兔协调图层光线、转移颜色等;增强的国际语言支持提升了文本引擎知识兔;Apple XDR 显示器支持;提升的渐变显示;知识兔油画滤镜更快;增强的 GPU 支持;增强的导出为预览;...6、高效的工作流程知识兔:由于 Photoshop 用户请求的大量功能增强,您可以提高工作效知识兔率创意。自动伸直图像,从屏幕上的拾色知识兔器选择颜色,同时调节许多图层的不透明度,等等。...,其悬停功能可预览选择并知识兔轻易地为图像生产蒙版;互操作性重大提升知识兔,将内容粘贴到 Photoshop 可用 Illustrator;分享文件以收集查看反知识兔馈;新增 Neural Filters...以改变创建新风景;知识兔协调图层光线、转移颜色等;增强的国际语言支持提升了文本引擎知识兔;Apple XDR 显示器支持;提升的渐变显示知识兔;油画滤镜更快;增强的 GPU 支持;增强的导出为预览;

2K00

FusionCharts参数说明补充

选项指定文本价值,可以代替数值是图表上显示的每个数据项  无法加载自定义标识,图表上预先确定的位置,然后连结相同  … FusionCharts v3新增功能 FusionCharts v3的拥有大量的新功能...选项指定文本价值,可以代替数值是图表上显示的每个数据项  无法加载自定义标识,图表上预先确定的位置,然后连结相同  选择添加自定义菜单项,以图表的上下文菜单,然后连结相同  支持包装的标题,分标题工具...该PowerMaps Pack是收集61基于Flash矢量地图用来显示不同类型的数据与地理分区。适用于网站应用程序,每一个地图暴露了其性能使用一个XML的API 。...多语言支持的应用信息  现在,您可以轻松定制的图表显示应用消息(载入中图表,装载数据,绘制图表等。 )您自己的语言。要做到这一点,你需要指定的邮件图表来源重新编译。...exportAction ‘save’ or ‘download’ 服务器端的情况下导出,行动指定是否导出的图像将被发送回客户端的下载,或者是否会在服务器上保存。

3K10

UNITE Gallery-主题食用文档

//slider options: slider_scale_mode: "fill",                    //适合:缩小放大图像以始终适合滑块 //down: 仅缩小,显示较小的图像...          //缩放面板垂直偏移 slider_controls_always_on: true,         //true,false - 控件始终打开,false - 仅在鼠标悬停显示...: true,             //true,false - 文本面板始终打开,false - 仅在鼠标悬停显示 slider_textpanel_text_valign:"middle",...thumb_round_corners_radius:0,                //拇指边框半径 thumb_color_overlay_effect: true,            //true,false - 拇指颜色叠加效果,鼠标悬停选定状态释放叠加...blur, sepia - 图像效果叠加的类型,黑白,棕褐色模糊.

2.1K20

Custom Beautify

使用自定义字体的文本会先被隐藏,直到字体加载结束才会显示。 swap:后备文本立即显示直到自定义字体加载完成后再使用自定义字体渲染文本。...一旦自定义字体加载结束,那么文本就会被正确赋予样式。 optional:效果fallback几乎一样,都是先在极短的时间内文本不可见,然后再加载无样式的文本。...透明度修改(含一图流方案) 点击查看透明度修改教程 对于页面的透明度配置有多种方案,此处讨论三种。...例如我希望id为fixedElement的按钮牢牢固定在右下角,可以定义它的定位属性: hover选择器定义鼠标悬停到该元素上的样式,例如,我希望鼠标悬停在上述这个id为fixedElement的按钮...应用实例 我们可以尝试隐藏Aplayer的全局吸底音乐标签,[Blogroot]\themes\butterfly\source\css\custom.css中添加如下内容: 夜间模式或阅读模式修改

2.3K20

如何使用CSS创建按钮悬停动画效果?

color − 这个属性设置元素的文本颜色。 transition − 此属性控制两个状态之间的动画效果,例如默认状态悬停状态。 bottom top - 属性将元素相对于其容器定位。...示例1 - 悬停放大 在这个示例中,按钮将具有蓝色背景白色文本。当鼠标指针悬停在按钮上,按钮将使用 transform 属性以平滑的过渡0.5秒内缩放20%,背景颜色将变为绿色。...在这个例子中,按钮将具有蓝色背景白色文本,初始不透明度为0.5。...当鼠标指针悬停在按钮上,不透明度将在0.5秒内平滑过渡到1。...当鼠标指针悬停在按钮上,底部属性将增加到20px,导致按钮0.5秒内以平滑的过渡向上滑动。

18910

如何在 Flutter 中设置背景图像【Flutter专题16】

本教程将向您展示如何在 Flutter 中设置背景图像 Flutter 应用程序中设置背景图像的常用方法是使用DecorationImage....以下示例包括如何设置Fit 模式、透明度以及显示键盘防止图像变化。 设置背景图像使用 DecorationImage 您可能已经熟悉Container小部件。...移动设备上,当用户与文本字段交互,通常会显示屏幕键盘。...显示键盘应用程序内容的屏幕区域变小。它还会影响背景图像的渲染方式,因为图像必须适合较小的空间。...正如您在上面的输出中看到的那样,当显示键盘,部分内容是不可见的。一种可能的解决方法是将 Scaffold 包裹在带有背景图像的 Container 中。

11.1K21

前端特效开发 | JS实现聚光灯看图效果

;同时为了让鼠标移入时有更好的展示状态,hover特地为图片增加一个白色的边框,以区分当前展示的图片区域。...具体如下所示: // 当鼠标悬停在列表项上... $('.spotlight ul li').hover(function(){ //...找到它里面的图像,并添加活动类,并更改不透明度为1(...无透明度) $(this).find('img').addClass('active').css({ 'opacity' : 1 }); // 获取其他列表项,并更改其中的图像的不透明度为我们...,如下操作: // 当鼠标离开无序列表... $('.spotlight ul').on('mouseleave',function(){ // 找到图像并将不透明度更改为1(完全可见)...addClass('active').css({ 'opacity' : 1 }); // 获取其他列表项,并更改其中的图像的不透明度为我们

4.3K50

jQuery(事件动画-基础事件、复合事件)

$(window).resize() 窗口大小调整触发的事件 注意: mourseovermourseenter都是鼠标移入元素触发,不同点:mourseover无论鼠标移入被选元素 还是被选元素的子元素都会触发...mourseenter只有移入被选元素才会触发; mourseoutmourseleave都是鼠标移除元素触发。不同点:mourseout移除被选元素的子元素 也会被触发。...可参考show; fadeIn fadeIn(speed|function); 作用:将隐藏元素变为可见的(将display:none-->display:block),不同的是它通过调整透明度由浅变深来显示...fadeOut fadeOut(speed|function); 通过调整透明度,隐藏元素。 与上一个fadeIn正好相反。...而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一 个常见错误)。

1.4K10

Matplotlib 中文用户指南 8.2 我们最喜欢的秘籍

我们最喜欢的秘籍 原文:Our Favorite Recipes 译者:飞龙 协议:CC BY-NC-SA 4.0 这里是一个简短的教程,示例代码片段的集合,展示了一些有用的经验技巧,来制作更精美的图像...我们想要的是工具栏中的位置具有更高的精确度,例如,鼠标悬停在上面给我们确切的日期。 为了解决第一个问题,我们可以使用matplotlib.figure.Figure.autofmt_xdate()。...透明度填充 fill_between()函数最小最大边界之间生成阴影区域,用于展示范围。 它有一个非常方便的参数,将填充范围与逻辑范围组合,例如,以便仅填充超过某个阈值的曲线。...群体平均值显示为黑色虚线,并且平均值的加/减一个标准差显示为黄色填充区域。 我们使用where=X>upper_bound找到漫步者一个标准差边界之上的区域,并将该区域变成蓝色。...当使用文本框装饰轴,两个有用的技巧是将文本放置轴域坐标中(请参见变换教程),因此文本不会随着 x 或 y 轴的变化而移动。

75720

css应知应会 第四集

但有可能会被卡住 4、文本图像,行内元素行内块元素采用环绕的方式来排列的,是不会被其它的浮动元素压在底下的 2、清除浮动 元素一旦浮动起来之后,就会对后续元素的位置带来一定的影响...,也一同被隐藏了 4、父元素的最后位置处,增加一个空子元素,并设置其 clear:both 即可 5、... ... 2、显示 1、显示方式 1...、什么是显示方式 显示方式决定了元素页面中的显示位置效果 2、语法 属性:display 取值:...1、多个元素能够一行内显示 2、允许设置元素的尺寸属性 5、table 让生成的元素表现的...3、光标 作用:指定鼠标悬停在元素上,鼠标的显示状态 属性:curso 取值: 1、default :默认值

1.2K30

23个高手都在用的Figma小技巧!(2022新专辑)-Part 01

如果在缩放按住 alt,这也会改变不透明度。您还可以微调任何其他字段,例如行高。 ‍ 提示:排版行高上使用 4 或 8pt 的幅度来设置你的字体比例!...这适用于任何在将鼠标悬停在其上显示横向双箭头的字段。 005.复制为PNG而不导出图片 按cmd+ shift+ c(或通过右键菜单访问)将框架作为 png 复制到剪贴板。...这适用于文本组或其他框架。它不适用于自动布局设置。小技巧:只需将您的自动布局打包在一个组中,然后您就可以该组上设置约束。 007.用页面框架命名组件 您可能熟悉组件的“/”命名规则。...我的示例中,我为移动设备创建了一个页面,为通用创建了一个页面(我可以为每个断点设置一个,或者为 web 应用程序、android 或 iOS 设置一个库,你懂的)。...选择 SVG 图像并右键单击以选择检查模式。再次单击图像源。然后图像视图中,再次右键单击检查模式,然后整个 SVG 元素上,右键单击并选择“复制元素”。

3.5K30

Axure RP 9 中文

,易于使用,它能让用户快速创建应用软件或Web网站的线框图、流程图、原型规格说明文档。...)下一页上一页的快捷方式自动包含Axure上的Google字体的Web字体 选色器 色轮保存的颜色径向渐变建议的颜色 形状 形状绘制工具绘图工具的单键快捷方式从草图粘贴(带插件)双击边框以编辑矢量点形状上的背景图像钢笔工具改进形状原型中生成为...SVG 样式 “聚焦”样式效果复制粘贴样式(替换格式画家)将边框设置为任何厚度 图片 颜色调整为色调,饱和度,亮度,对比度更好的压缩翻转水平/垂直 大师 主视图(替换母版上的自适应视图)覆盖母版中的文本覆盖母版中的图像...“库”窗格中库自动刷新双击.rplib以加载或编辑库 笔记 一次查看页面上的所有注释为窗口小部件分配多个注释可以取消分配重新分配注释注释中包括窗口小部件文本注释中包括窗口小部件交互注释可以按层次结构组织...(1,1.1,1.1.1)注意数字显示原型中注意数字是连续的动态面板主要注释是生成原型的 表单小部件 自定义样式样式效果(鼠标悬停,禁用等) 互动 内联交互构建器交互构建器中搜索启用/禁用时的条件显示

1.5K60
领券