文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Twitter 换新 logo 了,用 CSS 渐变来画一个吧~

2024-11-30 09:56

关注

大家可能知道,不久前 twitter 换了一个新 logo,从蓝色小鸟变成了一个 “x”,如下

不聊其他的,看看如何用 CSS 渐变来绘制这样一个图形。

一、 x 的绘制

整个 logo 是一个镂空的“x”形状,先不考虑镂空部分,如何绘制实心的“x”呢?

渐变有 3 种,线性渐变、径向渐变和锥形渐变。很显然,x 可以看成是两端倾斜的线段,用线性渐变就足够了。

假设 HTML 结构是这样,一个x元素。

用字号来控制尺寸大小。

x{
  display: inline-block;
  font-size: 200px;
  width: 1em;
  height: 1em;
}

然后通过线性渐变绘制一条斜线,其实就是透明→纯色→透明的渐变,注意这里的角度关系,示意如下:

用代码实现就是。

x{
  
  background: linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0);
}

可以得到一条倾斜的线段。

用同样的方式绘制另一个方向上的。

x{
  
  background: linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0),
    linear-gradient(52deg, #0000 44%, currentColor 0 56%,#0000;
}

这样就得到一个“x”。

二、镂空的实现

提到镂空,你应该想到 CSS mask[1]

遮罩的原理很简单,在遮罩图像下,只显示不透明的部分,透明的部分会被裁剪,半透明以此类推,示意如下:

在这里,由于只需要挖空一小部分,所以这部分是透明的,而其他部分都是不透明的,示意如下:

那么问题来了,如何绘制这样一个遮罩图呢?

这种情况下,应该反过来思考,里面的斜线和前面的线性渐变基本一致,只是这部分现在是镂空的。因此,这里需要用到遮罩合成:mask-composite[2],和设计软件中的图形运算非常相似。

所以,上面的遮罩图形可以拆分为以下两个部分。

用代码实现就是。

x{
  
  -webkit-mask: linear-gradient(red 0 0),
        linear-gradient(52deg, #0000 48%, red 0 52%,#0000 0) 0/100% 90% no-repeat;
  -webkit-mask-composite: xor;
}

这样就实现了twitter的新logo。

由于背景色是跟随文字颜色的,所以更换 logo 颜色也非常方便。

x{
  color: royalblue
}

效果如下:

完整代码如下(不到10行)。

x{
  display: inline-block;
  font-size: 200px;
  width: 1em;
  height: 1em;
  background: 
    linear-gradient(52deg, #0000 44%, currentColor 0 56%,#0000 0),
    linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0);
  -webkit-mask: linear-gradient(red 0 0),
    linear-gradient(52deg, #0000 48%, red 0 52%,#0000 0) 0/100% 90% no-repeat;
  -webkit-mask-composite: xor;
}

你也可以访问以下在线链接:

三、总结一下

非常简单、非常轻松的一篇分享,相信可以给大家带来一些启发,下面总结一下绘制要点:

当然实际的 logo 不可能用这种方式去绘制啦~这里只是提供一种 CSS 思路,锻炼一下 CSS 绘制的能力。

[1]CSS mask: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image。

[2]mask-composite: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite。

[3]CSS twitter (juejin.cn): https://code.juejin.cn/pen/7271283256816271421。

[4]CSS twitter (codepen.io): https://codepen.io/xboxyan/pen/vYvNVaB。

来源:前端侦探内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯