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

2023-01-30 14:44:01 浏览数 (1)

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

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

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

​

贰猹|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]themesbutterflysourcecss_layoutpost.styl,注意缩进。stylus缩进严格。

代码语言：javascript复制
- 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)

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

代码语言：javascript复制
: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)

标题一测试

标题二测试

标题三测试

标题四测试
标题五测试
标题六测试
腾讯云测试服务 css

0 人点赞