以前浏览别的博主网站的时候总会在文章页末看到或多或少一些分享功能,比较常见的都是些社交平台的按钮,当时想的是功能虽好可有多少人会去用啊?心想嘛就是个摆设还不如不要占位置233
分享一个bootstrap简洁居中毛玻璃登录源码,感觉很好看,希望大家喜欢。随机图调用杨小杰api接口 做了两个,一个是原版的,一个是emlog登录的,还有一个typecho版本的 原版源码: <html> <head> <meta itemprop="name" content="杨小杰博客后台"/> <meta itemprop="image" content="http://www.youngxj.cn/logopic.png" /> <meta name="descri
Google最近宣布了在Google Meet中模糊和替换背景的方法,以便更好地关注人物而不是周围的环境。这些新功能由MediaPipe内置的尖端Web机器学习(ML)技术提供支持 ,该技术可 直接在浏览器中运行,而无需执行任何其他步骤,如安装其他软件。开发这些功能的主要动机之一是在几乎所有现代设备上提供实时的浏览器内性能。它通过结合高效的设备上ML模型, 基于WebGL的渲染和通过XNNPACK 和 TFLite的基于Web的ML推理来 实现此目的。
偶然在某思看到这样一个问题,如何使一个div的部分区域变透明而其他部分模糊掉?,最后实现效果是这样的:
引入魔改样式的方法很简单,自建一个css文件,然后引入即可。 以butterfly主题为例。可以在[Blogroot]\themes\butterfly\source\css\目录下新建custom.css文件,然后在[Blogroot]\_config.butterfly.yml的inject配置项中引入自定义样式文件。
rainyday.js 是一个模拟雨滴落在玻璃上的JavaScript 库,基于HTML5 的canvas 。rainyday.js 做出来的雨滴效果非常逼真,在模糊背景的下的雨滴一点点爬满“玻璃”,
前些天,LongHe站长评论了我说,猫猫挡住我的备案号了,我看了一下我的电脑上其实显示正常,就回了一句正在搞(其实是之前研究过但是懒得搞搁置了QAQ),但是这两天搜索了一下,故意遮挡备案号会被吊销备案号,并且罚款,有点害怕赶紧添加了一个,但是感觉一个这个功能有点水,所以又分享了今天才加上的毛玻璃背景特效和右上角和风天气插件。
我们有时候做项目时候会想让背景和模型完全独立分开,分别控制亮度,模糊度等,笔者提供一种方法可以很好的实现,以下只写关键代码,首先在网页加入两个容器
用 WordPress 来做博客程序完全是因为一款主题呢! 就是,由 蜜汁路易 二次修改发布的 Siren 主题! 它的前身就是由 Fuzzz 制作的 Akina 主题。
像素风是一种以固定大小纯色像素方块作为基本单元,进行创作,包含但不限于绘画、建筑、游戏更各个领域的一种美术风格。 其中最让人耳熟能详的,当然是早期电子游戏的像素画面啦~
作者:辉仔,Android开发工程师,目前主要涉及移动端APP的开发,Github地址:https://github.com/hundredays。 责编:陈秋歌,关注微信开发等领域,寻求报道或者投稿请发邮件至chenqg#csdn.net。 前言 我本来是安安静静地写着Android的,只想一心一意做我的本行,没想到某龙偏偏想搞事情——在2017年的1月9号推出了微信小程序,而且“小程序”这三个字又勾起了本人的兴趣,所以,只好暂时“移情别恋”了。 正文 本Demo完成共耗费近两周,也是在空余时间去写的
11月初我们发布了1.4.0里程碑稳定版本,增加了一些新功能包括丰富了查询控件、支持查询JS/CSS增强、支持mongodb、redis、存储过程数据集、支持分组小计、支持图表钻取、条件钻取、支持表格背景设置斑马线、支持分栏功能、支持分版功能、支持动态合并格等等;下面就让我们一起来看一下具体的功能吧。
给博客添加一个背景图片玩玩。 加上去了,发现原来的 toc 栏有点怪,不如加个模糊滤镜和透明背景色美化一下,然后就遇到了问题。
color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白 三、CSS符号属性 list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/ 四、CSS背景样式 background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/ 五、CSS连接属性 a /*所有超链接*/
9.26~9.28 目的:想为社团做一个自己的宣传网站来迎新,同时积累UI设计经验 http://comesherry.xyz 感受或实际遇到的问题 (1)UIPC移动端兼容问题,(bootstrap 和layui提供的模块化帮助我搭建了自适应布局,不希望移动端出现的就不让它出现) (2)素材加载问题,图片视频导致网站加载缓慢(目前图片采用懒加载lay-src,视频预加载处理,并做了剪短处理) (3)图片大小一致性问题,大小不同杂乱,而且影响移动端响应式的展示。(word 的图片统一大小很好用)但直接修改图片尺寸图片质量会降低, 推荐方案:ps处理兼顾品质和尺寸,并且对不同端提供相同内容不同品质的图片;或者ps 文件>导出>web格式(选择jpeg),品质和大小还是很可观的 (4)视频模糊,还想用,(加上浅灰色背景)视觉上有变强的感觉 (5)视频背景头一次用,还有待完善 (6)更加熟悉layui,但还不能跳出bootstrap他的范例,将功能实现在自己的框架上,而非他定义的容器中 (7)layui弹出层是最大的惊喜,boostrap封闭的结构不太令人舒服,layui的样式更加自由丰富 (8)1M带宽服务器不推荐图片展示,目前已经换成1~5M轻量级服务器了,打开速度快点不止5倍
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。
关于这个话题,本文并不准备详述移动开发相关的一些通用技术,例如:viewport、rem、flexbox、媒体查询等。这里主要讲述我们的hybrid产品策略、开发流程与规范、性能优化以及我们踩过的坑。而往往就是这些,网上相关的资料相对比较匮乏的,又缺少类似经验文章,所以希望通过此篇文章,跟大家分享一些魅族团队关于hybrid产品开发的经验。
磨砂玻璃效果已经在互联网上流行了很多年,Mac OS以其磨砂玻璃效果而闻名,Windows 10也通过其他一些灯光,深度,运动,材质,比例尺实现了磨砂玻璃的效果 。
用 JavaScript 处理图像可能非常困难且繁琐。 幸运的是,有许多库可以让这些变得简单得多。 下面介绍一些图像处理的库。
hevue-img-preview 简介 本组件基于 vue 编写,仅传入一个图片地址,即可实现图片预览效果,比较适合给文章及页面的所有图片添加预览效果,预览背景色,关闭按钮颜色,控制条的背景也和字体颜色都可自定义,兼容 ie9+,火狐,Safari,谷歌浏览器,不过暂不支持多图预览。如果能帮上你,希望可以移步 GitHub https://github.com/heyongsheng 给个小星星 示例预览 在线文档 📷 使用方法 # 安装 npm install hevue-img-prev
一、光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:none即可。 完整代码: curosr: url(transparent.gif'); cursor: none; 二、扩大热区 应用在小按钮的情况下,不好被鼠标点击到 代码如下: .btn{ position: relative; cursor: pointer; } .btn:after{ position: absolute
作者:thinkchen,腾讯 PCG 高级前端开发工程师 mdebug是腾讯新闻 TNTWEB 团队推出的基于React开发的新的web调试工具, 沉淀自腾讯新闻微信手 q 双插件多年的移动 web 开发实践中。相比 vconsole, eruda 等调试工具, 使用现代框架进行编写。整合 network 监控能力,提供了更丰富的调试能力和 api, 拥有更强大的网络捕获能力,接入和使用简单。本文将从背景, 架构,功能, 实现原理, 未来扩展点等角度全面介绍这款工具。 一.背景 调试一直是移动 we
看到这个功能的时候, 你可能会好奇, Chrome Devtool 不是早就可以编辑css了吗?
用 MozJPEG 压缩 jpeg 1.npm install imagemin-mozjpeg 2.以下内容添加到 imagemin.js 中
(背景图片可以放置于 content-box、padding-box 或 border-box 区域。)
其实一直有人问,怎么修改导航栏的黑色背景,因为这个涉及div框架和class样式表,不是一段代码就能搞定的,今天有时间就把教程整理以下,当然不是一步一步教,因为我并不适合做老师,我只是把成品拿出来,然后把对应的颜色空余出来,至于要什么颜色,自己添加就行了。
随着9月25日iPhone6s的发货,早已预订的人是不是心里开始有点小激动了。那么它的到来对于前端来说有哪些新东西? Force Touch 针对此次的3D Touch 页面中多了三个事件,当然了,以下事件请自带webkit前缀 1. mouseforcewillbegin 2. mouseforcedown 3. mousefoeceup Javascript代码 看字面意思就能理解了,用法和其他事件一样,只是奇怪为何不起名为forcetouchdown,forcetouchup back
本文使用Matlab编程语言中的决策树和模糊C-均值聚类算法,帮助客户对大学教师职称、学历与评分之间的关系进行深入分析。
https://github.com/androidmumo/Bing-upyun
这几天学习了验证码安全的相关内容,在这里做一个总结,把一些的知识点巩固一下,水平有限,大神勿喷。可以参考这篇文章,总结了大部分验证码安全实例,地址 https://blog.csdn.net/Dome_/article/details/90738377
静电说:之前推荐了一个抠图网站,今天再来给大家安利一个擦图插件。图片里的多余元素,旅游照背景中误入的路人甲,都可以轻松一键去除了!
使用 Vega,我们能够以JSON格式描述可视化的视觉外观和交互行为,并使用 Canvas 或 SVG 生成基于 Web 的视图。
场景 场景是大屏页面一张深色背景, 里面一些文本元素以及图表展示. 结果在IE下发现加载异常缓慢, 还有部分人员反馈页面卡死. 后台读写优化 默认处理图片逻辑是, ImageIO读取原图, 转成byt
(2)为相框设置样式,用transform:rotateY(-10deg)为它设置旋转效果,用transform-style:preserve-3d来为图片设置3D效果。
CSS3 基础知识 1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平、垂直、模糊、扩展) box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影) 1.3 边框图像 border-image 2.背景 2.1 background-size background-size:30px 30px;(背景图像宽度,背景图像高度) 2.2 background-image:linear-gradient(45deg,rgba(0,0,0,0.5) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 75%,transparent 75%,transparent);(线性渐变,和background-size一起用) 2.3 background-attachment:(fixed|scroll|local) fixed: 背景图像相对于窗体固定。 scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 local: 背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。 2.4 background-position:30px 20px;(横坐标,纵坐标;是图片在动) 2.5 background-origin:(padding-box|border-box|content-box) padding-box: 从padding区域(含padding)开始显示背景图像。 border-box: 从border区域(含border)开始显示背景图像。 content-box: 从content区域开始显示背景图像。 3.文本 3.1 文字阴影 text-shadow:5px 5px 4px #000;(水平,垂直,模糊) 3.2 换行 word-wrap:(normal|break-word) normal: 允许内容顶开或溢出指定的容器边界。 break-word: 内容将在边界内换行。如果需要,单词内部允许断行。 white-space:(normal|pre|nowrap|pre-wrap|pre-line) normal: 默认处理方式。 pre: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象 nowrap: 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。 pre-wrap: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。 pre-line: 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。 3.3 省略号 width:200px; overflow:hidden; text-overflow:hidden; white-space:nowrap; 4.2D变换 4.1 旋转 transform:rotate(45deg); 4.2 移动 transform:translate(45px,45px);(水平,垂直) 4.3 缩放 transform:scale(2,2);(水平,垂直) 4.4 翻转 transform:skew(20deg,40deg);(沿X轴翻转,沿Y轴翻转) 4.5 将以上四个组合在一起 matrix(),需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。 暂放 5.过渡 5.1 transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] [ transition-property ]: 检索或设
此外还有阴影渐变,等滤镜,等就太复杂了,设计到矩阵变换等高等数学的内容,自己有心无力。
这段时间大师兄项目中出现了固定数据池的模糊检索需求,也就是在一大堆几乎不变化的数据中进行模糊检索。同时,这样的检索需求在同模块中也会出现很多次。
静电说:继新拟物在2020年成功吸引设计师的目光之后,另一种“拟态”--玻璃拟态(Glassmorphism),再次拉回设计师的眼球。静电仔细一看,这不就是前几年的毛玻璃效果加上更多的“磨砂”感吗?好吧,可能我理解的还有偏差,那么什么是玻璃拟态呢?来读一读这篇Boxi翻译的文章,一探究竟。
像素:一张图片在不停的放大到再也无法放大的时候,呈现在我们眼前的是一个个小的颜色块,这种带有颜色的小方块就可以被称为像素
通过上面两张图可以看出来,我们既可以用网络图片来实现高斯模糊,又可以用本地图片来实现。
前言:使用 SVG 作为占位符不但可以减少数据大小还可以达到不错的显示效果。 不同类型的图片 placehold 📷 请点击此处输入图片描述 对于图片占位符,通常我们会使用以下几种处理方式。 保持图像为空:这样可以保证内容不会出现跳动。 默认占位符:比如说用户想要查看个人资料显示头像内容,如果请求失败或者没有上传过图片,那么通常会使用默认占位符(这种占位符一般会使用 SVG 资源)。 纯色:从图像中获取颜色,并作为背景颜色。图片在过度是时候回显得比较平滑(pinterest就是使用这种方式)。 模糊的图像:
大家好,关于惊艳的 Hero Header(不知怎么翻译,暂且这么叫吧) 的动效大家见过不少,在页面打开后的瞬间,好的 Hero Header 动效会给用户留下好的印象,如何抓住用户的第一印象呢。从设计角度方面来说,好的 Hero Header 都有以下要素:
github地址:https://github.com/626626cdllp/echarts
做开发时,总是使用系统默认的白色背景会显得有些生硬,所以当我们以展示图片为目的时,不妨将图片放大、再做高斯模糊处理以作为背景。
用手机抓拍高速度物体照片非常困难,往往只能得到一堆模糊到看不清的照片。为了寻找解决方案,阿拉伯联合酋长国人工智能研究所、北京理工大学和石溪大学的科学家们联合开发了一种人工智能系统,可以在后期制作中去除图像中的模糊。他们在一篇论文中指出,这是一种可以感知人脸的技术,也就是说,它可以对人脸进行去模糊处理,而且与最先进的动态去模糊方法相比,它的表现非常抢眼。
作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一轮的研究。那么它的到来对于前端来说有哪些新东西? Force Touch 针对此次的3D Touch 页面中多了三个事件,当然了,以下事件请自带webkit前缀 1. mouseforcewillbegin 2. mouseforcedown 3. mousefoeceup Javascript代码 看字面意思就能理解了,用法和其他事件一样,只是
发布于 2018-07-16 11:44 更新于 2018-08-31 23:59
毛玻璃拟态模仿了塑料材质(凹凸质感,凸显层次感),这个新的视觉风格更加注重垂直空间Z轴的使用:
路径(B),油漆桶填充(shift+B),混合填充(L),移动(M),滤镜–>高斯模糊
静电说:阴影和模糊在UI界面中是必不可少的效果,但是想要做好它们却没有那么简单。很多设计师小伙伴做的阴影,要么是不够通透,要么阴影生硬,投影角度有问题。那么今天就为大家推荐这篇设计阴影和模糊的全攻略,系统为大家剖析阴影和模糊效果的方方面面。觉得有用,记得点赞,并分享给小伙伴。
领取专属 10元无门槛券
手把手带您无忧上云