Digest | 如何用CSS实现极光UI

>  一份2021年03月14日的信息流提炼

### 每天学点前端

#### 如何用CSS实现极光UI

原文：[medium | How To Create an Aurora UI Using CSS](https://betterprogramming.pub/how-to-create-an-aurora-ui-using-css-eb27d674b69)

极光UI特点是

- 模糊的形状
- 类似的颜色
- 色彩之间的平滑过渡

有3种方法可以实现

- 模糊形状
- 渐变
- 模糊图片

[JsFiddle Demo](https://jsfiddle.net/sikouyuu/5vkr8myw/39/)

代码参考附录。

#### 15个惊人的UI灵感网站

原文：[15 amazing websites for UI inspirations ????](https://savio.xyz/15-amazing-websites-for-ui-inspirations)

##### 不用多说的几个平台

- [Awwwards](https://www.awwwards.com/)

- [Dribble](https://dribbble.com/)

- [Behance](https://www.behance.net/)

- [Pinterest](https://www.pinterest.com/)

##### App | [Mobbin](https://mobbin.design/)

Mobbin是一个精心挑选的最新移动设计模式的集合，这些模式来自于反映最佳设计的应用程序。从平台上超过250个iOS应用和25000个图案（iPhone 12的截图）中获取灵感。

##### Web | [Land Book](https://land-book.com/)

我们收集了一些很棒的网站，以帮助创意者找到灵感和动力去做一些激进的事情。

##### App | [Pttrns](http://pttrns.com/)

设计资源、界面模式和灵感。

##### Web | [webdesign-inspiration](https://www.webdesign-inspiration.com/)

寻找和展示最好的网页设计灵感和趋势。每天，我们都会发布由来自世界各地的创意机构和网页设计师所做的新鲜而有创意的新网站创意。

这个站挺喜欢的：https://www.krissrealestate.com/

##### Web + App | [Collect UI](https://collectui.com/)

一个为你提供日常灵感的平台，收集自日常ui及以外的灵感。基于Dribbble拍摄，手工挑选。

##### Web | [Site See](https://www.sitesee.co/)

SiteSee是一个美丽的，现代网站的策划画廊。

##### [Muzli](https://muz.li/)

##### Web + App | [Screen Lane](https://screenlane.com/)

寻找灵感，紧跟最新的网页和移动UI设计趋势。

##### Web | [Lapa Nijnja](https://www.lapa.ninja/)

Lapa Ninja是为了帮助设计师寻找灵感、学习和提高设计技能而建立的。内容选自网络上一些最好的设计，并每天更新。

##### Shopify | [Commerce Cream](https://commercecream.com/)

我们收集并强调Shopify上最美丽的商务体验，以帮助激发设计师、开发者和商家创造令人惊叹的东西。

##### Web | [One Page Love](https://onepagelove.com/)

一个 "单页 "是一个单页网站，没有额外的页面，如关于，团队或服务。所有的内容都在同一个网页中，传统上是长滚动布局。单页网站的优点在于它试图以一种不杂乱、直接的方式来推广一件事。

### 其他值得阅读

- [虎嗅｜超低生育率，是社会发展的终极宿命吗？](https://www.huxiu.com/article/414801.html?)

- 马尔萨斯陷阱：人口增长是按照几何级数增长的，而生存资源仅仅是按照算术级数增长。多余的人口总要被某种发誓消灭掉。

- 尼采说：“所有伟大的事物，都会因为自我实现而导致自我毁灭，这就是生命的本质”。

- 现代社会与超低生育意愿。个体主义的兴起与女性更加独立和平等的性别角色，强调了个体独特和多元的价值取向，在某种程度上冲淡了生育的价值和意义。

- > **“发展是最好的避孕药”。**

### 今日收获

- 才知道原来还有专门的需求工程师（Requirements Engineer）。也叫Software Requirements Analyst或者UML Analyst。[What can I learn and how can I work better with software developers as a layperson?](https://www.reddit.com/r/softwaredevelopment/comments/m3fqkh/what_can_i_learn_and_how_can_i_work_better_with/)

### 附录:snippets

- CSS Aurora UI

```css
.wrapper__aurora-ui-shape {
  width: 400px;
  height: 400px;
  background: #fff;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}
.base {
  position: absolute;
  filter: blur(60px);
  opacity: 0.8;
}
.one {
  border-radius: 100%;
  width: 600px;
  height: 600px;
  background-color: #373372;
  left:-50px;
  top:-300px;
  z-index: 3;
}
.two {
  width: 500px;
  height: 800px;
  background-color: #7C336C;
  bottom:-30px;
  left:-80px;
}
.three {
  border-radius: 100%;
  width: 450px;
  height: 450px;
  bottom:-80px;
  right:-100px;
  background-color: #B3588A;
}

.wrapper__aurora-ui-gradient {
  width: 400px;
  height: 400px;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
  background-color: #fff;
  background-image: 
    radial-gradient(at top left, #F0ACE0, transparent),
    radial-gradient(at top right, #FFA4B2, transparent),
    radial-gradient(at bottom left, #A7D3F2, transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
```