前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >源计划-赛博风格标题样式修改

源计划-赛博风格标题样式修改

作者头像
Akilar
发布于 2023-01-30 14:44:01
6600
发布于 2023-01-30 14:44:01
举报
文章被收录于专栏：Akilarの糖果屋Akilarの糖果屋Akilarの糖果屋

这个新代号，源计划-赛博，是我最近心血来潮又挖的一个大坑。

为了让他的风格能够和谐的形成一个整体，我准备一个个版块重写过去。争取让整个博客的版块都大换血。时间可能会拖得很长。追更的可以先去看试做那篇文章：赛博朋克风格主题样式试做，挑些过渡方案凑活着用。

只有我觉得满意的试做才会单独发文。

​

贰猹|noionion.top

贰猹

（我就说店长还会想着再改卡片）

Akilar

我准备开个新坑

Akilar

就叫源计划-赛博

Akilar

感觉之前就是因为我写的东西没有特点，和原版的质感差不多。所以别人都记不住。

贰猹

主要是，统一风格

贰猹

设计整体感

贰猹

洪哥的设计就很容易让人有整体的感觉

Akilar

比如洪哥的扁平化风格，kika的轻拟态质感，还有你的，emmm，算卡通设计吧。至少都挺有特点的。

Akilar

群里聊得都是洪化，从来没有人提糖化。

贰猹

你的太过零散

贰猹

每个散装都可以拿出来用

贰猹

自然记不住

Akilar

所以我要写个和他们都不一样的，如果不能让人眼前一亮，最起码也要让人眼前一黑。

贰猹

草

点击查看更新记录

更新记录

2022-12-25:标题样式移至新文

  1. 给试做作品发编制
  2. 标题样式魔改

点击查看参考教程

参考方向

教程原贴

参考了UI风格和配色样式

Neon-Space-Rainmeter

参考了UI风格和配色样式

JARVIS-Highpitched-OS

fontawesome图标文档

fontawesome

Flex布局参数解释

Flex 布局教程:语法篇 - 阮一峰的网络日志

Transition属性实现平滑过渡动画

CSS3实现伪类hover离开时平滑过渡效果示例

CSS伪类实现三角形绘制

纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园

使用clip-path实现多边形剪裁。

不可思议的CSS之clip-path

认真做的文内标题样式魔改

这个标题样式整整花了我三天时间设计。做了两款都因为长标题情况下会被clip-path切割的七零八落而弃用了。最终方案定稿为斜面切割外加角标的形式。参考了以前中二时代配置rainmeter时用过的机械风格主题。具体样式预览如下：

  • 魔改步骤
  • 样式预览

因为标题的样式魔改涉及图标的变动。所以不得不改动主题样式源码。介意的请止步。以下会先给出diff代码块指明改动步骤，第三步是改动的源码部分的内容，方便读者复制。这里的图标可以参考fontawesome文档，选取心仪的图标后点开，能在左上角找到图标的unicode。对应本魔改项目代码最后几行里headStyle('\f085',1)中的\f085。读者可以自行更改喜欢的图标。如果发现图标不显示或者为乱码，可能是你的fontawesome版本问题。例如v5，v6，或者是否为pro。我的建议是，换！换个能显示出来的图标。

修改[Blogroot]\themes\butterfly\source\css\_layout\post.styl,注意缩进。stylus缩进严格。

- beautify()
-   headStyle(fontsize)
-     padding-left: unit(fontsize + 12, 'px')

-     &:before
-       margin-left: unit((-(fontsize + 6)), 'px')
-       font-size: unit(fontsize, 'px')

-     &:hover
-       padding-left: unit(fontsize + 18, 'px')

-   h1,
-   h2,
-   h3,
-   h4,
-   h5,
-   h6
-     transition: all .2s ease-out

-     &:before
-       position: absolute
-       top: calc(50% - 7px)
-       color: $title-prefix-icon-color
-       content: $title-prefix-icon
-       line-height: 1
-       transition: all .2s ease-out
-       @extend .fontawesomeIcon

-     &:hover
-       &:before
-         color: $light-blue

-   h1
-     headStyle(20)

-   h2
-     headStyle(18)

-   h3
-     headStyle(16)

-   h4
-     headStyle(14)

-   h5
-     headStyle(12)

-   h6
-     headStyle(12)
+ :root
+   --title-prefix-color: #fff //标题字体颜色
+   --title-prefix-background: rgba(25,25,25,0.5) //标题背景颜色
+   --title-prefix-shadow: #555555 //标题字体阴影配色
+   --title-prefix-border: rgba(180, 181, 182,0.6) //标题边框配色
+   --title-prefix-icon-color: #f58b49 //标题图标配色
+   --title-prefix-corner-mark-color: #555759 //标题角标字体配色
+   --title-prefix-corner-mark-background: #dd9f58 //标题角标背景配色
+ [data-theme="dark"]
+   --title-prefix-color: #8dc9ef
+   --title-prefix-background: rgba(36, 56, 65,0.5)
+   --title-prefix-shadow: #182238
+   --title-prefix-border: rgba(39, 66, 69,0.6)
+   --title-prefix-icon-color: #004e77
+   --title-prefix-corner-mark-color: #92cef1
+   --title-prefix-corner-mark-background: #37708f

+ beautify()
+   headStyle(icon,level)
+     &:before
+       content: icon
+     &:after
+       content: 'level'+ level
+       height: unit((1.6 - level/10),'em')

+   h1,
+   h2,
+   h3,
+   h4,
+   h5,
+   h6
+     transition: all .2s ease-out
+     width: fit-content
+     width: -moz-fit-content
+     height: fit-content
+     height: -moz-fit-content
+     min-width: 8em
+     min-height: 2em
+     clip-path: polygon(0 0,calc(100% - 1em) 0,100% 1em,100% 100%,1em 100%,0 calc(100% - 1em))
+     padding: 0px 1.5em  
+     color: var(--title-prefix-color)
+     background: var(--title-prefix-background)
+     text-shadow: 3px 4px var(--title-prefix-shadow)
+     border: 3px solid var(--title-prefix-border)
+     &:before
+       position: absolute
+       bottom: 0.6em
+       left: 0.2em
+       color: var(--title-prefix-icon-color)
+       line-height: 1
+       transition: all .2s ease-out
+       @extend .fontawesomeIcon
+     &:after
+       position: absolute
+       font-size: 12px
+       padding: 0px 0px 0px 20px
+       background: var(--title-prefix-corner-mark-background)
+       font-family: "SAOUI"
+       text-shadow: none
+       line-height: 1em
+       color: var(--title-prefix-corner-mark-color)
+       width: 40px
+       display: flex
+       align-items: center
+       bottom: -3px
+       right: -3px
+       clip-path: polygon(15px 0,100% 0,100% 100%,0 100%)


+     &:hover
+       &:after
+         transition: all .2s ease-out
+         text-shadow: 1px 1px #efefef

+   h1
+     headStyle("\f2db",1)
+   h2
+     headStyle("\f085",2)  
+   h3
+     headStyle("\f5d2",3)
+   h4
+     headStyle("\f233",4)
+   h5
+     headStyle("\f135",5)
+   h6
+     headStyle("\f1de",6)

以下是改动部分的代码的内容，不是全文。注意，不是全文！

:root
  --title-prefix-color: #fff //标题字体颜色
  --title-prefix-background: rgba(25,25,25,0.5) //标题背景颜色
  --title-prefix-shadow: #555555 //标题字体阴影配色
  --title-prefix-border: rgba(180, 181, 182,0.6) //标题边框配色
  --title-prefix-icon-color: #f58b49 //标题图标配色
  --title-prefix-corner-mark-color: #555759 //标题角标字体配色
  --title-prefix-corner-mark-background: #dd9f58 //标题角标背景配色
[data-theme="dark"]
  --title-prefix-color: #8dc9ef
  --title-prefix-background: rgba(36, 56, 65,0.5)
  --title-prefix-shadow: #182238
  --title-prefix-border: rgba(39, 66, 69,0.6)
  --title-prefix-icon-color: #004e77
  --title-prefix-corner-mark-color: #92cef1
  --title-prefix-corner-mark-background: #37708f

beautify()
  headStyle(icon,level)
    &:before
      content: icon
    &:after
      content: 'level'+ level
      height: unit((1.6 - level/10),'em')

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    transition: all .2s ease-out
    width: fit-content
    width: -moz-fit-content
    height: fit-content
    height: -moz-fit-content
    min-width: 8em
    min-height: 2em
    clip-path: polygon(0 0,calc(100% - 1em) 0,100% 1em,100% 100%,1em 100%,0 calc(100% - 1em))
    padding: 0px 1.5em  
    color: var(--title-prefix-color)
    background: var(--title-prefix-background)
    text-shadow: 3px 4px var(--title-prefix-shadow)
    border: 3px solid var(--title-prefix-border)
    &:before
      position: absolute
      bottom: 0.6em
      left: 0.2em
      color: var(--title-prefix-icon-color)
      line-height: 1
      transition: all .2s ease-out
      @extend .fontawesomeIcon
    &:after
      position: absolute
      font-size: 12px
      padding: 0px 0px 0px 20px
      background: var(--title-prefix-corner-mark-background)
      font-family: "SAOUI"
      text-shadow: none
      line-height: 1em
      color: var(--title-prefix-corner-mark-color)
      width: 40px
      display: flex
      align-items: center
      bottom: -3px
      right: -3px
      clip-path: polygon(15px 0,100% 0,100% 100%,0 100%)


    &:hover
      &:after
        transition: all .2s ease-out
        text-shadow: 1px 1px #efefef

  h1
    headStyle("\f2db",1)
  h2
    headStyle("\f085",2)  
  h3
    headStyle("\f5d2",3)
  h4
    headStyle("\f233",4)
  h5
    headStyle("\f135",5)
  h6
    headStyle("\f1de",6)

标题一测试

标题二测试

标题三测试

标题四测试
标题五测试
标题六测试
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-12-25，如有侵权请联系 cloudcommunity@tencent.com 删除
腾讯云测试服务
css

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

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

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

腾讯云测试服务
css
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 认真做的文内标题样式魔改
  • 标题一测试
    • 标题二测试
      • 标题三测试
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2024 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论