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

Python GUI库PyQt5图形特效样式QSS介绍

QPushButton 方箱模型 样式表,每个部件都被看作是一个由四个同心相似的矩形组成的箱体: 空白(margin)、边框(border)、填充(padding)内容(content)。...对于一个平面部件——例如一个空白、边框填充都是0像素的部件——而言,这四个矩形是完全重合的。 空白区域位于边框外,并且总是透明的。...边框为部件提供了四周的框架,其border-style属性可以设置为一些内置的框架风格,如inset、outset、solidridge。 填充边框内容区域之间提供了空白间隔。...如果指定的背景图片具有alpha通道(即有半透明效果),通过background-color指定的颜色将会透过透明区域。这一功能可以使背景图片在多种环境下重复利用。...如果我们想创建能够随着部件大小自动缩放而不是平铺的背景,我们需要设置一种称之为“边框图片”的东东。 “边框图片”可以通过border-image属性指定,它同时提供了部件的背景边框

4.3K10

Android开发笔记(七十四)布局文件优化

merge标签代替了根节点LinearLayout、RelativeLayoutFrameLayout原来的位置,只是告诉编译器:我是个占位的合并标签,不需要对我做布局处理;这样app渲染UI时,只是简单合并...进入窗口的动画 android:windowExitAnimation : 退出窗口的动画 注意:windowFrame并不只是边框区域,还包括内部窗口,所以如果windowFrame设置为不透明的图像...从截图可以看到,windowFrame的覆盖区域包括窗口边框,且窗口对内半透明、对外不透明,而边框对外半透明。...只有android:windowBackground设置为半透明红色的窗口截图 ? 从截图可以看到,windowBackground的覆盖区域只有窗口,且窗口对内对外都是半透明。...只有android:background设置为半透明红色的窗口截图 ?

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

玻璃拟态是什么?前端该如何实现

它最典型的特征是: 透明度(使用背景模糊的磨砂玻璃效果); 物体漂浮在空间中,通过前后关系表现层次感; 鲜艳的色彩突出了模糊的透明度; 半透明物体边缘的微妙处理,采用细腻的边框表现玻璃质感。...因为它看起来像玻璃,我相信最好的叫法是:「玻璃拟态」Glassmorphism 玻璃拟态的历史 背景模糊的视觉表现方式, 2013 年 iOS 7 系统首次被广泛引入。...这是一个非常重大的变化,但由于当时正处于拟物态快速切换到扁平化的阶段,所有的争议焦点围绕着衬线字体扁平化图标的变革,背景模糊并没有受到影响,反而人们似乎很喜欢它。...观察这个窗口,看看背景照片被窗口遮挡的部分是如何表现隐约透明的玻璃质感的。我把窗口放在桌面中央,突出了背景模糊效果最明显的地方。 当然,如果你不喜欢这个风格的话,可以系统设置完全关闭这种效果。...当然,这些案例看起来确实都很不错,但是并不好应用于上线产品,实际的手机屏幕上,它们很难这样去覆盖背景,因为手机上的应用程序都是全屏的。

62020

玻璃拟态(Glassmorphism)会成为 UI 的新趋势吗?

它最具有定义性的特征是: 透明度(背景模糊的磨砂玻璃效果) 对象悬浮在空中的多层做法 突出模糊透明度的鲜艳色彩 给半透明对象添加浅细边框。...上面的例子一些地方可能已处在可读性的边缘,但这是这种趋势的清晰展示。背景非常模糊,但仍然可见,而且轮廓有1个像素厚度半透明的边,可以模拟玻璃的边缘。 ?...这种风格只能利用一个透明层,或者多个透明层,但但是相当杂乱彩色的背景上至少有两个半透明层的时候,透明层必须是最突出的,可见的。...选择背景时,要确保色调差足够大,这样玻璃效果才真正可见。 最后细节 最后,你可以试着给形状添加1个像素厚的内边框,并且让它有一定的透明度。这可以模拟玻璃的边缘,让形状背景当中脱颖而出。...尽管这种风格的元素(比如模糊背景)已经存在了很多年,但现在正变得越来越流行,所以,仍然很多很酷的创意效果可以去探索。 ? 玻璃拟态的边框:左侧的图像是半透明边框,而右侧的图像则是无边框

1.4K20

CSS制作一个半透明边框

CSS制作一个半透明边框 1. 知识储备 2. 具体实现 3. 总结 ---- 1. ...知识储备 对于如何使用 CSS 制作一个半透明边框,首先你要知道 background-clip 这个属性 background-clip: 设置元素的背景背景图片或颜色)是否延伸到边框、内边距盒子、...它有着以下四个值: border-box: [ 默认值 ] 背景绘画边框外沿(边框下层,即这个元素会遮挡住背景) padding-box: 背景延伸至内边距(padding)外沿不会绘制到边框处 content-box.../* 设置边框的大小颜色---半透明 */ border: 10px solid hsla(0, 0%, 100%, 0.5); /* 设置 background-clip 属性的值为 padding-box...总结 实现半透明边框: 设置边框的 大小 颜色 – – – 半透明 border: 10px solid hsla(0, 0%, 100%, 0.5); 设置 background-clip 属性的值为

61040

使用 SetWindowCompositionAttribute 来控制程序的窗口边框背景(可以做 Acrylic 亚克力效果、模糊效果、主题色效果等)

为了验证此 API 的效果,我需要将 WPF 主窗口背景色设置为纯透明或者 null,而设置 ControlTemplate 才能彻彻底底确保所有的样式一定是受我们自己控制的,我们 ControlTemplate...,指定了边框的部分颜色会更深(换其他颜色叠加可以看出来是叠加了半透明黑色)。...---- 使用 WindowChrome Windows 10 上,获得焦点的时候整个背景是系统主题色;而失去焦点的时候是灰色,但边框部分是深色。...---- 如果在这种情况下,将边框设置为 0 会怎样呢?记得前面我们说过的吗,会导致阴影消失哦! 呃……你将看到……这个…… 什么都没有…… 是不是找到了一条新的背景透明异形窗口的方法?...还是省点心吧,亚克力效果在 Win32 应用上的性能还是比较堪忧的…… 想要背景透明,请参见: WPF 制作高性能的透明背景异形窗口(使用 WindowChrome 而不要使用 AllowsTransparency

97660

玻璃拟态(Glassmorphism)设计风格

,更突出了模糊的透明半透明物体边缘的微妙处理,采用细腻的边框来表现玻璃质感 这是注重空间感的典型特征,意味着这种风格有助于用户建立界面的层次结构深度。...整个效果的基础是阴影、透明背景模糊的组合,这种风格只能使用一个透明层,或者多个透明层,但当至少两个半透明层出现在一个相当繁忙的彩色背景上时,它是最突出可见的。...细节 你可以尝试的最后一件事是为形状添加1px内边框,并具有一定的透明度。它模拟玻璃边缘,可以使形状从背景脱颖而出。...尽管这种风格的元素(例如模糊的背景)已经存在了很多年,但它正变得越来越流行,因此,在这里仍然可以探索很多很酷的创意效果。 左侧的图像具有半透明边框,而右侧的图像则是无边界的。...这样,某些用户几乎无法访问整个UI,同时也使其变得无聊原始。 仅当这些透明效果只是装饰性的,而不是体验的组成部分时,才会发生这种情况。

1.8K30

CSS 边框秘探

CSS 边框秘探 1. 半透明边框 相信你以前肯定尝试过 CSS 半透明颜色,比如 rgba() hsla()。...假设我们想给一个容器设置「一层白色背景「一道半透明白色边框」,body 的背景会从它的半透明边框透上来。...image-20220526140422734 我们的边框去哪儿了啊?而且如果我们连使用半透明颜色都不能实现半透明边框,那我们还有什么办法?! 尽管看起来并不像那么回事,但我们的边框其实是存在的。...我们所做的事情并没有让 body 的背景半透明白色边框处透上来,而是半透明白色边框处透出了这个容器自己的纯白实色背景,这实际上得到的效果跟纯白实色的边框看起来完全一样。... CSS 2.1 ,这就是背景的工作原理。值得庆幸的是,我们可以通过 background-clip 属性来调整上述默认行为所带来的不便。

2.1K10

Qt项目DeskGirl开发

正文 不能播放gif,太大了,给个静态图片吧,实际上桌面壁纸是动态的,人物也是动态的,可自定义桌面壁纸,有默认的数字时钟壁纸 20200807211945.png 无边框背景透明窗体 设置属性...setWindowFlags(Qt::FramelessWindowHint); //去掉标题栏 this->setAttribute(Qt::WA_TranslucentBackground); //设置背景透明...从技术上讲,它是一个软件包,可以处理计算机网络上的媒体。它提供直观的 API模块化架构,可轻松添加对新编解码器,容器格式传输协议的支持。...来自 VLC的大多数已知软件包是Windows,Linux OSX上常用的播放器。...❞ 这里我先给出本期项目的GitHub地址,然后欢迎Star,如果有Star的话,这个项目我会继续增加完善功能,最少整个vlc动态壁纸,上次的NodePad一堆的Bug,没有兴趣去解决,以后无聊了去解决

92430

Qt开源作品6-通用视频控件

一、前言 之前做的视频监控系统,根据不同的用户需要,做了好多种视频监控内核,有ffmpeg内核的,有vlc内核的,有mpv内核的,还有海康sdk内核的,为了做成通用的功能,不同内核很方便的切换,比如...通用视频控件功能: 可设置边框大小 可设置边框颜色 可设置两路OSD标签 可设置是否绘制OSD标签 可设置标签文本或图片 可设置OSD位置 左上角+左下角+右上角+右下角 可设置OSD风格 文本+日期+...时间+日期时间+图片 自定义半透明悬浮窗体,一排按钮 悬浮按钮可自定义设置,包括背景颜色+按下颜色 发送信号通知单击了哪个悬浮按钮 能够识别拖进来的文件,通知url 提供open close pause...btnFlowAlarm" << "btnFlowClose"; void VideoWidget::resizeEvent(QResizeEvent *) { //重新设置顶部工具栏的位置宽高...} } } void VideoWidget::dragEnterEvent(QDragEnterEvent *event) { //拖曳进来的时候先判断下类型,非法类型则不处理

70620

《CSS揭秘》读书总结:背景边框

半透明边框 难题 CSS 中使用半透明颜色,可以使用 rgba() hsla()。 HSL代表色相,饱和度亮度 - 使用色彩圆柱坐标表示。...Alpha参数是一个介于0.0(完全透明1.0(完全不透明)之间的参数。 尽管半透明颜色很受欢迎,但人们对其使用更多集中于背景上。...假设我们想给一个容器设置一层白色背景一道半透明白色边框,body 的背景会从它的半透明边框透上来。...这就可以解释我们遇到的难题:body 的背景并没有从内部 content 的半透明的白色半透明边框处透上来,而是半透明白色边框处透出了这个容器自己的纯白实色背景,这实际上得到的效果跟纯白实色的边框看起来完全一样...实际上,应对这种情况时,我们可以把最深的颜色指定为背景色,同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹: background : #58a; background-image : repeating-linear-gradient

1.7K40

.Net.Net Core 的界面框架 NanUI 发布新版本啦!

窗体类型 原生样式 系统原生窗体样式与传统的 WinForm 应用程序界面一致,拥有系统样式的标题栏、边框系统命令区域,类似传统的 Form 控件上拖入 WebBrowser 控件并设置 Dock...无边框窗体 边框窗体样式系统原生的标题栏边框被隐藏,可以使用整个窗体区域来绘制您的应用程序界面。...异形窗口 使用 Layered 样式允许创建异形、半透明窗体。类似各种大师、各种管家提供的加速球那种效果。 ?...亚克力特效窗体 亚克力特效是 Windows 10 创意者更新版之后提供的新功能,它允许窗体的透明半透明区域与桌面元素进行模糊混合,实现特殊的磨砂亚克力效果。...与 Layered 样式相同,根据网页透明或者半透明区域的设置,将实现特定效果的磨砂玻璃效果。 ? 窗体特效 阴影效果 关闭 ? 泛光 ? 阴影 ? 投影 ? 边框效果 无边框 ? 普通边框 ?

2.5K40

你还在用图片做引导蒙层?

蒙层有两个核心元素,引导内容区域(即需要重点突出的内容元素)半透明蒙层元素。 都9012年了,如果还在用图片做蒙层,是不是太low了。...一个div有四个边框,如果我们把边框都设置成半透明,然后中间的区域(上面border_2的green)设置成全透明会不就可以实现区域引导蒙层了吗?...box-shadow的阴影距离切勿盲目设置过大,经过测试这个值如果过大,比如4000px,部分手机上阴影无法显示出来。经过实践,设置为2000px为佳。...思路六:使用canvas实现 新增一个canvas,绘制两次图形 第一次:绘制一个全屏的半透明阴影 第二次:使用xor绘制一个引导内容区域的大小位置完全重合的区域 第二次绘制的内容区域第一次重叠,使用...所以我们就可以canvas里面绘制一个canvas蒙层,然后蒙层需要显示的内容用xor来绘制重叠,然后重叠内容就会被透明,那么这个透明区域的内容就是我们想要的引导蒙层突出内容区域。

2.5K20

有趣的CSS小示例:好看的皮囊千篇一律,有趣的灵魂万里挑一

文字加载...动画 html 正在加载......原来是dot元素,沿着Y轴循环位移,隐藏掉就让你看到了加载的动画效果。 ? border 实现边框 ? 当你需要这样一个上传文件,按钮时,你考虑的是找设计弄个图片,还是自己写一个???...但是,当元素添加了一些伪元素或半透明的装饰之后,box-shadow就有些 力不从心了,因为 border-radius 会无耻地忽视透明部分。...这类情况包括下列几种情况: 1、半透明图像、背景图像、或者 border-image(比如老式的金质像框); 2、元素设置了点状、虚线或半透明边框,但没有背景(或者当 background-clip...css 实现自适应的弹框 经常在网页中看到一些Dialog,例如有些网页点击登录注册时就会跳出一个弹框来显示登录注册页面,下面就使用 css 完成一个可以自适应,无论窗口的大小,始终能保持水平垂直居中的

1K40

《小白HTML5成长之路31》半透明背景的自定义弹窗是怎么用CSS布局的

里面的dialog需要保持浏览器的最中心位置,因此最好把dialog设置成固定宽度高度,这样可以很好的实现居中。”...layer上增加了opacity:0.5这个半透明属性,小白满怀信息的刷新了页面,当看到结果时小白发现背景窗口都变成了半透明。...正好这时老朱从小白身边经过,随口跟小白说了一句:“小白,你是不是把窗口的父容器设置成半透明了?” “是啊!父容器背景是黑色,所以我把父容器设置成了半透明!”...“可是父容器设置半透明会对他的子元素产生影响啊,这样会导致它里面的所有元素都变成半透明,你为啥不给窗口添加一个兄弟容器来实现这个效果呢?” 小白仔细想了想,说道:“哦!...不一会小白找到老朱,说道:“我改好了,现在我给dialog添加了一个layerbg容器作为背景层,然后把layer之前的背景透明度去掉,放到了新增加的背景层上面,背景层高宽与layer一样所以这样就不会把

1.9K100

手把手教你用 Python 实现浪漫表白程序

其中具体效果图如下: 本浪漫程序的技术路线分为以下几个部分: 通过 Pyqt5 模块构建透明窗口,并设置聊天窗等功能,设置右键功能,使其功能启动“浪漫程序“; 开始宠物系统再通过多线程启动其他程序,包含弹窗程序...;然后自行选择一些具有表白意义的 gif 动态图作为宠物动作;最后通过 Pyqt5 构建透明窗口程序,通过多线程实现动作交替以及右键鼠标功能等。...程序实现主要分为初始化透明窗口、设置托盘选项、右键菜单功能、设置聊天对话框功能以及动作时间交替等部分,整体程序的实现有 pyqt5 构成。...其中分为下面几步: 1、时间变量初始化 2、调用随时间图案变化函数 3、窗口位置边框初始化 4、计时器初始化。...5、鼠标跟踪定义 1.2 透明窗口的定义 初始化中加入 self.setAttribute(Qt.WA_TranslucentBackground) 实现背景透明效果。

1.6K30

CSS 巧用 :before:after

:before是css的一种伪元素,可用于某个元素之前插入某些内容。 :after是css的一种伪元素,可用于某个元素之后插入某些内容。...,就是改下position的位置,改下border显示颜色的方位~ (本兽不喜欢贴图片,体谅下额,需要的可以拷贝代码直接运行看效果,造轮子不仅仅是造轮子,也能让人加深印象,更好的理解) 2.作为内容的半透明背景层...比如我们的需求是做一个半透明的登录框吧(这里也是代码通过注释来解释): body{ background: url(img/1.jpg) no-repeat...left top /*这里本兽加了个图片背景,用以区分背景半透明及内容的完全不透明*/ } .test-div{ position: relative;...height: 100%; /*内容一样的高度*/ background: rgba(255,255,255,.5); /*给定背景白色,透明度50%*/ z-index

1.2K30

Power BI模拟谷歌2022搜索排行榜

这个图表有2个主要特点:第一名带有半透明背景色,且右侧有个搜索图标。Power BI如何模拟这样的表格? 首先,半透明背景色如何实现?以上图左上角的榜单为例。...新建一个背景色度量值,rgba前三位表示颜色,最后一位表示透明度,透明度设置为0表示完全透明。这里我们设置了一个有一定透明程度的蓝色。...表情包无法直接放入条件格式图标,需要使用SVG图形包装起来,参考: 如何在Power BI使用表情包,度量值如下: 放大镜图标-emoji = VAR emoji= "data:image/svg+...text> " RETURN IF(SELECTEDVALUE(Searches[Index])=1, emoji, BLANK()) 这样,我们得到了以下效果: 搜索图标看上去statista...还有读者可能会问,这statista的还是不一样呀,背景色没有边框。非常遗憾,Power BI原生表格暂时无力这么操作。

54720

Windows桌面暗水印方法与C++实现

窗体实现 使用C++创建一个窗体,并置顶,为窗体设置合适的透明度,就能达到透明水印效果。...我所能想到的方法是Hook到显卡驱动,DirectX绘图之后执行自己的绘图代码 半透明窗体 使用Qt创建一个窗体,修改windowOpacity值为0.5,即可实现半透明5148 事件传递与窗体属性...SetWindowLong(hwnd, GWL_EXSTYLE, widgetStyle); //永远置顶 this->setWindowFlags(Qt::WindowStaysOnTopHint); //删除边框...WS_EX_TOOLWINDOW: 该窗口为悬浮窗,悬浮窗将不会出现在任务管理器或Alt+Tab菜单 WS_EX_APPWINDOW: 窗体将被放置到任务栏之上 以上代码都是在窗体展示之前做的...WindowMaximized);//窗体最大化 SetWindowPos(hwnd,HWND_TOPMOST,0,0,0,0,SWP_NOMOVE | SWP_NOSIZE);//置顶 运行结果 源文件 第十三届软件外包大赛期间

2.1K20
领券