阅读模式:

新时代创意布局不完全指南

阅读量:12  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:依稀记得,某年广东语文高考作文的相关描述 -- “有时,常识虽易知而难行,有时,常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被削弱。CSS 更新之快,只能不断鞭策自己持续学习,一直呆在舒适区中,很容易就跟不上节奏。当然,......

新时代创意布局不完全指南

依稀记得,某年广东语文高考作文的相关描述 -- “有时,常识虽易知而难行,有时,常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被削弱。

CSS 更新之快,只能不断鞭策自己持续学习,一直呆在舒适区中,很容易就跟不上节奏。当然,不仅仅是 CSS,对于任何技术任何行业也可以套用这句话。

回归本文的主题 -- 新时代布局。运用现有的 CSS 技术,我们是否可以大胆的跳出常规思维,不再局限于矩形框框一块一块,试着更加艺术一些?

像是下面这几个这样。

不拘一格的线条:

文字随图片的边缘排列:

不再是横平竖直:

又或者造型怪异的网格:

是不是很有意思?不拘一格的布局能够给页面吸引更多的目光和流量,当然这也需要我对 CSS 掌握的足够好,才能在有限的属性中创造更多不同的可能性。

grid 布局

说到新时代布局和创意布局,就不得不提到 Grid 的布局。

CSS Grid 布局的二维特性,让我们相较于传统的float布局、定位布局、flex 布局有了对页面更强大的掌控力。

利用 Grid 布局,切割页面进行分块

这里,我们利用 Grid 布局的特性,可以将页面按照我们的所想任意切割成不同的块状区域。

这里推荐一些能够方便我们进行 Grid 布局的工具:

  • 快速进行 Grid 布局 - Grid Layoutit

利用这个工具,可以快速创建得到自己想要 Grid 布局,并且拿到对应的 CSS,非常的简单便捷。

这里我利用工具,将页面切割成了 A、B、C、D、E、F 6 块区域:

复制右侧的 HTML 和 CSS,可以快速的得到这样一个布局,我把代码拷贝到了 CodePen,简单添加了一下底色,我们就可以基于这个布局再去做任何事情:

CodePen Demo -- Grid Layout Demo

利用 Grid 布局配合 clip-path 实现 GTA5 封面

这里,我们可以利用 Grid 布局配合 clip-path 实现 GTA5 封面,像是这样:

我们将一个 4x4 的 Grid 网格,分割为 9 个不同的部分:

再利用 clip-path,根据封面图片的的造型,对每一块 Gird item 进行二次裁剪:

ok,最后把里面的色块替换成具体的图片即可:

CodePen Demo -- GTA 5 poster ( Grid and Clip Path)

当然这里有一个槽点,最终还是用了 9 张图片,那为什么不一开始直接用一张图片呢?

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: