赛博朋克风格侧栏卡片样式修改

Akilar

发布于 2023-01-30 15:30:57

4620

发布于 2023-01-30 15:30:57

文章被收录于专栏：Akilarの糖果屋 Akilarの糖果屋Akilarの糖果屋

更新记录

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

做了一个赛博风格的侧栏卡片样式。
归纳了一些可能会用到的兼容性修改方案。
顺手再改了一下原版的水平分割线。

预览效果

点击查看预览效果

前言

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

魔改步骤

新建[Blogroot]\themes\butterfly\source\css\_layout\cyber_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,100% 25%,100% 75%,50% 100%,0 75%,0 25%) //头像框六边形切割
  //目录百分比兼容性适配
  &#card-toc
    .toc-percentage
      margin: -15px 70px -15px 0px !important
      font-size: 26px !important

魔改过程中可能会碰到不想应用这个样式的卡片。这时候就可以用到css的not选择器。找到cyber_card_weiget.styl文件中not选择器的一行，在后面继续添加你不想应用的卡片的类名或者id名即可。例子如下：

.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\cyber_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)

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-12-17，如有侵权请联系 cloudcommunity@tencent.com 删除

css

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

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

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

css

登录后参与评论

0 条评论

热度