源计划-赛博风格侧栏卡片样式修改

Akilar

发布于 2023-01-30 14:43:38

4760

发布于 2023-01-30 14:43:38

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

更新记录

2022-12-25:内测版

尝试用渐变背景色挖出透明版块
通过box-shadow的inset做出光晕边框效果
以镂空方式镶嵌标题

点击查看参考教程

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

预览效果

点击查看预览效果

使用须知

本项目目前还是内测状态，样式优先考虑与本站的兼容，对于默认主题的兼容性适配暂时延后。一切以将本站装点完成为最优先事项。因为侧栏卡片每个卡片的版块class和id都不尽相同。没法通过一个class来控制每种卡片。所以我只能遇到一个适配一个。我会尽量在注释中给出适配方向。所以没有前端基础的慎用。我暂时没有更多的精力去适配其他我用不到的卡片。

魔改步骤

新建[Blogroot]\themes\butterfly\source\css\_cyber_style\cyber_card_weiget.styl，若是之前有用过试做版的，请覆盖该文件。两者不兼容。

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

//内部版块样式，因为侧栏卡片内部的id，class不统一，所以单独写成一个方法，方便下面调用
cyber_card_widget_content()
  position: relative
  margin: 5px 5px 5px 5px!important
  background: var(--card-widget-content-background)
  padding: 5px 5px 5px 8px
  border: 2px solid var(--card-widget-content-border)
  border-top-right-radius: 3px
  border-top-left-radius: 10px
  border-bottom-right-radius: 3px    
  border-bottom-left-radius: 10px
  clip-path: polygon(0 10px, 10px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 10px 100%, 0 calc(100% - 10px))
  box-shadow: 0 0 5px var(--card-widget-content-border) inset
  &:not(.card-friend-link-container) //这个是用来排除不需要的卡片类的
    &::before //内容版块左边的凹线装饰
      content: ""
      width: 0px
      height: calc(100% - 20px)
      position: absolute
      left: 0
      top: 5px
      background: var(--card-widget-content-background)
      border-top: 5px solid var(--card-widget-content-border)
      border-right: 5px solid var(--card-widget-content-border)
      border-bottom: 5px solid var(--card-widget-content-border)
      border-left: 5px solid transparent     
      clip-path: polygon(0 0,7px 5px,7px calc(100% - 5px), 0 100%)
.card-widget
  &:not(.card-info)
    font-family: 'SAOUI','ZhuZiAYuanJWD' //字体样式，可以自行替换
    background: linear-gradient(to bottom,transparent 30px,var(--card-widget-background) 31px,var(--card-widget-background))!important
    padding: 20px 0px 0px 0px!important
    clip-path: polygon(0 0,100% 0,100% 30px,calc(100% - 60px) 30px,calc(100% - 50px) 45px,calc(100% - 5px) 45px,100% 50px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 45px,10px 30px,0 30px)
    .item-headline
      border-top: 8px solid var(--card-widget-title-corner-background)
      border-left: 8px solid var(--card-widget-title-corner-background)
      box-shadow: 0px 0px 10px var(--card-widget-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(--card-widget-title-background)
      color: var(--card-widget-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: 0px
      &:after
        content: "akilar"
        position: absolute
        bottom: 0
        font-size: 12px
        display: block
        right: 0
        line-height: 1em
        color: var(--card-widget-title-corner-color)
        width: fit-content
        height: 1em
        padding: 0 5px 0 10px
        background: var(--card-widget-title-corner-background)
        clip-path: polygon(5px 0,100% 0,100% 100%,0 100%)
    //以下是针对不同卡片的单独样式兼容性适配
    //读者可以仿照以下内容对卡片的内容版块套上边框和调整字体颜色
    &#card-toc //目录百分比样式适配
      .toc-percentage
        position: absolute
        margin: -7px 0px 0px 10px!important
        font-size: 26px!important
      .toc-content
        cyber_card_widget_content()
        .toc-link
          color: var(--card-widget-color)!important //覆盖目录默认字体颜色
    .card-friend-link-container //友链通讯录内容版块样式适配
      cyber_card_widget_content()
    .aside-list //最新文章，相关文章，最新评论内容版块适配
      cyber_card_widget_content()
      .aside-list-item
        .thumbnail
          img
            clip-path: polygon(50% 0%,95.5% 25%,95.5% 75%,50% 100%,4.5% 75%,4.5% 25%) //头像框六边形切割
        .content        
          .title
            color: var(--card-widget-color)!important //覆盖最新文章默认字体颜色
        .comment
          color: var(--card-widget-color)!important //覆盖最新评论默认字体颜色
    .card-tag-cloud //标签卡片内容版块适配
      cyber_card_widget_content()

    .webinfo //网站信息卡片内容版块适配
      cyber_card_widget_content()
      .webinfo-item
        color: var(--card-widget-color)!important //覆盖网站信息卡片默认字体颜色

小结

这次的设计尝试解决了一下之前遇到的clip-path切割后默认自带overflow:hidden的问题。通过渐变色属性linear-gradient(to bottom,transparent 30px,color 31px,color)切割出一段透明的背景，而另外半边正常配色。这样我就可以实现背景的局部透明。这时候再去操作内部元素，我就不用傻乎乎的沿着需要镶嵌的边切割两次了，卡片标题还能跟随标题文字长度做简单的自适应。

还有就是clip-path切割后边框线被切掉和难以做光晕的问题，我通过调整border-radius，让每个角度根据对应的折角进行适当圆角，然后通过box-shadow的inset效果做成内部光晕。效果还不错。

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

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

css

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

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

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

css

登录后参与评论

0 条评论

热度