赛博朋克风格主题样式试做

点击查看更新记录

更新记录

2023-01-01:新增首页卡片过渡方案

新增首页卡片过渡样式。采用源计划赛博的侧栏风格。

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

把较为满意的标题样式移到新文去了
新文地址：源计划-方舟：标题样式修改

2022-12-23:文章版块样式附加

还不错，在尽量不用important提升权值的情况下附加样式
直接用两个伪类割出了两条边框线
兼容性待测试

2022-12-20:标题样式重写

试做了两版，考虑到长标题情况兼容性较差，弃用。
最终方案定稿为斜面切割加角标的风格。
附加样式方案兼容性较差。直接改动主题样式源码。

2022-12-18:水平分割线重写

顺手改了一下原版的水平分割线。

2022-12-17:赛博风侧栏卡片重写

做了一个赛博风格的侧栏卡片样式。
归纳了一些可能会用到的兼容性修改方案。

点击查看参考教程

参考方向	教程原贴
参考了UI风格和配色样式	Neon-Space-Rainmeter
参考了UI风格和配色样式	JARVIS-Highpitched-OS
fontawesome图标文档	fontawesome
Flex布局参数解释	Flex 布局教程:语法篇 - 阮一峰的网络日志
Transition属性实现平滑过渡动画	CSS3实现伪类hover离开时平滑过渡效果示例
CSS伪类实现三角形绘制	纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园
使用clip-path实现多边形剪裁。	不可思议的CSS之clip-path

预览效果

点击查看预览效果

卡片样式预览

前言

最近迷上了赛博朋克风格和像素风格。在codepen上找了不少素材，有了不少灵感。干脆拿来试试手。
一开始是打算完全重写的。后来发现侧栏卡片的版块每个都是独立文件。要重写的话就要一个一个重写。那如果以前还有其他魔改侧栏的内容，岂不是也要重新维护。啊，想想就好麻烦。所以我们还是按照老规矩，直接用css覆盖上去吧。
适配样式的时候感觉还不错。没有多少需要用到important强行提高权值的地方。
这里必须吐槽一下jerry做目录卡片时那个百分比的效果。用span来装就不考虑行高。还不如用div呢。好歹不会挤占下面的元素内容。
多亏了洪哥推荐的在线clip-path生成工具。虽然那个工具只能按百分比生成，但至少找点方便多了。
这次因为用到了clip-path，我直接一口气把整个卡片切割出来了，所以代码显得非常的简洁。真是太好用了这个clip-path！

魔改步骤

新建[Blogroot]\themes\butterfly\source\css\_layout\ark_card_weiget.styl

//default color:
:root
  --card-widget-background: rgba(255, 255, 255, 0.9) //左下角能量条配色
  --card-widget-charge: linear-gradient(to top, transparent, #ffb531) //侧栏卡片背景配色

[data-theme="dark"]
  --card-widget-background: rgba(35,35,35,0.5)
  --card-widget-charge: linear-gradient(to top, transparent, #4db7d5)

.card-widget
  background var(--card-widget-background)!important
  &:not(.card-info)
    padding: 0px 25px 25px 25px!important
    //一口气切割出整个卡片。
    clip-path: polygon(25px 0, calc(100% - 75px) 0, calc(100% - 50px) 25px, 100% 25px, 100% 40px, 50px 40px, 40px 45px, 100% 45px, 100% 45%, calc(100% - 15px) calc(45% + 25px), calc(100% - 15px) calc(100% - 75px), 100% calc(100% - 50px), 100% 100%, 25px 100%, 12.5px calc(100% - 12.5px),  12.5px calc(100% - 20px) , 0px calc(100% - 32.5px),0px calc(100% - 52.5px),12.5px calc(100% - 40px), 12.5px calc(100% - 50px) , 0px calc(100% - 62.5px),0px calc(100% - 82.5px),12.5px calc(100% - 70px),12.5px calc(100% - 80px) , 0px calc(100% - 92.5px),0px calc(100% - 112.5px),12.5px calc(100% - 100px),12.5px calc(100% - 112.5px), 0 calc(100% - 125px), 0 25px)
    .item-headline
      margin: 5px 0px 0px 5px 
    &::before //左下角的能量条
      content: ""
      height: 112.5px
      width: 12.5px
      background: var(--card-widget-charge)
      display block
      position: absolute
      left: 0px
      bottom: 0px
    .aside-list
      .aside-list-item
        a.thumbnail
          img
            clip-path: polygon(50% 0%,95.5% 25%,95.5% 75%,50% 100%,4.5% 75%,4.5% 25%) //头像框六边形切割
  //目录百分比兼容性适配
  &#card-toc
    .toc-percentage
      margin: -15px 70px -15px 0px !important
      font-size: 26px !important

魔改过程中可能会碰到不想应用这个样式的卡片。这时候就可以用到css的not选择器。
找到ark_card_weiget.styl文件中not选择器的一行，在后面继续添加你不想应用的卡片的类名或者id名即可。例子如下：
1
2
3
.card-widget
background var(--card-widget-background)
&:not(.card-info):not(.card-clock):not(#card-toc)

顺手写的水平分割线魔改

原本的hr水平分割线我不太喜欢。所以直接改了。

删掉[Blogroot]\themes\butterfly\source\css\_global\index.styl中原版的关于水平线样式的拓展。注意是删掉以下这部分，不是新建。

hr
position: relative
margin: 40px auto
border: 2px dashed var(--hr-border)

if hexo-config('hr_icon.enable')
  width: calc(100% - 4px)

  &:hover
    &:before
      left: calc(95% - 20px)

  &:before
    position: absolute
    top: $hr-icon-top
    left: 5%
    z-index: 1
    color: var(--hr-before-color)
    content: $hr-icon
    font-size: 20px
    line-height: 1
    transition: all 1s ease-in-out
    @extend .fontawesomeIcon

新建一个文件[Blogroot]\themes\butterfly\source\css\_layout\ark_hr_line.styl,

//default color:
:root
  --hr-line-color: #e91417

[data-theme="dark"]
  --hr-line-color: #4db7d5
//水平线样式更改
hr
  position: relative
  margin: 40px auto
  display: block
  height: 20px
  width: 100%
  background: transparent
  border: none
  &:hover
    &::before
      clip-path: polygon(0 0, 60px 100%, calc(100% - 30px) 100%, 100% 50%, calc(100% - 15px) 50%, calc(100% - 35px) calc(100% - 5px), 65px calc(100% - 5px), 15px 0)
      transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
    &::after
      clip-path: polygon(0 50%,35px 0,calc(100% - 60px) 0,100% 100%,calc(100% - 15px) 100%,calc(100% - 65px) 5px,35px  5px,15px 50%)
      transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
  &::before
    display: block
    content: ""
    height: 20px
    width: calc(50% + 60px)
    left: 0px
    position: absolute
    background: linear-gradient(to left, var(--hr-line-color),transparent)
    clip-path: polygon(0 100%, 60px 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 15px) 50%, calc(100% - 35px) 5px, 65px 5px, 15px 100%)
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
  &::after
    display: block
    content: ""
    height: 20px
    width: calc(50% + 60px)
    right: 0px
    position: absolute
    background: linear-gradient(to right, var(--hr-line-color),transparent)
    clip-path: polygon(0 50%,35px 100%,calc(100% - 60px) 100%,100% 0,calc(100% - 15px) 0,calc(100% - 65px) calc(100% - 5px),35px  calc(100% - 5px),15px 50%)
    transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17)

练手的文章版块样式

新建[Blogroot]\themes\butterfly\source\css\_layout\_ark_post_content.styl,因为文章版块、页面内容版块id不一样。可能有些页面有遗漏的。试着给归档页面加过，但效果不是很好。

//default color:
:root
  --ark-left-border-color: #818181
  --ark-right-border-color: #f58b49
  --ark-container-background: rgba(220,220,220,0.9)

[data-theme="dark"]
  --ark-left-border-color: #37708f
  --ark-right-border-color: #1849a0
  --ark-container-background: rgba(60,60,60,0.7)

ark_border()
  position relative
  padding: 45px 15px 45px 15px!important
  background: transparent
  &::before
    content: ""
    z-index: -1
    background: var(--ark-left-border-color)
    height: 100%
    width: 60%
    position: absolute
    left: 0
    top: 0
    clip-path: polygon(calc(100% - 1px) 27px, 100% 24px, calc(100% - 30px) 24px, calc(100% - 30px) 22px, calc(100% - 45px) 12px, calc(100% - 140px) 12px, calc(100% - 127px) 22px, calc(100% - 30px) 22px, calc(100% - 30px) 24px, calc(100% - 130px) 24px, calc(100% - 143px) 12px, 39px 12px, 0 51px, 0 calc(100% - 51px), 39px calc(100% - 12px), calc(100% - 143px) calc(100% - 12px), calc(100% - 130px) calc(100% - 24px), calc(100% - 1px) calc(100% - 24px), 100% calc(100% - 27px), calc(100% - 30px) calc(100% - 27px), calc(100% - 30px) calc(100% - 22px), calc(100% - 45px) calc(100% - 12px), calc(100% - 140px) calc(100% - 12px), calc(100% - 127px) calc(100% - 22px), calc(100% - 30px) calc(100% - 22px), calc(100% - 30px) calc(100% - 27px), calc(100% - 132px) calc(100% - 27px), calc(100% - 145px) calc(100% - 15px), 41px calc(100% - 15px), 3px calc(100% - 54px), 3px 54px, 41px 15px, calc(100% - 145px) 15px, calc(100% - 132px) 27px)
  &::after
    content: ""
    z-index: -1
    background: var(--ark-right-border-color)
    height: 100%
    width: 40%
    position: absolute
    right: 0
    top: 0
    clip-path: polygon(0 0, 40px 23px, calc(100% - 39px) 23px,100% 51px,100% calc(100% - 51px),calc(100% - 39px) calc(100% - 23px),40px calc(100% - 23px),0 100%,0 calc(100% - 5px),40px calc(100% - 27px),calc(100% - 41px) calc(100% - 27px),calc(100% - 5px) calc(100% - 53px),calc(100% - 5px) 53px,calc(100% - 41px) 27px,42px 27px,0 5px)
ark_container()
  background: var(--ark-container-background)
  padding: 30px 15px
  clip-path: polygon(15px 15px,calc(50% - 60px) 15px,calc(50% - 50px) 0,calc(50% + 50px) 0,calc(50% + 60px) 15px,calc(100% - 15px) 15px,100% 30px,100% calc(100% - 30px),calc(100% - 15px) calc(100% - 15px),calc(50% + 60px) calc(100% - 15px),calc(50% + 50px) 100%,calc(50% - 50px) 100%,calc(50% - 60px) calc(100% - 15px),15px calc(100% - 15px),0 calc(100% - 30px),0 30px)
//应用样式
#content-inner
  #post
    ark_border()
  #page
    ark_border()
  #tag
    ark_border()
  #category
    ark_border()

  #article-container
    ark_container()
  #post-comment
    ark_container()
  .tag_share
    text-align: center
    ark_container()
  .tag-cloud-list
    ark_container()
  .category-lists
    ark_container()

小结内容

编写这个边框主要是想验证下我的一个想法，因为clip-path的切割自带overflow:hidden的前提，所以就不得不抛弃角落的border，目前我也没找到简单的通过css在页面画折线的方法。

在找赛博朋克的素材时我发现大多是通过几何拼接加线条的光晕实现效果。很显然用clip-path切割的话，box-shadow就不太好用了。会被切割掉。倒是可以做成镂空的，但是镂空的点位不太好画。

所以我试着通过把边框的厚度也考虑进来。用伪类切割成折线。虽然成功了，但是一条不算复杂的折线我画了一上午。好处是通过calc计算距离，应该会有比较良好的自适应。坏处显而易见，画起来太麻烦了，效果也不是特别酷炫。

而且在测试过程中出现了奇怪的bug，总会有那么一两个版块的clip-path不生效。

想想同样的时间足够我用ps抠一下线条素材了，然后background-image啦，repeat啦，总之花更少的时间实现更帅的效果。

目前还没有攻略动画效果的打算。虽然我构思里的边框方案，右上角和左下角还打算做几组互相咬合的齿轮来着。

首页卡片过渡方案

这个过渡方案我是不建议别人用的。这里是权且做下记录。毕竟也算是我的一种探索。此篇用到了has选择器，但是这个选择器在浏览器的兼容性支持上还不够完善。像safiri，firefox，夸克这些个二流浏览器大概率是不生效的。
别不服气，不好好支持前沿的技术，不是二流浏览器还能是啥。
还有就是为了添加标题。我弃用了插件方案。把大部分插件植入的版块，例如首页轮播图，分类卡片都换回了源码修改方案。然后把他们都改了个通透。不会改的就老老实实用个not选择器把这几个排除了吧。

这个方案其实就是把侧栏卡片的样式放到首页卡片上。这里我用的首页卡片是之前写的双栏布局首页卡片魔改教程,注意是我写的双栏卡片，不是原版的首页卡片。因为这个卡片本身是不带标题栏的，所以要对源码做一点修改，给他添加一个可以作为标题栏的版块。暂定是更新时间。修改[Blogroot]\themes\butterfly\layout\includes\mixins\post-ui.pug

  mixin postUI(posts)
    each article , index in page.posts.data
+     .recent-post-item
+       .recent-post-item-headline
+         i.fa-solid.fa-gears
+         span=date(article.updated, config.date_format)

之后就是参考源计划-方舟：侧栏卡片样式修改的样式，给首页卡片附加上对应的边框就行。新建[Blogroot]\themes\butterfly\source\css\_layout\ark_index_card.styl,以下是我做的样式适配。swiper和分类卡片栏用的源码修改方案。反正也是类似原理加了标题框。

//default color:
:root
  --recent-post-background: rgba(50, 50, 50, 0.9) //卡片整体背景色
  --recent-post-color: #ffffff //卡片字体颜色
  --recent-post-content-border: rgba(117, 118, 120,0.8) //内容版块边框颜色
  --recent-post-title-background: rgba(40, 40, 40,0.95) //卡片标题背景色
  --recent-post-title-color: #ffffff //卡片标题字体颜色
  --recent-post-title-corner-background: #be7321 //卡片角标背景色
  --recent-post-title-corner-color: rgba(40, 40, 40,0.9) //卡片角标字体颜色
[data-theme="dark"]
  --recent-post-background: rgba(40, 40, 40,0.8)
  --recent-post-color: #ffffff
  --recent-post-content-border: rgba(0,78,119, 0.5)
  --recent-post-title-background: rgba(10, 17, 35, 0.5)
  --recent-post-title-color: #004e77
  --recent-post-title-corner-background: #37708f
  --recent-post-title-corner-color: #92cef1

.recent-post-item
  &:has(#git_container)
    background: var(--recent-post-background)
  &:not(:has(#git_container))
    background: linear-gradient(to bottom,transparent 30px,var(--recent-post-background) 31px,var(--recent-post-background))!important
    padding: 20px 0px 0px 0px!important
    clip-path: polygon(0 0, 100% 0, 100% 30px, calc(100% - 5px) 30px, 100% 45px, 100% 50px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 45px, 10px 30px, 0 30px)
    .recent-post-item-headline
      border-top: 8px solid var(--recent-post-title-corner-background)
      border-left: 8px solid var(--recent-post-title-corner-background)
      box-shadow: 0px 0px 10px var(--recent-post-content-border) inset
      border-top-left-radius: 3px
      border-top-right-radius: 20px
      border-bottom-right-radius: 3px    
      border-bottom-left-radius: 20px      
      background: var(--recent-post-title-background)
      color: var(--recent-post-color)
      min-width: 8em
      width: fit-content
      clip-path: polygon(0 0,55px 0,60px 10px,calc(100% - 15px) 10px,100% 30px,100% 100%,30px 100%,8px 30px,0 25px)
      padding: 0px 1em 0px 1em
      margin: 0px 0px -20px 0px
      position: relative
      top: -20px
      left: 10px
      &:after
        content: "测试"
        position: absolute
        bottom: 0
        font-size: 12px
        display: block
        right: 0
        line-height: 1em
        color: var(--recent-post-title-corner-color)
        width: fit-content
        height: 1em
        padding: 0 5px 0 10px
        background: var(--recent-post-title-corner-background)
        clip-path: polygon(5px 0,100% 0,100% 100%,0 100%)
  .recent-post-content
    .recent-post-info
      .article-title
        .article-title-link
          color: var(--recent-post-color)!important
    .recent-post-meta
      *
        color: var(--recent-post-color)!important
  #git_container
    color: var(--recent-post-color)
  #swiper_container
    *
      color: var(--recent-post-color)!important