赛博朋克风格侧栏卡片样式修改
更新记录
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)
相关文章
- Typora+PicGo+GitHub实现图片快速上传
- Linux计划任务服务程序
- 2022 如何在 GitHub 上搭建个人网站(github.io)
- 虚拟机安装linux无法访问外网解决办法
- 用过 mongodb 吧, 这三个大坑踩过吗?
- 教你配置windows上的windbg,linux上的lldb,打入clr内部这一篇就够了
- MongoDB 在评论中台的实践
- 使用mongodb作为Quartz.Net下的JobStore实现底层的持久化机制
- mongodb之使用explain和hint性能分析和优化
- mongodb 3.x 之实用新功能窥看[2] ——使用$lookup做多表关联处理
- mongodb 3.x 之实用新功能窥看[1] ——使用TTLIndex做Cache处理
- 双十一来了,别让你的mongodb宕机了
- GO语言开发环境搭建笔记
- PHP判断网络连通
- 开启phpMyAdmin的远程登录
- PHP_cURL初始化和执行方法
- PHP经典函数收集
- PHP所有函数列表
- php bbcode过滤
- php不使用中间变量交换两个变量的值