博客主机
A-A+

听说微软的Edge换logo了?让我们用CSS手写个吧

2019年11月08日 含英咀华, 工作效率, 读书有得 听说微软的Edge换logo了?让我们用CSS手写个吧已关闭评论
博客主机

前天看新闻,听说微软的 Edge 浏览器换了新的 logo,不看不要紧,一看就有了这篇文章。

Edge 和 旋转90°的 Firefox

刚看到这个 logo 的时候,我感觉似曾相识,作为脸盲的我,分别打开了火狐浏览器和 Chrome 浏览器,没办法,谁让咱最不缺的就是浏览器呢。

 twitter 的时候,突然发现,原来设计师的灵感可能真是这么来的。

作为一名前端开发,这时候我突然想到,之前好像有人用CSS实现过 Chrome 浏览器的logo,这个看起来也能实现。

说干就干,我打开了前端切图崽熟悉的 Photoshop,哦不,打开尘封已久的 PPT,谁让我用他最顺手呢。

于是我设置好网格参考线等辅助线,大致知道了几个圆环的尺寸。不得不佩服 PPT的强大,我用两种方式处理了下照片 ,这样看起来比较好理清楚大致的结构。

几个要点

  • 整体结构分析
  • 各个圆(半圆、圆环)的大小
  • 不同角度圆环的层级问题
  • 背景色的渐变问题
  • 可能用到的CSS属性(圆角、渐变、旋转等)

代码

只是一时兴起想实现下,并没有像素级还原 logo。

HTML 部分代码如下。类名是按照书写顺序来的

<div class="circle">  <div class="center"></div>  <div class="circle1"></div>  <div class="circle2"></div>  <div class="circle_white"></div>  <div class="circle4"></div>  <div class="circle5"></div>  <div class="circle_add"></div></div></body>

CSS部分

html, body {  width: 200px;  height: 200px;  background-color: #fff;  overflow: hidden;  margin: 0;  padding: 0;}.circle {  width: 200px;  height: 200px;  background: linear-gradient(#0583cd, #0479d8);  border-radius: 50%;  position: relative;  z-index: 1;  outline: 1px solid #fff;  overflow: hidden;}.center {  width: 50px;  height: 50px;  background-color: #fff;  border-radius: 50%;  z-index: 100;  position: absolute;  bottom: 80px;  left: 80px;}.circle1 {  width: 120px;  height: 125px;  background: linear-gradient(30deg, #124b92, #0f539e);  border-radius: 0 0 130px 125px;  position: absolute;  bottom: 3px;  right: 14px;  z-index: 20;  transform: rotateZ(30deg);}.circle2 {  width: 150px;  height: 150px;  border-radius: 150px 150px 0 0;  position: absolute;  bottom: 30px;  left: 0px;  z-index: 18}.circle_white {  width: 130px;  height: 120px;  background-color: #fff;  position: absolute;  right: -10px;  bottom: 40px;  border-radius: 50%;  z-index: 21;}.circle4 {  width: 200px;  height: 100px;  background: linear-gradient(90deg, #32c1e3, #58de6f);  border-radius: 150px 150px 0 0;  position: absolute;  top: 0px;  left: 0px;  z-index: 40}.circle5 {  width: 130px;  height: 60px;  background-color: #057ed3;  position: absolute;  left: 0px;  bottom: 100px;  border-radius: 60px 60px 0 0;  z-index: 41;}.circle_add {  background: linear-gradient(90deg, #4fd78b, #52e068);  width: 80px;  height: 49px;  position: absolute;  right: 0px;  top: 86px;  z-index: 41;  border-radius: 10px 30px 300px 144px;  transform: rotate(361deg);}

效果如下

由于时间有限距离真实 的logo还是有点差距的,不过还可以看哈。                                 

后记

注意只是近似的 Edge logo 实现,和实际的还有出入,渐变、大小都需要改进,代码写得也不是很优雅。有兴趣的小伙伴可以试试。


标签:

评论已关闭!