前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >这18个网站能让你的页面背景炫酷起来

这18个网站能让你的页面背景炫酷起来

作者头像
德育处主任
发布2022-04-17 12:13:22
1.3K0
发布2022-04-17 12:13:22
举报

这18个网站是我在取经路上意外发现的,里面包括 纯CSS 实现的炫酷背景,还有专门制作背景图的网站。 算是取经路上的大补之物~

1. CSS3 Patterns Gallery

🎗️ 传送门:『CSS3 Patterns Gallery』

如果你认识 Lea Verou 的话,大概率知道这个网站,她徒手写了几十个 纯CSS 实现的背景图样式。 网站上提供了她的代码。 如果你不认识她,那我一定要推荐你阅读一下 《CSS揭秘(图灵出品)》 这本书,它会让你大受震撼!

01.png
01.png

2. CSS3 Gradients

🎗️ 传送门:『CSS3 Gradients』

除了 Lea Verou 的网站外,CSS3 Gradients 也提供了这类示例。同样提供代码下载。

02.png
02.png

3. CSS Gradients with background-blend-mode

🎗️ 传送门:『CSS Gradients with background-blend-mode』

功能和前面两个差不多,自己点开看看呗~

04.png
04.png

4. CSS Flags

🎗️ 传送门:『CSS Flags』

使用 纯CSS 的方式画出多国国旗。“右键 - 检查网页源代码” 可以获取代码。

5. Hero Patterns

🎗️ 传送门:『Hero Patterns』

Hero Patterns 是比较出名网站了,官方提供了几十款纹理,你可以根据自己的需求设置两种对比色和不透明度。 完成后会返回一段CSS代码给你,不过和前面几个网站有点不同的是,Hero Patterns 的背景图使用了 base64 的方式去实现的,而不是 CSS 背景渐变 的方式。

05.png
05.png

6. HUE.CSS

🎗️ 传送门:『HUE.CSS』

使用 CSS 背景渐变 的方式做出的数十款高端大气的背景,网站上的所有案例都提供了代码。

7. Pure CSS Stripes Generator

🎗️ 传送门:『Pure CSS Stripes Generator』

Pure CSS Stripes Generator 主要是帮你生成 条纹背景 的代码。 你可以在网站上根据自己的需求设置条纹的颜色、大小、倾斜角度等属性。 最后会返回一段 css 代码给你。

07.png
07.png

8. Glass Morphism

🎗️ 传送门:『Glass Morphism』

Glass Morphism 的功能是设置 毛玻璃背景 样式,你可以在上面手动调节毛玻璃的不透明度、模糊度、背景色等属性。 最后会返回 htmlcss 代码给你。 非常好玩,赶紧去试试吧~

9. uiGradients

🎗️ 传送门:『uiGradients』

提供了不同色系搭配的渐变代码。如果你不太擅长配色,可以使用 uiGradients

10. Gradient Colors Collection Palette

🎗️ 传送门:『Gradient Colors Collection Palette』

Gradient Colors Collection Palette 上有几十个色卡,可以一键复制 css 代码。

10.png
10.png

11. Fresh Background Gradients

🎗️ 传送门:『Fresh Background Gradients』

Fresh Background Gradients 提供了即使个配色方案,有双色的,也有多色的。同样提供一键复制 css 代码。

11.png
11.png

12. Cool Backgrounds

🎗️ 传送门:『Cool Backgrounds』

可以生成 5种类型 的背景图片,并且提供多套成熟的配色方案供你选择。 但该网站生成的是背景图片,不是代码。

12.png
12.png

13. Svg Wave

🎗️ 传送门:『Svg Wave』

生成波浪背景图,可以自定义波浪的幅度、颜色等属性。 支持 SVGPNG 下载。

14. Subtle Patterns

🎗️ 传送门:『Subtle Patterns』

提供了几十种纹理图。

14.png
14.png

15. Stripe Generator

🎗️ 传送门:『Stripe Generator』

可配置的条纹背景图片。

15.png
15.png

16. ZenBG

🎗️ 传送门:『ZenBG』

在线设置纹理背景和渐变颜色,最后融合在一起生成一张好看的图片。 同时还提供 css 代码给你参考,告诉你如何更好的使用这张图片。

16.png
16.png

17. Patterninja

🎗️ 传送门:『Patterninja』

光看图片介绍就知道这个网站好好玩。 Patterninja 帮你生成可平铺的背景图。

17.png
17.png

18. The Pattern Library

🎗️ 传送门:『The Pattern Library』

提供几十款可平铺的好看背景。 注意:下载按钮在网页的左上角。

18.png
18.png
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021/12/22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. CSS3 Patterns Gallery
  • 2. CSS3 Gradients
  • 3. CSS Gradients with background-blend-mode
  • 4. CSS Flags
  • 5. Hero Patterns
  • 6. HUE.CSS
  • 7. Pure CSS Stripes Generator
  • 8. Glass Morphism
  • 9. uiGradients
  • 10. Gradient Colors Collection Palette
  • 11. Fresh Background Gradients
  • 12. Cool Backgrounds
  • 13. Svg Wave
  • 14. Subtle Patterns
  • 15. Stripe Generator
  • 16. ZenBG
  • 17. Patterninja
  • 18. The Pattern Library
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档