V商人
  • 电商干货
  • 电商推广
  • 电商经验
  • 直播电商

抖音logo图片(抖音logo怎么做)

投稿用户 • 2022年8月4日 pm8:32 • 电商推广 • 阅读 207

大家好,我是前端西瓜哥。

今天我像往常一样,打开 Stack Overflow 网站。

Stack Overflow 是一个程序员问答社区,程序员在开发过程中遇到问题时,就会上这个网站找答案,找到后将它们复制粘贴下来,以完成工作。

这次我打开一看,直接眼睛就瞎了。

抖音logo图片(抖音logo怎么做)

这是什么抖音滤镜,酷炫界面前的我眼泪流下来(眼睛疼)。

抖音logo图片(抖音logo怎么做)

然后我发现网页底部还提供了其他的风格主题,有 Facebook 风、终端风、Windows 3.1 风、顶级机密风、马里奥风等。各位读者可以自行去体验一番,挺有趣的。

不过我还是觉得抖音风格最酷炫,因为它属于那种真正风格化到极致的那种,怎么说,就是那种,对,那种清新脱俗的感觉。

你完全无法正常阅读内容也证明了这点。

说是抖音风格,其实是一种叫做 3D 眼镜 的特殊滤镜效果:将图形分别做不同方向的红色和青色的投影,产生类似看 3D 电影时的屏幕效果,需要戴上 3D 眼镜才能看到立体效果。

3D 眼镜滤镜的实现

我打开浏览器控制台,发现它对文字使用了下面的 CSS 样式。

body.theme-custom.theme-3d h1, body.theme-custom.theme-3d h2, body.theme-custom.theme-3d h3, body.theme-custom.theme-3d h4, body.theme-custom.theme-3d h5, body.theme-custom.theme-3d h6, body.theme-custom.theme-3d p, body.theme-custom.theme-3d a, body.theme-custom.theme-3d li, body.theme-custom.theme-3d span, body.theme-custom.theme-3d label, body.theme-custom.theme-3d button, body.theme-custom.theme-3d div, body.theme-custom.theme-3d input, body.theme-custom.theme-3d select, body.theme-custom.theme-3d textarea, body.theme-custom.theme-3d ::before, body.theme-custom.theme-3d ::after {
    text-overflow: clip;
    letter-spacing: 3px;
    text-shadow: -3px 0 1px cyan, 3px 0 1px red;
}

其中最核心的样式是 text-shadow: -3px 0 1px cyan, 3px 0 1px red;。

-3px 0 1px cyan 在往左 3 px 的位置上,应用模糊半径为 3px 的青色阴影。3px 0 1px red 则是向右的红色,最终让文字产生一红一青两道阴影,妥妥的 3D 眼镜效果。

然后用 letter-spacing: 3px; 将原本值为 0 的字距调大一些,这是为了让投影不要重叠在一起,导致视觉效果过于混乱。

最后是 text-overflow: clip; ,在内容区域的极限处截断文本,这个感觉没啥用。

文字我们可以用 text-shadow,但它对图片没有效果。我们再去控制台瞧瞧 Stack Overflow 怎么处理图片的。

body.theme-custom.theme-3d img.s-avatar--image, body.theme-custom.theme-3d .gravatar-wrapper-24, body.theme-custom.theme-3d img {
    filter: grayscale(80%) brightness(1.75) drop-shadow(4px 0 0 red) drop-shadow(-4px 0 0 cyan) !important;
    opacity: .75;
}

这里用了 fiter 属性,依次应用的滤镜效果如下:

  • grayscale(80%):灰色值设置为 80%,就是比较接近黑白的那灰色效果。
  • brightness(1.75):提高图片亮度。
  • drop-shadow(4px 0 0 red):对图片加上右侧的红色投影。这里只能对图片的边缘设置投影,所以图片最好是有边缘的 png 之类的图片。
  • drop-shadow(-4px 0 0 cyan):同上,这次是青色。

然后再使用 opacity: .75 降低图片透明度,使其更白一些,以便更好地和其他元素融为一体。

可以看到头像方方正正的 jpg,无法做到很好的红青阴影滤镜效果。

抖音logo图片(抖音logo怎么做)

有边缘的 png,效果会更好一些。

抖音logo图片(抖音logo怎么做)

抖音logo图片(抖音logo怎么做)

一些 svg 和图片 icon,也和图片一样是使用类似的滤镜效果。

body.theme-custom.theme-3d svg, body.theme-custom.theme-3d .icon-bg, body.theme-custom.theme-3d .wmd-button, body.theme-custom.theme-3d input[type=radio], body.theme-custom.theme-3d input[type=checkbox] {
    filter: grayscale(80%) saturate(.1) drop-shadow(-4px 0 0 cyan) drop-shadow(4px 0 0 red);
}

应用到自己的网站

我试着将这些样式应用到我个人博客网站,看看效果怎样。

抖音logo图片(抖音logo怎么做)

好嘛,挺阴间的。算了算了。

最后

要实现简单的 3D 眼镜效果,其实没有想象的那么困难,只要使用 text-shadow、filter 给我们的元素加上红色和青色的投影就大差不差了。

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 sumchina520@foxmail.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.vsaren.cn/7163.html
logo图片抖音
赞 (0)
投稿用户
0
生成海报
抖音dj最火歌曲2021中文(抖音dj最火歌曲2021串烧舞蹈)
上一篇 2022年8月4日 pm7:32
抖音上卖的黄金首饰是真的吗,里面有999(抖音上卖的黄金首饰是真的吗为什么会有证书)
下一篇 2022年8月4日 pm9:32

相关推荐

  • 淘宝运营主要做些什么,淘宝运营主要做些什么怎么操作? 电商推广

    淘宝运营主要做些什么,淘宝运营主要做些什么怎么操作?

    大家好,我是六斤。 昨天年货节就已经正式开始了,经历过今年双11、双12的商家应该对于年货节的各种数据都能泰然处之了。 当然也有很多面对流量数据捶胸顿足的朋友们,看着付费渠道高额的…

    2022年12月21日
    150 0
  • 二子开店电影在线播放,电影_陈佩斯父子开店?

    偷得工余半日闲,胡诌八咧扯闲篇。 按:空余时间整理了255部八十年代电影名,准备抽空在网上找到再看看。这些电影有的看过记忆很深;有的看过记不太清;有的根本就不知道。 《少爷的磨难》…

    电商推广 2022年12月20日
    115 0
  • 公务员副业能干些啥活,公务员副业可以干什么? 电商推广

    公务员副业能干些啥活,公务员副业可以干什么?

    虽然年轻一代和老一辈在很多事情上都有分歧,但是对于公务员岗位的认知倒是很一致,两代人都觉得只要成为了公务员就等于端起了“铁饭碗”,生活的稳定性就得到了保障。 而这一想法其实也没错,…

    2022年11月4日
    179 0
  • 娄艺潇微博的微博(娄艺潇微博超话社区) 电商推广

    娄艺潇微博的微博(娄艺潇微博超话社区)

    红毯作为女明星的战场,为了展示自己的美丽更是在各个方面别出心裁,为了在红毯上吸引更多的话题,下的功夫更是我们普通人没办法想到的,今天就让我们来看看为了走红毯这些女明星都下了什么功夫…

    2022年6月27日
    283 0
  • 快手语录短句霸气,快手语录短句霸气 生活? 电商推广

    快手语录短句霸气,快手语录短句霸气 生活?

    在今天的社交媒体上,快手是一个备受瞩目的平台。快手语录以其短小精悍的语言,赢得了许多年轻人的心。我们能够从这些简短的语句中了解到关于快乐、信念和人生的重要哲理。在这篇文章中,我们将…

    2023年6月16日
    69 0
  • 抖音怎么录屏别人的视频,抖音怎么录屏别人的视频直播? 电商推广

    抖音怎么录屏别人的视频,抖音怎么录屏别人的视频直播?

    一、什么是抖音录屏功能? 在抖音App中,录屏可帮助用户快速记录下自己屏幕的操作,并将其保存在本地,方便以后查看、编辑或分享。它是一种屏幕录制工具,可以捕捉屏幕任意区域的动态画面。…

    2023年5月9日
    78 0
  • 淘宝店铺怎么开,淘宝店铺怎么开通? 电商推广

    淘宝店铺怎么开,淘宝店铺怎么开通?

    钱江晚报·小时新闻记者 边程壹 通讯员 温艺华 12月22日零时起,杭州永康苑区域除53幢3单元外的所有住户解除管控。 黄庠涵在这一天的上午狠狠地睡了一觉。 2001年出生的黄庠涵…

    2022年12月21日
    148 0
  • 电商网站开发平台Pi Network_1.32.apk(电商网站开发平台哪个好) 电商推广

    电商网站开发平台Pi Network_1.32.apk(电商网站开发平台哪个好)

    做外贸的朋友肯定都遇到过平台上竞争大,比价多,下单少,利润低等外贸常见困境,但你有没有深入想过问题出在哪里?有一个原因就是你所在的平台和客户圈的问题。相比平台,谷歌,Yahoo这类…

    2022年8月14日
    223 0
  • 房地产销售职位介绍,房地产招聘职业描述? 电商推广

    房地产销售职位介绍,房地产招聘职业描述?

    注明一下:销售——合伙人,运营——员工 兄弟们,避避雷。 2022年8月21日,本人应聘了一家房地产中介公司,8.24日上班,应聘的时候人事部原话:我们公司两个模式,一个销售,一个…

    2022年10月2日
    182 0
  • 骑手兼职哪个平台好些,骑手兼职哪个平台好些房产证在哪办理? 电商推广

    骑手兼职哪个平台好些,骑手兼职哪个平台好些房产证在哪办理?

    随着互联网的发展,更多的人选择在空闲时间内兼职以提升收入。骑手兼职成为了一种常见的方式,同时也更加方便快捷地满足消费者们的需求。那么,骑手兼职哪个平台好些呢? 目前国内的骑手兼职平…

    2023年5月16日
    85 0

热门文章

  • 传统品牌在疫情下如何进行网络营销(如何进行网络营销创新)

    传统品牌在疫情下如何进行网络营销(如何进行网络营销创新)

    2022年7月8日

  • 抖店平台商户客服电话号码(抖店平台商户客服电话是多少)

    抖店平台商户客服电话号码(抖店平台商户客服电话是多少)

    2022年4月19日

  • 光伏发电是国家扶贫项目吗,光伏发电国家扶持政策?

    光伏发电是国家扶贫项目吗,光伏发电国家扶持政策?

    2022年8月26日

  • 郑上一路运营时间2022,郑上一路运营时间2022,2,2号?

    郑上一路运营时间2022,郑上一路运营时间2022,2,2号?

    2022年10月8日

  • 普爱医疗销售真实经历(有人在普爱医疗做销售吗)

    普爱医疗销售真实经历(有人在普爱医疗做销售吗)

    2022年7月27日

  • 国外短视频app软件有哪些,国外短视频app软件有哪些日本?

    国外短视频app软件有哪些,国外短视频app软件有哪些日本?

    2023年6月30日

  • 100集网络营销高清课程,免费学!

    100集网络营销高清课程,免费学!

    2022年3月19日

  • 平安银行白领贷申请步骤(平安银行白领贷好批吗)

    平安银行白领贷申请步骤(平安银行白领贷好批吗)

    2022年5月16日

  • 年轻人不要做电话销售的原因(年轻人不要做电话销售兽药天天招人)

    年轻人不要做电话销售的原因(年轻人不要做电话销售兽药天天招人)

    2022年7月27日

  • 支付宝收益明细哪里看(支付宝收益日历图)

    支付宝收益明细哪里看(支付宝收益日历图)

    2022年4月21日

推荐文章

  • 京东亚洲一号仓库布局平面图,京东亚洲一号仓的规模?

    京东亚洲一号仓库布局平面图,京东亚洲一号仓的规模?

  • 轮廓固定是什么医美项目,轮廓固定是什么医美项目多少钱?

    轮廓固定是什么医美项目,轮廓固定是什么医美项目多少钱?

  • 小红书怎么花钱推广,小红书怎么花钱推广自己的笔记?

    小红书怎么花钱推广,小红书怎么花钱推广自己的笔记?

  • 自己开车短视频15秒,自己开车短视频15秒宝马?

    自己开车短视频15秒,自己开车短视频15秒宝马?

  • 天佑最火的一场直播,天佑最火的一场直播视频?

  • 抖音人工客服在哪里找,抖音人工客服在哪里找得到?

    抖音人工客服在哪里找,抖音人工客服在哪里找得到?

  • 淘宝客服工作好不好干节假日休息么,淘宝客服有节假日休息吗?

    淘宝客服工作好不好干节假日休息么,淘宝客服有节假日休息吗?

  • 最快的赚钱方法有哪些2001(最快的赚钱方法 幽默)

  • 微信零钱记录怎么一次全部删除(微信零钱记录怎样彻底删除)

    微信零钱记录怎么一次全部删除(微信零钱记录怎样彻底删除)

  • 淘宝会员名怎么改,淘宝会员名怎么改第二次?

    淘宝会员名怎么改,淘宝会员名怎么改第二次?

相关标签

app 下载 互联网 京东 什么 公司 兼职 创业 加盟 句子 可以 图片 多少 平台 微信 怎么 意思 手机 抖音 推广 文案 朋友圈 电商 直播 视频 赚钱 软件 运营 销售 项目

Copyright © V商人 版权所有 SiteMap 网站地图 苏ICP备14047127号