纯CSS 红砖背景墙


theme: smartblue

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情

本文简介

点赞 + 收藏 + 关注 = 学会了

先上图看看效果再介绍

纯CSS 红砖背景墙_第1张图片

我把这个想过设置在 body 标签上了,所以整个网页的背景都变成了红砖效果。

在很多很多年前,我购买了《CSS揭秘》这本书,在里面发现了作者 Lea Verou 的网站。我必须推荐大家阅读《CSS揭秘》,里面的每个例子都让我拍案叫绝。

纯CSS 红砖背景墙_第2张图片

在我个人看来,这本书是每个打算从初升高的前端必读的css书籍,它是一本进阶级的书,不会跟你讲过多的css基础。

纯CSS 红砖背景墙_第3张图片

我在 《这18个网站能让你的页面背景炫酷起来》 里也推荐过她的网站,大家有兴趣可以去看看~

本文所讲的内容是 Lea Verou 网站中的 bricks 例子 里的代码,因为网站上没有解释这个实现原理,所以我打算简单讲两句。

如果你想直接获取完整代码,可以滑动到文章底部直接复制走人;你也可以先看看完整代码,然后自己分析一下,再和我的分析做对比~

动手实现

直接给答案:

  1. background-image 的渐变来实现;
  2. 用2个直角三角形可以组合成1个矩形,而这两个三角形又有点色差的话,就能做出类似砖块的效果~

其实本例和 《纯CSS 实现格子背景(国际象棋棋盘)》 有点像,如果你读过格子背景那篇文章会更容易理解本文。

主要是通过两个不同颜色的三角形,合成一个长方形。再通过做2层这种长方形,调整好相应的位置,就形成以上效果。

纯CSS 红砖背景墙_第4张图片

画2个不同颜色的三角形,把下面三角形分别往上和往左移动一点点。

```html ```

纯CSS 红砖背景墙_第5张图片

从上图的效果可以看到行距比较大。所以需要再画一层同样的红砖,调整“新红砖层”的位置。

```html ```

纯CSS 红砖背景墙_第6张图片

如果你愿意再写点小渐变,这个砖块的立体效果会更加明显~

推荐阅读

《纯CSS 实现格子背景(国际象棋棋盘)》

《这18个网站能让你的页面背景炫酷起来》

《console.log也能插图》

《阅读Skeleton.css源码》

《纯css实现117个Loading效果》

《纯CSS:动态渐变背景》

你可能感兴趣的:(css,前端,css3,html,javascript)