这18个网站是我在取经路上意外发现的,里面包括 纯CSS 实现的炫酷背景,还有专门制作背景图的网站。 算是取经路上的大补之物~
️ 传送门:https://projects.verou.me/css3patterns/
如果你认识 Lea Verou 的话,大概率知道这个网站,她徒手写了几十个 纯CSS 实现的背景图样式。 网站上提供了她的代码。
如果你不认识她,那我一定要推荐你阅读一下 《CSS揭秘(图灵出品)》 这本书,它会让你大受震撼!
️ 传送门:http://www.standardista.com/cssgradients/
除了 Lea Verou 的网站外,CSS3 Gradients 也提供了这类示例。同样提供代码下载。
️ 传送门:https://bennettfeely.com/gradients/
功能和前面两个差不多,自己点开看看呗~
️ 传送门:http://www.standardista.com/CSS3gradients/flags.html
使用 纯CSS 的方式画出多国国旗。“右键 - 检查网页源代码” 可以获取代码。
️ 传送门:https://heropatterns.com/
Hero Patterns 是比较出名网站了,官方提供了几十款纹理,你可以根据自己的需求设置两种对比色和不透明度。 完成后会返回一段CSS代码给你,不过和前面几个网站有点不同的是,Hero Patterns 的背景图使用了 base64 的方式去实现的,而不是 CSS 背景渐变 的方式。
️ 传送门:http://evankarageorgos.github.io/hue/grid.html
使用 CSS 背景渐变 的方式做出的数十款高端大气的背景,网站上的所有案例都提供了代码。
️ 传送门:https://stripesgenerator.com/
Pure CSS Stripes Generator 主要是帮你生成 条纹背景 的代码。 你可以在网站上根据自己的需求设置条纹的颜色、大小、倾斜角度等属性。 最后会返回一段 css 代码给你。
️ 传送门:https://glassgenerator.netlify.app/
Glass Morphism 的功能是设置 毛玻璃背景 样式,你可以在上面手动调节毛玻璃的不透明度、模糊度、背景色等属性。 最后会返回 html 和 css 代码给你。 非常好玩,赶紧去试试吧~
️ 传送门:https://uigradients.com/
提供了不同色系搭配的渐变代码。如果你不太擅长配色,可以使用 uiGradients
️ 传送门:https://webkul.github.io/coolhue/
Gradient Colors Collection Palette 上有几十个色卡,可以一键复制 css 代码。
️ 传送门:https://webgradients.com/
Fresh Background Gradients 提供了即使个配色方案,有双色的,也有多色的。同样提供一键复制 css 代码。
️ 传送门:https://coolbackgrounds.io/
可以生成 5种类型 的背景图片,并且提供多套成熟的配色方案供你选择。 但该网站生成的是背景图片,不是代码。
️ 传送门:https://svgwave.in/
生成波浪背景图,可以自定义波浪的幅度、颜色等属性。 支持 SVG 和 PNG 下载。
️ 传送门:https://www.toptal.com/designers/subtlepatterns/
提供了几十种纹理图。
️ 传送门:http://www.stripegenerator.com/
可配置的条纹背景图片。
️ 传送门:https://galactic.ink/bg/
在线设置纹理背景和渐变颜色,最后融合在一起生成一张好看的图片。 同时还提供 css 代码给你参考,告诉你如何更好的使用这张图片。
️ 传送门:https://patterninja.com/
光看图片介绍就知道这个网站好好玩。 Patterninja 帮你生成可平铺的背景图。
️ 传送门:http://thepatternlibrary.com/
提供几十款可平铺的好看背景。 注意:下载按钮在网页的左上角。
天,小雷发起了一个投票。有300多号人说,ios 12真香。
来,先让我们隔空击个掌。
在诸多“值得为此更新ios 12”的理由中,小雷肯定首选捷径。
原因有3点:
举个例子,以前小雷下载微博视频,至少需要5步:
复制视频链接→打开第三方工具→粘贴地址→解析视频→保存到相册
而现在有了捷径,一步到位。
嘿嘿,你是不是在屏幕前发出了“wow”的声音?
想知道怎么玩?小雷今天手把手教你。
走起。
捷径是个啥?
先介绍一下。捷径是个 App ,它的前身是 Workflow,一个神级工具库。
不知道也没关系,你只需要知道,财大气粗的苹果公司去年把它收购了,并免费给我们用。
经过一番整合,就成了现在的闪耀巨星、小雷的心头好——捷径!
but……捷径并没有内置在系统里,就算你更新到了 ios 12,还是需要手动下载。
ok,相信你已经下完了。
让我们打开App,你会发现里面只有一个“创建捷径”。大部分人应该会很失落,这什么玩意?
科普一下,这是给你自己设定规则用的,需要懂点编程知识。
但是别怕!捷径这个 App 好就好在,我们可以直接用现成的。
从哪获取现成的捷径?
1.捷径中心
App 本身有个捷径中心,找到你喜欢的,点击获取就可以了。
2.网友分享
除了官方自带,网上还有大神做了一堆捷径。微博、贴吧随便搜,找到链接后,直接安装就可以了。
说到这里,小雷真的很羡慕你们,认识了我这么好的人。
都不用你们伸手,我就主动把我私藏的捷径库送给你们。喏,接着。
1.【少数派】http://workflow.sspai.com/#/main/workflow2.【雪莲阁】http://www.xuelg.com/teach/workflow.html3.【捷径社区】https://sharecuts.cn/fresh
然后你就可以在捷径的海洋里自由徜徉了。
好用的捷径太多了,说起来能说三天三夜。小雷就推荐两个我觉得很实用的吧。
1.付款扫码:一秒进入支付宝/微信付款界面,而且还支持 Apple Pay。
链接:https://workflow.is/workflows/6952cee4c176446ba52c0088e619229a
2.人工客服:免去等待过程,一键直达人工客服。
链接:https://www.icloud.com/shortcuts/96208abfded3479598eb240f4115cc6e
还有视频转gif、以图搜图、快速换铃声等等等等。篇幅有限,小雷就不多说了,你们可以慢慢挖掘。
总之,拥有捷径,你就等于有了一座挖不完的矿。
怎么让捷径用起来更方便?
使用捷径已经很省事了,但小雷觉得不够。我想把这些功能通通放到桌面,甚至语音唤醒。
该怎么做呢?
第一步,把它添加到负一屏。
设置方法很简单,“编辑小组件-下拉找到捷径-添加”。
这样就是真的一劳永逸了。
第二步,就是跟 Siri 结合。
先来看看效果,当小雷说出“回家路线”, Siri 就自动帮我运行起了这个捷径。
(苹果收购 Workflow 真的有种带自家傻孩子 Siri 上分的即视感)
操作方法:在“设置 - Siri与搜索 - 所有捷径”里找到相应的捷径,然后录下口令就 ok 了。
所有的捷径,都可以通过这种办法,实现语音控制。
小雷感觉,自己的天猫精灵都可以gg了。
相信看到这里,原本不想更新 ios 12 的朋友也心动了吧。
建议你们把这篇文章收藏起来,要用的时候就翻出来看看。
至于安卓小伙伴,不要灰心,小雷知道一个类似“捷径”的安卓App。
想知道的,在评论里call 2。老规矩,人多就写。
歌的亲儿子 Chrome 推出已十年,依然制霸着全球的浏览器市场——而这种统治地位也让人们越来越担心它会成为新时代的 IE。
图片来源:The Verge
Chrome 发布已十年,牢牢占据六成市场份额
2008 年 9 月 1 日,Google 在其官方博客上宣布推出 Chrome 浏览器——这款迎着“默认浏览器”IE 的风头,喊着“浏览器市场破局者”口号的新入场者,一经杀入,便引发了浏览器市场的强烈震荡。
彼时,浏览器市场的两大巨头 IE 和 Mozilla Firefox“养尊处优”多年,早已发展成了臃肿复杂的系统,人们对此也是颇有微词,但却没有新鲜的浏览器血液供用户选择。因此,这为 Chrome 的迅速生长提供了绝佳契机。凭借简洁的用户界面和快捷的浏览速度,Chrome 迅速俘获了一大批包括网页开发者在内的技术领域核心用户。
到 2010 年 7 月,Chrome 就已经抢占了接近 10% 的市场份额。2012 年,Chrome 正式以 33.81% 的市场占有率成功取代 IE 的霸主地位。经过这十年的发展,Chrome 已经是市场份额最高的桌面和移动浏览器了,远远甩开 IE、火狐等。根据 Netmarketshare 最新的统计显示,Chrome 在桌面浏览器市场的份额超过了六成,主导地位不可撼动。
图中统计了 2017 年 9 月至 2018 年 8 月的浏览器份额统计。其中,Chrome 一骑绝尘,占比 62%;IE、Firefox 分列二三,占比均为 10% 左右;其余的占比均在 5% 以下,包括 Edge、Safari、搜狗、Opera 等。而且根据近一年的统计曲线可以直观地看出,各浏览器的市场份额比重几乎无任何变化,可见,这种傲视群雄的趋势还会持续很长一段时间。
回首 Chrome 的十年之路,它的成功离不开每一次重大的技术迭代和敏锐的市场嗅觉。在浏览器上线之初,谷歌就发布了一套 39 页的漫画来向用户解释 Chrome 的优势所在,以期迅速抓住新用户。在登陆 Windows XP 之后,Chrome 又在一年之后推出了 Linux 和 macOS 版本,以满足不同系统用户的使用需求,再次扩大了使用份额。
在技术上,Chrome 同样付出了很多精力。不仅采用了苹果的 WebKit 渲染引擎,还借鉴了火狐的内核,以兼顾兼容性和性能。在微软 IE 一直想办法克服的 Open Web 标准测试上,Chrome 前瞻性地采用了 HTML5 这一更先进的标准。而且,它还创新性地提出了标签页‘沙盒化’的设计,大大提高了多开网页场景下的速度和稳定性,更是提升了用户使用体验。
Chrome 会是下一个 IE 吗?
从曾经的“微软预装默认浏览器”,到如今的“廉颇老矣”,IE 经历过最辉煌的时刻,也走入了浏览器生涯的末端。这似乎是所有产品不可逆转的生命周期。那么如今正盛的 Chrome 会是下一个 IE 吗?讨论这个问题之前,我们先来看一下,曾经的 IE 浏览器是如何坐上王座的。
IE 诞生于 1995 年。当时,市场上使用最多且口碑最好的是网景浏览器,与之相比,捆绑在 Win95 的 IE 1.0 速度慢、功能少,毫无竞争优势。
但随后,IE 就开始了王者之路。从 IE 3.0 开始,它支持 CSS 等先进特性,这一功能帮助其攻占了 30% 的市场份额。此后,Win 系统继续深度融合 IE,越来越多的网络服务也开始以 IE 为规范。等到 WinXP 和 IE 6.0 时代,IE 已然天下无敌,市场占比达 90% 之多——惨遭落败的网景浏览器最终在 1998 年选择卖身给了 AOL。
但 IE 在 6.0 以后,微软开始在浏览器方面停滞不前,导致业界怨声满满,这也让火狐得以在性能和功能上双双超越 IE。
火狐浏览器和网景一脉相承,它的开发者多数来自网景,代码也以网景为基础。有此背景,火狐曾一度占据 30% 的市场份额。但彼时,互联网爆发时期的 WinXP 风头强劲,各大银行、政府网站也只支持 IE,使其成为了事实上的 Web 标准——因此,缺乏根本优势的火狐还是没能彻底击败 IE。
那么为何 Chrome 能取够逆袭成功?有以下几方面的因素。
Chrome 性能高,产品力突出
臃肿复杂的页面设置会让用户的使用体验大打折扣,而 Chrome 的界面却十分清爽,在保持高性能的同时还良好地支持 Web 特性。此外,和火狐一样,Chrome 也支持扩展程序,具备非常大的产品力。
Chrome 的捆绑营销把控了大量流量
和 IE 捆绑微软 Win 的做法类似,Chrome 也存在很多的捆绑营销行为。
在移动平台上,Android 占据了绝大部分的市场,而 Android 5.0 以后的系统 WebView 都是基于 Chromium(谷歌 Chrome 浏览器背后的引擎)开发的,这使得开发者想要开发移动网页,就得优先考虑兼容 Chrome。这种做法,帮助 Chrome 把控了移动平台的绝大部分流量。
借助谷歌的推广渠道,Chrome 全面铺排市场
作为谷歌的亲儿子,谷歌在推广 Chrome 方面也是不遗余力。谷歌旗下的很多页面对其它浏览器的兼容都相当不友好,而且,如果用户用非 Chrome 的浏览器访问谷歌页面,就会看到推销 Chrome 的广告,声称使用 Chrome 才能获得最佳体验......种种铺天盖地的“洗脑”下,其推广效果可见一斑。
Chrome 坐拥 Chromium 开源项目,挤占 IE 生存空间
Chrome 还开源了 Chromium 项目,使得基于其代码开发的浏览器层出不穷,而这些“衍生版”往往还兼容 IE 内核,也让更多用户选择抛弃了 IE。
综上可以看出,在桌面开发和移动网页两方面,Chrome 已经控制住了大部分流量入口,IE 再也不是事实上的 Web 标准了。至于 Chrome 是否会重蹈 IE 的覆辙?只能说被淘汰、被取代是所有产品都逃不掉的的宿命,也许终有一天 Chrome 会被后来居上者挤压掉生存空间。但在可预见的未来,从技术、市场、渠道等多方面来看,短时间内很难有可以相匹敌的劲敌出现。
Chrome 69 版本正式发布
以史为鉴,继往开来——相信处在顶峰的 Chrome 不会不明白优胜劣汰的道理,守业更比创业难,在通往未来的道路上,这是它必须时刻谨记的初心。
幸运的是,Chrome 并没有裹足不前,而是一直都在追求技术提升。在正值十周年的现在,其所承诺的谷歌 Chrome 69 浏览器正式版也于今日如约发布,毫不意外地给开发者们带来了很多的惊喜。
Chrome 69 面向 Windows、Mac 和 Linux,Android 和 iOS 推出,该版本包括全新的设计界面、更强大的多功能框、更新的密码管理器、更准确的自动填充、大量特定于开发人员的更改,以及一系列的安全性改进。
新外观和新功能
Chrome 的新外观基于 Material 2 原则,有着更为圆润的形状、更新的图标和调色板。其中,提示和菜单部分进行了简化,谷歌还从地址栏中
删除了 HTTP / HTTPS 协议指示符
,因此 URL 不再启用或显示这些前缀。
Chrome 69 还可以更准确地填写用户密码、地址和信用卡——所有这些信息都会保存到谷歌帐户中,可以直接从 Chrome 工具栏访问。密码管理器也得到了改进:在创建新密码时,Chrome for desktop 现在可以生成一个唯一的密码,保存密码后就可以在笔记本电脑和手机上提供该登录信息。
此外,还提供个性化的新功能,比如可以直接从新标签页创建和管理自己喜爱的网站快捷方式,还可以使用喜欢的图像自定义标签页背景。
安全性改进
谷歌多年来一直推广 HTTPS 安全协议。2017 年 1 月发布的 Chrome 56 开始将收集密码或信用卡的 HTTP 页面标记为“不安全”;2017 年 10 月发布的 Chrome 62 中标记“不安全”的站点范围扩大到了所有带有输入数据的 HTTP 站点以及在隐身模式下查看的 HTTP 站点;今年 7 月发布的 Chrome 68 则在地址栏中将所有 HTTP 站点标记为“不安全”。
最新发布的 Chrome 69 中,在 HTTPS 站点安全性防护上更进一步:
在今年 10 月中旬预计发布的 Chrome 70 版本中,当用户输入数据时,HTTP 站点还将直接显示红色的“不安全”警告:
除此之外,Chrome 69 还修复了 40 个安全程序,具体可见其官方网站。
开发者功能
Chrome 69 提供了新的 CSS 技巧。 CSS 圆锥渐变允许围绕中心的颜色过渡,逻辑边距、填充和边框属性现在要求使用标准名称。CSS 滚动将在每次滚动操作后停止,通过允许可滚动区域在预定义点处轻松停止并在没有 JavaScript 的情况下启用常见滚动模式来改善用户体验。
此外,通过新的 CSS env()函数(环境变量)和 viewport-fit 元标记支持显示剪切,开发人员可以在具有显示切口的设备上利用整个屏幕。
Chrome 69 对 V8 JavaScript 引擎也进行了升级,新的 6.9 版本通过嵌入式内置函数节省了内存,提供了 WebAssembly 新的编译器 Liftoff、更快的 DataView 操作以及垃圾收集期间更快的 WeakMaps 处理。
更详细的开发者功能介绍,可查看 Chrome 69 信息列表:https://www.chromestatus.com/features#milestone%3D69。
现在可以直接从 google.com/chrome 下载,或从 Google Play 和 Apple 的 App Store 中获取,通过 Chrome 内置的更新程序就可以更新到最新桌面版的 Chrome 69,Android 和 Chrome OS 版本也将很快推出。
参考链接:
“征稿啦”
CSDN 公众号秉持着「与千万技术人共成长」理念,不仅以「极客头条」、「畅言」栏目在第一时间以技术人的独特视角描述技术人关心的行业焦点事件,更有「技术头条」专栏,深度解读行业内的热门技术与场景应用,让所有的开发者紧跟技术潮流,保持警醒的技术嗅觉,对行业趋势、技术有更为全面的认知。
如果你有优质的文章,或是行业热点事件、技术趋势的真知灼见,或是深度的应用实践、场景方案等的新见解,欢迎联系 CSDN 投稿,联系方式:微信(guorui_1118,请备注投稿+姓名+公司职位),邮箱(guorui@csdn.net)。
*请认真填写需求信息,我们会在24小时内与您取得联系。