标签归档:css

使用css grid制作一个活跃度砖墙

我也不确定这个到底叫什么,就是Github那种根据提交的代码次数改变方块颜色的动态墙,在这里暂时就叫活跃度砖墙。

这篇文章早就想发了,不过最近沉迷看番,一直都没写,我制作的版本在这里可以看到:https://blist.9baka.cc/user/luojia

基本思路就是往一个 `display` 为 `grid` 的容器里塞方块,让 `grid `的 `grid-auto-flow` 为 `column` ,这样方块就是纵向排列的了,然后用 `grid-template-rows: repeat(8, 1fr)` 把行数分成固定的8份,列数会自动根据格子数量增加,最后对所有砖头使用 `aspect-ratio: 1/1` 来把它们固定为正方形(当然你要别的形状也可以),样实现的墙里面的格子可以自动根据整体的宽度改变大小。

和Github以及大多数地方不同的是,我用颜色把每个月区分开了,这样看起来更直观一些。

效果如图

继续阅读使用css grid制作一个活跃度砖墙

在css中使用函数,减少js代码

博主昨天才发现原来css里也是有函数的,【为我以前浪费在写调整样式的js代码上的时间默哀

我现在知道的css函数有这么几个

attr()
calc()  /*opera不支持*/
counter()
cycle() /*支持情况不明*/  
max()   /*支持情况不明*/
min()   /*支持情况不明*/

个人认为里面最实用的就是calc

继续阅读在css中使用函数,减少js代码

响应式布局练习

今天我稍微试了试响应式布局的操作方法来为iti做准备,于是就拿我的博客开刀了。
想了一想,这个博客的主题本身就是响应式的了,可以非常好的适应小屏幕,于是我就不再做小屏幕的响应了,于是我做了更大屏幕的响应。

级别[我做的]:800~1299,1300~1460,1461~1880,1881~+∞

由于只是练习,所以我就拿多说评论框做实验了。

目标:让多说评论框在宽度超过1300的屏幕上从文章底部跑到右边,文章靠到左边。
[请掠过代码先看下面]。 继续阅读响应式布局练习