第五课:Figma 玻璃拟态页设计

效果展示

 通过背景模糊实现玻璃拟态效果

  • 选择合适的背景,绘制形状,给形状添加 Effects,点击下方的下拉选择框,选择 background blur;
  • 添加后会发现,画面无任何改变,调整 Fill 后面的百分比,此处的百分比专指填充颜色的百分比;

  •  当填充颜色调整为50%时,背景透出来,但是画面模糊度不够,因为默认的 Blur 值比较小,调整 Blur 的参数给 blur 一个特别大的数值,再结合颜色填充的透明度来实现玻璃拟态效果 ;

上层元素玻璃拟态效果 (原图越实,玻璃拟态效果越强烈)

  • 绘制上层元素,调整元素颜色填充;

  • 填充的同时,添加背景模糊(background blur),再次场景下,模糊值稍小,当前数值为 9 ; 

 若添加背景模糊后会发现不太清楚,可减少透明度时数值;

  • 添加 Stroke(描边),选择 Stroke 的类型 Linear(渐变),调整 Stroke 的透明度和渐变角度;

  • 继续添加 Effects(投影),将 Blur 值调大一些,颜色调整为 10%,最后再根据效果调整颜色填充时透明度;

  • 复制元素样式,选择已做好样式的元素,右键 ——> Copy/Paste ——>  Copy properties(复制样式:快捷键 alt + cmd + c),右键 ——> Copy/Paste ——>  Paste properties(粘贴样式:快捷键 alt + cmd + v);

 案例课程来源:

超人电话亭 零基础学 Figmaicon-default.png?t=N658https://www.bilibili.com/video/BV1fg411G7cs/?p=5&spm_id_from=pageDriver&vd_source=98ff6b45a8ad88aa9e7408ec9cebb330

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/44398.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

6.运算符

6.1赋值运算符 ➢已经学过的赋值运算符: ➢其他赋值运算符: 、-、*、/、% 6.2 一元运算符 众多的JavaScript的运算符可以根据所需表达式的个数, 分为一元运算符、二元运算符、三元运算符 ●二元运算符: 例:let num1020 ●一元运算符: 例…

windows系统修改mysql8配置文件,关闭ssl验证

如何寻找配置文件 我的电脑,右键,管理,服务 找到MySQL8 右键,属性 找到配置文件位置 通常情况下的默认路径是: C:\ProgramData\MySQL\MySQL Server 8.0\my.ini 如何关闭SSL验证 打开 my.ini 配置内容如下&#x…

ant design vue a-table表格中插入操作按钮(以switch开关 [a-switch]为例)

1.给columns添加列属性 columns() {sortedInfo sortedInfo || {};return [{title: "工程",dataIndex: "outputProject",width: 80},{title: "是否显示小数",dataIndex: "showDecimalsOrnot",width: 80,scopedSlots: { customRender:…

Idea中git push to origin/master was rejected错误解决方案

Idea中git push to origin/master was rejected错误解决方案 问题描述解决方法 问题描述 idea开发中,需要将项目发布到gitee上,在gitee上创建仓库后,通过idea中git推送项目代码提示: push to origin/master was rejected 解决方法 gitee创建仓库时创建了README.md文件,本地…

Vue中TodoList案例_静态

MyHeader.vue <template><div class"todo-header"><input type"text" placeholder"请输入你的任务名称&#xff0c;按回车键确认"></div> </template><script> export default {name: "MyHeader"…

Postman怎么做接口测试-以简单的登录接口为例

我们就以登录某测试系统为例子&#xff0c;实现在Postman上做接口测试 一、首先打开系统首页首页&#xff0c;做一个登录操作&#xff08;目的是获取接口url及参数&#xff09;&#xff1a;一般在公司做接口测试的时候页面还没有出来&#xff0c;我们需要根据接口文档进行接口…

Terraform学习日记-AWS-EC2

terraform install https://developer.hashicorp.com/terraform/tutorials/aws-get-started/install-cli 这里我们使用 aws-linux-2022 作为执行环境 # sudo yum install -y yum-utils# sudo yum-config-manager --add-repo https://rpm.releases.hashicorp.com/AmazonLinux/…

【Flutter问题记录】Android Studio不显示(右上角main.dart左边)设备栏

记录一下今天遇到的情况&#xff1a; 用android studio打开项目&#xff0c;我检查了&#xff0c;已经配置了flutter sdk和android sdk&#xff0c;但是右上角main.dart左边的设备栏就是不显示。 解决方法&#xff1a; 恢复如初&#xff1a;

统一观测丨使用 Prometheus 监控 Cassandra 数据库最佳实践

作者&#xff1a;元格 本篇内容主要包括四部分&#xff1a;Cassandra 概览介绍、常见关键指标解读、常见告警规则解读、如何通过 Prometheus 建立相应监控体系。 Cassandra 简介 Cassandra 是什么&#xff1f; Apache Cassandra 是一个开源、分布式、去中心化、弹性可伸缩、…

Ubuntu录屏软件Kazam

1. 安装 1.1. 桌面右键“打开终端” 1.2. 安装kazam这款软件。 sudo apt-get install kazam 2. 使用 2.1. 安装后打开&#xff0c;我们看看这款软件界面还是很友好很简洁的。 2.2. 除了录像我们还可以截图&#xff0c;也可以选择全屏、窗口、区域的方式录制。 2.3. 如果要录…

构建自己的ChatGPT:从零开始构建个性化语言模型

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

【Unity2D】设置一物体默认在其他物体之上不被遮挡

比如我想让机器人显示在箱子的前面。 点击箱子&#xff0c;将其层级设置在机器人的后面。 即修改箱子的Order in Layer 在机器人之后 物体默认的Order in Layer 都是0 &#xff0c;将箱子的Order in Layer修改为-1即可 这样将确保先绘制机器人&#xff0c;然后绘制箱子。这样…

【小黄碎碎念】如何解析和替换字符串中的 Markdown 文本?正则表达式与 flexmark-java 库

前言 本周&#xff0c;笔者将之前的基于 Servlet 的个人博客项目进行了迭代&#xff0c;基于 SpringBoot SpringMVC Mybatis Redis 进行实现。额外实现密码的明文加密处理&#xff08;加盐算法&#xff09;、修改随笔、随笔主页等功能&#xff0c;并将 session 存储到 Redis…

App测试中ios和Android的区别

1、Android长按home键呼出应用列表和切换应用&#xff0c;然后右滑则终止应用&#xff1b; 2、多分辨率测试&#xff0c;Android端20多种&#xff0c;ios较少&#xff1b; 3、手机操作系统&#xff0c;Android较多&#xff0c;ios较少且不能降级&#xff0c;只能单向升级&…

ffmpeg中filter_query_formats函数解析

ffmpeg中filter_query_formats主要起一个pix fmt引用指定的功能。 下下结论&#xff1a; 先看几个结构体定义&#xff1a; //删除了一些与本次分析不必要的成员 struct AVFilterLink {AVFilterContext *src; ///< source filterAVFilterPad *srcpad; ///<…

Feign远程调用如何携带form url

这是一个需要携带参数在form url上的请求&#xff0c;正常调用方式是这样的 响应&#xff1a; 在Feign中&#xff0c;应该怎么调用呢?? 定义OpenFeignClient接口 FeignClient(value "client-service", url "http://127.0.0.1/api") public interface…

pytorch工具——认识pytorch

目录 pytorch的基本元素操作创建一个没有初始化的矩阵创建一个有初始化的矩阵创建一个全0矩阵并可指定数据元素类型为long直接通过数据创建张量通过已有的一个张量创建相同尺寸的新张量利用randn_like方法得到相同尺寸张量&#xff0c;并且采用随机初始化的方法为其赋值采用.si…

记一次简单的MySql注入试验

试验环境&#xff1a; 1.已经搭建好的php服务器&#xff0c;并可以通过访问到localhost/index.php&#xff1b; 2.已经安装好数据库&#xff0c;并创建表test&#xff0c;表内有name、age等字段&#xff0c;并随便创建几个假数据用于测试&#xff1b;如图&#xff1a; 开始测…

万向节死锁

要理解万向节死锁的产生原因&#xff0c;首先要理解欧拉角变换&#xff0c;欧拉角变换是基于最初始的坐标进行变换而非变换后的坐标进行变换。 欧拉角变换需要空间中的三个角&#xff08;即变换后每个轴的偏移量&#xff09;&#xff0c;另外还有每个轴的变换顺序。值得注意的…

安装:【vue】npm install -g @vue/cli出现错误

安装Vue脚手架&#xff0c;cli就是Command Line Interface 命令行接口 工具 进行到npm install -g vue/cli这一步出现错误&#xff0c;操作步骤如下&#xff1a; 1.通过 wins打开开始栏的搜索框&#xff0c;输入cmd&#xff0c;管理员身份运行 2.先下载node.js 不知道有没有…